/*
 * Feature components: the shared look of one feature that appears on several pages (task board, chat,
 * subscription, …), built only from the tokens in tokens.css. Generic building blocks (cards, tables,
 * items, notes, empty states) live in components.css; a view's own <style> may hold layout only.
 */

/* ---------- Task dialog: planned date range field (header task dialog, task pages) ---------- */
.datetime-range-wrapper {
    position: relative;
}

.datetime-range-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    color: var(--ui-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

#create-planned-datetime-range,
#modal-planned-datetime-range {
    padding-right: 40px;
    cursor: pointer;
}

#create-planned-datetime-range:focus,
#modal-planned-datetime-range:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}

/* ---------- Task board and calendar (FC + seller task pages, root .ui-tasks) ---------- */
.ui-tasks .tasks-toolbar {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    margin-bottom: 1rem;
    overflow: hidden;
}

body[data-theme=dark] .ui-tasks .tasks-toolbar {
    border-color: var(--ui-border);
}

.ui-tasks .tasks-toolbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    flex-wrap: wrap;
}

.ui-tasks .tasks-toolbar-top .page-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1;
    min-width: 200px;
}

.ui-tasks .tasks-toolbar-top .page-header h1 {
    margin-bottom: 0.15rem;
}

.ui-tasks .tasks-toolbar-top .page-header .subtitle {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0;
}

.ui-tasks .tasks-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ui-tasks .tasks-toolbar-actions .btn {
    min-height: max(38px, var(--ui-tap-min, 0px));
    white-space: nowrap;
}

#btn-toggle-filters.active {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

body[data-theme=dark] #btn-toggle-filters.active {
    background-color: var(--ui-primary-line);
}

#btn-toggle-filters .filters-active-dot {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-primary);
    margin-left: 0.35rem;
}

#btn-toggle-filters.has-active-filters .filters-active-dot {
    display: inline-block;
}

.ui-tasks .tasks-stats-row {
    margin: 0;
    padding: 0 1.25rem;
}

.ui-tasks .tasks-filter-bar {
    display: none;
    background: var(--ui-subtle);
    padding: 0.875rem 1.25rem 1rem;
    border-top: 1px solid var(--ui-border);
}

.ui-tasks .tasks-filter-bar.is-open {
    display: block;
}

body[data-theme=dark] .ui-tasks .tasks-filter-bar {
    border-top-color: var(--ui-border);
}

.ui-tasks .task-card {
    position: relative;
    border-radius: var(--ui-radius-md);
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.625rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    overflow: hidden;
}

.ui-tasks .task-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}

.ui-tasks .task-card[data-category-color]::before {
    background: var(--task-accent, var(--ui-border-strong));
}

body[data-theme=dark] .ui-tasks .task-card {
    border-color: var(--ui-border);
}

.ui-tasks .task-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow);
    transform: translateY(-1px);
}

body[data-theme=dark] .ui-tasks .task-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-pop);
}

.ui-tasks .task-card-drag-handle {
    position: absolute;
    top: 0.625rem;
    right: 0.5rem;
    cursor: grab;
    color: var(--ui-faint);
    font-size: var(--ui-fs-xs);
    padding: 0.25rem;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s;
}

body[data-theme=dark] .ui-tasks .task-card-drag-handle {
    color: var(--ui-muted);
}

.ui-tasks .task-card-drag-handle:active {
    cursor: grabbing;
}

.ui-tasks .task-card:hover .task-card-drag-handle {
    opacity: 1;
}

.ui-tasks .task-card-no-drag {
    cursor: default;
}

.ui-tasks .task-card-no-drag:hover {
    cursor: pointer;
}

.ui-tasks .task-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ui-tasks .task-card-badge.overdue {
    background-color: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-tasks .task-card-badge.overdue {
    color: var(--ui-danger-soft);
}

.ui-tasks .task-card-badge.unassigned {
    background-color: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-tasks .task-card-badge.unassigned {
    background-color: var(--ui-warning-tint);
    color: var(--ui-warning);
}

.ui-tasks .task-context-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    padding: 0;
    margin-right: 0.5rem;
    margin-bottom: 0;
    color: var(--ui-muted);
    cursor: pointer;
    max-width: 100%;
}

body[data-theme=dark] .ui-tasks .task-context-item {
    color: var(--ui-faint);
}

.ui-tasks .task-context-item:hover {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-tasks .task-context-item:hover {
    color: var(--ui-text);
}

.ui-tasks .task-context-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-tasks .task-context-item img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    flex-shrink: 0;
}

body[data-theme=dark] .ui-tasks .task-context-item img {
    border-color: var(--ui-border-strong);
}

.ui-tasks .task-context-item .linked-entity-product-thumb__placeholder i {
    font-size: var(--ui-fs-2xs);
}

.ui-tasks .task-context-item i {
    flex-shrink: 0;
}

.ui-tasks .task-context-item--info {
    cursor: default;
    pointer-events: none;
}

.ui-tasks .task-context-item--info:hover {
    color: var(--ui-muted);
}

body[data-theme=dark] .ui-tasks .task-context-item--info:hover {
    color: var(--ui-faint);
}

.ui-tasks .task-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    padding-left: 0.5rem;
}

.ui-tasks .task-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    line-height: 1.4;
    color: var(--ui-text);
    flex: 1;
}

.ui-tasks .task-description {
    font-size: var(--ui-fs-sm);
    color: var(--ui-series-6);
    margin-bottom: 0.625rem;
    line-height: 1.55;
    max-height: 88px;
    overflow: hidden;
    position: relative;
    padding-left: 0.5rem;
}

body[data-theme=dark] .ui-tasks .task-description {
    color: var(--ui-silver);
}

.ui-tasks .task-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ui-surface) 95%, transparent));
    pointer-events: none;
}

body[data-theme=dark] .ui-tasks .task-description::after {
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ui-surface) 95%, transparent));
}

.ui-tasks .task-description p {
    margin: 0 0 0.25rem;
}

.ui-tasks .task-description p:last-child {
    margin-bottom: 0;
}

.ui-tasks .task-description ul,
.ui-tasks .task-description ol {
    margin: 0.125rem 0;
    padding-left: 1.25rem;
}

.ui-tasks .task-description li {
    margin: 0;
}

.ui-tasks .task-description b,
.ui-tasks .task-description strong {
    font-weight: 600;
}

.ui-tasks .task-description em,
.ui-tasks .task-description i {
    font-style: italic;
}

.ui-tasks .task-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    align-items: center;
    padding-left: 0.5rem;
}

.ui-tasks .task-meta i {
    color: var(--ui-faint);
    font-size: var(--ui-fs-xs);
}

.ui-tasks .task-footer-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    border-top: 1px solid var(--ui-neutral-tint);
}

body[data-theme=dark] .ui-tasks .task-footer-row {
    border-top-color: var(--ui-border);
}

.ui-tasks .badge-overdue {
    background-color: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

.ui-tasks .badge-unassigned {
    background-color: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-tasks .badge-status-open {
    background-color: var(--ui-primary);
    color: white;
}

.ui-tasks .badge-status-in_progress {
    background-color: var(--ui-success-text);
    color: white;
}

.ui-tasks .badge-status-waiting {
    background-color: var(--ui-warning);
    color: var(--ui-text);
}

.ui-tasks .badge-status-completed {
    background-color: var(--ui-muted);
    color: white;
}

.ui-tasks .badge-status-cancelled {
    background-color: var(--ui-danger);
    color: white;
}

.ui-tasks .badge-context {
    background-color: var(--ui-track);
    color: var(--ui-body);
    cursor: pointer;
}

body[data-theme=dark] .ui-tasks .badge-context {
    background-color: var(--ui-track);
    color: var(--ui-faint);
}

.ui-tasks .badge-context:hover {
    background-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-tasks .badge-context:hover {
    background-color: var(--ui-track);
}

.ui-tasks .kanban-board {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 600px;
}

.ui-tasks .kanban-column {
    flex: 1 1 0;
    min-width: 260px;
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 300px);
}

.ui-tasks .kanban-column-header {
    font-weight: 600;
    font-size: var(--ui-fs-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ui-border-strong);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-theme=dark] .ui-tasks .kanban-column-header {
    border-bottom-color: var(--ui-border);
    color: var(--ui-text);
}

.ui-tasks .kanban-column-count {
    background: var(--ui-border-strong);
    color: var(--ui-body);
    padding: 0.125rem 0.5rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

body[data-theme=dark] .ui-tasks .kanban-column-count {
    background: var(--ui-track);
    color: var(--ui-text);
}

.ui-tasks .kanban-column-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.ui-tasks .kanban-load-more {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
}

.ui-tasks .kanban-column-content::-webkit-scrollbar {
    width: 6px;
}

.ui-tasks .kanban-column-content::-webkit-scrollbar-track {
    background: transparent;
}

.ui-tasks .kanban-column-content::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] .ui-tasks .kanban-column-content::-webkit-scrollbar-thumb {
    background: var(--ui-track);
}

.ui-tasks .kanban-column-content::-webkit-scrollbar-thumb:hover {
    background: var(--ui-neutral);
}

body[data-theme=dark] .ui-tasks .kanban-column-content::-webkit-scrollbar-thumb:hover {
    background: var(--ui-track);
}

.ui-tasks .kanban-column.ui-sortable-helper {
    opacity: 0.8;
}

.ui-tasks .task-card.ui-sortable-helper {
    cursor: grabbing;
    box-shadow: var(--ui-shadow-hover);
    transform: rotate(2deg);
}

.ui-tasks .ui-sortable-placeholder {
    background: var(--ui-track);
    border: 2px dashed var(--ui-faint);
    border-radius: var(--ui-radius-xs);
    margin-bottom: 0.5rem;
    min-height: 100px;
    visibility: visible !important;
    height: auto !important;
}

body[data-theme=dark] .ui-tasks .ui-sortable-placeholder {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

.ui-tasks .task-action-btn {
    background: none;
    border: none;
    color: var(--ui-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ui-radius-xs);
    transition: all 0.2s ease;
}

.ui-tasks .task-action-btn:hover {
    background-color: var(--ui-subtle);
    color: var(--ui-text);
}

#kanban-board .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ui-muted);
    width: 100%;
    min-width: 100%;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

body[data-theme=dark] #kanban-board .empty-state {
    color: var(--ui-faint);
}

#kanban-board .empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    font-size: 3rem;
    opacity: 0.5;
}

#kanban-board .empty-state-icon i {
    line-height: 1;
    display: block;
}

#kanban-board .empty-state p {
    margin: 0;
}

#tasks-calendar-view #calendar-container {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-sm);
    padding: 1.5rem;
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #tasks-calendar-view #calendar-container {
    box-shadow: var(--ui-shadow-pop);
}

.ui-tasks .fc {
    font-family: inherit;
}

.ui-tasks .fc-timegrid-event-harness > .fc-timegrid-event {
    overflow: hidden;
}

.ui-tasks .fc-toolbar-title {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    color: var(--ui-text);
}

body[data-theme=dark] .ui-tasks .fc-toolbar-title {
    color: var(--ui-text);
}

.ui-tasks .fc-button {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: white;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    border-radius: var(--ui-radius-xs);
    transition: all 0.2s ease;
}

.ui-tasks .fc-button:hover {
    background-color: var(--ui-series-1);
    border-color: var(--ui-primary-hover);
}

.ui-tasks .fc-button:focus {
    box-shadow: 0 0 0 0.25rem var(--ui-primary-line);
}

.ui-tasks .fc-button-active {
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
}

.ui-tasks .fc-event {
    border-radius: var(--ui-radius-xs);
    padding: 0.5rem;
    cursor: pointer;
    border: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    transition: all 0.2s ease;
    background-color: var(--ui-subtle);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] .ui-tasks .fc-event {
    border-color: var(--ui-border-strong);
    background-color: var(--ui-track);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-pop);
}

.ui-tasks .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-hover);
    border-color: rgba(var(--ui-black-rgb), 0.15);
}

body[data-theme=dark] .ui-tasks .fc-event:hover {
    box-shadow: var(--ui-shadow-pop);
    border-color: var(--ui-border-strong);
}

.ui-tasks .fc-event-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    color: var(--ui-text);
}

body[data-theme=dark] .ui-tasks .fc-event-title {
    color: var(--ui-text);
}

.ui-tasks .fc-event-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ui-tasks .fc-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    font-size: var(--ui-fs-xs);
}

.ui-tasks .fc-event-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.ui-tasks .fc-event-user {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

body[data-theme=dark] .ui-tasks .fc-event-user {
    color: var(--ui-faint);
}

.ui-tasks .fc-event-user i {
    font-size: var(--ui-fs-2xs);
}

.ui-tasks .fc-event-context {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

body[data-theme=dark] .ui-tasks .fc-event-context {
    color: var(--ui-faint);
}

.ui-tasks .fc-event-context i {
    font-size: var(--ui-fs-2xs);
}

.ui-tasks .fc-event-status-open {
    background-color: var(--ui-primary-tint);
    border-left: 3px solid var(--ui-primary);
}

body[data-theme=dark] .ui-tasks .fc-event-status-open {
    background-color: var(--ui-primary-line);
}

.ui-tasks .fc-event-status-open .fc-event-badge {
    background-color: var(--ui-primary);
    color: white;
}

.ui-tasks .fc-event-status-in_progress {
    background-color: var(--ui-success-tint);
    border-left: 3px solid var(--ui-success-text);
}

body[data-theme=dark] .ui-tasks .fc-event-status-in_progress {
    background-color: rgba(var(--ui-success-rgb), 0.5);
}

.ui-tasks .fc-event-status-in_progress .fc-event-badge {
    background-color: var(--ui-success-text);
    color: white;
}

.ui-tasks .fc-event-status-waiting {
    background-color: var(--ui-warning-tint);
    border-left: 3px solid var(--ui-warning);
}

body[data-theme=dark] .ui-tasks .fc-event-status-waiting {
    background-color: rgba(var(--ui-warning-rgb), 0.5);
}

.ui-tasks .fc-event-status-waiting .fc-event-badge {
    background-color: var(--ui-warning);
    color: var(--ui-text);
}

.ui-tasks .fc-event-status-completed {
    background-color: var(--ui-track);
    border-left: 3px solid var(--ui-muted);
}

body[data-theme=dark] .ui-tasks .fc-event-status-completed {
    background-color: rgba(var(--ui-muted-rgb), 0.5);
}

.ui-tasks .fc-event-status-completed .fc-event-badge {
    background-color: var(--ui-muted);
    color: white;
}

.ui-tasks .fc-event-status-cancelled {
    background-color: var(--ui-danger-tint);
    border-left: 3px solid var(--ui-danger);
}

body[data-theme=dark] .ui-tasks .fc-event-status-cancelled {
    background-color: rgba(var(--ui-danger-rgb), 0.5);
}

.ui-tasks .fc-event-status-cancelled .fc-event-badge {
    background-color: var(--ui-danger);
    color: white;
}

.ui-tasks .fc-event-overdue {
    background-color: var(--ui-danger-tint);
    border-left: 3px solid var(--ui-danger);
}

body[data-theme=dark] .ui-tasks .fc-event-overdue {
    background-color: rgba(var(--ui-danger-rgb), 0.5);
}

.ui-tasks .fc-event-overdue .fc-event-badge {
    background-color: var(--ui-danger);
    color: white;
}

.ui-tasks .fc-event-unassigned {
    border-left: 3px solid var(--ui-warning);
}

.ui-tasks .fc-daygrid-event {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-tasks .fc-day-today {
    background-color: var(--ui-subtle) !important;
}

body[data-theme=dark] .ui-tasks .fc-day-today {
    background-color: var(--ui-primary-tint) !important;
}

.ui-tasks .fc-col-header-cell {
    background-color: var(--ui-subtle);
    padding: 0.75rem 0;
    font-weight: 600;
    color: var(--ui-body);
}

body[data-theme=dark] .ui-tasks .fc-col-header-cell {
    background-color: var(--ui-subtle) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

.ui-tasks .fc-daygrid-day-number {
    padding: 0.5rem;
    font-weight: 500;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day-number {
    color: var(--ui-text);
}

.ui-tasks .calendar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

body[data-theme=dark] .ui-tasks .calendar-loading {
    background: var(--ui-surface) !important;
}

body[data-theme=dark] .ui-tasks .fc-theme-standard td,
body[data-theme=dark] .ui-tasks .fc-theme-standard th {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-scrollgrid {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-scrollgrid-section-header {
    background-color: var(--ui-subtle) !important;
}

body[data-theme=dark] .ui-tasks .fc-scrollgrid-section-header th {
    background-color: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-scrollgrid-section-header table {
    background-color: transparent !important;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day {
    background-color: transparent;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day:hover {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .ui-tasks .fc-timegrid-slot {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-timegrid-col {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-timegrid-col.fc-day-today {
    background-color: var(--ui-primary-tint);
}

body[data-theme=dark] .ui-tasks .fc-list-day-cushion {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .ui-tasks .fc-list-event:hover td {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .ui-tasks .fc-header-toolbar {
    background-color: transparent;
}

body[data-theme=dark] .ui-tasks .fc-toolbar-chunk {
    background-color: transparent;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day-frame {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day-top {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-timegrid-axis {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-timegrid-divider {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] .ui-tasks .fc-daygrid-day-number {
    color: var(--ui-text) !important;
}

body[data-theme=dark] .ui-tasks .fc-col-header-cell-cushion {
    color: var(--ui-text) !important;
}

.ui-tasks .linked-entity-product-thumb {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.ui-tasks .linked-entity-product-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--ui-border-strong);
    display: block;
}

.ui-tasks .linked-entity-product-thumb__placeholder {
    display: none;
    width: 100%;
    height: 100%;
    border: 1px solid var(--ui-border-strong);
    align-items: center;
    justify-content: center;
}

.ui-tasks .linked-entity-product-thumb__placeholder.is-visible {
    display: flex;
}

.ui-tasks .task-context-item .linked-entity-product-thumb {
    width: 16px;
    height: 16px;
}

#kanban-board .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ui-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .ui-tasks .tasks-toolbar-top {
    padding: 0.875rem 1rem 0.625rem;
    }

    .ui-tasks .tasks-toolbar-actions {
    width: 100%;
    }

    .ui-tasks .tasks-toolbar-actions .btn {
    flex: 1;
    }

    .ui-tasks .tasks-stats-row {
    padding: 0 1rem;
    }
}

/* ---------- Chat: seller ↔ FC messages (FC + seller messages pages, root .ui-chat) ---------- */
#chat_drop_zone.chat-drop-zone-active {
    outline: 2px dashed var(--ui-primary);
    outline-offset: -2px;
    background: rgba(var(--ui-primary-rgb), 0.05);
    position: relative;
}

#chat_drop_zone.chat-drop-zone-active::after {
    content: attr(data-drop-label);
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    padding: 8px 16px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-md);
    white-space: nowrap;
    pointer-events: none;
}

.ui-chat .messaging {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.ui-chat .inbox_msg {
    display: flex;
    height: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ui-chat .inbox_people {
    flex: 0 0 350px;
    max-width: 350px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--ui-border);
}

.ui-chat .headind_srch {
    flex-shrink: 0;
    padding: 16px;
    border-bottom: 1px solid var(--ui-border);
}

.ui-chat .srch_bar {
    width: 100%;
}

.ui-chat .search-input-wrapper {
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.ui-chat .search-input-wrapper:focus-within {
    background: var(--ui-surface);
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.1);
}

.ui-chat .search-icon {
    color: var(--ui-silver);
    font-size: var(--ui-fs-lg);
    margin-right: 10px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.ui-chat .search-input-wrapper:focus-within .search-icon {
    color: var(--ui-primary);
}

#search-bar {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    padding: 0;
    width: 100%;
}

#search-bar::placeholder {
    color: var(--ui-silver);
    font-weight: 400;
}

.ui-chat .search-clear-btn {
    background: transparent;
    border: none;
    color: var(--ui-silver);
    font-size: var(--ui-fs-base);
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: var(--ui-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ui-chat .search-clear-btn:hover {
    background: rgba(var(--ui-black-rgb), 0.05);
    color: var(--ui-text);
}

.ui-chat .search-clear-btn:active {
    transform: scale(0.9);
}

.ui-chat .inbox_chat:not(:has(*))::before {
    content: attr(data-empty-text);
    display: block;
    padding: 2.5rem 1.25rem;
    text-align: center;
    font-size: var(--ui-fs-base);
    line-height: 1.5;
    color: var(--ui-muted);
}

.ui-chat .inbox_chat {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 0;
    /* Allows flex to work */
}

.ui-chat .mesgs {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ui-surface);
}

.ui-chat .msg_history {
    background: linear-gradient(to bottom, var(--ui-subtle) 0%, var(--ui-surface) 100%);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 0;
    /* Allows flex to work */
    padding: 1.25rem 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
}

#inbox_messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#inbox_messages:has(> .chat-empty-state:only-child) {
    align-items: center;
    justify-content: center;
}

.ui-chat .type_msg {
    background: var(--ui-subtle);
    flex-shrink: 0;
    border-top: 1px solid var(--ui-border) !important;
    padding: 12px;
    margin-top: auto;
    /* Push to bottom */
}

.ui-chat .mobile-chat-header {
    display: none;
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--ui-neutral);
    color: var(--ui-on-primary);
    align-items: center;
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

.ui-chat .mobile-back-btn {
    background: transparent;
    border: none;
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xl);
    padding: 8px 12px;
    margin-right: 12px;
    cursor: pointer;
    border-radius: var(--ui-radius-pill);
    transition: background 0.2s;
}

.ui-chat .mobile-back-btn:hover {
    background: rgba(var(--ui-white-rgb), 0.1);
}

.ui-chat .mobile-chat-title {
    font-weight: 600;
    font-size: var(--ui-fs-lg);
    flex: 1;
}

.ui-chat .received_withd_msg p {
    background: var(--ui-track) !important;
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius) var(--ui-radius-xs)!important;
    padding: 10px 16px !important;
    margin: 4px 0 !important;
    box-shadow: var(--ui-shadow);
    transition: all 0.2s ease;
}

.ui-chat .sent_msg {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.ui-chat .sent_msg p {
    background: linear-gradient(135deg, var(--ui-primary) 0%, rgba(var(--ui-primary-rgb), 0.9) 100%) !important;
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius-xs) var(--ui-radius)!important;
    padding: 10px 16px !important;
    margin: 4px 0 !important;
    box-shadow: 0 2px 4px rgba(var(--ui-primary-rgb), 0.2);
    transition: all 0.2s ease;
    display: inline-block;
    max-width: 100%;
}

.ui-chat .incoming_msg.new-message,
.ui-chat .outgoing_msg.new-message {
    opacity: 0;
    animation: messageSlideIn 0.3s ease-out forwards;
}

.ui-chat .input_msg_write .btn-icon-only {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    top: -2.5px;
    border-radius: var(--ui-radius);
}

.ui-chat .input_msg_write .btn-icon-only.sending {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-chat .chat-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--ui-primary-rgb), 0.25);
    border-left: 3px solid var(--ui-primary);
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), 0.08);
}

.ui-chat .chat-reply-preview-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-chat .chat-reply-preview-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-primary);
}

#chat_reply_preview_text {
    font-size: var(--ui-fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.ui-chat .message-reply-btn {
    color: var(--ui-muted);
}

.ui-chat .message-reply-btn:hover {
    color: var(--ui-primary);
}

.ui-chat .chat-quote {
    display: block;
    border-left: 3px solid var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-radius: var(--ui-radius-xs);
    padding: 6px 10px;
    margin-bottom: 6px;
    text-decoration: none;
}

.ui-chat .chat-quote-author {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-primary);
}

.ui-chat .chat-quote-text {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-chat .chat-msg-highlight .sent_msg p,
.ui-chat .chat-msg-highlight .received_withd_msg p {
    box-shadow: 0 0 0 2px rgba(var(--ui-primary-rgb), 0.45);
    transition: box-shadow 0.3s ease;
}

.ui-chat .custom-tooltip-trigger {
    position: relative;
}

.ui-chat .custom-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--ui-ink-rgb));
    color: var(--ui-on-primary);
    padding: 6px 12px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    font-weight: 500;
    box-shadow: var(--ui-shadow-hover);
}

.ui-chat .custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgb(var(--ui-ink-rgb));
}

.ui-chat .custom-tooltip-trigger:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
}

.ui-chat .outgoing_msg.internal-note .sent_msg p {
    background: linear-gradient(135deg, var(--ui-muted) 0%, var(--ui-body) 100%) !important;
    border-left: 3px solid var(--ui-muted);
}

.ui-chat .chat-task-item {
    margin-bottom: 12px;
}

.ui-chat .task-message-card {
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-surface) 100%);
    border: 2px solid var(--ui-border);
    border-left: 4px solid var(--ui-primary);
    border-radius: var(--ui-radius);
    padding: 14px 16px;
    margin: 0 auto;
    max-width: 85%;
    box-shadow: var(--ui-shadow);
    transition: all 0.2s ease;
}

.ui-chat .task-message-card:hover {
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-1px);
}

.ui-chat .task-message-card strong {
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
}

.ui-chat .task-message-card .fa-tasks {
    font-size: var(--ui-fs-lg);
}

.ui-chat .task-message-card .badge {
    font-size: var(--ui-fs-xs);
    padding: 4px 10px;
    font-weight: 600;
}

.ui-chat .task-delete-btn {
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.ui-chat .task-delete-btn:hover {
    opacity: 1;
}

.ui-chat .message-delete-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    background: rgba(var(--ui-black-rgb), 0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.ui-chat .message-delete-btn i {
    font-size: var(--ui-fs-2xs);
}

.ui-chat .message-delete-btn:hover {
    opacity: 1 !important;
    background: rgb(var(--ui-black-rgb));
    text-decoration: none;
}

.ui-chat .sent_msg:hover .message-delete-btn {
    opacity: 0.7;
}

.ui-chat .comment-delete-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.ui-chat .comment-delete-btn:hover {
    opacity: 1;
}

.ui-chat .task-comment-btn {
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
}

.ui-chat .task-comment-form {
    border-top: 1px solid var(--ui-border);
    padding-top: 12px;
}

.ui-chat .task-comment-form textarea {
    font-size: var(--ui-fs-sm);
    resize: vertical;
}

.ui-chat .task-message-card .time_date {
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    margin-top: 8px;
    display: block;
}

.ui-chat .chat-task-note-item {
    margin-bottom: 12px;
}

.ui-chat .task-note-card {
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-surface) 100%);
    border: 2px solid var(--ui-border-strong);
    border-left: 4px solid var(--ui-series-1);
    border-radius: var(--ui-radius);
    padding: 14px 16px;
    margin: 0 auto;
    max-width: 85%;
    box-shadow: var(--ui-shadow);
    transition: all 0.2s ease;
}

.ui-chat .task-note-card:hover {
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-1px);
}

.ui-chat .task-note-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
}

.ui-chat .task-note-label strong {
    color: var(--ui-text);
    font-weight: 600;
}

.ui-chat .task-note-content {
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    line-height: 1.5;
    margin-bottom: 8px;
}

.ui-chat .task-note-author {
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
}

.ui-chat .task-note-card .time_date {
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
}

.ui-chat .type_msg {
    border-top: 1px solid var(--ui-border) !important;
    padding: 12px;
}

.ui-chat .write_msg {
    border-radius: var(--ui-radius-pill) !important;
    background: var(--ui-surface) !important;
    border: 2px solid var(--ui-border) !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    transition: all 0.3s ease;
    resize: none;
}

.ui-chat .write_msg:focus {
    outline: none;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.1);
}

.ui-chat .input_msg_write {
    position: relative;
}

.ui-chat .chat-loading {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ui-chat .messages-loading {
    text-align: center;
    padding: 20px;
    color: var(--ui-faint);
    opacity: 0.7;
}

.ui-chat .inbox_chat::-webkit-scrollbar,
.ui-chat .msg_history::-webkit-scrollbar {
    width: 8px;
}

.ui-chat .inbox_chat::-webkit-scrollbar-track,
.ui-chat .msg_history::-webkit-scrollbar-track {
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-md);
}

.ui-chat .inbox_chat::-webkit-scrollbar-thumb,
.ui-chat .msg_history::-webkit-scrollbar-thumb {
    background: var(--ui-neutral);
    border-radius: var(--ui-radius-md);
    transition: background 0.2s;
}

.ui-chat .inbox_chat::-webkit-scrollbar-thumb:hover,
.ui-chat .msg_history::-webkit-scrollbar-thumb:hover {
    background: var(--ui-silver);
}

.ui-chat .chat-empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 22rem;
    animation: chat-empty-state-in 0.35s ease-out;
}

.ui-chat .chat-empty-state-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.08);
}

.ui-chat .chat-empty-state-icon i {
    font-size: 1.65rem;
}

.ui-chat .chat-empty-state-title {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-body);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.ui-chat .chat-empty-state-message {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    line-height: 1.55;
    margin: 0;
}

.ui-chat .incoming_msg_img img {
    border: 2px solid var(--ui-border);
    transition: all 0.3s ease;
}

#inbox_chat,
#inbox_messages {
    transition: opacity 0.2s ease;
}

#inbox_chat.updating,
#inbox_messages.updating {
    opacity: 0.7;
}

.ui-chat .time_date {
    font-size: var(--ui-fs-xs)!important;
    color: var(--ui-faint) !important;
    margin-top: 6px !important;
    font-weight: 400;
}

.ui-chat .sent_msg p,
.ui-chat .received_withd_msg p {
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.5;
}

#floatingButton {
    display: none;
}

body[data-theme="dark"] .ui-chat .messaging .mesgs,
body[data-theme="dark"] .ui-chat .messaging .inbox_people {
    color: var(--ui-text) !important;
}

body[data-theme="dark"] .ui-chat .messaging .chat_img img,
body[data-theme="dark"] .ui-chat .messaging .incoming_msg_img img {
    filter: none !important;
}

body[data-theme="dark"] .ui-chat .messaging .write_msg {
    border-top: none !important;
}

body[data-theme="dark"] .ui-chat .search-input-wrapper {
    border-color: transparent;
}

body[data-theme="dark"] .ui-chat .search-input-wrapper:focus-within {
    background: rgba(var(--ui-white-rgb), 0.08);
    border-color: var(--ui-primary);
}

body[data-theme="dark"] .ui-chat .search-icon {
    color: color-mix(in srgb, var(--ui-on-primary) 60%, transparent);
}

body[data-theme="dark"] .ui-chat .search-input-wrapper:focus-within .search-icon {
    color: var(--ui-primary);
}

body[data-theme="dark"] #search-bar {
    color: var(--ui-text);
}

body[data-theme="dark"] #search-bar::placeholder {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .search-clear-btn {
    color: color-mix(in srgb, var(--ui-on-primary) 60%, transparent);
}

body[data-theme="dark"] .ui-chat .search-clear-btn:hover {
    background: rgba(var(--ui-white-rgb), 0.1);
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .msg_history {
    background: var(--ui-surface) !important;
}

body[data-theme="dark"] .ui-chat .type_msg {
    background: var(--ui-surface) !important;
    border-top-color: rgba(var(--ui-white-rgb), 0.1) !important;
}

body[data-theme="dark"] .ui-chat .write_msg {
    border-color: rgba(var(--ui-white-rgb), 0.1) !important;
}

body[data-theme="dark"] .ui-chat .write_msg:focus {
    background: rgba(var(--ui-white-rgb), 0.08) !important;
    border-color: var(--ui-primary) !important;
}

body[data-theme="dark"] .ui-chat .write_msg::placeholder {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .mobile-chat-header {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.1);
}

body[data-theme="dark"] .ui-chat .received_withd_msg p {
    background: rgba(var(--ui-white-rgb), 0.08) !important;
    color: var(--ui-text) !important;
}

body[data-theme="dark"] .ui-chat .sent_msg p {
    background: linear-gradient(135deg, var(--ui-primary) 0%, rgba(var(--ui-primary-rgb), 0.9) 100%) !important;
    color: var(--ui-on-primary) !important;
}

body[data-theme="dark"] .ui-chat .chat-empty-state-icon {
    background: rgba(var(--ui-primary-rgb), 0.18);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.15);
}

body[data-theme="dark"] .ui-chat .chat-empty-state-title {
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .chat-empty-state-message {
    color: color-mix(in srgb, var(--ui-on-primary) 62%, transparent);
}

body[data-theme="dark"] .ui-chat .time_date {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent) !important;
}

body[data-theme="dark"] .ui-chat .messaging .input_msg_write .btn-light {
    border-color: rgba(var(--ui-white-rgb), 0.12) !important;
}

body[data-theme="dark"] .ui-chat .messaging .input_msg_write .btn-light:hover {
    background: rgba(var(--ui-white-rgb), 0.12) !important;
    border-color: rgba(var(--ui-white-rgb), 0.18) !important;
    color: var(--ui-text) !important;
}

body[data-theme="dark"] .ui-chat .messaging .chat-attachments-preview .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
}

body[data-theme="dark"] .ui-chat .messaging .outgoing_msg.internal-note .sent_msg p {
    color: var(--ui-text) !important;
}

body[data-theme="dark"] .ui-chat .task-message-card {
    background: linear-gradient(135deg, rgba(var(--ui-white-rgb), 0.05) 0%, rgba(var(--ui-white-rgb), 0.02) 100%);
    border-color: rgba(var(--ui-white-rgb), 0.1);
    border-left-color: var(--ui-primary);
}

body[data-theme="dark"] .ui-chat .task-message-card:hover {
    background: linear-gradient(135deg, rgba(var(--ui-white-rgb), 0.08) 0%, rgba(var(--ui-white-rgb), 0.05) 100%);
}

body[data-theme="dark"] .ui-chat .task-message-card strong {
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .task-message-card .time_date {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .task-note-card {
    background: linear-gradient(135deg, var(--ui-info-tint) 0%, rgba(var(--ui-white-rgb), 0.02) 100%);
    border-color: rgba(var(--ui-info-rgb), 0.3);
    border-left-color: var(--ui-series-1);
}

body[data-theme="dark"] .ui-chat .task-note-card:hover {
    background: linear-gradient(135deg, var(--ui-info-tint) 0%, rgba(var(--ui-white-rgb), 0.05) 100%);
}

body[data-theme="dark"] .ui-chat .task-note-label {
    color: color-mix(in srgb, var(--ui-on-primary) 70%, transparent);
}

body[data-theme="dark"] .ui-chat .task-note-label strong {
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .task-note-content {
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .task-note-author {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .task-note-card .time_date {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .task-comment-form {
    border-top-color: rgba(var(--ui-white-rgb), 0.1);
}

body[data-theme="dark"] .ui-chat .task-comment-form textarea {
    background: rgba(var(--ui-white-rgb), 0.05);
    border-color: rgba(var(--ui-white-rgb), 0.1);
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .task-comment-form textarea:focus {
    background: rgba(var(--ui-white-rgb), 0.08);
    border-color: var(--ui-primary);
}

body[data-theme="dark"] .ui-chat .task-comment-form textarea::placeholder {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

body[data-theme="dark"] .ui-chat .inbox_chat::-webkit-scrollbar-track,
body[data-theme="dark"] .ui-chat .msg_history::-webkit-scrollbar-track {
    background: rgba(var(--ui-white-rgb), 0.05);
}

body[data-theme="dark"] .ui-chat .inbox_chat::-webkit-scrollbar-thumb,
body[data-theme="dark"] .ui-chat .msg_history::-webkit-scrollbar-thumb {
    background: rgba(var(--ui-white-rgb), 0.2);
}

body[data-theme="dark"] .ui-chat .inbox_chat::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] .ui-chat .msg_history::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ui-white-rgb), 0.3);
}

body[data-theme="dark"] .ui-chat .messages-loading,
body[data-theme="dark"] .ui-chat .chat-loading,
body[data-theme="dark"] .ui-chat .chat-loading .text-muted {
    color: color-mix(in srgb, var(--ui-on-primary) 60%, transparent) !important;
}

body[data-theme="dark"] .ui-chat .custom-tooltip {
    background-color: var(--ui-page);
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-chat .custom-tooltip::after {
    border-top-color: var(--ui-surface);
}

.ui-chat .search-clear-btn {
    background: transparent;
    border: none;
    color: var(--ui-silver);
    font-size: var(--ui-fs-base);
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ui-chat .desktop-chat-header {
    display: none;
    flex-shrink: 0;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-chat .desktop-chat-header.is-visible {
    display: none;
}

.ui-chat .desktop-chat-header-text {
    min-width: 0;
}

.ui-chat .desktop-chat-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-chat .desktop-chat-subtitle {
    display: none;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-chat .desktop-chat-subtitle.is-visible {
    display: block;
}

.ui-chat .incoming-msg-identity {
    display: block;
    text-align: left;
    color: var(--ui-text);
    font-weight: 500;
    font-size: var(--ui-fs-sm);
}

.ui-chat .incoming-msg-seller {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-chat .chat-list-mark-unread-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xs);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.ui-chat .chat_list:hover .chat-list-mark-unread-btn {
    opacity: 1;
}

.ui-chat .chat-list-mark-unread-btn:hover {
    background: var(--ui-primary-hover);
}

.ui-chat .mobile-back-btn {
    background: transparent;
    border: none;
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xl);
    padding: 8px 12px;
    margin-right: 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

#messages-page .chat-list-mark-unread-btn {
    top: 0.5rem;
    right: 0.5rem;
}

.ui-chat .sent_msg p {
    background: linear-gradient(135deg, var(--ui-primary) 0%, rgba(var(--ui-primary-rgb), 0.9) 100%) !important;
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius-xs) var(--ui-radius)!important;
    padding: 10px 16px !important;
    margin: 4px 0 !important;
    box-shadow: 0 2px 4px rgba(var(--ui-primary-rgb), 0.2);
    transition: all 0.2s ease;
}

.ui-chat .task-note-card.internal-note {
    border-left-color: var(--ui-muted);
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-track) 100%);
}

#messages-page .chat_img img,
#messages-page .incoming_msg_img img {
    border-radius: 50%;
}

@media (max-width: 768px) {
    .ui-chat .chat-empty-state {
    padding: 1.5rem 1rem;
        max-width: 18rem;
    }

    .ui-chat .chat-empty-state-icon {
    width: 4rem;
        height: 4rem;
        margin-bottom: 1rem;
    }

    .ui-chat .chat-empty-state-icon i {
    font-size: var(--ui-fs-kpi);
    }

    .ui-chat .chat-empty-state-title {
    font-size: var(--ui-fs-lg);
    }

    .ui-chat .chat-empty-state-message {
    font-size: var(--ui-fs-sm);
    }

    .ui-chat .messaging {
    flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .ui-chat .inbox_msg {
    position: relative;
    }

    .ui-chat .mobile-chat-list {
    width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .ui-chat .inbox_people {
    width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .ui-chat .mobile-chat-view {
    width: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .ui-chat .mobile-chat-view.active {
    transform: translateX(0);
    }

    .ui-chat .mobile-chat-list.hidden {
    transform: translateX(-100%);
    }

    .ui-chat .mobile-chat-header {
    display: flex;
    }

    .ui-chat .headind_srch {
    padding: 12px;
    }

    .ui-chat .search-input-wrapper {
    padding: 8px 14px;
    }

    .ui-chat .search-icon {
    font-size: var(--ui-fs-base);
        margin-right: 8px;
    }

    #search-bar {
    font-size: var(--ui-fs-base);
    }

    .ui-chat .inbox_chat {
    padding-bottom: 10px;
        width: 100% !important;
    }

    .ui-chat .headind_srch {
    width: 100% !important;
    }

    .ui-chat .msg_history {
    padding: 0.9375rem 0.75rem 2rem;
    }

    .ui-chat .type_msg {
    padding: 10px;
    }

    .ui-chat .write_msg {
    padding: 10px 16px !important;
    }

    .ui-chat .input_msg_write .btn-icon-only {
    width: 44px !important;
        height: 44px !important;
        font-size: var(--ui-fs-lg)!important;
    }

    .ui-chat .custom-tooltip {
    font-size: var(--ui-fs-xs);
        padding: 5px 10px;
        bottom: calc(100% + 6px);
    }

    .ui-chat .task-message-card {
    max-width: 95%;
        padding: 12px;
    }

    .ui-chat .task-message-card strong {
    font-size: var(--ui-fs-base);
    }

    .ui-chat .task-note-card {
    max-width: 95%;
        padding: 12px;
    }

    .ui-chat .task-note-label {
    font-size: var(--ui-fs-xs);
    }

    .ui-chat .task-note-content {
    font-size: var(--ui-fs-sm);
    }

    .ui-chat .desktop-chat-header,
    .ui-chat .desktop-chat-header.is-visible {
    display: none !important;
    }

    .ui-chat .msg_send_btn {
    width: 36px !important;
        height: 36px !important;
        font-size: var(--ui-fs-lg)!important;
    }
}

@media (min-width: 769px) {
    .ui-chat .mobile-chat-list,
    .ui-chat .mobile-chat-view {
    position: relative !important;
        transform: none !important;
        width: auto !important;
    }

    .ui-chat .mobile-chat-list.hidden {
    transform: none !important;
    }

    .ui-chat .mobile-chat-header {
    display: none !important;
    }

    .ui-chat .desktop-chat-header.is-visible {
    display: flex;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ui-chat .inbox_people {
    flex: 0 0 320px;
        max-width: 320px;
    }

    .ui-chat .mesgs {
    flex: 1;
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chat-empty-state-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageSlideIn {
from {
  opacity: 0;
  transform: translateY(8px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
  }

@keyframes chat-empty-state-in {
from {
  opacity: 0;
  transform: translateY(8px);
}

to {
  opacity: 1;
  transform: translateY(0);
}
  }

/* ---------- Fulfilment requests: row action buttons (FC requests) ---------- */
.request_icon_button {
    font-size: var(--ui-fs-lg);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    transition: all 0.2s ease;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid transparent;
    opacity: 0.7;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
}

.request_icon_button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-hover);
}

.request_icon_button.text-success {
    background-color: var(--ui-success-tint);
    border-color: var(--ui-success-tint);
}

.request_icon_button.text-success:hover {
    background-color: var(--ui-success-tint);
    border-color: rgba(var(--ui-success-rgb), 0.4);
}

.request_icon_button.text-danger {
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

.request_icon_button.text-danger:hover {
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

.request_icon_button.text-primary {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
}

.request_icon_button.text-primary:hover {
    background-color: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

/* ---------- API keys and webhooks: endpoint permission picker (FC + seller) ---------- */
.method-checkbox-wrapper .btn-check:checked + label {
    transform: scale(1.05);
    box-shadow: var(--ui-shadow-hover) !important;
    opacity: 1 !important;
    border-width: 2px !important;
}

.method-checkbox-wrapper .btn-check:not(:checked) + label {
    opacity: 0.6;
}

.method-checkbox-wrapper .btn-check:not(:checked) + label:hover {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-hover);
    opacity: 0.8;
}

.method-checkbox-wrapper .btn-check:checked + label:hover {
    transform: scale(1.08);
    box-shadow: var(--ui-shadow-pop) !important;
}

.endpoint-permission-group {
    transition: all 0.2s ease;
}

.endpoint-permission-group:hover {
    box-shadow: var(--ui-shadow) !important;
}

#endpointPermissionsContainer::-webkit-scrollbar {
    width: 8px;
}

#endpointPermissionsContainer::-webkit-scrollbar-track {
    background: var(--ui-track);
    border-radius: var(--ui-radius-md);
}

#endpointPermissionsContainer::-webkit-scrollbar-thumb {
    background: var(--ui-muted);
    border-radius: var(--ui-radius-md);
}

#endpointPermissionsContainer::-webkit-scrollbar-thumb:hover {
    background: var(--ui-body);
}

/* ---------- Employee permissions (FC + seller employee dialogs) ---------- */
#subAccountModal .permissions-section {
    border-radius: var(--ui-radius-xs);
    padding: 1rem;
    margin-bottom: 1rem;
}

body[data-theme=dark] #subAccountModal .permissions-section {
    background-color: var(--ui-subtle);
}

#subAccountModal .permission-label {
    font-weight: 500;
    color: var(--ui-text);
    margin: 0;
}

body[data-theme=dark] #subAccountModal .permission-label {
    color: var(--ui-text);
}

/* ---------- Notification centre: categories and preference cards (FC + seller) ---------- */
#notification-center-page .notification-category-card {
    border: 1px solid var(--ui-border-strong);
    overflow: hidden;
}

#notification-center-page .notification-category-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border-strong);
}

#notification-center-page .notification-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    flex-shrink: 0;
}

#notification-center-page .notification-category-title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

#notification-center-page .notification-pref-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
}

#notification-center-page .notification-pref-item {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    padding: 1rem 1.15rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#notification-center-page .notification-pref-item.is-enabled {
    border-color: var(--ui-primary-line);
}

#notification-center-page .notification-pref-item.is-disabled {
    opacity: 0.88;
}

#notification-center-page .notification-pref-item.is-saving {
    opacity: 0.65;
    pointer-events: none;
}

#notification-center-page .notification-pref-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

#notification-center-page .notification-pref-copy {
    min-width: 0;
    flex: 1;
}

#notification-center-page .notification-pref-title {
    margin: 0 0 0.25rem;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.4;
}

#notification-center-page .notification-pref-description {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.5;
}

#notification-center-page .notification-pref-toggle {
    flex-shrink: 0;
    padding-top: 0.1rem;
}

#notification-center-page .notification-pref-recipients {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border-strong);
}

#notification-center-page .notification-pref-item.is-disabled .notification-pref-recipients {
    opacity: 0.92;
}

#notification-center-page .notification-pref-item.is-disabled .notification-email-input {
    background: var(--ui-subtle);
}

#notification-center-page .notification-pref-recipients-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

#notification-center-page .notification-email-input-group {
    max-width: 28rem;
}

#notification-center-page .notification-email-input-group .input-group-text {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

#notification-center-page .notification-pref-hint {
    margin-top: 0.35rem;
    margin-bottom: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#notification-center-page .notification-security-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-muted);
    line-height: 1.5;
}

#notification-center-page .notification-security-note i {
    color: var(--ui-primary);
    margin-top: 0.15rem;
}

#notification-center-page .notification-pref-item.is-enabled {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 1px var(--ui-primary-soft);
}

@media (max-width: 575.98px) {
    #notification-center-page .notification-pref-head {
    flex-direction: column;
        gap: 0.75rem;
    }

    #notification-center-page .notification-pref-toggle {
    align-self: flex-start;
    }

    #notification-center-page .notification-email-input-group {
    max-width: 100%;
    }
}

/* ---------- Carriers: logo tile and channel-settings icons (FC + seller) ---------- */
.carrier-logo-wrapper {
    background-color: rgba(var(--ui-black-rgb), 0.02);
    border-radius: var(--ui-radius-xs);
    padding: 0.5rem;
    width: 180px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-theme=dark] .carrier-logo-wrapper {
    background-color: var(--ui-subtle);
}

.carrier-logo-wrapper {
    padding: 0.5rem;
    width: 180px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#channelSettingsModal .mb-3 i,
    #channelSettingsModal .d-flex i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-base)!important;
    margin-top: 0 !important;
}

body[data-theme=dark] #channelSettingsModal .mb-3 i,
    body[data-theme=dark] #channelSettingsModal .d-flex i {
    background: var(--ui-primary-line);
    color: var(--ui-primary);
}

@media (max-width: 768px) {
    .carrier-logo-wrapper {
    width: 150px;
        height: 68px;
    }
}

/* ---------- Packaging lists: row actions and group rows (FC + seller) ---------- */
.packaging-format-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.packaging-format-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.packaging-format-action:hover {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.packaging-action-delete:hover {
    color: var(--ui-danger) !important;
    background: rgba(var(--ui-danger-rgb), 0.1) !important;
}

#packagingTable tr.table-light {
    background-color: var(--ui-subtle) !important;
    font-weight: 600;
}

body[data-theme=dark] #packagingTable tr.table-light {
    background-color: var(--ui-track) !important;
}

.packaging-format-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ui-radius-xs);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    border: none;
    cursor: pointer;
    padding: 0;
}

#packagingTable tr.table-light {
    font-weight: 600;
}

/* ---------- Batches: cart tags, batch log timeline, assign search, grouped table (FC + seller) ---------- */
#settingsNav .form-group {
    margin-bottom: 0;
}

#settingsNav .batch-setting-row {
    padding: 0.85rem 1rem;
}

#settingsNav #autoReleaseIdleBatchMinutes {
    width: 4.75rem;
    min-height: 2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    max-height: 150px;
    overflow-y: auto;
}

.batch-cart-tags-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    cursor: text;
}

.batch-cart-tags-field:focus-within {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
}

#batchCartTagInput {
    flex: 1 1 140px;
    min-width: 8rem;
    max-width: 100%;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    padding: 0.25rem 0.35rem;
    font-size: var(--ui-fs-lg);
}

.batch-cart-tag .batch-cart-tag-remove {
    opacity: 0.8;
    transform: scale(0.88);
}

.batch-log-item {
    border: 1px solid rgba(var(--ui-muted-rgb), 0.25);
    border-radius: var(--ui-radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.batch-log-item:last-child {
    margin-bottom: 0;
}

.batch-log-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.batch-log-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.batch-log-description {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.35rem;
}

.batch-log-context {
    max-height: 220px;
    overflow: auto;
    font-size: var(--ui-fs-xs);
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-muted-rgb), 0.08);
    padding: 0.5rem;
    margin-top: 0.35rem;
}

.batch-log-status {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--ui-fs-2xs);
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-pill);
}

.batch-log-status-info {
    background: var(--ui-primary-line); color: var(--ui-primary);
}

.batch-log-status-warning {
    background: rgba(var(--ui-warning-rgb), 0.2); color: var(--ui-warning-text);
}

.batch-log-status-error {
    background: rgba(var(--ui-danger-rgb), 0.15); color: var(--ui-danger);
}

.batch-log-status-success {
    background: rgba(var(--ui-success-rgb), 0.2); color: var(--ui-success-text);
}

.batch-log-timeline-modal.modal {
    z-index: 1085;
}

.batch-log-timeline-modal .modal-content {
    border-radius: var(--ui-radius);
}

.batch-log-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.batch-log-timeline-item {
    --ui-tone: var(--ui-primary);
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
}

.batch-log-timeline-marker {
    position: relative;
    min-height: 100%;
    display: flex;
    justify-content: center;
}

.batch-log-timeline-marker::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -0.75rem;
    width: 2px;
    background: rgba(var(--ui-muted-rgb), 0.35);
}

.batch-log-timeline-item:last-child .batch-log-timeline-marker::before {
    bottom: 0.65rem;
}

.batch-log-timeline-dot {
    position: relative;
    margin-top: 0.55rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-tone);
    box-shadow: 0 0 0 3px rgba(var(--ui-black-rgb), 0.08);
    z-index: 1;
}

.batch-log-timeline-item .batch-log-item {
    border-left: 3px solid var(--ui-tone);
    margin-bottom: 0;
}

#datatable-batches .batch-assign-check,
    #datatable-batches #batchAssignSelectAll {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.batches-table-card,
    .batches-table-card .card-body,
    #datatable-batches_wrapper,
    #datatable-batches {
    overflow: visible !important;
}

.batch-assign-dropdown .dropdown-menu,
    .dt-button-collection.batch-assign-collection {
    z-index: 2000;
    max-height: 16rem;
    overflow-y: auto;
}

.batch-assign-search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.5rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

.batch-assign-search {
    font-size: var(--ui-fs-sm);
}

.batch-assign-no-results {
    display: none;
    padding: 0.5rem 0.75rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#batches-page #datatable-batches tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
    border-color: var(--ui-border);
}

#batches-page #datatable-batches tbody tr {
    cursor: pointer;
}

#batches-page #datatable-batches tbody tr:hover td {
    background-color: var(--ui-row-hover);
}

#batches-page table.dataTable td.batch-desc-cell,
    #batches-page table.dataTable th.batch-desc-cell,
    #batches-page table.dataTable td.batch-actions-cell,
    #batches-page table.dataTable th.batch-actions-cell {
    text-align: left !important;
}

#batches-page .batch-desc-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
}

#batches-page .batch-desc-status {
    margin-top: 3px;
}

#batches-page .batch-desc-status .badge {
    font-size: var(--ui-fs-2xs);
}

#batches-page table.dataTable tr.dtrg-group th,
    #batches-page table.dataTable tr.dtrg-group.dtrg-level-0 th {
    padding: 10px 16px;
    background: var(--ui-subtle) !important;
    border-top: 16px solid var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

#batches-page table.dataTable tbody tr.dtrg-group:first-child th {
    border-top-width: 0;
}

#batches-page .batch-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

#batches-page .batch-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius-sm, 8px);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#batches-page .batch-group-name {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

#batches-page .batch-group-count {
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

#batches-page table.dataTable tr.dtrg-group th::after {
    display: none;
}

#batches-page #datatable-batches .badge:empty {
    display: none;
}

#batches-page .actions-cell .batch-table-action-btn {
    --ui-tone-rgb: var(--ui-muted-rgb);
    --tone: var(--ui-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(32px, var(--ui-tap-min, 0px));
    height: max(32px, var(--ui-tap-min, 0px));
    padding: 0;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm, 8px)!important;
    background: var(--ui-surface) !important;
    color: var(--tone) !important;
    font-size: var(--ui-fs-sm);
    box-shadow: none !important;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

#batches-page .actions-cell .batch-table-action-btn i {
    color: inherit !important;
}

#batches-page .actions-cell .batch-table-action-btn:hover {
    border-color: var(--ui-faint) !important;
    color: var(--ui-text) !important;
}

#batches-page .actions-cell .batch-table-action-btn.btn-primary,
    #batches-page .actions-cell .batch-table-action-btn.btn-info {
    --ui-tone-rgb: var(--ui-primary-rgb);
    --tone: var(--ui-primary);
}

#batches-page .actions-cell .batch-table-action-btn.btn-success {
    --ui-tone-rgb: var(--ui-success-rgb);
    --tone: var(--ui-success-text);
}

#batches-page .actions-cell .batch-table-action-btn.btn-primary,
    #batches-page .actions-cell .batch-table-action-btn.btn-info,
    #batches-page .actions-cell .batch-table-action-btn.btn-success {
    background: rgba(var(--ui-tone-rgb), .1) !important;
    border-color: rgba(var(--ui-tone-rgb), .25) !important;
}

#batches-page .actions-cell .batch-table-action-btn.btn-primary:hover,
    #batches-page .actions-cell .batch-table-action-btn.btn-info:hover,
    #batches-page .actions-cell .batch-table-action-btn.btn-success:hover {
    background: rgba(var(--ui-tone-rgb), .18) !important;
    color: var(--tone) !important;
}

#batches-page .actions-cell .batch-table-action-btn.btn-danger:hover {
    border-color: rgba(var(--ui-danger-rgb), 0.4) !important;
    background: var(--ui-danger-tint) !important;
    color: var(--ui-danger) !important;
}

#batches-page .batch-sync-toolbar .btn-lg {
    min-height: var(--ui-control-h, 40px);
    padding: 0 14px;
    font-size: var(--ui-fs-base);
    border-radius: var(--ui-radius);
}

#batchCartTagInput {
    flex: 1 1 140px;
    min-width: 8rem;
    max-width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.25rem 0.35rem;
    font-size: var(--ui-fs-lg);
}

.batch-assign-search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35rem 0.5rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

.batch-assign-no-results {
    display: none;
    padding: 0.5rem 0.75rem;
    color: var(--ui-muted);
}

@media (max-width: 575.98px) {
    #batches-page td.batch-actions-cell > .d-flex {
    flex-wrap: wrap !important;
        gap: 4px;
        width: 116px;
    }

    #batches-page td.batch-actions-cell > .d-flex > * {
    margin: 0 !important;
    }
}

/* ---------- Stock advice: advice cell, due pills, urgent rows, scan check (FC + seller) ---------- */
.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.urgent-pick-location-row {
    border-left: 3px solid var(--ui-danger) !important;
    background-color: var(--ui-danger-tint) !important;
}

body[data-theme=dark] .urgent-pick-location-row {
    background-color: var(--ui-danger-tint) !important;
}

.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-advice-card {
    margin-bottom: 1rem;
}

.stock-advice-card .card-body {
    padding: 1rem;
    overflow-x: auto;
}

#stockAdviceTable td:last-child {
    white-space: nowrap;
    width: 1%;
}

.circle {
    height: 100px;
    width: 100px;
    background-color: var(--ui-border);
    position: relative;
    margin: auto;
}

body[data-theme=dark] .circle {
    background-color: var(--ui-border-strong);
}

#circle-barcode-icon,
    #circle-box-icon {
    text-align: center;
    line-height: 97px;
    color: var(--ui-muted);
}

body[data-theme=dark] #circle-barcode-icon,
    body[data-theme=dark] #circle-box-icon {
    color: var(--ui-faint);
}

.scannedItems-wrapper {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.scannedItems-wrapper>span {
    border: 3px solid var(--ui-subtle);
}

body[data-theme=dark] .scannedItems-wrapper>span {
    border-color: var(--ui-border-strong);
}

#stock-advice-page .main-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ui-control-h, 40px);
    padding: 0 14px;
    font-weight: 600;
}

#stock-advice-page .sap-btn-quiet {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

#stock-advice-page .sap-btn-quiet:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-hover);
}

#stock-advice-page .sap-btn-quiet i {
    color: var(--ui-muted);
}

#stock-advice-page .main-buttons .dropdown-menu {
    border: 0;
    box-shadow: var(--ui-shadow-hover);
    padding: 6px;
}

#stock-advice-page .main-buttons .dropdown-item {
    padding: 7px 10px;
}

#stock-advice-page .main-buttons .dropdown-item i {
    width: 16px;
}

#stock-advice-page .stock-advice-guide {
    border: 0;
    box-shadow: var(--ui-shadow);
    margin-bottom: 1rem;
}

#stock-advice-page .stock-advice-guide__icon {
    background: var(--ui-subtle);
    color: var(--ui-muted);
    border: 0;
    border-radius: var(--ui-radius-md);
}

#stock-advice-page .stock-advice-guide__title {
    font-weight: 700;
}

#stock-advice-page .stock-advice-guide__hint {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#stock-advice-page .filter-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    margin-bottom: 4px;
    gap: 6px;
}

#stock-advice-page .filter-section .form-select,
    #stock-advice-page .filter-section .form-control {
    height: var(--ui-control-h, 40px);
    min-height: var(--ui-control-h, 40px);
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

#stock-advice-page .filter-section .form-select:focus,
    #stock-advice-page .filter-section .form-control:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow);
}

#stock-advice-page .stock-advice-card {
    border: 0;
    overflow: hidden;
}

#stock-advice-page .stock-advice-card .card-body {
    padding: 12px 0 8px;
}

#stock-advice-page #stockAdviceTable tbody tr {
    transition: background-color 150ms ease;
}

#stock-advice-page #stockAdviceTable tbody td:first-child,
    #stock-advice-page #stockAdviceTable_wrapper thead th:first-child {
    padding-left: 16px;
}

#stock-advice-page #stockAdviceTable tbody td:last-child,
    #stock-advice-page #stockAdviceTable_wrapper thead th:last-child {
    padding-right: 16px;
}

#stock-advice-page #stockAdviceTable .img-bg-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    background-color: var(--ui-surface);
    background-size: contain;
    background-repeat: no-repeat;
}

#stock-advice-page #stockAdviceTable tbody td a[href*="getProduct"] {
    color: var(--ui-text);
    font-weight: 600;
    text-decoration: none;
}

#stock-advice-page #stockAdviceTable tbody td a[href*="getProduct"]:hover {
    color: var(--ui-primary);
}

#stock-advice-page .sap-advice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 240px;
    color: var(--ui-text);
    font-weight: 500;
}

#stock-advice-page .sap-advice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#stock-advice-page .sap-advice__body {
    line-height: 1.4;
    padding-top: 3px;
}

#stock-advice-page .sap-advice__body a[onclick^="getStockAdviceExplanation"] {
    color: var(--ui-body);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--ui-border-strong);
    text-underline-offset: 2px;
}

#stock-advice-page .sap-advice.is-urgent .sap-advice__icon {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#stock-advice-page .sap-urgent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    vertical-align: 1px;
}

#stock-advice-page .urgent-pick-location-row {
    border-left: 0 !important;
    background-color: transparent !important;
}

#stock-advice-page .urgent-pick-location-row td:first-child {
    box-shadow: inset 3px 0 0 var(--ui-danger);
}

#stock-advice-page .sap-due {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-body);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

#stock-advice-page .sap-due i {
    font-size: var(--ui-fs-2xs);
}

#stock-advice-page .sap-due[data-tone="warning"] {
    background: var(--ui-warning-tint);
    color: var(--ui-warning);
}

#stock-advice-page .sap-due[data-tone="danger"] {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#stock-advice-page #stockAdviceTable tbody td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    width: auto !important;
    white-space: nowrap;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

#stock-advice-page #stockAdviceTable tbody td .btn:hover {
    border-color: var(--ui-faint);
    box-shadow: var(--ui-shadow);
}

#stock-advice-page #stockAdviceTable tbody td .btn.btn-secondary {
    color: var(--ui-muted) !important;
}

#stockAdviceTable_wrapper {
    overflow-x: auto;
}

.circle {
    height: 100px;
    width: 100px;
    background-color: var(--ui-border);
    position: relative;
    margin: auto;
}

#circle-barcode-icon,
    #circle-box-icon {
    text-align: center;
    line-height: 97px;
    color: var(--ui-body);
}

.scannedItems-wrapper>span {
    border: 3px var(--ui-neutral-tint) solid;
}

@media (max-width: 767.98px) {
    .filter-section {
    margin-bottom: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .filter-section {
    margin-bottom: 1rem;
    }

    .filter-label {
    margin-bottom: 0.4rem;
    }
}

@media (max-width: 576px) {
    /* table-mode phone layout; card mode (cd-mobile.js) lays the rows out as cards instead */
    .stock-advice-card .card-body {
    padding: 0.75rem;
    }

    #stockAdviceTable:not(.cd-cards) thead th,
            #stockAdviceTable:not(.cd-cards) tbody td {
    padding: 0.375rem 0.25rem;
        white-space: nowrap;
    }

    #stockAdviceTable:not(.cd-cards) img {
    max-width: 35px;
        max-height: 35px;
    }

    #stockAdviceTable .btn {
    padding: 0.15rem 0.35rem;
        min-height: var(--ui-tap-min, auto); /* 44px on touch phones */
    }

    #stockAdviceTable:not(.cd-cards) thead th:nth-child(3),
            #stockAdviceTable:not(.cd-cards) tbody td:nth-child(3),
            #stockAdviceTable:not(.cd-cards) thead th:nth-child(4),
            #stockAdviceTable:not(.cd-cards) tbody td:nth-child(4),
            #stockAdviceTable:not(.cd-cards) thead th:nth-child(5),
            #stockAdviceTable:not(.cd-cards) tbody td:nth-child(5) {
    display: none !important;
    }

    #stockAdviceTable:not(.cd-cards) td:nth-child(7),
            #stockAdviceTable:not(.cd-cards) th:nth-child(7) {
    max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .circle {
    height: 80px;
        width: 80px;
    }

    #circle-barcode-icon,
            #circle-box-icon {
    font-size: 32px;
        line-height: 77px;
    }

    .scannedItems-wrapper>span {
    padding: 2px 6px;
    }

    #stockCheckModal .modal-dialog {
    margin: 0.5rem;
    }

    #stockCheckModal .modal-header,
            #stockCheckModal .modal-body,
            #stockCheckModal .modal-footer {
    padding: 1rem;
    }

    #scanProductTitle {
    font-size: var(--ui-fs-lg);
    }

    .advice-counter-cards {
    gap: 0.375rem;
    }

    .advice-counter-card {
    padding: 0.75rem;
    }

    #stockAdviceTable:not(.cd-cards) thead th,
            #stockAdviceTable:not(.cd-cards) tbody td {
    padding: 6px 2px;
    }

    #stockCheckModal .btn-group {
    width: 100%;
    }

    #stockCheckModal .btn-group .btn {
    flex: 1;
    }
}

@media (max-width: 768px) {
    #stockAdviceTable thead th,
            #stockAdviceTable tbody td {
    padding: 0.5rem 0.375rem;
        white-space: nowrap;
        vertical-align: middle;
    }

    #stockAdviceTable img {
    max-width: 40px;
        max-height: 40px;
        width: auto;
        height: auto;
    }

    #stockAdviceTable thead th,
            #stockAdviceTable tbody td {
    padding: 8px 4px;
        white-space: nowrap;
    }

    #stockAdviceTable .dtr-hidden {
    display: none !important;
    }

    #stockAdviceTable_wrapper .dt-buttons {
    flex-wrap: wrap;
        gap: 0.5rem;
    }

    #stockAdviceTable_wrapper .dt-buttons .btn {
    flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
    }
}

@media (max-width: 400px) {
    #stockAdviceTable thead th,
            #stockAdviceTable tbody td {
    padding: 0.25rem 0.15rem;
    }

    #stockAdviceTable img {
    max-width: 30px;
        max-height: 30px;
    }

    #stockAdviceTable thead th:nth-child(8),
            #stockAdviceTable tbody td:nth-child(8),
            #stockAdviceTable thead th:nth-child(9),
            #stockAdviceTable tbody td:nth-child(9) {
    display: none !important;
    }
}

@media (max-width: 767px) {
    .advice-counter-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .advice-counter-card {
    max-width: none;
        min-height: 80px; /* Ensure consistent height for better touch targets */
    }

    #stockAdviceTable_wrapper .dt-buttons button:has(.bxs-download),
            #stockAdviceTable_wrapper .dt-buttons .dt-button:has(.bxs-download) {
    display: none !important;
    }

    #stockAdviceTable_wrapper .dt-buttons {
    flex-wrap: wrap;
        gap: 0.5rem;
    }

    #stockAdviceTable_wrapper .dt-buttons .dt-button {
    margin: 0 !important;
        flex: 1 1 auto;
        min-width: auto;
    }

    .stock-advice-filters {
    margin-bottom: 1rem;
    }

    .stock-advice-filters .row {
    margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .stock-advice-filters .row > * {
    padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .stock-advice-card {
    overflow: hidden; /* Prevent card overflow */
    }

    .stock-advice-card .card-body {
    padding: 0.75rem;
        overflow: visible;
    }

    .table-responsive {
    -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #stockAdviceTable tbody td {
    line-height: 1.4;
    }

    #stockAdviceTable td:last-child {
    white-space: nowrap;
    }
}

/* ---------- New order: order lines, total, section titles (FC + seller, root .new-order-page) ---------- */
.new-order-page .form-section-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.new-order-page .order-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-order-page .order-items-card {
    width: 100%;
}

.new-order-page .order-items-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.new-order-page .order-item-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: var(--ui-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.new-order-page .order-item-card:hover {
    box-shadow: var(--ui-shadow-hover);
}

.new-order-page .order-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.new-order-page .order-item-image-wrapper {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 50px;
    border: solid 0px;
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-surface);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.new-order-page .order-item-info {
    flex: 1;
    min-width: 0;
}

.new-order-page .order-item-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    margin-bottom: 0.375rem;
    line-height: 1.3;
    word-wrap: break-word;
}

.new-order-page .order-item-details {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

.new-order-page .order-item-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--ui-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    font-size: var(--ui-fs-xl);
    font-weight: 300;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;
}

.new-order-page .order-item-remove:hover {
    color: var(--ui-text);
}

.new-order-page .order-item-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

.new-order-page .order-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.new-order-page .order-item-quantity-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    font-weight: 500;
}

.new-order-page .order-item-quantity-input {
    min-width: 72px;
    width: auto;
    text-align: center;
}

.new-order-page .order-item-price {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
    margin-left: 0.75rem;
    white-space: nowrap;
}

.new-order-page .order-items-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--ui-border);
}

.new-order-page .order-total-card {
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-order-page .order-total-label {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-order-page .order-total-price {
    font-size: var(--ui-fs-kpi);
    font-weight: 700;
    color: var(--ui-text);
}

.new-order-page .error-message {
    color: var(--ui-danger);
    font-size: var(--ui-fs-base);
    margin-top: 0.5rem;
}

.new-order-page .order-item-price {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
}

@media (max-width: 768px) {
    .new-order-page .bulk-product-title {
    font-size: var(--ui-fs-md);
        line-height: 1.2;
    }

    .new-order-page .bulk-product-info {
    font-size: var(--ui-fs-xs);
        line-height: 1.1;
    }

    .new-order-page .order-item-image-wrapper {
    height: 45px;
        width: 45px;
    }

    .new-order-page .order-item-title {
    font-size: var(--ui-fs-base);
    }

    .new-order-page .order-item-details {
    font-size: var(--ui-fs-xs);
    }
}

@media (max-width: 576px) {
    .new-order-page .order-item-image-wrapper {
    height: 45px;
        width: 45px;
    }

    .new-order-page .order-item-title {
    font-size: var(--ui-fs-base);
    }

    .new-order-page .order-item-details {
    font-size: var(--ui-fs-xs);
    }

    .new-order-page .order-item-card {
    padding: 0.75rem;
    }

    .new-order-page .order-item-image-wrapper {
    height: 40px;
        width: 40px;
    }

    .new-order-page .order-item-price {
    font-size: var(--ui-fs-md);
    }

    .new-order-page .order-total-price {
    font-size: var(--ui-fs-xl);
    }
}

/* ---------- Returns: snippets, return tasks, new-return dialog lines (FC + seller, page root .ui-returns) ---------- */
#snippet-list {
    padding: 12px;
}

#snippet-list .snippet {
    width: 100%;
    min-height: 35px;
    background-color: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    box-shadow: 0px 1px 4px 0px rgb(var(--ui-white-rgb));
    padding: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.ui-returns .snippet-body {
    margin-top: 12px;
}

.ui-returns .snippet-footer {
    margin-top: 10px;
}

.ui-returns .snippet-info {
    display: flex;
    justify-content: space-between;
}

.ui-returns .snippet[data-snippet-id="new"]:not(.active) {
    opacity: 0.5;
}

.ui-returns .snippet.active {
    opacity: 1;
}

.ui-returns .sidebar-settings-title {
    padding-left: 12px;
    padding-right: 12px;
    font-size: var(--ui-fs-base);
    font-weight: 500;
}

#returnAttentionIcon {
    margin-right: 10px;
}

.ui-returns .fa-solid.fa-flag {
    color: var(--ui-danger);
}

.ui-returns .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    max-height: 150px;
    overflow-y: auto;
}

#newReturnOrderModal .manual-return-bulk-list.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

#newReturnOrderModal .order-item-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.875rem;
    transition: box-shadow 0.2s ease;
    box-shadow: var(--ui-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

#newReturnOrderModal .order-item-card:hover {
    box-shadow: var(--ui-shadow-hover);
}

#newReturnOrderModal .order-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

#newReturnOrderModal .order-item-image-wrapper {
    height: 50px;
    width: 50px;
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-surface);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

#newReturnOrderModal .order-item-info {
    flex: 1;
    min-width: 0;
}

#newReturnOrderModal .order-item-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    margin-bottom: 0.375rem;
    line-height: 1.3;
    word-wrap: break-word;
}

#newReturnOrderModal .order-item-details {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

#newReturnOrderModal .order-item-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--ui-muted);
    cursor: pointer;
    font-size: var(--ui-fs-xl);
    font-weight: 300;
    padding: 0;
    line-height: 1;
}

#newReturnOrderModal .order-item-remove:hover {
    color: var(--ui-text);
}

#newReturnOrderModal .order-item-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

#newReturnOrderModal .order-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#newReturnOrderModal .order-item-quantity-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    font-weight: 500;
}

#newReturnOrderModal .order-item-quantity-input {
    width: 55px;
    text-align: center;
}

#newReturnOrderModal .order-item-price {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-returns .return-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-returns .return-task-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
    border: 1px solid var(--ui-border);
    position: relative;
}

.ui-returns .return-task-item:hover {
    text-decoration: none;
    color: inherit;
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-returns .return-task-item:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-returns .return-task-item.overdue {
    border-left-color: var(--ui-danger);
}

.ui-returns .return-task-item.in_progress {
    border-left-color: var(--ui-primary);
}

.ui-returns .return-task-item.waiting {
    border-left-color: var(--ui-warning);
}

.ui-returns .return-task-item.open {
    border-left-color: var(--ui-muted);
}

.ui-returns .return-task-content {
    flex: 1;
    min-width: 0;
}

.ui-returns .return-task-title {
    font-weight: 500;
    font-size: var(--ui-fs-base);
    margin-bottom: 0.1rem;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme=dark] .ui-returns .return-task-title {
    color: var(--ui-text);
}

.ui-returns .return-task-description {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
    margin-bottom: 0.125rem;
    word-wrap: break-word;
    display: none;
    transition: all 0.2s ease;
}

.ui-returns .return-task-description.expanded {
    display: block;
}

.ui-returns .return-task-description-toggle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-primary);
    cursor: pointer;
    margin-bottom: 0.25rem;
    display: inline-block;
    text-decoration: none;
    top: -2px !important;
    position: relative;
}

.ui-returns .return-task-description-toggle:hover {
    text-decoration: underline;
    color: var(--ui-primary-hover);
}

body[data-theme=dark] .ui-returns .return-task-description-toggle {
    color: var(--ui-info);
}

body[data-theme=dark] .ui-returns .return-task-description-toggle:hover {
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-returns .return-task-description {
    color: var(--ui-faint);
}

.ui-returns .return-task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    flex-wrap: wrap;
}

body[data-theme=dark] .ui-returns .return-task-meta {
    color: var(--ui-faint);
}

.ui-returns .return-task-badge {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
}

body[data-theme=dark] .ui-returns .return-task-badge {
    color: var(--ui-faint);
}

.ui-returns .return-task-badge.overdue {
    color: var(--ui-danger);
    font-weight: 500;
}

.ui-returns .return-task-badge.category {
    color: var(--ui-muted);
}

body[data-theme=dark] .ui-returns .return-task-badge.category {
    color: var(--ui-faint);
}

.ui-returns .return-task-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-info-rgb), 0.08);
    color: var(--ui-info);
    margin-right: 0.625rem;
}

body[data-theme=dark] .ui-returns .return-task-icon {
    background: rgba(var(--ui-info-rgb), 0.2);
}

.ui-returns .return-task-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ui-returns .return-task-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    color: var(--ui-muted);
    opacity: 0.6;
}

body[data-theme=dark] .ui-returns .return-task-action-btn {
    background: var(--ui-subtle);
    color: var(--ui-faint);
}

.ui-returns .return-task-action-btn:hover {
    background: rgba(var(--ui-black-rgb), 0.05);
    color: var(--ui-body);
    opacity: 1;
}

body[data-theme=dark] .ui-returns .return-task-action-btn:hover {
    background: var(--ui-track);
    color: var(--ui-text);
}

.ui-returns .return-task-action-btn.return-task-complete-btn {
    color: var(--ui-success-text);
    background: transparent;
}

.ui-returns .return-task-action-btn.return-task-complete-btn:hover {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-returns .return-task-action-btn svg {
    width: 16px;
    height: 16px;
}

.ui-returns .return-task-status-dropdown {
    position: relative;
}

.ui-returns .return-task-status-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    box-shadow: var(--ui-shadow-hover);
    z-index: 1000;
    min-width: 140px;
    display: none;
    padding: 0.25rem 0;
}

body[data-theme=dark] .ui-returns .return-task-status-menu {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

.ui-returns .return-task-status-menu.show {
    display: block;
}

.ui-returns .return-task-status-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ui-returns .return-task-status-menu-item:hover {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .ui-returns .return-task-status-menu-item {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-returns .return-task-status-menu-item:hover {
    background-color: var(--ui-track);
}

@media (max-width: 768px) {
    .ui-returns .bulk-product-title {
    font-size: var(--ui-fs-md);
        line-height: 1.2;
    }

    .ui-returns .bulk-product-info {
    font-size: var(--ui-fs-xs);
        line-height: 1.1;
    }

    .ui-returns .small-product-image {
    width: 40px;
        height: 40px;
    }
}

/* ---------- Deliveries: action dialog, B2B FC presets, add-products dialog, QR, auto-select flash (FC + seller, page root .ui-deliveries) ---------- */
/* "Select all products" bar: as tall with the selection buttons as without, so ticking a line doesn't push the list down */
#inbound-bulk-actions-card .card-body > .d-flex {
    min-height: 32px;
}
/* Receive-line location field: wide enough for its placeholder, room kept for the clear ×, and no × while empty */
.delivery-location-input-wrap {
    flex-basis: 200px;
    width: 200px;
    max-width: 220px;
}
.delivery-location-input-wrap > .form-control {
    padding-right: 28px;
    text-overflow: ellipsis;
}
.delivery-location-input-wrap > .form-control:placeholder-shown + .delivery-location-clear {
    display: none;
}
#delivery_inbound_products_table td.details-control {
    cursor: pointer;
    vertical-align: middle;
    color: var(--ui-muted);
}

#delivery_inbound_products_table a.inbound-expand-hint {
    cursor: pointer;
}

.ui-deliveries .auto-selected {
    background-color: rgba(var(--ui-success-rgb), 0.3) !important;
    border-color: rgba(var(--ui-success-rgb), 0.6) !important;
    box-shadow: 0 0 8px rgba(var(--ui-success-rgb), 0.4) !important;
    transition: none;
}

.ui-deliveries .auto-selected.fade-out {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-deliveries .row-processing {
    opacity: 0.6;
    pointer-events: none;
}

.ui-deliveries .row-processing button.processing {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-deliveries .row-processing span.processing {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-deliveries .delivery-product-location-input {
    max-width: 200px;
    width: 100%;
    padding-right: 30px !important; /* Make room for the clear button */
}

.ui-deliveries .delivery-product-location-input.is-invalid {
    background-image: none !important;
    padding-right: 30px !important;
}

.ui-deliveries td > div[style*="width:200px"][style*="position:relative"],
.ui-deliveries td > div[style*="width:200px"][style*="position: relative"],
.ui-deliveries td > div[style*="position:relative"]:has(.delivery-product-location-input),
.ui-deliveries td > div[style*="position: relative"]:has(.delivery-product-location-input) {
    max-width: 200px !important;
    width: auto !important;
    display: inline-block;
}

.ui-deliveries .delivery-location-input-wrap {
    max-width: 200px !important;
}

.ui-deliveries span[onclick*="clearInput"] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
    pointer-events: auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

.ui-deliveries span[onclick*="clearInput"]:hover {
    color: var(--ui-body);
}

.ui-deliveries .delivery-actions-modal.modal-content {
    border: 1px solid var(--ui-border-strong);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal.modal-content {
    box-shadow: var(--ui-shadow-pop);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn {
    white-space: normal;
    text-align: left;
    border-radius: var(--ui-radius-xs);
    border-width: 1px;
    border-style: solid;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--primary {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--primary:hover,
.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--primary:focus {
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--primary:active {
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--primary .delivery-action-item__hint {
    color: color-mix(in srgb, var(--ui-on-primary) 88%, transparent) !important;
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:hover,
.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:focus {
    background-color: var(--ui-subtle);
    border-color: var(--ui-primary);
    color: var(--ui-text);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:active {
    background-color: var(--ui-subtle);
    border-color: var(--ui-primary);
    color: var(--ui-text);
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:hover,
body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:focus,
body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--secondary:active {
    background-color: var(--ui-track);
    border-color: var(--ui-primary);
    color: var(--ui-text);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger {
    background-color: var(--ui-surface);
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:hover,
.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:focus {
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger);
    color: var(--ui-danger-text);
}

.ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:active {
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger);
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger {
    background-color: var(--ui-surface);
    border-color: var(--ui-danger-soft);
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:hover,
body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:focus,
body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger:active {
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
    color: var(--ui-danger-tint);
}

.ui-deliveries .delivery-actions-modal .delivery-action-item__hint {
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    max-width: 100%;
    font-weight: 400;
    color: var(--ui-muted) !important;
}

body[data-theme=dark] .ui-deliveries .delivery-actions-modal .delivery-action-modal-btn--danger .delivery-action-item__hint {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent) !important;
}

#b2bOrderAddressModal .b2b-fc-presets-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#b2bOrderAddressModal .b2b-fc-presets-toggle:hover {
    border-color: var(--ui-primary);
}

#b2bOrderAddressModal .b2b-fc-presets-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-primary-line);
}

#b2bOrderAddressModal .b2b-fc-presets-toggle[aria-expanded="true"] {
    border-color: var(--ui-primary);
}

#b2bOrderAddressModal .b2b-fc-presets-chevron {
    flex-shrink: 0;
    color: var(--ui-muted);
    transition: transform 0.2s ease;
}

#b2bOrderAddressModal .b2b-fc-presets-toggle[aria-expanded="true"] .b2b-fc-presets-chevron {
    transform: rotate(180deg);
}

#b2bOrderAddressModal .b2b-fc-presets-heading {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

#b2bOrderAddressModal .b2b-fc-presets-hint {
    font-size: var(--ui-fs-xs);
    margin-top: 0.15rem;
}

#b2bOrderAddressModal .b2b-fc-preset {
    appearance: none;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#b2bOrderAddressModal .b2b-fc-preset:hover {
    border-color: var(--ui-primary);
    box-shadow: 0 0.125rem 0.75rem var(--ui-primary-tint);
}

#b2bOrderAddressModal .b2b-fc-preset:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-primary-line);
}

#b2bOrderAddressModal .b2b-fc-preset--active {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 1px var(--ui-primary-line);
}

#b2bOrderAddressModal .b2b-fc-preset__inner {
    display: block;
    padding: 0.7rem 0.85rem 0.65rem;
    border-radius: inherit;
}

#b2bOrderAddressModal .b2b-fc-preset[data-preset-type="FBA"] .b2b-fc-preset__inner {
    border-left: 3px solid var(--ui-warning);
    padding-left: calc(0.85rem - 3px);
}

#b2bOrderAddressModal .b2b-fc-preset[data-preset-type="LVB"] .b2b-fc-preset__inner {
    border-left: 3px solid var(--ui-series-1);
    padding-left: calc(0.85rem - 3px);
}

#b2bOrderAddressModal .b2b-fc-preset__top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

#b2bOrderAddressModal .b2b-fc-preset__type {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-xs);
    line-height: 1.2;
}

#b2bOrderAddressModal .b2b-fc-preset__type--fba {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

#b2bOrderAddressModal .b2b-fc-preset__type--lvb {
    background: rgba(var(--ui-info-rgb), 0.18);
    color: var(--ui-series-1);
}

#b2bOrderAddressModal .b2b-fc-preset__code {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#b2bOrderAddressModal .b2b-fc-preset__loc {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

.ui-deliveries .form-control-disabled {
    background-color: var(--ui-subtle) !important;
    color: var(--ui-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.ui-deliveries .form-control-disabled::placeholder {
    color: var(--ui-faint) !important;
}

#delivery_modal.modal {
    z-index: 1054 !important;
}

#delivery_modal .supplier-qr-card {
    border: 1px solid var(--ui-border) !important;
}

#delivery_modal .supplier-qr-thumb-wrap {
    flex-shrink: 0;
}

#delivery_modal .supplier-qr-thumb-wrap img.delivery_qrcode {
    width: 96px;
    height: 96px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    padding: 4px;
    background: var(--ui-surface);
    object-fit: contain;
}

#delivery_modal .supplier-qr-title {
    color: var(--ui-text);
}

/* Delivery modal: QR strip, both detail cards and the product list share one card style */
#delivery_modal .supplier-qr-card,
#delivery_modal .delivery-info-card {
    margin-bottom: var(--ui-space-4);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius);
    box-shadow: none !important;
    background: var(--ui-surface);
}

#delivery_modal .supplier-qr-card .card-body {
    padding: var(--ui-space-3) var(--ui-space-4) !important;
}

#delivery_modal .supplier-qr-card .supplier-qr-thumb-wrap img.delivery_qrcode {
    width: 76px;
    height: 76px;
}

#delivery_modal .supplier-qr-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: 2px !important;
    font-size: var(--ui-fs-md);
    font-weight: 600 !important;
}

#delivery_modal .supplier-qr-title i {
    margin-right: 0 !important;
}

/* Phones centre the QR block: the title's flex row has to centre too, or the icon sits at the far left */
@media (max-width: 575.98px) {
    #delivery_modal .supplier-qr-title {
        display: block;
        text-align: center;
    }

    #delivery_modal .supplier-qr-title i {
        margin-right: 6px !important;
    }
}

#delivery_modal .supplier-qr-description {
    max-width: 72ch;
    margin-bottom: var(--ui-space-2) !important;
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted) !important;
}

#delivery_modal .delivery-info-card .card-header {
    padding: var(--ui-space-4) var(--ui-space-5) 0;
    border: 0;
    background: transparent !important;
}

#delivery_modal .delivery-info-card .card-header h5 {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
}

#delivery_modal .delivery-info-card > .card-body {
    padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5);
}

#delivery_modal .delivery-meta {
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle);
}

#delivery_modal .delivery-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) 0;
    font-size: var(--ui-fs-base);
}

#delivery_modal .delivery-meta-row + .delivery-meta-row {
    border-top: 1px dashed var(--ui-border-strong);
}

#delivery_modal .delivery-meta-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#delivery_modal .delivery-meta-value {
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#delivery_modal .delivery-attachment-hint {
    display: block;
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    color: var(--ui-muted);
    cursor: pointer;
}

#delivery_modal #inbound-delivery-products-wrapper {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    padding: 0 var(--ui-space-3) var(--ui-space-2);
}

#delivery_modal #inbound-bulk-actions-card {
    margin: 0 calc(-1 * var(--ui-space-3)) var(--ui-space-3) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    box-shadow: none !important;
    background: var(--ui-subtle);
}

#delivery_modal #inbound-bulk-actions-card .card-body {
    padding: var(--ui-space-2) var(--ui-space-4) !important;
}

#delivery_modal #inbound-bulk-actions-card .form-check-label strong {
    font-weight: 600;
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

/* FC delivery modal: stacked field labels, status alert and the actions footer */
#delivery_modal .delivery-info-card .form-group > label:not(.btn):not(.delivery-attachment-hint) {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
}

#delivery_modal .delivery-info-card #deliveryAlert {
    margin-bottom: var(--ui-space-4);
    border: 0;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-fs-base);
}

#delivery_modal .delivery-info-card #deliveryAlert .alert-message {
    padding: var(--ui-space-3) var(--ui-space-4);
}

#delivery_modal .delivery-actions-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}

#divideProductModal .btn-close {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}

#divideProductModal .modal-footer .btn {
    width: 100%;
}

#add_delivery_product_modal .delivery-add-search-card .form-control,
#add_delivery_product_modal .delivery-add-search-card .form-label {
    color: var(--ui-text);
}

#add_delivery_product_modal .delivery-add-preview-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    border: 1px dashed var(--ui-border);
    background: var(--ui-surface);
}

#add_delivery_product_modal .delivery-add-preview-thumb img {
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#add_delivery_product_modal .delivery-add-line__thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

#add_delivery_product_modal .delivery-pending-scroll {
    max-height: 280px;
    overflow-y: auto;
}

#add_delivery_product_modal .delivery-pending-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.5rem 0.65rem;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.5rem;
    background: var(--ui-surface);
}

#add_delivery_product_modal .delivery-pending-row .delivery-pending-actions {
    flex-wrap: nowrap;
}

#add_delivery_product_modal .delivery-pending-row .delivery-pending-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-theme=dark] #add_delivery_product_modal .delivery-pending-row {
    background: rgba(var(--ui-ink-rgb), 0.6);
}

#add_delivery_product_modal .delivery-add-search-strip {
    gap: 0.75rem;
    width: 100%;
}

#add_delivery_product_modal .delivery-add-search-field-wrap .form-control {
    width: 100%;
}

/* Labels on their own line: inline-block labels sat in a taller line box, so "Product" floated 6px above "Amount" */
#add_delivery_product_modal .delivery-add-search-strip .form-label {
    display: block;
}

#add_delivery_product_modal .delivery-add-search-card {
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border) !important;
}

#add_delivery_product_modal .delivery-add-thumb-frame {
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    position: relative;
    overflow: hidden;
}

#add_delivery_product_modal .delivery-add-thumb-placeholder {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    background: linear-gradient(145deg, rgba(var(--ui-black-rgb), 0.03) 0%, rgba(var(--ui-black-rgb), 0.06) 100%);
}

body[data-theme=dark] #add_delivery_product_modal .delivery-add-thumb-placeholder {
    background: linear-gradient(145deg, rgba(var(--ui-white-rgb), 0.04) 0%, rgba(var(--ui-white-rgb), 0.08) 100%);
}

#add_delivery_product_modal .delivery-add-thumb-placeholder i {
    font-size: var(--ui-fs-kpi);
    opacity: 0.45;
}

#add_delivery_product_modal .delivery-add-preview-img:not(.d-none) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

#add_delivery_product_modal .delivery-add-line__thumb-wrap {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#add_delivery_product_modal .delivery-add-line__thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.2rem;
}

#add_delivery_product_modal .delivery-add-line__thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ui-muted);
    background: linear-gradient(145deg, rgba(var(--ui-black-rgb), 0.02) 0%, rgba(var(--ui-black-rgb), 0.05) 100%);
}

#add_delivery_product_modal .delivery-add-line__thumb-placeholder i {
    font-size: var(--ui-fs-lg);
    opacity: 0.5;
}

#add_delivery_product_modal .delivery-pending-row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.65rem 0.75rem;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #add_delivery_product_modal .delivery-pending-row {
    box-shadow: var(--ui-shadow-hover);
}

#add_delivery_product_modal .delivery-pending-list-heading {
    border-top: 1px solid var(--ui-border);
    padding-top: 0.9rem;
    margin-top: 0.15rem;
}

#add_delivery_product_modal .delivery-pending-empty {
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

#add_delivery_product_modal .delivery-pending-empty .delivery-pending-empty-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] #add_delivery_product_modal .delivery-pending-empty .delivery-pending-empty-icon {
    background: var(--ui-primary-line);
}

.ui-deliveries .productStockLevelInput,
.ui-deliveries input[id^="stockLevelInput"] {
    max-width: 100px;
}

@media (max-width: 767px) {
    #delivery_modal .modal-dialog {
    margin: 0;
        max-width: 100%;
        height: 100%;
    }

    #delivery_modal .modal-content {
    height: 100%;
        border: 0;
    }

    #delivery_modal .delivery-modal-panel {
    height: 100%;
        display: flex;
        flex-direction: column;
    }

    #delivery_modal .delivery-modal-panel .modal-body {
    flex: 1;
        overflow-y: auto;
    }
}

@media (max-width: 575.98px) {
    #delivery_modal .supplier-qr-thumb-wrap img.delivery_qrcode {
    width: 120px;
        height: 120px;
    }
}

@media (max-width: 767.98px) {
    #add_delivery_product_modal .delivery-add-search-card .card-body {
    overflow-x: visible;
    }

    #add_delivery_product_modal .delivery-add-search-strip {
    flex-direction: column;
        align-items: stretch;
    }

    #add_delivery_product_modal .delivery-add-thumb-wrap {
    width: 100%;
        display: flex;
        justify-content: center;
        order: 0;
        margin-bottom: 0.15rem;
    }

    #add_delivery_product_modal .delivery-add-search-field-wrap {
    order: 1;
        width: 100%;
        max-width: 100%;
    }

    #add_delivery_product_modal .delivery-add-amount-actions {
    order: 2;
        width: 100%;
        max-width: 100%;
    }

    #add_delivery_product_modal .delivery-add-preview-thumb {
    width: 72px;
        height: 72px;
    }

    #add_delivery_product_modal .delivery-add-preview-thumb img {
    max-width: 64px;
        max-height: 64px;
    }

    #add_delivery_product_modal .delivery-add-amount-field {
    flex: 1 1 0%;
        min-width: 0;
        max-width: 12rem;
    }

    #add_delivery_product_modal .delivery-add-amount-field .form-control {
    width: 100%;
    }

    #add_delivery_product_modal .delivery-add-queue-btn {
    padding-left: 0.65rem;
        padding-right: 0.65rem;
        min-width: 0;
    }

    #add_delivery_product_modal .delivery-add-queue-btn .fa-plus {
    margin-right: 0.35rem !important;
    }

    #add_delivery_product_modal .delivery-add-btn-wrap {
    min-width: 0;
        width: auto;
        flex: 0 0 auto;
    }

    #add_delivery_product_modal .delivery-add-thumb-frame {
    width: 4.75rem;
        height: 4.75rem;
    }
}

@media (min-width: 768px) {
    #add_delivery_product_modal .delivery-add-search-card .card-body {
    overflow-x: visible;
    }

    #add_delivery_product_modal .delivery-add-search-strip {
    flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        width: 100%;
        min-width: 0;
    }

    #add_delivery_product_modal .delivery-add-search-field-wrap {
    flex: 1 1 0%;
        min-width: 0;
        width: auto;
    }

    #add_delivery_product_modal .delivery-add-amount-actions {
    flex-shrink: 0;
        width: auto !important;
        max-width: none;
        flex-grow: 0;
    }

    #add_delivery_product_modal .delivery-add-amount-field {
    width: 5.25rem;
        flex: 0 0 auto;
    }

    #add_delivery_product_modal .delivery-add-btn-wrap {
    min-width: 7.5rem;
    }

    #add_delivery_product_modal .delivery-add-queue-btn {
    padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ---------- Stock sections: add-product dialog, import preview (FC + seller, page root .stock-sections-page) ---------- */
.stock-sections-page .cursor-pointer {
    cursor: pointer;
}

#addProductToStockLocationModal .modal-dialog {
    max-width: 680px;
}

#addProductToStockLocationModal .modal-header {
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#addProductToStockLocationModal .modal-body {
    padding: 1.25rem;
    background: var(--ui-surface);
}

#addProductToStockLocationModal .modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.stock-sections-page .add-stock-modal-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stock-sections-page .add-stock-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    flex: 0 0 auto;
}

.stock-sections-page .add-stock-modal-subtitle {
    margin-top: 0.1rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

.stock-sections-page .add-stock-field-card {
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.05);
    margin-bottom: 0;
}

.stock-sections-page .add-stock-field-card .card-body {
    padding: 1.25rem;
}

.stock-sections-page .add-stock-field-card--quantity .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stock-sections-page .add-stock-field-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--ui-text);
}

.stock-sections-page .add-stock-field-label i {
    color: var(--ui-primary);
}

#addProductToStockLocationModal .form-control,
#addProductToStockLocationModal .select2-container .select2-selection--single {
    min-height: 46px;
    border-radius: var(--ui-radius-xs);
}

#addProductToStockLocationModal .select2-container {
    width: 100% !important;
}

#addProductToStockLocationModal .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

#addProductToStockLocationModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--ui-text);
    line-height: 1.2;
    padding-left: 0.375rem;
    padding-right: 2rem;
    width: 100%;
}

#addProductToStockLocationModal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 0.4rem;
}

.stock-sections-page .add-stock-product-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.stock-sections-page .add-stock-product-option__image {
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius-xs);
    flex: 0 0 auto;
    background-color: var(--ui-subtle);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--ui-border);
}

.stock-sections-page .add-stock-product-option__image--selection {
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-xs);
    margin-left: -5px;
}

.stock-sections-page .add-stock-product-selection {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.stock-sections-page .add-stock-product-selection__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-sections-page .add-stock-product-option__body {
    min-width: 0;
    flex: 1 1 auto;
}

.stock-sections-page .add-stock-product-option__title {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-sections-page .add-stock-product-option__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.stock-sections-page .add-stock-product-option__chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.12rem 0.35rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#addProductToStockLocationModal .select2-results__option {
    padding: 0.55rem 0.75rem;
}

#addProductToStockLocationModal .select2-container--default .select2-results__option--highlighted[aria-selected] .add-stock-product-option__title,
#addProductToStockLocationModal .select2-container--default .select2-results__option--highlighted[aria-selected] .add-stock-product-option__meta,
#addProductToStockLocationModal .select2-container--default .select2-results__option--highlighted[aria-selected] .add-stock-product-option__chip {
    color: var(--ui-on-primary);
}

#addProductToStockLocationModal .select2-container--default .select2-results__option--highlighted[aria-selected] .add-stock-product-option__chip {
    background: rgba(var(--ui-white-rgb), 0.18);
}

#addProductToStockLocationModal .select2-container--default .select2-results__option--highlighted[aria-selected] .add-stock-product-option__image {
    border-color: rgba(var(--ui-white-rgb), 0.45);
}

body[data-theme=dark] .stock-sections-page .add-stock-product-option__image {
    background-color: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

.stock-sections-page .add-stock-helper {
    margin-top: 0.55rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs)!important;
    line-height: 1.35;
}

.stock-sections-page .add-stock-quantity-shell {
    max-width: 220px;
}

.stock-sections-page .add-stock-modal-footer-note {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

body[data-theme=dark] #addProductToStockLocationModal .modal-header {
    border-bottom-color: var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] #addProductToStockLocationModal .modal-body {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] #addProductToStockLocationModal .modal-footer,
body[data-theme=dark] .stock-sections-page .add-stock-field-card {
    border-color: var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

#stockImportPreviewModal .cd-pip-modal {
    border: 0;
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #stockImportPreviewModal .cd-pip-modal {
    box-shadow: var(--ui-shadow-pop);
}

#stockImportPreviewModal .cd-pip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#stockImportPreviewModal .cd-pip-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: 3.25rem;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    min-width: 5.75rem;
}

body[data-theme=dark] #stockImportPreviewModal .cd-pip-stat {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#stockImportPreviewModal .cd-pip-stat-value {
    font-weight: 600;
    font-size: var(--ui-fs-lg);
    line-height: 1.2;
    color: var(--ui-text);
}

#stockImportPreviewModal .cd-pip-stat-label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.3;
    max-width: 10rem;
}

#stockImportPreviewModal .cd-pip-stat--accent-success .cd-pip-stat-value {
    color: var(--ui-success);
}

#stockImportPreviewModal .cd-pip-stat--accent-danger .cd-pip-stat-value {
    color: var(--ui-danger);
}

#stockImportPreviewModal #stock-import-preview-table thead th {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--ui-border);
}

#stockImportPreviewModal .cd-pip-table-scroll {
    max-height: min(52vh, 460px);
}

#stockImportPreviewModal .cd-pip-table-outer {
    background: rgba(var(--ui-black-rgb), 0.028);
    border-color: rgba(var(--ui-black-rgb), 0.08) !important;
}

body[data-theme=dark] #stockImportPreviewModal .cd-pip-table-outer {
    background: var(--ui-subtle);
    border-color: var(--ui-border) !important;
}

#stockImportPreviewModal tbody tr.cd-pip-row {
    transition: background-color 0.15s ease;
}

#stockImportPreviewModal tbody tr.cd-pip-row:hover {
    background-color: var(--ui-row-hover);
}

#stockImportPreviewModal tr.cd-pip-row-error {
    background-color: rgba(var(--ui-danger-rgb), 0.045);
    box-shadow: inset 3px 0 0 0 rgba(var(--ui-danger-rgb), 0.75);
}

#stockImportPreviewModal .cd-pip-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    padding: 0.28rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
}

#stockImportPreviewModal .cd-pip-badge--success {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
    border: 1px solid var(--ui-success);
}

#stockImportPreviewModal .cd-pip-badge--danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    border: 1px solid var(--ui-danger-soft);
}

#stockImportPreviewModal .cd-pip-ellipsis {
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-theme=dark] #importExportModal .card[style*="border"] {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] #importExportModal .text-dark {
    color: var(--ui-text) !important;
}

body[data-theme=dark] #importExportModal .shadow-md {
    box-shadow: none !important;
}

body[data-theme=dark] .stock-sections-page .settingsNav {
    border-left: 1px solid var(--ui-border);
}

.stock-sections-page .font-size-32 {
    font-size: 2rem;
}

.stock-sections-page .shadow-md {
    box-shadow: var(--ui-shadow-hover) !important;
}

.stock-sections-page .table-hover tbody tr:hover {
    background-color: rgba(var(--ui-black-rgb), 0.02);
}

.stock-sections-page .table-light {
    background-color: var(--ui-subtle);
}

.stock-sections-page .text-muted.small {
    font-size: var(--ui-fs-base);
}

.stock-sections-page .form-select {
    border-color: var(--ui-border);
}

.stock-sections-page .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line);
}

#addProductToStockLocationModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.08);
}

.stock-sections-page .add-stock-field-card {
    border: 0;
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.05);
    margin-bottom: 0;
}

#addProductToStockLocationModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--ui-text);
    line-height: 1.2;
    /* Tighter inset so the thumbnail aligns with normal form-control text (global Select2 uses ~12px here) */
    padding-left: 0.375rem;
    padding-right: 2rem;
    width: 100%;
}

body[data-theme=dark] #addProductToStockLocationModal .modal-header {
    border-bottom-color: var(--ui-border);
}

#sections_import_table_wrapper.ai-detecting,
#locations_import_table_wrapper.ai-detecting {
    opacity: 0.72;
    pointer-events: none;
}

@media (max-width: 767px) {
    #addProductToStockLocationModal .modal-body,
    #addProductToStockLocationModal .modal-header,
    #addProductToStockLocationModal .modal-footer {
    padding: 1rem;
    }

    #addProductToStockLocationModal .modal-footer {
    align-items: stretch;
        flex-direction: column-reverse;
    }

    #addProductToStockLocationModal .modal-footer .btn {
    width: 100%;
    }

    .stock-sections-page .card-body.p-2 {
    padding: 0.75rem 0.5rem !important;
    }
}

/* ---------- Subscription: plan modules, AI credits and top-up, cards, PIM activation (FC + seller, page root .ui-subscription) ---------- */
.ui-subscription .subscription-modules {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

.ui-subscription .module-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
}

.ui-subscription .module-item:last-child {
    border-bottom: 0;
}

.ui-subscription .module-item:hover {
    background: rgba(var(--ui-muted-rgb), 0.04);
}

.ui-subscription .module-item-icon {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--ui-muted);
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
}

.ui-subscription .module-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ui-subscription .module-item-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    cursor: pointer;
}

.ui-subscription .module-item-desc {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
}

.ui-subscription .module-item-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ui-subscription .module-item-included {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0;
}

.ui-subscription .module-item-plan .badge {
    background: transparent !important;
    color: var(--ui-muted) !important;
    border: 0 !important;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0;
}

.ui-subscription .module-item-plan .btn {
    border-radius: var(--ui-radius-xs);
    font-weight: 500;
}

.ui-subscription .module-item-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

body[data-theme=dark] .ui-subscription .subscription-modules,
body[data-theme=dark] .ui-subscription .module-item {
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-subscription .module-item:hover {
    background: var(--ui-subtle);
}

.ui-subscription .subscription-ai-credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border);
}

.ui-subscription .subscription-ai-credits__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12rem;
}

.ui-subscription .subscription-ai-credits__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-subscription .subscription-ai-credits__label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-subscription .subscription-ai-credits__balance {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-primary);
}

.ui-subscription .subscription-ai-credits__note {
    margin-top: 0.1rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.35;
    color: var(--ui-muted);
}

.ui-subscription .subscription-ai-credits__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.6rem;
}

.ui-subscription .ai-topup-modal {
    max-width: 26rem;
}

.ui-subscription .ai-topup-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(var(--ui-ink-rgb), 0.18);
}

.ui-subscription .ai-topup-modal__close {
    position: absolute; top: 1rem; right: 1rem; z-index: 1;
}

.ui-subscription .ai-topup-modal__hero {
    padding: 2rem 1.75rem 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.12) 0%, rgba(var(--ui-primary-rgb), 0) 100%);
}

.ui-subscription .ai-topup-modal__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-kpi);
    color: var(--ui-on-primary);
    background: linear-gradient(135deg, var(--ui-primary), rgba(var(--ui-primary-rgb), 0.7));
    box-shadow: 0 0.5rem 1.25rem rgba(var(--ui-primary-rgb), 0.35);
}

.ui-subscription .ai-topup-modal__title {
    font-weight: 700; margin-bottom: 0.35rem;
}

.ui-subscription .ai-topup-modal__subtitle {
    margin: 0; font-size: var(--ui-fs-base); color: var(--ui-muted);
}

.ui-subscription .ai-topup-modal__body {
    padding: 0 1.75rem 1.75rem;
}

.ui-subscription .ai-topup-modal__summary {
    border-radius: var(--ui-radius);
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(var(--ui-primary-rgb), 0.05);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
}

.ui-subscription .ai-topup-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
}

.ui-subscription .ai-topup-modal__row + .ai-topup-modal__row {
    border-top: 1px dashed rgba(var(--ui-primary-rgb), 0.18);
}

.ui-subscription .ai-topup-modal__row b {
    font-size: var(--ui-fs-lg);
}

.ui-subscription .ai-topup-modal__row--bonus {
    color: var(--ui-success);
}

.ui-subscription .ai-topup-modal__actions {
    display: flex; gap: 0.75rem;
}

.ui-subscription .ai-topup-modal__btn {
    flex: 1 1 0; border-radius: var(--ui-radius); padding: 0.65rem 1rem; font-weight: 600;
}

body[data-theme=dark] .ui-subscription .ai-topup-modal .modal-content {
    box-shadow: var(--ui-shadow-pop);
}

.ui-subscription .ai-topup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 11.5rem;
    padding: 0.7rem 0.9rem 0.75rem;
    text-align: left;
    line-height: 1.3;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-muted-rgb), 0.06);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ui-subscription .ai-topup-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--ui-primary-rgb), 0.5);
    box-shadow: var(--ui-shadow);
}

.ui-subscription .ai-topup-card:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ui-subscription .ai-topup-card--featured {
    border-color: var(--ui-success);
    background: rgba(var(--ui-success-rgb), 0.06);
}

.ui-subscription .ai-topup-card__badge {
    position: absolute;
    top: 0;
    right: 0.8rem;
    transform: translateY(-50%);
    padding: 0.1rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-success);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.ui-subscription .ai-topup-card__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-subscription .ai-topup-card__pay {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ui-text);
}

.ui-subscription .ai-topup-card__get {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-subscription .ai-topup-card__get b {
    font-weight: 600;
    color: var(--ui-success);
}

.ui-subscription .ai-topup-card__bonus {
    margin-top: auto;
    padding: 0.1rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-success-rgb), 0.12);
    color: var(--ui-success);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.ui-subscription .ai-topup-card__bonus-wrap {
    margin-top: 0.4rem;
    min-height: 1.2rem;
}

body[data-theme=dark] .ui-subscription .subscription-ai-credits {
    border-top-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-subscription .subscription-ai-credits__actions,
body[data-theme=dark] .ui-subscription .ai-topup-card {
    border-color: var(--ui-border-strong);
}

.ui-subscription .cc-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.ui-subscription .subscription-empty.empty-state-container {
    width: 100%;
    min-height: 0;
    padding: 1.5rem 1rem 0.75rem;
}

.ui-subscription .subscription-empty .empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
}

.ui-subscription .subscription-empty .empty-state-icon i {
    font-size: var(--ui-fs-xl);
}

.ui-subscription .subscription-empty .empty-state-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ui-subscription .subscription-empty .empty-state-message {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0;
}

.ui-subscription .cc-card {
    position: relative;
    width: 350px;
    max-width: 100%;
    min-height: 210px;
    aspect-ratio: 1.586 / 1;
    border-radius: var(--ui-radius);
    padding: 22px 24px;
    color: var(--ui-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ui-subscription .cc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-pop);
}

.ui-subscription .cc-card--directdebit {
    background: linear-gradient(135deg, rgb(var(--ui-ink-rgb)) 0%, rgb(var(--ui-ink-rgb)) 45%, rgb(var(--ui-ink-rgb)) 100%);
}

.ui-subscription .cc-card--creditcard {
    background: linear-gradient(135deg, rgb(var(--ui-ink-rgb)) 0%, var(--ui-series-6) 100%);
}

.ui-subscription .cc-card-shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 82% -12%, rgba(var(--ui-white-rgb), 0.2), transparent 46%);
}

.ui-subscription .cc-card > *:not(.cc-card-shine):not(.cc-card-delete) {
    position: relative;
    z-index: 1;
}

.ui-subscription .cc-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ui-subscription .cc-card-chip {
    width: 46px;
    height: 34px;
    border-radius: var(--ui-radius-xs);
    background: linear-gradient(135deg, var(--ui-warning) 0%, var(--ui-warning) 50%, var(--ui-warning) 100%);
    box-shadow: inset 0 0 2px rgba(var(--ui-black-rgb), 0.45);
    position: relative;
    flex: 0 0 auto;
}

.ui-subscription .cc-card-chip::before,
.ui-subscription .cc-card-chip::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    height: 1px;
    background: rgba(var(--ui-black-rgb), 0.35);
}

.ui-subscription .cc-card-chip::before {
    top: 12px;
}

.ui-subscription .cc-card-chip::after {
    top: 22px;
}

.ui-subscription .cc-card-wifi {
    font-size: var(--ui-fs-lg);
    opacity: 0.85;
    transform: rotate(90deg);
}

.ui-subscription .cc-card-number {
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.3;
    white-space: nowrap;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
    text-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.3);
}

.ui-subscription .cc-card--directdebit .cc-card-number {
    font-size: var(--ui-fs-lg);
    letter-spacing: 1px;
}

.ui-subscription .cc-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ui-subscription .cc-card-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-subscription .cc-card-field--right {
    text-align: right;
}

.ui-subscription .cc-card-label {
    font-size: var(--ui-fs-2xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.65;
    margin-bottom: 2px;
}

.ui-subscription .cc-card-value {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-subscription .cc-card-field--right .cc-card-value {
    max-width: 120px;
}

.ui-subscription .cc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ui-subscription .cc-card-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    opacity: 0.95;
    min-width: 0;
}

.ui-subscription .cc-card-brand i {
    font-size: var(--ui-fs-lg);
}

.ui-subscription .cc-card-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-subscription .cc-card-status {
    flex: 0 0 auto;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: var(--ui-radius-pill);
}

.ui-subscription .cc-card-status--active {
    background: var(--ui-success-tint);
    color: var(--ui-success);
    border: 1px solid rgba(var(--ui-success-rgb), 0.5);
}

.ui-subscription .cc-card-status--pending {
    background: var(--ui-warning-tint);
    color: var(--ui-warning);
    border: 1px solid rgba(var(--ui-warning-rgb), 0.5);
}

.ui-subscription .cc-card-status--invalid {
    background: var(--ui-danger-tint);
    color: var(--ui-warning);
    border: 1px solid rgba(var(--ui-danger-rgb), 0.5);
}

.ui-subscription .cc-card-delete {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: color-mix(in srgb, var(--ui-on-primary) 85%, transparent);
    font-size: var(--ui-fs-sm);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ui-subscription .cc-card:hover .cc-card-delete {
    opacity: 1; transform: scale(1);
}

.ui-subscription .cc-card-delete:hover {
    background: rgba(var(--ui-danger-rgb), 0.92); color: var(--ui-on-primary);
}

.ui-subscription .cc-card-delete--disabled {
    cursor: not-allowed;
}

.ui-subscription .cc-card:hover .cc-card-delete--disabled {
    opacity: 0.45;
}

.ui-subscription .yearly-order-credit {
    max-width: 280px;
}

.ui-subscription .yearly-order-credit-figures {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ui-subscription .yearly-order-credit-used {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ui-subscription .yearly-order-credit-limit {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

.ui-subscription .yearly-order-credit-bar {
    height: 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
}

.ui-subscription .yearly-order-credit-bar .progress-bar {
    border-radius: var(--ui-radius-pill);
    transition: width 0.6s ease;
}

body[data-theme=dark] .ui-subscription .yearly-order-credit-bar {
    background: var(--ui-track);
}

.ui-subscription .yearly-order-credit-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

.ui-subscription .yearly-order-credit-note--over {
    color: var(--ui-danger);
}

.ui-subscription .yearly-order-credit-note--ok {
    color: var(--ui-muted);
}

.ui-subscription .bg-success-subtle {
    background: rgba(var(--ui-success-rgb), 0.12) !important;
}

.ui-subscription .text-success {
    color: var(--ui-success-text) !important;
}

.ui-subscription .border-success-subtle {
    border-color: rgba(var(--ui-success-rgb), 0.25) !important;
}

.ui-subscription .bg-danger-subtle {
    background: rgba(var(--ui-danger-rgb), 0.12) !important;
}

.ui-subscription .text-danger {
    color: var(--ui-danger) !important;
}

.ui-subscription .border-danger-subtle {
    border-color: rgba(var(--ui-danger-rgb), 0.25) !important;
}

.ui-subscription .list-group-item {
    border: 0; border-bottom: 1px solid var(--ui-border);
}

.ui-subscription .list-group-item:last-child {
    border-bottom: 0;
}

.ui-subscription .bg-warning-subtle {
    background: rgba(var(--ui-warning-rgb), 0.12) !important;
}

.ui-subscription .border-warning-subtle {
    border-color: rgba(var(--ui-warning-rgb), 0.35) !important;
}

.ui-subscription .border-primary-subtle {
    border-color: var(--ui-primary-line) !important;
}

.ui-subscription .bg-light-subtle {
    background: rgba(var(--ui-black-rgb), 0.03) !important;
}

#pimActivationModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

#pimActivationModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#pimActivationModal .modal-title {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#pimActivationModal .modal-title i {
    display: none;
}

#pimActivationModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#pimActivationModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
    line-height: 1.4;
}

#pimActivationModal .modal-footer {
    border-top: 0 !important;
    background: transparent;
    padding: 0.5rem 1.35rem 1.2rem;
    align-items: stretch;
}

#pimActivationModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
}

#pimActivationModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#pimActivationModal .pricing-section {
    padding: 1rem 0;
}

#pimActivationModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

#pimActivationModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
    margin-bottom: 0.65rem;
}

#pimActivationModal .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#pimActivationModal .pricing-field-hint.pim-term-hint {
    margin-top: -0.25rem;
    margin-bottom: 1.25rem;
}

#pimActivationModal .pim-term-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#pimActivationModal .pim-term-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.8rem 0.85rem;
    min-height: 64px;
    cursor: pointer;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-text);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

#pimActivationModal .pim-term-option:hover {
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#pimActivationModal .pim-term-option--selected {
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.06), 0 0 0 2px rgba(var(--ui-primary-rgb), 0.55);
}

#pimActivationModal .pim-term-option:focus-within {
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.16), 0 0 0 2px rgba(var(--ui-primary-rgb), 0.7);
}

#pimActivationModal .pim-term-option__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ui-text-rgb), 0.32);
    position: relative;
}

#pimActivationModal .pim-term-option--selected .pim-term-option__radio {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
}

#pimActivationModal .pim-term-option--selected .pim-term-option__radio::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 6px;
    width: 5px;
    height: 8px;
    border: solid var(--ui-surface);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

#pimActivationModal .pim-term-option__copy {
    min-width: 0;
    flex: 1 1 auto;
}

#pimActivationModal .pim-term-option__title {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

#pimActivationModal .pim-term-option__meta {
    display: block;
    margin-top: 0.15rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#pimActivationModal .pim-term-option__aside {
    text-align: right;
    flex-shrink: 0;
}

#pimActivationModal .pim-term-option__save {
    display: block;
    color: var(--ui-success-text);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.1rem;
}

#pimActivationModal .pim-term-option__price {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

#pimActivationModal .pim-term-option__unit {
    display: block;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#pimActivationModal .pim-due-box {
    background: rgba(var(--ui-muted-rgb), 0.12);
    border-radius: var(--ui-radius-md);
    padding: 0.85rem;
}

#pimActivationModal .pim-due-box__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    letter-spacing: -0.03em;
}

#pimActivationModal .pim-due-box__row--secondary {
    margin-top: 0.2rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
}

#pimActivationModal .pim-due-box__hint {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

#pimActivationModal .pricing-field-hint {
    margin-top: 0.55rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    color: var(--ui-muted);
}

body[data-theme=dark] #pimActivationModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

body[data-theme=dark] #pimActivationModal .pim-term-option__radio {
    border-color: rgba(var(--ui-text-rgb), 0.35);
}

body[data-theme=dark] #pimActivationModal .pim-term-option--selected {
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.28), 0 0 0 2px rgba(var(--ui-primary-rgb), 0.7);
}

body[data-theme=dark] #pimActivationModal .pim-term-option__save {
    color: var(--ui-success);
}

.ui-subscription .subscription-ai-credits__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ui-subscription .cc-card {
    position: relative;
    width: 350px;
    max-width: 100%;
    min-height: 210px;
    aspect-ratio: 1.586 / 1;
    border-radius: var(--ui-radius);
    padding: 22px 24px;
    color: var(--ui-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, var(--ui-series-6) 0%, rgb(var(--ui-ink-rgb)) 100%);
    box-shadow: var(--ui-shadow-pop);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ui-subscription .cc-card-number {
    font-size: var(--ui-fs-xl);
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.3;
    white-space: nowrap;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
    text-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.3);
}

.ui-subscription .cc-card-delete {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(var(--ui-black-rgb), 0.28);
    color: color-mix(in srgb, var(--ui-on-primary) 85%, transparent);
    font-size: var(--ui-fs-sm);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

@media (min-width: 992px) {
    .ui-subscription .subscription-ai-credits {
    flex-wrap: nowrap;
    }
}

@media (max-width: 575.98px) {
    .ui-subscription .ai-topup-card {
    width: 100%;
    }

    .ui-subscription .module-item {
    flex-wrap: wrap;
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .ui-subscription .module-item-info {
    flex: 1 1 calc(100% - 2.9rem);
    }

    .ui-subscription .module-item-meta,
    .ui-subscription .module-item-toggle {
    margin-left: 2.9rem;
    }

    .ui-subscription .module-item-meta:empty {
    display: none;
    }

    .ui-subscription .cc-card {
    width: 100%;
    }

    .ui-subscription .cc-card-delete {
    opacity: 1; transform: scale(1);
    }

    .ui-subscription .cc-card-number {
    font-size: var(--ui-fs-xl);
    }
}

@media (max-width: 767.98px) {
    #pimActivationModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

/* ---------- Products: inventory locations, charts, seasonality, bulk dialogs, import preview, open orders (FC + seller, page root .ui-products) ---------- */
#bulk-actions-count {
    font-size: var(--ui-fs-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    font-weight: 500;
    min-width: 1.5rem;
    text-align: center;
    display: inline-block;
}

#product-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-height: auto;
}

#product-tags-wrapper .tag-buttons-inner-wrapper {
    max-width: 100%;
    margin-left: 0;
}

#product-tags-wrapper .product-tag-selector {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

.ui-products .filter-section .btn-group {
    display: flex;
    width: 100%;
}

/* Segment labels ("Aankoop (€)") stay on one line; segments share the width by their text length */
.ui-products .filter-section .btn-group > .btn {
    flex: 1 1 auto;
    white-space: nowrap;
}

#bulkTagModal .modal-dialog {
    max-width: 600px;
}

#bulkTagModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkTagModal .modal-body {
    padding: 1.5rem;
}

#bulkTagModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkTagModal .select2-container {
    width: 100% !important;
}

#createNewTagSection .card {
    border-color: var(--ui-primary) !important;
}

body[data-theme=dark] #bulkTagModal .card {
    border-color: var(--ui-primary) !important;
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

#importModal .modal-content {
    border: 0;
    overflow: hidden;
}

#importModal .modal-header {
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--ui-border);
}

#importModal .modal-body {
    padding: 1.25rem;
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
}

#importModal .cd-import-tabs {
    gap: 0.5rem;
    border: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.75rem;
}

#importModal .cd-import-tabs .nav-item {
    flex: 0 0 auto;
}

#importModal .cd-import-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--ui-border);
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#importModal .cd-import-tabs .nav-link:hover {
    transform: translateY(-1px);
    border-color: var(--ui-primary-line);
    box-shadow: var(--ui-shadow);
}

#importModal .cd-import-tabs .nav-link.active {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0.18rem 0.55rem var(--ui-primary-soft);
}

#importModal .cd-import-panel {
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow: var(--ui-shadow);
}

#importModal .cd-import-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

#importModal .cd-import-panel-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--ui-text);
}

#importModal .cd-import-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    flex: 0 0 auto;
}

#importModal .cd-import-panel-copy {
    color: var(--ui-muted);
    line-height: 1.55;
    margin-bottom: 0;
}

#importModal .cd-import-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.45rem 0.65rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    font-weight: 500;
    white-space: nowrap;
}

#importModal .cd-import-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1rem 0;
}

#importModal .cd-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

#importModal .cd-import-chip-warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

#importModal .cd-import-upload-card {
    margin: 0;
}

#importModal .cd-import-file-input {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

#importModal .cd-import-upload-target {
    width: 100%;
    min-height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(135deg, var(--ui-row-hover), var(--ui-success-tint));
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#importModal .cd-import-upload-target:hover {
    border-color: var(--ui-primary);
    transform: translateY(-1px);
}

#importModal .cd-import-upload-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    flex: 0 0 auto;
    font-size: var(--ui-fs-lg);
}

#importModal .cd-import-upload-title {
    display: block;
    font-weight: 500;
    color: var(--ui-text);
}

#importModal .cd-import-upload-subtitle {
    display: block;
    margin-top: 0.2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

body[data-theme=dark] #importModal .cd-import-tabs .nav-link,
body[data-theme=dark] #importModal .cd-import-panel {
    border-color: var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] #importModal .cd-import-upload-target {
    border-color: var(--ui-primary-line);
    background: linear-gradient(135deg, var(--ui-primary-tint), var(--ui-success-tint));
}

#productImportPreviewModal .cd-pip-modal {
    border: 0;
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-modal {
    box-shadow: var(--ui-shadow-pop);
}

#productImportPreviewModal .cd-pip-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#productImportPreviewModal .cd-pip-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: 3.25rem;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    min-width: 5.75rem;
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-stat {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#productImportPreviewModal .cd-pip-stat-value {
    font-weight: 600;
    font-size: var(--ui-fs-lg);
    line-height: 1.2;
    color: var(--ui-text);
}

#productImportPreviewModal .cd-pip-stat-label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.3;
    max-width: 10rem;
}

#productImportPreviewModal .cd-pip-stat--accent-success .cd-pip-stat-value {
    color: var(--ui-success);
}

#productImportPreviewModal .cd-pip-stat--accent-warning .cd-pip-stat-value {
    color: var(--ui-warning);
}

#productImportPreviewModal .cd-pip-stat--accent-info .cd-pip-stat-value {
    color: var(--ui-info);
}

#productImportPreviewModal .cd-pip-stat--accent-danger .cd-pip-stat-value {
    color: var(--ui-danger);
}

#productImportPreviewModal .cd-pip-legend {
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-primary-tint);
    background: var(--ui-row-hover);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-legend {
    border-color: var(--ui-primary-line);
    background: var(--ui-primary-tint);
}

#productImportPreviewModal .cd-pip-legend-title {
    font-weight: 500;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    margin-bottom: 0.5rem;
}

#productImportPreviewModal .cd-pip-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#productImportPreviewModal .cd-pip-legend-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    line-height: 1.45;
}

#productImportPreviewModal .cd-pip-legend-dot {
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    margin-top: 0.38rem;
}

#productImportPreviewModal .cd-pip-legend-dot--success {
    background: var(--ui-success);
}

#productImportPreviewModal .cd-pip-legend-dot--warning {
    background: var(--ui-warning);
}

#productImportPreviewModal .cd-pip-legend-dot--info {
    background: var(--ui-info);
}

#productImportPreviewModal .cd-pip-legend-dot--secondary {
    background: var(--ui-muted);
}

#productImportPreviewModal .cd-pip-legend-dot--danger {
    background: var(--ui-danger);
}

#productImportPreviewModal .cd-pip-table-scroll {
    max-height: min(52vh, 460px);
}

#productImportPreviewModal .cd-pip-table-outer {
    background: rgba(var(--ui-black-rgb), 0.028);
    border-color: rgba(var(--ui-black-rgb), 0.08) !important;
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-table-outer {
    background: var(--ui-subtle);
    border-color: var(--ui-border) !important;
}

#productImportPreviewModal #product-import-preview-table thead th {
    border-bottom-width: 1px;
    white-space: nowrap;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

#productImportPreviewModal #product-import-preview-table tbody td {
    font-size: var(--ui-fs-sm);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    vertical-align: middle;
}

#productImportPreviewModal .cd-pip-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    padding: 0.28rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
}

#productImportPreviewModal .cd-pip-badge i {
    font-size: var(--ui-fs-xs);
}

#productImportPreviewModal .cd-pip-badge--success {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
    border: 1px solid var(--ui-success);
}

#productImportPreviewModal .cd-pip-badge--warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
    border: 1px solid var(--ui-warning);
}

#productImportPreviewModal .cd-pip-badge--info {
    background: rgba(var(--ui-info-rgb), 0.12);
    color: var(--ui-info-text);
    border: 1px solid rgba(var(--ui-info-rgb), 0.28);
}

#productImportPreviewModal .cd-pip-badge--danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    border: 1px solid var(--ui-danger-soft);
}

#productImportPreviewModal .cd-pip-badge--muted {
    background: var(--ui-neutral-tint);
    color: var(--ui-muted);
    border: 1px solid rgba(var(--ui-muted-rgb), 0.22);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-badge--success {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
    border-color: var(--ui-success);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-badge--warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
    border-color: var(--ui-warning);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-badge--info {
    background: rgba(var(--ui-info-rgb), 0.16);
    color: var(--ui-info-text);
    border-color: rgba(var(--ui-info-rgb), 0.35);
}

body[data-theme=dark] #productImportPreviewModal .cd-pip-badge--danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-soft);
}

#productImportPreviewModal tbody tr.cd-pip-row {
    transition: background-color 0.15s ease;
}

#productImportPreviewModal tbody tr.cd-pip-row:hover {
    background-color: var(--ui-row-hover);
}

body[data-theme=dark] #productImportPreviewModal tbody tr.cd-pip-row:hover {
    background-color: var(--ui-subtle);
}

#productImportPreviewModal tbody tr.cd-pip-row-error:hover {
    background-color: var(--ui-danger-tint);
}

#productImportPreviewModal tr.cd-pip-row-error {
    background-color: rgba(var(--ui-danger-rgb), 0.045);
    box-shadow: inset 3px 0 0 0 rgba(var(--ui-danger-rgb), 0.75);
}

body[data-theme=dark] #productImportPreviewModal tr.cd-pip-row-error {
    background-color: var(--ui-danger-tint);
    box-shadow: inset 3px 0 0 0 rgba(var(--ui-warning-rgb), 0.85);
}

#productImportPreviewModal tr.cd-pip-row-warn {
    background-color: var(--ui-warning-tint);
    box-shadow: inset 3px 0 0 0 rgba(var(--ui-warning-rgb), 0.65);
}

#productImportPreviewModal tr.cd-pip-row-info {
    background-color: rgba(var(--ui-info-rgb), 0.06);
    box-shadow: inset 3px 0 0 0 rgba(var(--ui-info-rgb), 0.55);
}

body[data-theme=dark] #productImportPreviewModal tr.cd-pip-row-info {
    background-color: rgba(var(--ui-info-rgb), 0.1);
}

#productImportPreviewModal .cd-pip-cell-muted {
    color: var(--ui-muted);
}

#productImportPreviewModal .cd-pip-ellipsis {
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-products .range-filter-container,
.ui-products .code-filter-container {
    margin-top: 0.75rem;
}

#productOpenOrdersTable .channel-logo {
    max-width: 90px;
    max-height: 40px;
    background-color: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    padding: 5px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

body[data-theme=dark] #productOpenOrdersTable .channel-logo {
    background-color: var(--ui-track);
}

#productOpenOrdersTable tbody tr:hover {
    background-color: var(--ui-row-hover);
}

body[data-theme=dark] #productOpenOrdersTable tbody tr:hover {
    background-color: var(--ui-subtle);
}

#productOpenOrdersTable tbody td {
    vertical-align: middle;
}

#productOpenOrdersTable .badge {
    font-size: var(--ui-fs-xs);
    padding: 0.35em 0.65em;
}

#productOpenOrdersTable a.text-primary {
    font-weight: 500;
    text-decoration: none;
}

#productOpenOrdersTable a.text-primary:hover {
    text-decoration: underline;
}

#productOpenOrdersTable .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--ui-fs-xs);
    min-width: auto;
}

#productOpenOrdersTable .dropdown {
    display: inline-block;
}

#productOpenOrdersTable .dropdown-toggle {
    padding: 0.25rem 0.5rem;
}

#productOpenOrdersTable .dropdown-toggle::after {
    display: none;
}

#productOpenOrdersTable .dropdown-menu {
    min-width: 180px;
}

#productOpenOrdersTable .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

#productOpenOrdersTable .dropdown-item i {
    width: 16px;
    text-align: center;
}

#productOpenOrdersTable .dropdown-item:hover {
    background-color: var(--ui-primary-tint);
    color: var(--ui-text);
}

body[data-theme=dark] #productOpenOrdersTable .dropdown-item:hover {
    background-color: var(--ui-track);
}

#orderStatusFilter {
    width: auto !important;
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2rem 1.5rem 0.2rem 0.4rem;
    font-size: var(--ui-fs-xs);
    height: auto;
    min-width: 100px;
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] #orderStatusFilter {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

#productSettingsAccordion {
    --bs-accordion-border-color: var(--ui-border);
    --bs-accordion-border-radius: var(--ui-radius-sm);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
}

#productSettingsAccordion .accordion-item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

#productSettingsAccordion .accordion-button {
    font-weight: 500;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: none;
}

#productSettingsAccordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

#productSettingsAccordion .accordion-button i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

#productSettingsAccordion .accordion-body {
    padding: 1.5rem 1.25rem;
}

body[data-theme=dark] #productSettingsAccordion .accordion-button {
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] #productSettingsAccordion .accordion-body {
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

.ui-products .bulk-assign-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ui-products .bulk-assign-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-text);
}

.ui-products .bulk-assign-stat .bulk-assign-stat-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ui-products .bulk-assign-stat-count {
    font-weight: 600;
}

.ui-products .bulk-assign-stat--create .bulk-assign-stat-dot {
    background: var(--ui-success);
}

.ui-products .bulk-assign-stat--linked .bulk-assign-stat-dot {
    background: var(--ui-muted);
}

.ui-products .bulk-assign-stat--missing .bulk-assign-stat-dot {
    background: var(--ui-warning);
}

.ui-products .bulk-assign-stat--notfound .bulk-assign-stat-dot {
    background: var(--ui-danger);
}

.ui-products .bulk-assign-stat--muted {
    opacity: 0.55;
}

.ui-products .bulk-assign-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.ui-products .bulk-assign-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

.ui-products .bulk-assign-row--notfound {
    background: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

.ui-products .bulk-assign-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    object-fit: contain;
    padding: 3px;
}

.ui-products .bulk-assign-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-faint);
    font-size: var(--ui-fs-lg);
}

.ui-products .bulk-assign-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-products .bulk-assign-title {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-products .bulk-assign-meta {
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
}

.ui-products .bulk-assign-meta .label {
    opacity: 0.75;
}

.ui-products .bulk-assign-status {
    flex: 0 0 auto;
    margin-left: auto;
}

#inventory-location-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2.375rem;
    align-items: center;
}

.ui-products .inv-loc-tab {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    gap: 0.45rem;
    min-height: 2.375rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-products .inv-loc-tab:hover {
    border-color: var(--ui-primary-line);
    background: var(--ui-subtle);
}

.ui-products .inv-loc-tab.active {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary) inset;
}

.ui-products .inv-loc-tab .inv-loc-name {
    font-weight: 500;
}

.ui-products .inv-loc-tab .inv-loc-stock {
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-faint);
}

body[data-theme=dark] .ui-products .inv-loc-tab .inv-loc-stock {
    color: var(--ui-faint);
}

.ui-products .inv-loc-tab .inv-loc-badge {
    font-size: var(--ui-fs-2xs);
    padding: 1px 5px;
    border-radius: var(--ui-radius-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.ui-products .inv-loc-badge-pick {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-products .inv-loc-badge-storage {
    background: var(--ui-primary-tint);
    color: var(--ui-info-text);
}

.ui-products .inv-loc-badge-own {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-products .inv-loc-badge-fc {
    background: color-mix(in srgb, var(--ui-purple) 13%, transparent);
    color: var(--ui-purple);
}

.ui-products .inv-loc-badge-all {
    background: var(--ui-neutral-tint);
    color: var(--ui-body);
}

body[data-theme=dark] .ui-products .inv-loc-tab {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] .ui-products .inv-loc-tab:hover {
    background: var(--ui-subtle);
}

body[data-theme=dark] .ui-products .inv-loc-tab.active {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] .ui-products .inv-loc-badge-storage {
    background: var(--ui-primary-line);
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-products .inv-loc-badge-fc {
    background: color-mix(in srgb, var(--ui-purple) 20%, transparent);
    color: var(--ui-purple);
}

body[data-theme=dark] .ui-products .inv-loc-badge-all {
    background: var(--ui-track);
    color: var(--ui-faint);
}

.ui-products .disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
}

#parent_import_table_wrapper.ai-detecting,
#bundle_import_table_wrapper.ai-detecting,
#child_import_table_wrapper.ai-detecting {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#productSettingsAccordion .product-pricing-fields {
    --product-unit-affix-width: 2.75rem;
}

#productSettingsAccordion .product-unit-field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    line-height: 1.3;
}

#productSettingsAccordion .product-unit-field-control {
    display: flex;
    align-items: stretch;
    min-height: 44px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#productSettingsAccordion .product-unit-field-control:focus-within {
    border-color: var(--ui-success);
    box-shadow: 0 0 0 0.2rem var(--ui-success-tint);
}

#productSettingsAccordion .product-unit-field-affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--product-unit-affix-width);
    padding: 0 0.55rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    background: var(--ui-subtle);
    border-right: 1px solid var(--ui-border-strong);
    flex-shrink: 0;
    user-select: none;
}

#productSettingsAccordion .product-unit-field-affix--suffix {
    border-right: 0;
    border-left: 1px solid var(--ui-border-strong);
}

#productSettingsAccordion .product-unit-field-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.75rem;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    outline: none;
}

#productSettingsAccordion .product-unit-field-input::placeholder {
    color: var(--ui-muted);
    font-weight: 400;
    opacity: 0.65;
}

#productSettingsAccordion .product-unit-field-input::-webkit-outer-spin-button,
#productSettingsAccordion .product-unit-field-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#productSettingsAccordion .product-unit-field-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ui-products .product-tabs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}

.ui-products .product-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.ui-products .product-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    min-width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid var(--ui-border);
}

.ui-products .product-tabs-nav .nav-item {
    flex-shrink: 0;
    margin: 0 2.5px;
    padding: 0;
}

.ui-products .product-tabs-nav .nav-item:first-child {
    margin-left: 0;
}

.ui-products .product-tabs-nav .nav-item:last-child {
    margin-right: 0;
}

.ui-products .product-tabs-nav .nav-link {
    padding: 0.75rem 1rem;
    white-space: nowrap;
    min-height: 44px; /* Touch target size */
    display: flex;
    align-items: center;
    justify-content: center;
}

#deliveryModal .input-group {
    max-width: 200px;
}

#deliveryModal .input-group .form-control {
    text-align: center;
    font-weight: 500;
}

#deliveryModal .input-group .btn-outline-secondary {
    min-width: 40px;
}

#datatable-all-products_wrapper thead th {
    vertical-align: middle;
}

#product-tags-wrapper {
    min-height: auto;
}

#product-tags-wrapper .badge {
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

#bulkInventoryModal .modal-dialog {
    max-width: 1200px;
}

#bulkInventoryModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkInventoryModal .modal-body {
    padding: 1.5rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#bulkInventoryModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkInventoryModal .card {
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

#bulkInventoryModal .card-title {
    font-weight: 500;
    color: var(--ui-text);
}

#bulk-products-empty-state {
    color: var(--ui-muted);
}

#bulk-products-empty-state i {
    opacity: 0.5;
}

.ui-products .bulk-products-table {
    font-size: var(--ui-fs-base);
    background-color: var(--ui-surface);
    border-collapse: separate;
    border-spacing: 0;
}

.ui-products .bulk-products-table thead th {
    border-bottom: 2px solid var(--ui-border);
    padding: 0.875rem 1rem;
}

.ui-products .bulk-products-table tbody {
    background-color: var(--ui-surface);
}

.ui-products .bulk-products-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.ui-products .bulk-products-table tbody tr {
    transition: background-color 0.2s ease;
    cursor: default;
}

.ui-products .bulk-products-table tbody tr:hover {
    background-color: var(--ui-primary-soft);
}

.ui-products .bulk-products-table tbody tr:hover td {
    background-color: transparent;
}

body[data-theme=dark] .ui-products .bulk-products-table tbody tr:hover {
    background-color: var(--ui-primary-line);
}

.ui-products .bulk-products-table .small-product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .ui-products .bulk-products-table .small-product-image {
    background-color: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-products .bulk-products-table .text-center {
    text-align: center;
}

.ui-products .bulk-products-table tbody tr:last-child td {
    border-bottom: none;
}

.ui-products .bulk-correction-cell {
    width: 140px;
    padding: 0.5rem !important;
}

.ui-products .bulk-correction-input-group {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    max-width: 130px;
    margin: 0 auto;
}

.ui-products .bulk-correction-input-group .bulk-correction-amount {
    border-left: none;
    border-right: none;
    border-radius: 0;
    text-align: center;
    width: 50px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    font-size: var(--ui-fs-base);
}

.ui-products .bulk-correction-input-group .bulk-correction-btn {
    border-radius: 0;
    border-color: var(--ui-border);
    padding: 0.25rem 0.4rem;
    flex: 0 0 auto;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-products .bulk-correction-input-group .bulk-correction-btn i {
    font-size: var(--ui-fs-xs);
}

.ui-products .bulk-correction-input-group .bulk-correction-btn:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.ui-products .bulk-correction-input-group .bulk-correction-btn:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.ui-products .bulk-correction-input-group .bulk-correction-amount:focus {
    border-color: var(--ui-border);
    box-shadow: none;
    z-index: 1;
}

.ui-products .bulk-correction-input-group .bulk-correction-amount:focus + .bulk-correction-btn {
    border-color: var(--highlight-color);
}

.ui-products .bulk-products-table .bx-x {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    font-size: var(--ui-fs-xl);
    padding: 0.25rem;
    border-radius: var(--ui-radius-xs);
}

.ui-products .bulk-products-table .bx-x:hover {
    transform: scale(1.15);
    color: var(--ui-danger) !important;
    background-color: var(--ui-danger-tint);
}

#datatable-all-products tbody td {
    padding: 0.5rem 0.75rem !important;
    vertical-align: middle;
}

/* not the hidden sizing copy of the header inside the scroll body (it would show as a 20px band) */
#datatable-all-products thead th:not(.dataTables_scrollBody *) {
    padding: 0.625rem 0.75rem !important;
    vertical-align: middle;
    text-align: left;
}

/* _wrapper: with scrollX the visible header is a copy without the table id, so id-only rules missed it */
#datatable-all-products_wrapper thead th.product-image-cell,
#datatable-all-products_wrapper thead th.stock-advice-cell,
#datatable-all-products_wrapper thead th.days-out-of-stock-cell {
    text-align: center !important;
}

#datatable-all-products tbody td.product-image-cell,
#datatable-all-products tbody td.stock-advice-cell,
#datatable-all-products tbody td.days-out-of-stock-cell {
    text-align: center !important;
}

#datatable-all-products tbody tr {
    height: auto;
}

#datatable-all-products_wrapper .product-image-cell {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0.5rem !important;
}

#datatable-all-products .img-bg-thumbnail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 auto;
}

#datatable-all-products .img-bg-thumbnail-img {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
    display: block;
}

body[data-theme=dark] #datatable-all-products .img-bg-thumbnail-img {
    background-color: var(--ui-subtle);
}

#datatable-all-products_wrapper .stock-advice-cell {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
}

#datatable-all-products .stock-advice-badge {
    font-size: var(--ui-fs-xs);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    display: inline-block;
}

#bulkWeightDimensionsModal .modal-dialog {
    max-width: 600px;
}

#bulkWeightDimensionsModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkWeightDimensionsModal .modal-body {
    padding: 1.5rem;
}

#bulkWeightDimensionsModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkWeightDimensionsModal .rounded {
    transition: all 0.3s ease;
}

#bulkWeightDimensionsModal .rounded:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ui-primary-line);
}

body[data-theme=dark] #bulkWeightDimensionsModal .rounded {
    background: linear-gradient(135deg, var(--ui-primary-line) 0%, var(--ui-primary-soft) 100%) !important;
    border-color: var(--ui-primary-line) !important;
}

body[data-theme=dark] #bulkWeightDimensionsModal .rounded .rounded-circle {
    background-color: var(--ui-primary-line) !important;
}

#bulkPriceModal .modal-dialog {
    max-width: 600px;
}

#bulkPriceModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkPriceModal .modal-body {
    padding: 1.5rem;
}

#bulkPriceModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkPriceModal .rounded {
    transition: all 0.3s ease;
}

#bulkPriceModal .rounded:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ui-success-tint);
}

body[data-theme=dark] #bulkPriceModal .rounded {
    background: linear-gradient(135deg, var(--ui-success-tint) 0%, var(--ui-success-tint) 100%) !important;
    border-color: var(--ui-success) !important;
}

body[data-theme=dark] #bulkPriceModal .rounded .rounded-circle {
    background-color: var(--ui-success-tint) !important;
}

#bulkClassificationModal .modal-dialog {
    max-width: 600px;
}

#bulkClassificationModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkClassificationModal .modal-body {
    padding: 1.5rem;
}

#bulkClassificationModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkClassificationModal .rounded {
    transition: all 0.3s ease;
}

#bulkClassificationModal .rounded:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ui-warning-tint);
}

body[data-theme=dark] #bulkClassificationModal .rounded {
    background: linear-gradient(135deg, var(--ui-warning-tint) 0%, var(--ui-warning-tint) 100%) !important;
    border-color: var(--ui-warning) !important;
}

body[data-theme=dark] #bulkClassificationModal .rounded .rounded-circle {
    background-color: var(--ui-warning-tint) !important;
}

#bulkInventorySettingsModal .modal-dialog {
    max-width: 900px;
}

#bulkInventorySettingsModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkInventorySettingsModal .modal-body {
    padding: 1.5rem;
}

#bulkInventorySettingsModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkInventorySettingsModal .rounded {
    transition: all 0.3s ease;
}

#bulkInventorySettingsModal .rounded:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ui-primary-line);
}

body[data-theme=dark] #bulkInventorySettingsModal .rounded {
    background: linear-gradient(135deg, var(--ui-primary-line) 0%, var(--ui-primary-soft) 100%) !important;
    border-color: var(--ui-primary-line) !important;
}

body[data-theme=dark] #bulkInventorySettingsModal .rounded .rounded-circle {
    background-color: var(--ui-primary-line) !important;
}

#bulkStockAdviceModal .modal-dialog {
    max-width: 600px;
}

#bulkStockAdviceModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkStockAdviceModal .modal-body {
    padding: 1.5rem;
}

#bulkStockAdviceModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkStockAdviceModal .rounded {
    transition: all 0.3s ease;
}

#bulkStockAdviceModal .rounded:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ui-success-tint);
}

body[data-theme=dark] #bulkStockAdviceModal .rounded {
    background: linear-gradient(135deg, var(--ui-success-tint) 0%, var(--ui-success-tint) 100%) !important;
    border-color: var(--ui-success) !important;
}

body[data-theme=dark] #bulkStockAdviceModal .rounded .rounded-circle {
    background-color: var(--ui-success-tint) !important;
}

.ui-products .product-chart-card {
    border: none;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

.ui-products .product-chart-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 10px;
}

.ui-products .product-chart-settings-wrap {
    position: relative;
}

.ui-products .product-chart-gear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-products .product-chart-gear-btn:hover,
.ui-products .product-chart-gear-btn.active {
    background: var(--ui-track);
    color: var(--ui-text);
}

body[data-theme=dark] .ui-products .product-chart-gear-btn {
    background: var(--ui-track);
}

body[data-theme=dark] .ui-products .product-chart-gear-btn:hover,
body[data-theme=dark] .ui-products .product-chart-gear-btn.active {
    background: var(--ui-track);
    color: var(--ui-text);
}

.ui-products .product-chart-settings-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 10px 12px;
    box-shadow: var(--ui-shadow-pop);
    z-index: 20;
    min-width: 170px;
}

.ui-products .product-chart-settings-dropdown.open {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body[data-theme=dark] .ui-products .product-chart-settings-dropdown {
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
    border-color: var(--ui-border-strong);
}

.ui-products .product-chart-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ui-products .product-chart-settings-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    white-space: nowrap;
}

.ui-products .product-chart-segmented {
    display: inline-flex;
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-xs);
    padding: 2px;
    gap: 2px;
}

body[data-theme=dark] .ui-products .product-chart-segmented {
    background: var(--ui-track);
}

.ui-products .product-chart-seg-btn {
    border: none;
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    padding: 3px 12px;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.5;
    white-space: nowrap;
}

.ui-products .product-chart-seg-btn:hover {
    color: var(--ui-text);
}

.ui-products .product-chart-seg-btn.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] .ui-products .product-chart-seg-btn.active {
    background: var(--ui-track);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-pop);
}

.ui-products .product-chart-legend-items {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ui-products .product-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    cursor: pointer;
    transition: opacity 0.2s;
    user-select: none;
}

.ui-products .product-chart-legend-item.legend-hidden {
    opacity: 0.35;
    text-decoration: line-through;
}

.ui-products .product-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ui-products .product-chart-legend-dot-stock {
    background: var(--ui-primary);
}

.ui-products .product-chart-legend-dot-orders {
    background: var(--ui-success);
}

.ui-products .product-chart-stock-tooltip-trigger {
    border: none !important;
    background: transparent !important;
    padding: 6px !important;
    margin: -6px -4px -6px 0 !important;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    vertical-align: middle;
    color: inherit;
}

.ui-products .product-chart-stock-tooltip-trigger:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: var(--ui-radius-xs);
}

.ui-products .product-chart-canvas-wrap {
    width: 100%;
    height: 170px;
    min-height: 100px;
    position: relative;
    transition: height 0.4s ease;
    border-radius: var(--ui-radius-xs);
}

.ui-products .product-chart-tooltip {
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 10px 14px;
    box-shadow: var(--ui-shadow-pop);
    font-family: inherit;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    min-width: 140px;
    z-index: 99999;
}

body[data-theme=dark] .ui-products .product-chart-tooltip {
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-pop);
}

.ui-products .product-chart-tooltip-date {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ui-products .product-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}

.ui-products .product-chart-tooltip-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

.ui-products .product-chart-tooltip-value {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-products .product-chart-tooltip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ui-products .seasonality-chart-wrapper {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    padding: 0;
    overflow: hidden;
    position: relative;
}

body[data-theme=dark] .ui-products .seasonality-chart-wrapper {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    border-color: var(--ui-border-strong);
}

.ui-products .seasonality-months-strip {
    display: flex;
    z-index: 2;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-products .seasonality-months-strip {
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
    border-bottom-color: var(--ui-border);
}

.ui-products .seasonality-month-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 0.35rem 0;
    color: var(--ui-muted);
    border-right: 1px solid var(--ui-border);
    flex-shrink: 0;
}

.ui-products .seasonality-bars-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ui-products .seasonality-bars-inner {
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    height: 160px;
    padding: 0 1px;
}

.ui-products .seasonality-bar-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.ui-products .seasonality-bar-col:hover .seasonality-bar-fill {
    filter: brightness(1.15);
}

.ui-products .seasonality-bar-col.is-current-week .seasonality-bar-fill {
    box-shadow: 0 0 0 2px var(--ui-primary);
}

.ui-products .seasonality-bar-col.is-editing {
    background: var(--ui-primary-soft);
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] .ui-products .seasonality-bar-col.is-editing {
    background: var(--ui-primary-line);
}

.ui-products .seasonality-bar-fill {
    width: calc(100% - 2px);
    border-radius: var(--ui-radius-xs) var(--ui-radius-xs) 0 0;
    min-height: 2px;
    transition: height 0.25s ease, background 0.2s;
}

.ui-products .seasonality-bar-value {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    color: var(--ui-text);
    text-align: center;
    line-height: 1;
    padding: 2px 0 1px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}

.ui-products .seasonality-bar-col:hover .seasonality-bar-value,
.ui-products .seasonality-bar-col.is-current-week .seasonality-bar-value,
.ui-products .seasonality-bar-col.is-manual .seasonality-bar-value {
    opacity: 1;
}

.ui-products .seasonality-bar-col.is-manual .seasonality-bar-week-label {
    color: var(--ui-warning);
    font-weight: 600;
}

.ui-products .seasonality-bar-week-label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    text-align: center;
    padding: 2px 0 3px;
    line-height: 1;
    white-space: nowrap;
}

.ui-products .seasonality-bar-col.is-current-week .seasonality-bar-week-label {
    font-weight: 700;
    color: var(--ui-primary);
}

.ui-products .seasonality-baseline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed var(--ui-border-strong);
    z-index: 1;
    pointer-events: none;
}

.ui-products .seasonality-baseline-label {
    position: absolute;
    right: 6px;
    top: -14px;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
}

.ui-products .seasonality-chart-legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-products .seasonality-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--ui-radius-xs);
    margin-right: 4px;
    vertical-align: middle;
}

.ui-products .seasonality-inline-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ui-surface);
    border-top: 2px solid var(--ui-primary);
}

body[data-theme=dark] .ui-products .seasonality-inline-edit {
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
}

.ui-products .seasonality-inline-edit input {
    width: 72px;
    text-align: center;
    font-weight: 600;
    padding: 0.25rem 0.35rem;
}

#datatable-all-products_wrapper .days-out-of-stock-cell {
    text-align: center;
}

.ui-products .product-title-cell {
    max-width: 300px;
    min-width: 200px;
}

#bulk-products-count {
    font-size: var(--ui-fs-xs);
    padding: 0.35rem 0.65rem;
}

#bulk-products-summary {
    font-size: var(--ui-fs-base);
}

#clear-all-products-btn {
    font-size: var(--ui-fs-base);
}

body[data-theme=dark] #bulkInventoryModal .card {
    border-color: var(--ui-border);
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

body[data-theme=dark] .ui-products .bulk-products-table thead th {
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] .ui-products .bulk-products-table tbody td {
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] .ui-products .bulk-products-table .small-product-image {
    border-color: var(--ui-border);
}

#addChildProductToBundleModal .bootstrap-select > .dropdown-toggle {
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid var(--ui-border-strong);
}

#addChildProductToBundleModal .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}

#addChildProductToBundleModal .bootstrap-touchspin {
    flex-wrap: nowrap;
}

#addChildProductToBundleModal .bootstrap-touchspin .input-group-btn {
    display: flex;
}

#addChildProductToBundleModal .bootstrap-touchspin .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --bs-btn-color: var(--ui-text);
    --bs-btn-bg: var(--ui-subtle);
    --bs-btn-border-color: var(--ui-border-strong);
    --bs-btn-hover-color: var(--ui-text);
    --bs-btn-hover-bg: var(--ui-track);
    --bs-btn-hover-border-color: var(--ui-border-strong);
    --bs-btn-active-color: var(--ui-text);
    --bs-btn-active-bg: var(--ui-track);
    --bs-btn-active-border-color: var(--ui-border-strong);
    font-size: var(--ui-fs-lg);
    box-shadow: none;
}

#addChildProductToBundleModal .bootstrap-touchspin .bootstrap-touchspin-down {
    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}

#addChildProductToBundleModal .bootstrap-touchspin .bootstrap-touchspin-up {
    border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
}

#addChildProductToBundleModal .bootstrap-touchspin input.form-control {
    height: 40px;
    border-radius: 0;
    margin: 0 -1px;
}

#bulkBundleConvertModal .modal-header,
#bulkBundleAddChildModal .modal-header,
#bulkBundleRemoveChildModal .modal-header {
    padding: 1.25rem 1.5rem;
}

#bulkBundleConvertModal .modal-body,
#bulkBundleAddChildModal .modal-body,
#bulkBundleRemoveChildModal .modal-body {
    padding: 1.5rem;
}

#bulkBundleConvertModal .modal-footer,
#bulkBundleAddChildModal .modal-footer,
#bulkBundleRemoveChildModal .modal-footer {
    padding: 1rem 1.5rem;
}

#bulkBundleConvertModal .alert,
#bulkBundleAddChildModal .alert,
#bulkBundleRemoveChildModal .alert {
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] #bulkBundleConvertModal .alert-warning,
body[data-theme=dark] #bulkBundleAddChildModal .alert-warning,
body[data-theme=dark] #bulkBundleRemoveChildModal .alert-warning {
    background-color: var(--ui-warning-tint);
    border-color: var(--ui-warning);
    color: var(--ui-text);
}

body[data-theme=dark] #bulkBundleConvertModal .alert-info,
body[data-theme=dark] #bulkBundleAddChildModal .alert-info,
body[data-theme=dark] #bulkBundleRemoveChildModal .alert-info {
    background-color: var(--ui-info-tint);
    border-color: var(--ui-info);
    color: var(--ui-text);
}

#exportModal .parent-export-columns {
    overflow: visible;
}

#exportModal .parent-export-columns-count {
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

#exportModal .parent-export-columns-trigger .parent-export-group-chevron {
    width: 0.85rem;
    margin-left: 0.15rem;
}

#exportModal .parent-export-columns.is-open .parent-export-columns-trigger .parent-export-group-chevron {
    transform: rotate(90deg);
}

#exportModal .parent-export-columns-panel {
    margin-top: 0.45rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-muted) 5%, transparent);
    overflow: hidden;
}

#exportModal .parent-export-groups {
    display: block;
}

#exportModal .parent-export-column-group + .parent-export-column-group {
    border-top: 1px solid var(--ui-border);
}

#exportModal .parent-export-group-row {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.45rem 0 0;
}

#exportModal .parent-export-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2rem;
    padding: 0.35rem 0.35rem 0.35rem 0.55rem;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

#exportModal .parent-export-group-toggle:hover {
    color: var(--ui-text);
}

#exportModal .parent-export-group-toggle:focus {
    box-shadow: none;
}

#exportModal .parent-export-group-toggle:focus-visible {
    outline: 2px solid var(--ui-primary-line);
    outline-offset: -2px;
}

#exportModal .parent-export-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-2xs);
    transition: transform 0.18s ease;
    flex: 0 0 auto;
}

#exportModal .parent-export-column-group.is-open .parent-export-group-toggle > .parent-export-group-chevron {
    transform: rotate(90deg);
}

#exportModal .parent-export-group-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

#exportModal .parent-export-group-meta {
    margin-left: auto;
    font-size: var(--ui-fs-xs);
    line-height: 1.2;
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    flex-shrink: 0;
}

#exportModal .parent-export-group-row .form-check.form-switch {
    flex-shrink: 0;
    margin: 0;
    min-height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exportModal .parent-export-group-row .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
    width: 1.85rem;
    height: 1rem;
}

#exportModal .parent-export-group-columns {
    padding: 0 0.65rem 0.55rem 1.75rem;
}

#exportModal .parent-export-column-item {
    display: flex;
    align-items: center;
    min-height: 1.65rem;
}

#exportModal .parent-export-column-item .form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    min-height: 1.65rem;
    padding: 0;
}

#exportModal .parent-export-column-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

#exportModal .parent-export-column-item .form-check-label {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    line-height: 1.2;
    padding-left: 0;
    cursor: pointer;
}

@media (max-width: 767px) {
    #importModal .modal-body {
    padding: 1rem;
    }

    #importModal .cd-import-panel-header {
    flex-direction: column;
    }

    #importModal .cd-import-upload-target {
    align-items: flex-start;
        justify-content: flex-start;
    }

    #productImportPreviewModal .cd-pip-ellipsis {
    max-width: 160px;
    }

    #productImportPreviewModal .cd-pip-legend-grid {
    grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ui-products .bulk-assign-row {
    flex-wrap: wrap;
    }

    .ui-products .bulk-assign-status {
    margin-left: 56px;
    }
}

@media (min-width: 768px) {
    .ui-products .product-tabs-nav {
    display: flex;
        flex-wrap: wrap;
    }

    .ui-products .product-tabs-nav .nav-item {
    flex: 1 1 auto;
    }

    .ui-products .product-tabs-nav .nav-link {
    padding: 0.75rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .ui-products .product-tabs-wrapper {
    padding: 0 0px;
    }

    .ui-products .product-tabs-nav {
    padding-bottom: 1px; /* Prevent border cut-off */
        justify-content: flex-start !important;
    }

    .ui-products .product-tabs-nav .nav-item {
    margin: 0 2.5px;
        padding: 0;
        flex: 0 0 auto !important;
    }

    .ui-products .product-tabs-nav .nav-item:first-child {
    margin-left: 0;
    }

    .ui-products .product-tabs-nav .nav-item:last-child {
    margin-right: 0;
    }

    .ui-products .product-tabs-nav .nav-link {
    padding: 0.75rem 1.25rem;
        font-size: var(--ui-fs-base);
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .ui-products .bulk-correction-cell {
    width: auto;
        min-width: 120px;
    }

    .ui-products .bulk-correction-input-group {
    max-width: 110px;
    }

    .ui-products .bulk-correction-input-group .bulk-correction-amount {
    width: 40px;
        padding: 0.2rem 0.25rem;
    }

    .ui-products .bulk-correction-input-group .bulk-correction-btn {
    padding: 0.2rem 0.3rem;
        min-width: 28px;
    }

    #bulkInventoryModal .modal-dialog {
    margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    #bulkInventoryModal .modal-body {
    padding: 1rem;
    }

    .ui-products .bulk-products-table {
    font-size: var(--ui-fs-sm);
    }

    .ui-products .bulk-products-table thead th,
    .ui-products .bulk-products-table tbody td {
    padding: 0.5rem 0.25rem;
    }

    .ui-products .bulk-products-table .small-product-image {
    width: 40px;
        height: 40px;
    }
}

/* ---------- Page: seller/content.php (root .ui-page-seller-content) ---------- */
.ui-page-seller-content .ck-editor__editable {
    max-height: 350px;
}

.ui-page-seller-content tr img.platform-logo-small {
    width: 45px;
    height: auto;
    max-height: 45px !important;
    padding-left: 0;
    margin: -5px 0px;
    position: relative;
    display: inline-block;
}

.ui-page-seller-content .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.ui-page-seller-content .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
    padding: 0px 15px;
}

/* Description editor: inset like the title field, one rounded box instead of CKEditor's grey frame */
#pimAccordion-collapseOne {
    padding: 0 var(--ui-space-5) var(--ui-space-5);
}

#pimAccordion-collapseOne .ck.ck-editor {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    overflow: hidden;
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}

#pimAccordion-collapseOne .ck.ck-editor:focus-within {
    border-color: var(--ui-primary-line);
    box-shadow: var(--ui-focus-ring);
}

#pimAccordion-collapseOne .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    padding: 2px var(--ui-space-2);
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-radius: 0 !important;
    background: var(--ui-subtle);
}

#pimAccordion-collapseOne .ck.ck-toolbar .ck-button {
    border-radius: var(--ui-radius-xs);
    color: var(--ui-body);
}

#pimAccordion-collapseOne .ck.ck-toolbar .ck-button:not(.ck-disabled):hover {
    background: var(--ui-track);
}

#pimAccordion-collapseOne .ck.ck-toolbar .ck-button.ck-on {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#pimAccordion-collapseOne .ck.ck-editor__main > .ck-editor__editable,
#pimAccordion-collapseOne .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    min-height: 180px;
    padding: var(--ui-space-1) var(--ui-space-4);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    line-height: 1.6;
}

.ui-page-seller-content .asset_item.asset-validation-error .card {
    border: 2px solid var(--ui-danger);
    box-shadow: 0 0 0 3px var(--ui-danger-tint);
}

.ui-page-seller-content .asset_item.asset-validation-error img {
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-content .pim-listings-overview {
    background: var(--ui-surface, var(--ui-surface));
    border: 0;
    border-radius: var(--ui-radius, 12px);
    box-shadow: var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
    overflow: visible;
    margin-bottom: 1rem;
}

.ui-page-seller-content .pim-listings-chart-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 12px 16px 4px;
}

.ui-page-seller-content .pim-listings-chart-card__title {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text, var(--ui-text));
    margin: 0;
    line-height: 1.3;
}

.ui-page-seller-content .pim-listings-chart-card__canvas-wrap {
    position: relative;
    height: 72px;
    min-height: 56px;
    padding: 0 0.75rem 0.2rem;
}

.ui-page-seller-content .pim-listings-chart-card__canvas-wrap.is-empty {
    height: auto;
    min-height: 0;
    padding: 0.35rem 1rem 1rem;
}

.ui-page-seller-content .pim-listings-chart-card__canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.ui-page-seller-content .pim-listings-chart-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface);
    z-index: 2;
}

.ui-page-seller-content .pim-listings-chart-card__overlay--error {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    color: var(--ui-text);
}

.ui-page-seller-content .pim-listings-chart-card__overlay--error i {
    font-size: var(--ui-fs-kpi);
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

.ui-page-seller-content .pim-listings-chart-card__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 7.5rem;
}

.ui-page-seller-content .pim-listings-chart-card__empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    margin-bottom: 0.7rem;
}

.ui-page-seller-content .pim-listings-chart-card__empty-icon i {
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-content .pim-listings-chart-card__empty-title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-seller-content .pim-listings-chart-card__empty-copy {
    margin: 0.3rem 0 0.9rem;
    max-width: 22rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-content .pim-overview__statuses {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--ui-border, var(--ui-border));
}

.ui-page-seller-content .pim-status-filter-card {
    position: relative;
    cursor: pointer;
    min-height: 3.65rem;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--ui-border, var(--ui-border));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: background-color 150ms ease;
}

.ui-page-seller-content .pim-status-filter-card:last-child {
    border-right: 0;
}

.ui-page-seller-content .pim-status-filter-card::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: var(--ui-radius-xs) var(--ui-radius-xs) 0 0;
    background: var(--pim-status-color);
    opacity: 0;
    transition: opacity 150ms ease;
}

.ui-page-seller-content .pim-overview__statuses .pim-status-filter-card:first-child {
    border-bottom-left-radius: var(--ui-radius, 12px);
}

.ui-page-seller-content .pim-overview__statuses .pim-status-filter-card:last-child {
    border-bottom-right-radius: var(--ui-radius, 12px);
}

.ui-page-seller-content .pim-status-filter-card:hover {
    background: var(--ui-subtle, var(--ui-subtle));
}

.ui-page-seller-content .pim-status-filter-card:focus-visible {
    outline: 2px solid var(--pim-status-color);
    outline-offset: -2px;
    z-index: 1;
}

.ui-page-seller-content .pim-status-filter-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 32px 10px 14px;
    min-height: 3.65rem;
}

.ui-page-seller-content .pim-status-filter-card__count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ui-text, var(--ui-text));
    font-variant-numeric: tabular-nums;
}

.ui-page-seller-content .pim-status-filter-card__count::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--pim-status-color);
    flex-shrink: 0;
}

.ui-page-seller-content .pim-status-filter-card__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
    line-height: 1.3;
    margin-top: 2px;
    padding-left: 16px;
}

.ui-page-seller-content .pim-status-filter-card__menu {
    position: absolute;
    top: 6px;
    right: 4px;
    z-index: 3;
    opacity: 0;
    transition: opacity 120ms ease;
}

.ui-page-seller-content .pim-status-filter-card:hover .pim-status-filter-card__menu,
.ui-page-seller-content .pim-status-filter-card:focus-within .pim-status-filter-card__menu,
.ui-page-seller-content .pim-status-filter-card.is-active .pim-status-filter-card__menu,
.ui-page-seller-content .pim-status-filter-card__menu:has(.show) {
    opacity: 1;
}

.ui-page-seller-content .pim-status-filter-card__menu .cd-icon-btn {
    color: var(--ui-faint, var(--ui-faint));
}

.ui-page-seller-content .pim-status-filter-card__menu .cd-icon-btn:hover {
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-status-filter-card.is-active {
    background: color-mix(in srgb, var(--pim-status-color) 9%, transparent);
}

.ui-page-seller-content .pim-status-filter-card.is-active::after {
    opacity: 1;
}

.ui-page-seller-content .pim-status-filter-card.is-active .pim-status-filter-card__label {
    color: var(--ui-text, var(--ui-text));
    font-weight: 600;
}

#productModal input.form-control[id^="attribute_name_"]:disabled,
#marketplaceWizardModal input.form-control[id^="attribute_name_"]:disabled {
    background: var(--ui-subtle, var(--ui-subtle));
    /* darkmode.css sets modal input borders with !important */
    border-color: transparent !important;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    opacity: 1;
    text-overflow: ellipsis;
}

#productModal .marketplace_attribute_tr .select2-container--default .select2-selection--single,
#marketplaceWizardModal .marketplace_attribute_tr .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    /* style.css sets these with !important */
    height: var(--ui-control-h, 40px) !important;
    min-height: var(--ui-control-h, 40px) !important;
}

#productModal .marketplace_attribute_tr .select2-container--default .select2-selection--single .select2-selection__rendered,
#marketplaceWizardModal .marketplace_attribute_tr .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 28px 0 12px;
    line-height: normal;
    height: auto;
}

#productModal .marketplace_attribute_tr .select2-container--default .select2-selection--single .select2-selection__arrow,
#marketplaceWizardModal .marketplace_attribute_tr .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    height: 100%;
}

#productModal .marketplace_attribute_tr .cd-icon-btn--danger,
#marketplaceWizardModal .marketplace_attribute_tr .cd-icon-btn--danger {
    color: var(--ui-faint, var(--ui-faint));
}

#productModal .marketplace_attribute_tr .cd-icon-btn--danger:hover,
#productModal .marketplace_attribute_tr .cd-icon-btn--danger:focus-visible,
#marketplaceWizardModal .marketplace_attribute_tr .cd-icon-btn--danger:hover,
#marketplaceWizardModal .marketplace_attribute_tr .cd-icon-btn--danger:focus-visible {
    color: var(--ui-danger);
}

.ui-page-seller-content .pim-context-bar {
    --ui-tone: var(--ui-silver);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface, var(--ui-surface));
    box-shadow: var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
}

.ui-page-seller-content .pim-context-bar--success {
    --ui-tone: var(--ui-success);
}

.ui-page-seller-content .pim-context-bar--warning {
    --ui-tone: var(--ui-warning);
}

.ui-page-seller-content .pim-context-bar--danger {
    --ui-tone: var(--ui-danger);
}

.ui-page-seller-content .pim-context-bar--info {
    --ui-tone: var(--ui-primary);
}

.ui-page-seller-content .pim-context-bar--neutral {
    --ui-tone: var(--ui-silver);
}

.ui-page-seller-content .pim-context-bar__main {
    flex: 1 1 240px;
    min-width: 0;
}

.ui-page-seller-content .pim-context-bar__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-context-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-body, var(--ui-body));
}

.ui-page-seller-content .pim-context-bar__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-tone);
}

.ui-page-seller-content .pim-context-bar__text {
    margin: 2px 0 0;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted, var(--ui-muted));
}

.ui-page-seller-content .pim-context-bar__text .btn-link {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-decoration: none;
    vertical-align: baseline;
}

.ui-page-seller-content .pim-context-bar__log {
    margin-top: 4px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
}

.ui-page-seller-content .pim-context-bar__log summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ui-primary);
    list-style: none;
}

.ui-page-seller-content .pim-context-bar__log summary::-webkit-details-marker {
    display: none;
}

.ui-page-seller-content .pim-context-bar__log div {
    margin-top: 6px;
    max-height: 8rem;
    overflow: auto;
    padding: 8px 10px;
    border-radius: var(--ui-radius-sm, 8px);
    background: var(--ui-subtle, var(--ui-subtle));
    white-space: pre-wrap;
    word-break: break-word;
}

.ui-page-seller-content .pim-context-bar__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.ui-page-seller-content .pim-context-bar__side .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui-page-seller-content .pim-context-bar__primary,
.ui-page-seller-content .pim-context-bar__primary i {
    color: var(--ui-primary) !important;
}

.ui-page-seller-content .pim-save-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 6px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint, var(--ui-faint));
    white-space: nowrap;
}

.ui-page-seller-content .pim-save-state i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-content .pim-save-state .spinner-border {
    width: .7rem; height: .7rem; border-width: .12em;
}

.ui-page-seller-content .pim-save-state.is-saved {
    color: var(--ui-series-3);
}

.ui-page-seller-content .pim-listing-picker-hint {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted, var(--ui-muted));
    border-bottom: 1px solid var(--ui-border, var(--ui-border));
}

.ui-page-seller-content .pim-listing-picker-hint i {
    margin-top: 2px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint, var(--ui-faint));
}

body[data-theme=dark] #productModal .pim-channel-logo {
    box-sizing: content-box;
    padding: 3px 6px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
}

body[data-theme=dark] #productModal .ck-content strong,
body[data-theme=dark] #productModal .ck-content b,
body[data-theme=dark] #marketplaceWizardModal .ck-content strong,
body[data-theme=dark] #marketplaceWizardModal .ck-content b {
    color: inherit;
}

body[data-theme=dark] #productModal .accordion-button::after {
    filter: invert(1) brightness(.75);
}

.ui-page-seller-content .pim-guide {
    margin-bottom: 1rem;
    padding: 14px 16px 16px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface, var(--ui-surface));
    box-shadow: var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
}

.ui-page-seller-content .pim-guide[hidden] {
    display: none;
}

.ui-page-seller-content .pim-guide__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ui-page-seller-content .pim-guide__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-guide__title i {
    color: var(--ui-warning);
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-content .pim-guide__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-page-seller-content .pim-guide__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-subtle, var(--ui-subtle));
}

.ui-page-seller-content .pim-guide__steps strong {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 700;
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-guide__steps p {
    margin: 2px 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted, var(--ui-muted));
}

.ui-page-seller-content .pim-guide__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-content .pim-guide__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-page-seller-content .pim-guide__actions .btn-link {
    padding: 2px 8px;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

.ui-page-seller-content .pim-guide__actions .btn-close {
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-content .pim-guide-open {
    font-size: inherit;
    text-decoration: none;
}

.ui-page-seller-content .pim-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 1rem;
}

.ui-page-seller-content .pim-filter-bar__field {
    min-width: 0;
}

.ui-page-seller-content .pim-filter-bar .filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ui-page-seller-content .pim-filter-bar .form-select {
    background-color: var(--ui-surface, var(--ui-surface));
    box-shadow: var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
    border-color: transparent;
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-page-seller-content .pim-filter-bar .form-select:hover {
    box-shadow: var(--ui-shadow-hover, 0 4px 14px rgba(var(--ui-black-rgb), 0.11));
}

.ui-page-seller-content .pim-filter-bar .form-select.is-filtered {
    border-color: rgba(var(--ui-primary-rgb), .45);
    background-color: rgba(var(--ui-primary-rgb), .04);
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-filter-bar__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ui-control-h, 40px);
    padding: 0 4px;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-muted, var(--ui-muted));
    text-decoration: none;
    white-space: nowrap;
}

.ui-page-seller-content .pim-filter-bar__reset:hover {
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-filter-bar__reset[hidden] {
    display: none;
}

#datatable-products_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#datatable-products_wrapper > * {
    flex: 0 0 100%;
    min-width: 0;
}

#datatable-products_wrapper > .dataTables_length,
#datatable-products_wrapper > .dt-buttons {
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

#datatable-products_wrapper > .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#datatable-products_wrapper > .dt-buttons .btn {
    margin: 0 !important;
}

#datatable-products_wrapper > .dataTables_filter {
    flex: 0 1 260px;
    float: none;
    margin: 0 0 0 auto;
}

#datatable-products_wrapper > .dataTables_filter label {
    display: flex;
    width: 100%;
    padding: 0;
}

#datatable-products_wrapper > .dataTables_filter input {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

#datatable-products_wrapper > .dataTables_filter input {
    padding-left: 34px;
    background: var(--ui-surface, var(--ui-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%23adb5bd' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5 14 14' stroke='%23adb5bd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center / 14px 14px;
}

#datatable-products_wrapper > .dataTables_scroll {
    margin-top: 4px;
}

#datatable-products_wrapper > .dataTables_info,
#datatable-products_wrapper > .dataTables_paginate {
    flex: 1 1 auto;
    float: none;
    padding-top: 4px;
}

#datatable-products_wrapper > .dataTables_paginate {
    flex: 0 0 auto;
    margin-left: auto;
}

#datatable-products_wrapper > .dataTables_paginate .pagination {
    margin: 0;
}

.ui-page-seller-content .dt-buttons .btn.pim-bulk-actions-btn {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
    padding: 0;
}

.ui-page-seller-content .dt-buttons .btn.pim-bulk-actions-btn:hover {
    background-color: var(--ui-primary-hover) !important;
}

.ui-page-seller-content .dt-buttons .btn.pim-bulk-actions-btn i {
    color: inherit;
}

.ui-page-seller-content .pim-bulk-actions-btn > span {
    display: inline-flex;
    align-self: stretch;
}

.ui-page-seller-content .pim-bulk-actions-btn .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-height: calc(var(--ui-control-h, 40px) - 2px);
    padding: 0 12px;
}

.ui-page-seller-content .pim-bulk-actions-btn .pim-bulk-actions-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-white-rgb), 0.22);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

.ui-page-seller-content .pim-action-menu {
    max-height: min(70vh, 560px);
    overflow-y: auto;
    min-width: 280px;
    text-align: left;
}

.ui-page-seller-content .pim-action-menu .dropdown-header {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted, var(--ui-muted));
    padding: 6px 10px 4px;
}

.ui-page-seller-content .pim-action-menu .dropdown-header.pim-action-menu__scope {
    font-size: var(--ui-fs-sm);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-text, var(--ui-text));
}

.ui-page-seller-content .pim-action-menu .dropdown-item > i {
    width: 18px;
    text-align: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-faint, var(--ui-faint));
}

.ui-page-seller-content .pim-action-menu .dropdown-item.text-danger,
.ui-page-seller-content .pim-action-menu .dropdown-item.text-danger > i {
    color: var(--ui-danger) !important;
}

.ui-page-seller-content .pim-action-menu .dropdown-item.text-danger:hover {
    background: var(--ui-danger-tint);
}

#datatable-products .img-bg-thumbnail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 auto;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
}

#datatable-products .img-bg-thumbnail-img {
    width: 100%;
    height: 100%;
    max-width: 44px;
    max-height: 44px;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
    display: block;
}

body[data-theme=dark] #datatable-products .img-bg-thumbnail-img {
    background-color: var(--ui-subtle);
}

.ui-page-seller-content .variant-group-summary-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0 0 14px;
}

.ui-page-seller-content .variant-group-summary-photo-wrapper {
    width: 86px;
    min-width: 86px;
    height: 86px;
    padding: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    overflow: hidden;
}

.ui-page-seller-content .variant-group-summary-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ui-page-seller-content .variant-group-summary-content {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-content .variant-group-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ui-page-seller-content .variant-group-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-page-seller-content .variant-group-actions-row {
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    padding-bottom: 14px;
    margin-bottom: 10px;
}

#datatable-products_wrapper .product-image-cell {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
}

#datatable-products_wrapper thead th.product-image-cell {
    text-align: center !important;
}

#datatable-products tbody td.product-image-cell {
    text-align: center !important;
}

.ui-page-seller-content .pim-products-table-card {
    border: 0;
    border-radius: var(--ui-radius, 12px);
    box-shadow: var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
    /* No overflow: hidden - it clipped the bulk actions dropdown that opens over the table */
    background: var(--ui-surface, var(--ui-surface));
}

.ui-page-seller-content .pim-products-table-card .card-body {
    padding: 12px 12px 10px;
}

#datatable-products {
    background: transparent;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(var(--ui-primary-rgb), 0.035);
}

#datatable-products_wrapper thead th {
    border-bottom: 1px solid var(--ui-border, var(--ui-border));
    vertical-align: middle;
    padding: 0.7rem 0.65rem;
    white-space: nowrap;
    background: transparent;
}

#datatable-products tbody td {
    vertical-align: middle;
    padding: 10px 0.65rem;
    border-color: var(--ui-border, var(--ui-border));
    color: var(--ui-body, var(--ui-body));
}

#datatable-products tbody tr {
    cursor: pointer;
}

#datatable-products tbody tr:has(td > .custom-checkbox input:checked) {
    --bs-table-bg: rgba(var(--ui-primary-rgb), .05);
    --bs-table-hover-bg: rgba(var(--ui-primary-rgb), .07);
}

#datatable-products tbody tr:last-child td {
    border-bottom: 0;
}

.ui-page-seller-content .pim-product-title {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
    line-height: 1.35;
    max-width: 28rem;
}

.ui-page-seller-content .pim-product-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

#datatable-products tbody tr:hover .pim-product-title {
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-tag-chips,
.ui-page-seller-content .pim-marketplace-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    max-width: 34rem;
}

.ui-page-seller-content .pim-tag-chip,
.ui-page-seller-content .pim-mp-chip {
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
    padding: 0.28em 0.58em;
    border-radius: var(--ui-radius-pill);
    margin: 0;
}

.ui-page-seller-content .pim-marketplace-open .badge {
    cursor: pointer;
    transition: filter 150ms ease, box-shadow 150ms ease;
}

.ui-page-seller-content .pim-marketplace-open:hover .badge {
    filter: brightness(0.95);
    box-shadow: 0 0 0 1px currentColor;
}

.ui-page-seller-content .pim-tag-chip.bg-light {
    background: var(--ui-subtle, var(--ui-subtle)) !important;
    color: var(--ui-body, var(--ui-body)) !important;
    box-shadow: inset 0 0 0 1px var(--ui-border, rgb(var(--ui-white-rgb)));
}

.ui-page-seller-content .pim-tag-chip.badge-primary {
    background: rgba(var(--ui-primary-rgb), .1) !important;
    color: var(--ui-primary) !important;
}

.ui-page-seller-content .pim-marketplace-listing {
    cursor: pointer;
    margin-left: 0.22rem;
    font-size: 0.65em !important;
    opacity: 0.55;
    color: inherit !important;
    position: relative;
    top: -0.5px;
}

.ui-page-seller-content .pim-marketplace-listing:hover {
    opacity: 0.95 !important;
}

.ui-page-seller-content .pim-sales-cell {
    display: block;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-content .pim-bundle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-faint, var(--ui-faint));
    min-height: 1.5rem;
}

.ui-page-seller-content .pim-bundle-cell--yes .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ui-fs-xs);
    background: rgba(var(--ui-primary-rgb), .1);
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-bundle-cell--yes .badge i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-content .pim-lqs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.28rem;
    min-width: 4.5rem;
}

.ui-page-seller-content .pim-lqs__value {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ui-page-seller-content .pim-lqs__track {
    display: block;
    width: 4.5rem;
    height: 4px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-ink-rgb), 0.08);
    overflow: hidden;
}

.ui-page-seller-content .pim-lqs__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.ui-page-seller-content .pim-lqs--good .pim-lqs__value {
    color: var(--ui-series-3);
}

.ui-page-seller-content .pim-lqs--good .pim-lqs__fill {
    background: var(--ui-success);
}

.ui-page-seller-content .pim-lqs--mid .pim-lqs__value {
    color: var(--ui-bronze);
}

.ui-page-seller-content .pim-lqs--mid .pim-lqs__fill {
    background: var(--ui-warning);
}

.ui-page-seller-content .pim-lqs--poor .pim-lqs__value {
    color: var(--ui-danger);
}

.ui-page-seller-content .pim-lqs--poor .pim-lqs__fill {
    background: var(--ui-danger);
}

.ui-page-seller-content .pim-lqs--none .pim-lqs__value {
    color: var(--ui-faint, var(--ui-faint)); font-weight: 600;
}

.ui-page-seller-content .pim-lqs--none .pim-lqs__track {
    visibility: hidden;
}

body[data-theme=dark] .ui-page-seller-content .pim-lqs__track {
    background: var(--ui-track);
}

body[data-theme=dark] .ui-page-seller-content .pim-lqs--good .pim-lqs__value {
    color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-seller-content .pim-lqs--mid .pim-lqs__value {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-seller-content .pim-lqs--poor .pim-lqs__value {
    color: var(--ui-danger-text);
}

.ui-page-seller-content .accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.ui-page-seller-content .accordion-button:not(.collapsed) {
    box-shadow: none !important;
}

#variant_table tbody tr:last-child td {
    border-bottom: none !important;
}

.ui-page-seller-content .marketplace_products_table_wrapper .table-responsive {
    overflow: visible;
}

.ui-page-seller-content .marketplace_products_table_wrapper .dropdown-menu {
    z-index: 1060;
}

.ui-page-seller-content .pim-wizard-product-card {
    position: relative;
    border: 1px solid rgba(var(--ui-text-rgb), 0.07);
    border-radius: var(--ui-radius);
    padding: 36px 28px 26px;
    text-align: center;
    background:
    radial-gradient(circle at top, var(--ui-info-tint), transparent 34%),
    linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface) 100%);
    box-shadow:
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 20px 40px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-seller-content .pim-wizard-product-avatar {
    width: 104px;
    height: 104px;
    border-radius: var(--ui-radius-pill);
    object-fit: cover;
    display: inline-block;
    background: linear-gradient(180deg, var(--ui-subtle), var(--ui-track));
    border: 4px solid color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow:
    0 0 0 1px rgba(var(--ui-ink-rgb), 0.08),
    0 18px 34px rgba(var(--ui-ink-rgb), 0.12);
}

.ui-page-seller-content .pim-wizard-product-title {
    max-width: 320px;
    margin: 18px auto 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: var(--ui-fs-xl);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--ui-text);
}

.ui-page-seller-content .pim-wizard-panel {
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(circle at top center, rgba(var(--ui-muted-rgb), 0.12), transparent 30%),
    linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface) 100%);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    border-radius: var(--ui-radius);
    padding: 36px 32px 32px;
    box-shadow:
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 24px 48px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-seller-content .pim-wizard-bulk-progress-inner {
    width: 100%;
}

.ui-page-seller-content .pim-wizard-bulk-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-seller-content .pim-wizard-bulk-progress-label span:last-child {
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-page-seller-content .pim-wizard-bulk-progress .progress {
    height: 0.35rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.12);
}

.ui-page-seller-content .pim-wizard-bulk-progress .progress-bar {
    border-radius: var(--ui-radius-pill);
    background: linear-gradient(90deg, var(--ui-primary), rgba(var(--ui-primary-rgb), 0.75));
}

#marketplaceWizardModal .modal-body,
#marketplaceWizardModal .modal-body * {
    box-sizing: border-box;
}

#marketplaceWizardModal .form-control,
#marketplaceWizardModal .form-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#marketplaceWizardModal .form-control:focus,
#marketplaceWizardModal .form-select:focus {
    transform: none;
}

#marketplaceWizardModal .form-label {
    margin-bottom: 9px;
}

#marketplaceWizardModal .form-text {
    margin-top: 10px;
}

.ui-page-seller-content .pim-wizard-modal-content {
    overflow: hidden;
    border-radius: var(--ui-radius, 12px);
}

.ui-page-seller-content .pim-wizard-modal-content .modal-header {
    background: var(--ui-surface);
}

.ui-page-seller-content .pim-wizard-modal-content .modal-body {
    background: var(--ui-subtle);
}

body[data-theme=dark] .ui-page-seller-content .pim-wizard-modal-content .modal-body {
    background: var(--ui-track);
}

.ui-page-seller-content .pim-wizard-body-inner {
    max-width: 640px;
    margin: 0 auto;
}

#marketplaceWizardModal.pim-wizard-modal--attributes-step>.modal-dialog {
    max-width: min(1140px, calc(100vw - 1.5rem));
    width: 100%;
}

.ui-page-seller-content .pim-wizard-step-review-attributes .pim-wizard-body-inner {
    max-width: none;
    width: 100%;
    margin: 0;
}

.ui-page-seller-content .pim-wizard-step-review-attributes .pim-wizard-review-card .card-body {
    padding: 1.25rem 1.35rem;
}

.ui-page-seller-content .pim-wizard-step-review-attributes #marketplaceWizardAttributesTableMount .table-responsive,
.ui-page-seller-content .pim-wizard-step-review-attributes #marketplaceWizardAttributesRecommendationsMount .table-responsive {
    border-radius: var(--ui-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent);
    background: var(--ui-surface);
}

body[data-theme=dark] .ui-page-seller-content .pim-wizard-step-review-attributes #marketplaceWizardAttributesTableMount .table-responsive,
body[data-theme=dark] .ui-page-seller-content .pim-wizard-step-review-attributes #marketplaceWizardAttributesRecommendationsMount .table-responsive {
    border-color: var(--ui-border-strong);
}

.ui-page-seller-content .pim-wizard-step-review-attributes #attr_recommendations_wrapper.alert {
    border-radius: var(--ui-radius-sm);
    margin-bottom: 0;
}

.ui-page-seller-content .pim-wizard-review-content .pim-wizard-review-card {
    border-radius: var(--ui-radius);
}

.ui-page-seller-content .pim-wizard-review-content .pim-wizard-review-card .card-title {
    font-weight: 600;
    color: var(--ui-text);
}

#marketplaceWizardStepProduct .pim-wizard-product-card {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#marketplaceWizardStepProduct .pim-wizard-product-avatar {
    background: transparent;
}

#marketplaceWizardStepConnections .pim-wizard-connection-card.pim-wizard-review-card {
    border: 0;
    box-shadow: none;
}

#marketplaceWizardStepConnections .pim-wizard-connection-card.pim-wizard-review-card .card-body {
    padding: 1.25rem;
}

.ui-page-seller-content .pim-wizard-review-description {
    min-height: 180px;
}

body[data-theme=dark] .ui-page-seller-content .pim-wizard-review-description {
    border-color: var(--ui-border-strong) !important;
}

.ui-page-seller-content .pim-wizard-stepper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.ui-page-seller-content .pim-wizard-stepper::-webkit-scrollbar {
    height: 4px;
}

.ui-page-seller-content .pim-wizard-stepper::-webkit-scrollbar-thumb {
    background: rgba(var(--ui-muted-rgb), 0.35);
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-content .pim-wizard-stepper-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 4.25rem;
    max-width: 5.5rem;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-muted);
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: default;
    transition: color 0.2s ease, transform 0.15s ease;
}

.ui-page-seller-content .pim-wizard-stepper-item:focus-visible {
    outline: none;
}

.ui-page-seller-content .pim-wizard-stepper-item:focus-visible .pim-wizard-stepper-dot {
    box-shadow: 0 0 0 3px var(--ui-primary-line);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-clickable {
    cursor: pointer;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-clickable:hover:not(:disabled) .pim-wizard-stepper-dot {
    transform: scale(1.06);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-clickable:hover:not(:disabled) .pim-wizard-stepper-label {
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-wizard-stepper-item:disabled,
.ui-page-seller-content .pim-wizard-stepper-item.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-active:disabled {
    opacity: 1;
    cursor: default;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-upcoming:not(:disabled):not(.is-locked) {
    opacity: 0.72;
}

.ui-page-seller-content .pim-wizard-stepper-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ui-muted);
    background: var(--ui-surface);
    border: 2px solid rgba(var(--ui-muted-rgb), 0.28);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-active .pim-wizard-stepper-dot {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    box-shadow: 0 2px 8px var(--ui-primary-line);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done .pim-wizard-stepper-dot {
    color: var(--ui-on-primary);
    background: var(--ui-success);
    border-color: var(--ui-success);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done.is-clickable .pim-wizard-stepper-dot::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done.is-clickable .pim-wizard-stepper-dot {
    font-size: 0;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done.is-done-later {
    opacity: 0.88;
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done.is-done-later .pim-wizard-stepper-label {
    color: var(--ui-muted);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-active .pim-wizard-stepper-label {
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-wizard-stepper-item.is-done .pim-wizard-stepper-label {
    color: var(--ui-success);
}

.ui-page-seller-content .pim-wizard-stepper-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    color: inherit;
}

.ui-page-seller-content .pim-wizard-section-lead {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    margin-bottom: 1rem;
}

#marketplaceWizardModal .pim-wizard-product-card {
    border-color: rgba(var(--ui-muted-rgb), 0.15);
}

#marketplaceWizardModal .pim-wizard-product-title:not(.text-muted) {
    color: var(--ui-text);
}

#marketplaceWizardModal .pim-wizard-panel {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    border: 1px solid rgba(var(--ui-muted-rgb), 0.12);
    box-shadow: none;
    padding: 1.25rem;
}

.ui-page-seller-content .pim-wizard-body-inner-connections {
    max-width: 920px;
}

.ui-page-seller-content .pim-wizard-connection-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--ui-muted);
}

.ui-page-seller-content .pim-wizard-connection-kicker i {
    font-size: var(--ui-fs-lg);
    opacity: 0.85;
}

.ui-page-seller-content .pim-wizard-connection-card--source .pim-wizard-connection-kicker {
    color: var(--ui-info);
}

.ui-page-seller-content .pim-wizard-connection-card--target .pim-wizard-connection-kicker {
    color: var(--ui-primary);
}

.ui-page-seller-content .pim-wizard-connection-title {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.35rem;
}

.ui-page-seller-content .pim-wizard-connection-lead {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
    margin-bottom: 1rem;
}

.ui-page-seller-content .pim-wizard-connection-card {
    border-radius: var(--ui-radius-sm);
    border-width: 1px;
    border-style: solid;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-seller-content .pim-wizard-connections-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
    font-size: var(--ui-fs-kpi);
    line-height: 1;
}

.ui-page-seller-content .asset-upload-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(var(--ui-ink-rgb), 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body[data-theme=dark] .ui-page-seller-content .asset-upload-progress-overlay {
    background: rgba(var(--ui-black-rgb), 0.55);
}

.ui-page-seller-content .asset-upload-progress-card {
    width: 100%;
    max-width: 26rem;
    padding: 1.35rem 1.25rem 1.25rem;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid rgba(var(--ui-muted-rgb), 0.14);
    box-shadow:
    0 0.25rem 0.5rem rgba(var(--ui-black-rgb), 0.06),
    0 1rem 2.5rem rgba(var(--ui-ink-rgb), 0.12);
}

body[data-theme=dark] .ui-page-seller-content .asset-upload-progress-card {
    box-shadow: var(--ui-shadow-pop);
}

.ui-page-seller-content .asset-upload-progress-spinner-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.ui-page-seller-content .asset-upload-progress-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 0.2rem;
}

.ui-page-seller-content .asset-upload-progress-heading {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.75rem;
    color: var(--ui-text);
}

.ui-page-seller-content .asset-upload-progress-track {
    height: 0.5rem !important;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
    background: rgba(var(--ui-muted-rgb), 0.12);
}

.ui-page-seller-content .asset-upload-progress-track .progress-bar {
    border-radius: var(--ui-radius-pill);
    background: linear-gradient(90deg, var(--ui-primary), rgba(var(--ui-primary-rgb), 0.85));
}

.ui-page-seller-content .pim-wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ui-page-seller-content .pim-wizard-step-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ui-page-seller-content .pim-wizard-step-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 2px;
}

.ui-page-seller-content .pim-wizard-step-group-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius);
    object-fit: contain;
    background: var(--ui-surface);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    box-shadow: 0 4px 14px rgba(var(--ui-ink-rgb), 0.06);
    padding: 8px;
    flex: 0 0 44px;
}

.ui-page-seller-content .pim-wizard-step-group-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ui-silver);
}

.ui-page-seller-content .pim-wizard-step-group-title {
    font-size: var(--ui-fs-lg);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ui-text);
}

.ui-page-seller-content .pim-wizard-step-group-copy {
    min-width: 0;
}

.ui-page-seller-content .pim-wizard-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--ui-radius);
    background: linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface) 100%);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    box-shadow:
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 12px 28px rgba(var(--ui-ink-rgb), 0.05);
}

.ui-page-seller-content .pim-wizard-step-icon {
    width: 40px;
    height: 40px;
    text-align: center;
    flex: 0 0 40px;
    font-size: var(--ui-fs-lg);
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-subtle);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-seller-content .pim-wizard-step-icon .fa-check {
    color: var(--ui-success-text);
}

.ui-page-seller-content .pim-wizard-step-icon .fa-circle {
    color: var(--ui-faint);
}

.ui-page-seller-content .pim-wizard-step-label {
    font-weight: 650;
    color: var(--ui-series-6);
    font-size: var(--ui-fs-md);
    line-height: 1.55;
    letter-spacing: -0.01em;
}

.ui-page-seller-content .pim-wizard-step-label small {
    display: block;
    margin-top: 3px;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    font-weight: 500;
    color: var(--ui-silver);
}

.ui-page-seller-content .pim-wizard-step-message {
    display: none;
    margin-top: 8px;
    font-size: var(--ui-fs-sm);
    line-height: 1.6;
    color: var(--ui-series-6);
}

.ui-page-seller-content .pim-wizard-step.is-error .pim-wizard-step-message {
    display: block;
    color: var(--ui-danger-text);
}

.ui-page-seller-content .pim-wizard-step.is-running {
    background:
    linear-gradient(110deg, color-mix(in srgb, var(--ui-surface) 96%, transparent) 32%, rgba(var(--ui-white-rgb), 0.96) 45%, color-mix(in srgb, var(--ui-surface) 96%, transparent) 58%),
    linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface) 100%);
    background-size: 220% 100%, 100% 100%;
    animation: pimWizardCardWave 1.9s ease-in-out infinite;
    border-color: var(--ui-info-tint);
}

.ui-page-seller-content .pim-wizard-step.is-completed {
    background: linear-gradient(180deg, var(--ui-page) 0%, var(--ui-subtle) 100%);
    border-color: rgba(var(--ui-success-rgb), 0.18);
}

.ui-page-seller-content .pim-wizard-step.is-error {
    background: linear-gradient(180deg, var(--ui-page) 0%, var(--ui-danger-tint) 100%);
    border-color: var(--ui-danger-tint);
}

.ui-page-seller-content .pim-wizard-step.is-running .pim-wizard-step-icon {
    background: var(--ui-info-tint);
    border-color: var(--ui-info-tint);
}

.ui-page-seller-content .pim-wizard-step.is-completed .pim-wizard-step-icon {
    background: var(--ui-success-tint);
    border-color: rgba(var(--ui-success-rgb), 0.14);
}

.ui-page-seller-content .pim-wizard-step.is-error .pim-wizard-step-icon {
    background: var(--ui-danger-tint);
    border-color: var(--ui-danger-tint);
}

.ui-page-seller-content .ui-autocomplete.pim-wizard-autocomplete {
    z-index: 9999 !important;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--ui-radius);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    box-shadow:
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 24px 48px rgba(var(--ui-ink-rgb), 0.12);
    padding: 8px;
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
    backdrop-filter: blur(16px);
}

.ui-page-seller-content .pim-wizard-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ui-radius);
}

.ui-page-seller-content .ui-menu-item-wrapper.ui-state-active .pim-wizard-autocomplete-item,
.ui-page-seller-content .ui-state-active .pim-wizard-autocomplete-item {
    background: var(--ui-page);
    margin: 0;
    border: none;
}

.ui-page-seller-content .pim-wizard-autocomplete-item img {
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-pill);
    object-fit: cover;
    flex: 0 0 40px;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-seller-content .pim-wizard-autocomplete-item small {
    display: block;
    color: var(--ui-muted);
}

#bulkEditAttributesModal .bea-segmented {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.12);
    -webkit-user-select: none;
    user-select: none;
}

#bulkEditAttributesModal .bea-segmented-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    box-shadow: 0 3px 8px rgba(var(--ui-black-rgb), 0.12), 0 3px 1px rgba(var(--ui-black-rgb), 0.04);
    transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}

#bulkEditAttributesModal .bea-segmented:has(#bulk_edit_attributes_mode_product:checked) .bea-segmented-thumb,
#bulkEditAttributesModal .bea-segmented.is-second .bea-segmented-thumb {
    transform: translateX(100%);
}

#bulkEditAttributesModal .bea-segment {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 7px 12px;
    text-align: center;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ui-text);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: color .2s ease;
}

#bulkEditAttributesModal .btn-check:checked + .bea-segment {
    font-weight: 600;
}

#bulkEditAttributesModal .btn-check:focus-visible + .bea-segment {
    outline: 2px solid var(--ui-primary);
    outline-offset: 1px;
}

#bulkEditAttributesModal .bea-segmented-caption {
    margin: 0 0 16px;
    text-align: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

body[data-theme=dark] #bulkEditAttributesModal .bea-segmented {
    background: rgba(var(--ui-muted-rgb), 0.24);
}

body[data-theme=dark] #bulkEditAttributesModal .bea-segmented-thumb {
    background: var(--ui-neutral);
    border-color: transparent;
    box-shadow: var(--ui-shadow-pop);
}

/* PIM settings dialogs (create listing, fetch content, autofixer, copy to source, import attributes):
   kit header, inputs and footer; the setting groups read as sections split by a hairline instead of
   floating cards */
#addMarketplaceProductOptionsModal .modal-body .card,
#fetchMarketplaceContentModal .modal-body .card,
#pimAutofixerSettingsModal .modal-body .card,
#copyToLocalProductSettingsModal .modal-body .card,
#import-attributes-modal .modal-body .card,
#bulkAddMarketplaceProductOptionsModal .modal-body .card {
    margin: 0 !important; /* the views give the cards mt-3 / mb-3 */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

#addMarketplaceProductOptionsModal .modal-body .card + .card,
#fetchMarketplaceContentModal .modal-body .card + .card,
#pimAutofixerSettingsModal .modal-body .card + .card,
#copyToLocalProductSettingsModal .modal-body .card + .card,
#import-attributes-modal .modal-body .card + .card,
#bulkAddMarketplaceProductOptionsModal .modal-body .card + .card {
    border-top: 1px solid var(--ui-border);
}

#addMarketplaceProductOptionsModal .modal-body .card-body,
#fetchMarketplaceContentModal .modal-body .card-body,
#pimAutofixerSettingsModal .modal-body .card-body,
#copyToLocalProductSettingsModal .modal-body .card-body,
#import-attributes-modal .modal-body .card-body,
#bulkAddMarketplaceProductOptionsModal .modal-body .card-body {
    padding: 1.1rem 0;
}

#addMarketplaceProductOptionsModal .modal-body .card:first-child .card-body,
#fetchMarketplaceContentModal .modal-body .card:first-child .card-body,
#pimAutofixerSettingsModal .modal-body .card:first-child .card-body,
#copyToLocalProductSettingsModal .modal-body .card:first-child .card-body,
#import-attributes-modal .modal-body .card:first-child .card-body,
#bulkAddMarketplaceProductOptionsModal .modal-body .card:first-child .card-body {
    padding-top: 0.25rem;
}

#addMarketplaceProductOptionsModal .modal-body .card:last-child .card-body,
#fetchMarketplaceContentModal .modal-body .card:last-child .card-body,
#pimAutofixerSettingsModal .modal-body .card:last-child .card-body,
#copyToLocalProductSettingsModal .modal-body .card:last-child .card-body,
#import-attributes-modal .modal-body .card:last-child .card-body,
#bulkAddMarketplaceProductOptionsModal .modal-body .card:last-child .card-body {
    padding-bottom: 0.25rem;
}

#addMarketplaceProductOptionsModal .modal-body .card h6,
#fetchMarketplaceContentModal .modal-body .card h6,
#pimAutofixerSettingsModal .modal-body .card h6,
#copyToLocalProductSettingsModal .modal-body .card h6,
#import-attributes-modal .modal-body .card h6,
#bulkAddMarketplaceProductOptionsModal .modal-body .card h6 {
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

#addMarketplaceProductOptionsModal .modal-body .card small,
#fetchMarketplaceContentModal .modal-body .card small,
#pimAutofixerSettingsModal .modal-body .card small,
#copyToLocalProductSettingsModal .modal-body .card small,
#import-attributes-modal .modal-body .card small,
#bulkAddMarketplaceProductOptionsModal .modal-body .card small {
    display: block;
    line-height: 1.45;
}

#addMarketplaceProductOptionsModal .cd-fetch-identifier,
#fetchMarketplaceContentModal .cd-fetch-identifier,
#pimAutofixerSettingsModal .cd-fetch-identifier,
#copyToLocalProductSettingsModal .cd-fetch-identifier,
#import-attributes-modal .cd-fetch-identifier,
#bulkAddMarketplaceProductOptionsModal .cd-fetch-identifier {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ui-border);
}

#copyToLocalProductSettingsModal .cd-copy-list {
    overflow: hidden;
}

#copyToLocalProductSettingsModal .cd-copy-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem;
}

#copyToLocalProductSettingsModal .cd-copy-list > * + *,
#copyToLocalProductSettingsModal .cd-copy-group > * + .cd-copy-row,
#copyToLocalProductSettingsModal .cd-copy-group + .cd-copy-group {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #copyToLocalProductSettingsModal .cd-copy-list > * + *,
body[data-theme=dark] #copyToLocalProductSettingsModal .cd-copy-group > * + .cd-copy-row,
body[data-theme=dark] #copyToLocalProductSettingsModal .cd-copy-group + .cd-copy-group {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#copyToLocalProductSettingsModal .cd-copy-icon {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--ui-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ui-fs-sm); color: var(--ui-muted); background: rgba(var(--ui-muted-rgb), 0.12);
}

#copyToLocalProductSettingsModal .cd-copy-text {
    flex: 1 1 auto; min-width: 0; line-height: 1.25;
}

#copyToLocalProductSettingsModal .cd-copy-title {
    font-size: var(--ui-fs-base); font-weight: 600; letter-spacing: -0.01em;
}

#copyToLocalProductSettingsModal .cd-copy-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 1rem 0.75rem 3.6rem; padding: 0.45rem 0.75rem; border-radius: var(--ui-radius-md); background: rgba(var(--ui-muted-rgb), 0.1);
}

#copyToLocalProductSettingsModal .cd-copy-sub-label {
    margin: 0; font-size: var(--ui-fs-sm); cursor: pointer;
}

#copyToLocalProductSettingsModal .cd-copy-sub .form-check-input {
    width: 2rem; height: 1.15rem;
}

#import-attributes-modal .select2-container--default .select2-selection--single {
    border: 0;
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    display: flex;
    align-items: center;
    font-size: var(--ui-fs-sm);
    background-color: rgba(var(--ui-muted-rgb), 0.12);
}

#import-attributes-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

#productActivityLogModal .modal-dialog {
    max-width: 640px;
}

#pimActivityLogModal .modal-dialog {
    max-width: min(1080px, calc(100vw - 1.5rem));
    width: 100%;
}

#productActivityLogModal,
#pimActivityLogModal {
    --activity-log-sheet-bg: var(--ui-track);
}

body[data-theme=dark] #productActivityLogModal,
body[data-theme=dark] #pimActivityLogModal {
    --activity-log-sheet-bg: var(--ui-page);
}

#productActivityLogModal .modal-content,
#pimActivityLogModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
    background: var(--activity-log-sheet-bg);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

body[data-theme=dark] #productActivityLogModal .modal-content,
body[data-theme=dark] #pimActivityLogModal .modal-content {
    background: var(--activity-log-sheet-bg);
}

#productActivityLogModal .modal-header,
#pimActivityLogModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: var(--activity-log-sheet-bg);
}

#productActivityLogModal .activity-log-header-actions,
#pimActivityLogModal .activity-log-header-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}

#productActivityLogModal .activity-log-header-actions .btn-close,
#pimActivityLogModal .activity-log-header-actions .btn-close {
    margin: 0;
}

#productActivityLogModal .modal-title,
#pimActivityLogModal .modal-title {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#productActivityLogModal .modal-title i,
#pimActivityLogModal .modal-title i {
    display: none;
}

#productActivityLogModal .btn-close,
#pimActivityLogModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#productActivityLogModal .modal-body,
#pimActivityLogModal .modal-body {
    padding: 0.35rem 1.35rem 1.2rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    background: var(--activity-log-sheet-bg);
}

#productActivityLogModal .form-control,
#productActivityLogModal .form-select,
#pimActivityLogModal .form-control,
#pimActivityLogModal .form-select {
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    /* background-color only: the shorthand also removed the .form-select arrow */
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#productActivityLogModal .form-select,
#pimActivityLogModal .form-select {
    padding-right: 2.25rem;
}

#productActivityLogModal .pricing-type-toggle,
#pimActivityLogModal .pricing-type-toggle {
    display: flex;
    gap: 2px;
    margin-bottom: 0.75rem;
    padding: 3px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#productActivityLogModal .pricing-type-toggle-btn,
#pimActivityLogModal .pricing-type-toggle-btn {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--ui-text);
    margin-bottom: 0;
}

#productActivityLogModal .pricing-type-toggle-btn .ptt-label,
#pimActivityLogModal .pricing-type-toggle-btn .ptt-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

#productActivityLogModal .btn-check:checked + .pricing-type-toggle-btn,
#pimActivityLogModal .btn-check:checked + .pricing-type-toggle-btn {
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-black-rgb), 0.12), 0 1px 1px rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] #productActivityLogModal .btn-check:checked + .pricing-type-toggle-btn,
body[data-theme=dark] #pimActivityLogModal .btn-check:checked + .pricing-type-toggle-btn {
    background: var(--ui-track);
    box-shadow: var(--ui-shadow-pop);
}

#productActivityLogModal .btn-check:checked + .pricing-type-toggle-btn .ptt-label,
#pimActivityLogModal .btn-check:checked + .pricing-type-toggle-btn .ptt-label {
    font-weight: 600;
}

#productActivityLogModal .btn-check:focus-visible + .pricing-type-toggle-btn,
#pimActivityLogModal .btn-check:focus-visible + .pricing-type-toggle-btn {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.55);
    outline-offset: 1px;
}

#productActivityLogModal .pricing-sections-card,
#pimActivityLogModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#productActivityLogModal .pricing-section,
#pimActivityLogModal .pricing-section {
    padding: 1rem 0;
}

#productActivityLogModal .pricing-section + .pricing-section,
#pimActivityLogModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #productActivityLogModal .pricing-section + .pricing-section,
body[data-theme=dark] #pimActivityLogModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#productActivityLogModal .pricing-section-label,
#pimActivityLogModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
    margin-bottom: 0.55rem;
}

#productActivityLogModal .pricing-section-label i,
#pimActivityLogModal .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#productActivityLogModal .activity-log-timeline,
#pimActivityLogModal .activity-log-timeline {
    position: relative;
    max-height: min(58vh, 32rem);
    overflow-y: auto;
    padding: 0 0.05rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    background: var(--activity-log-sheet-bg);
}

#productActivityLogModal .activity-log-day,
#pimActivityLogModal .activity-log-day {
    margin-bottom: 1rem;
}

#productActivityLogModal .activity-log-day:last-child,
#pimActivityLogModal .activity-log-day:last-child {
    margin-bottom: 0;
}

#productActivityLogModal .activity-log-day-label,
#pimActivityLogModal .activity-log-day-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.2rem 0.2rem 0.45rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ui-muted);
    background: var(--activity-log-sheet-bg);
}

body[data-theme=dark] #productActivityLogModal .activity-log-day-label,
body[data-theme=dark] #pimActivityLogModal .activity-log-day-label {
    background: var(--activity-log-sheet-bg);
}

#productActivityLogModal .activity-log-mp-block,
#pimActivityLogModal .activity-log-mp-block {
    margin-bottom: 0.75rem;
}

#productActivityLogModal .activity-log-mp-block:last-child,
#pimActivityLogModal .activity-log-mp-block:last-child {
    margin-bottom: 0;
}

#productActivityLogModal .activity-log-mp-label,
#pimActivityLogModal .activity-log-mp-label {
    padding: 0 0.2rem 0.35rem;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-text);
}

#productActivityLogModal .activity-log-group,
#pimActivityLogModal .activity-log-group {
    background: var(--ui-surface);
    border: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #productActivityLogModal .activity-log-group,
body[data-theme=dark] #pimActivityLogModal .activity-log-group {
    background: var(--ui-subtle);
    border-color: rgba(var(--ui-muted-rgb), 0.45);
    box-shadow: none;
}

#productActivityLogModal .activity-log-item,
#pimActivityLogModal .activity-log-item {
    display: block;
    padding: 0;
    border-bottom: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
}

body[data-theme=dark] #productActivityLogModal .activity-log-item,
body[data-theme=dark] #pimActivityLogModal .activity-log-item {
    border-bottom-color: rgba(var(--ui-muted-rgb), 0.45);
}

#productActivityLogModal .activity-log-item:last-child,
#pimActivityLogModal .activity-log-item:last-child {
    border-bottom: 0;
}

#productActivityLogModal .activity-log-summary,
#pimActivityLogModal .activity-log-summary {
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    list-style: none;
    cursor: pointer;
}

#productActivityLogModal .activity-log-summary::-webkit-details-marker,
#pimActivityLogModal .activity-log-summary::-webkit-details-marker,
#productActivityLogModal .activity-log-summary::marker,
#pimActivityLogModal .activity-log-summary::marker {
    display: none;
    content: '';
}

#productActivityLogModal .activity-log-summary:focus,
#pimActivityLogModal .activity-log-summary:focus {
    outline: none;
}

#productActivityLogModal .activity-log-summary:focus-visible,
#pimActivityLogModal .activity-log-summary:focus-visible {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.55);
    outline-offset: -2px;
    border-radius: var(--ui-radius-sm);
}

#productActivityLogModal .activity-log-item:hover > .activity-log-summary,
#pimActivityLogModal .activity-log-item:hover > .activity-log-summary {
    background: rgba(var(--ui-muted-rgb), 0.06);
}

#productActivityLogModal .activity-log-time-wrap,
#pimActivityLogModal .activity-log-time-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

#productActivityLogModal .activity-log-chevron,
#pimActivityLogModal .activity-log-chevron {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    opacity: 0.45;
    transition: transform 0.18s ease;
}

#productActivityLogModal .activity-log-item[open] > .activity-log-summary .activity-log-chevron,
#pimActivityLogModal .activity-log-item[open] > .activity-log-summary .activity-log-chevron {
    transform: rotate(90deg);
}

#productActivityLogModal .activity-log-item[open] .activity-log-preview,
#pimActivityLogModal .activity-log-item[open] .activity-log-preview {
    display: none;
}

#productActivityLogModal .activity-log-item:not([open]) .activity-log-error,
#pimActivityLogModal .activity-log-item:not([open]) .activity-log-error {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#productActivityLogModal .activity-log-more-hint,
#pimActivityLogModal .activity-log-more-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-primary);
    margin-top: 0.08rem;
}

#productActivityLogModal .activity-log-expand,
#pimActivityLogModal .activity-log-expand {
    padding: 0 0.9rem 0.95rem 3.45rem;
}

#productActivityLogModal .activity-log-expand-row,
#pimActivityLogModal .activity-log-expand-row {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    gap: 0.3rem 0.75rem;
    padding: 0.4rem 0;
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
}

body[data-theme=dark] #productActivityLogModal .activity-log-expand-row,
body[data-theme=dark] #pimActivityLogModal .activity-log-expand-row {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#productActivityLogModal .activity-log-expand-key,
#pimActivityLogModal .activity-log-expand-key {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    letter-spacing: -0.01em;
    padding-top: 0.08rem;
    line-height: 1.35;
}

#productActivityLogModal .activity-log-expand-val,
#pimActivityLogModal .activity-log-expand-val {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    letter-spacing: -0.01em;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
}

#productActivityLogModal .activity-log-expand .activity-log-change-before,
#pimActivityLogModal .activity-log-expand .activity-log-change-before,
#productActivityLogModal .activity-log-expand .activity-log-change-after,
#pimActivityLogModal .activity-log-expand .activity-log-change-after {
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

#productActivityLogModal .activity-log-expand-row:first-child,
#pimActivityLogModal .activity-log-expand-row:first-child {
    border-top: 0;
    padding-top: 0.1rem;
}

#productActivityLogModal .activity-log-expand-error + .activity-log-expand-row,
#pimActivityLogModal .activity-log-expand-error + .activity-log-expand-row {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    padding-top: 0.4rem;
}

#productActivityLogModal .activity-log-expand-meta,
#pimActivityLogModal .activity-log-expand-meta {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ui-muted);
}

body[data-theme=dark] #productActivityLogModal .activity-log-expand-meta,
body[data-theme=dark] #pimActivityLogModal .activity-log-expand-meta {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#productActivityLogModal .activity-log-expand-error,
#pimActivityLogModal .activity-log-expand-error {
    margin: 0 0 0.2rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-danger);
    white-space: pre-wrap;
    word-break: break-word;
}

body[data-theme=dark] #productActivityLogModal .activity-log-expand-error,
body[data-theme=dark] #pimActivityLogModal .activity-log-expand-error {
    color: var(--ui-danger);
}

#productActivityLogModal .activity-log-icon,
#pimActivityLogModal .activity-log-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--ui-radius-xs);
    flex-shrink: 0;
    margin-top: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.14);
}

#productActivityLogModal .activity-log-icon.is-green,
#pimActivityLogModal .activity-log-icon.is-green {
    color: var(--ui-success);
    background: rgba(var(--ui-success-rgb), 0.16);
}

#productActivityLogModal .activity-log-icon.is-orange,
#pimActivityLogModal .activity-log-icon.is-orange {
    color: var(--ui-series-4);
    background: rgba(var(--ui-warning-rgb), 0.16);
}

#productActivityLogModal .activity-log-icon.is-red,
#pimActivityLogModal .activity-log-icon.is-red {
    color: var(--ui-danger);
    background: rgba(var(--ui-danger-rgb), 0.14);
}

#productActivityLogModal .activity-log-icon.is-purple,
#pimActivityLogModal .activity-log-icon.is-purple {
    color: var(--ui-series-5);
    background: rgba(var(--ui-purple-rgb), 0.16);
}

#productActivityLogModal .activity-log-icon.is-gray,
#pimActivityLogModal .activity-log-icon.is-gray {
    color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.18);
}

body[data-theme=dark] #productActivityLogModal .activity-log-icon.is-red,
body[data-theme=dark] #pimActivityLogModal .activity-log-icon.is-red {
    color: var(--ui-danger);
}

#productActivityLogModal .activity-log-body,
#pimActivityLogModal .activity-log-body {
    flex: 1;
    min-width: 0;
}

#productActivityLogModal .activity-log-top,
#pimActivityLogModal .activity-log-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

#productActivityLogModal .activity-log-title,
#pimActivityLogModal .activity-log-title {
    font-weight: 600;
    font-size: var(--ui-fs-base);
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.3;
    min-width: 0;
}

#productActivityLogModal .activity-log-time,
#pimActivityLogModal .activity-log-time {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

#productActivityLogModal .activity-log-context,
#pimActivityLogModal .activity-log-context {
    margin-top: 0.12rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    letter-spacing: -0.01em;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#productActivityLogModal .activity-log-error,
#pimActivityLogModal .activity-log-error {
    margin-top: 0.22rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ui-danger);
    white-space: pre-wrap;
    word-break: break-word;
}

body[data-theme=dark] #productActivityLogModal .activity-log-error,
body[data-theme=dark] #pimActivityLogModal .activity-log-error {
    color: var(--ui-danger);
}

#productActivityLogModal .activity-log-note,
#pimActivityLogModal .activity-log-note {
    margin-top: 0.2rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
}

#productActivityLogModal .activity-log-changes,
#pimActivityLogModal .activity-log-changes {
    margin-top: 0.28rem;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

#productActivityLogModal .activity-log-change,
#pimActivityLogModal .activity-log-change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.28rem 0.5rem;
    min-width: 0;
}

#productActivityLogModal .activity-log-change-label,
#pimActivityLogModal .activity-log-change-label {
    flex: 0 0 auto;
    max-width: none;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ui-muted);
    line-height: 1.35;
}

#productActivityLogModal .activity-log-change-values,
#pimActivityLogModal .activity-log-change-values {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.28rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.35;
    min-width: 0;
    text-align: left;
}

#productActivityLogModal .activity-log-change-before,
#pimActivityLogModal .activity-log-change-before {
    color: var(--ui-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#productActivityLogModal .activity-log-change-arrow,
#pimActivityLogModal .activity-log-change-arrow {
    color: var(--ui-muted);
    opacity: 0.7;
    font-size: var(--ui-fs-xs);
}

#productActivityLogModal .activity-log-change-after,
#pimActivityLogModal .activity-log-change-after {
    color: var(--ui-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#productActivityLogModal .activity-log-change-after.is-down,
#pimActivityLogModal .activity-log-change-after.is-down {
    color: var(--ui-danger);
}

body[data-theme=dark] #productActivityLogModal .activity-log-change-after.is-down,
body[data-theme=dark] #pimActivityLogModal .activity-log-change-after.is-down {
    color: var(--ui-danger);
}

#productActivityLogModal .activity-log-skeleton,
#pimActivityLogModal .activity-log-skeleton {
    background: var(--ui-surface);
    border: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    border-radius: var(--ui-radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #productActivityLogModal .activity-log-skeleton,
body[data-theme=dark] #pimActivityLogModal .activity-log-skeleton {
    background: var(--ui-subtle);
    border-color: rgba(var(--ui-muted-rgb), 0.45);
    box-shadow: none;
}

#productActivityLogModal .activity-log-skeleton-row,
#pimActivityLogModal .activity-log-skeleton-row {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

#productActivityLogModal .activity-log-skeleton-icon,
#pimActivityLogModal .activity-log-skeleton-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.18);
    flex-shrink: 0;
}

#productActivityLogModal .activity-log-skeleton-lines,
#pimActivityLogModal .activity-log-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#productActivityLogModal .activity-log-skeleton-line,
#pimActivityLogModal .activity-log-skeleton-line {
    height: 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.18);
}

#productActivityLogModal .activity-log-skeleton-line.is-short,
#pimActivityLogModal .activity-log-skeleton-line.is-short {
    width: 42%;
}

#productActivityLogModal .activity-log-load-more,
#pimActivityLogModal .activity-log-load-more {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
    width: 100%;
    margin-top: 0.85rem;
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-text);
}

#productActivityLogModal .activity-log-load-more:hover,
#pimActivityLogModal .activity-log-load-more:hover {
    background: rgba(var(--ui-muted-rgb), 0.16);
    color: var(--ui-text);
}

#productActivityLogModal .activity-log-empty,
#pimActivityLogModal .activity-log-empty {
    text-align: center;
    color: var(--ui-muted);
    padding: 2.4rem 0.75rem 2rem;
    font-size: var(--ui-fs-sm);
    letter-spacing: -0.01em;
}

#productActivityLogModal .activity-log-empty-icon,
#pimActivityLogModal .activity-log-empty-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius);
    margin: 0 auto 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
}

#pimActivityLogModal .pim-activity-log-filters {
    display: grid;
    gap: 0.55rem;
}

#pimActivityLogModal .activity-log-product-card {
    background: var(--ui-surface);
    border: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow);
    margin-bottom: 0.85rem;
}

#pimActivityLogModal .activity-log-product-card:last-child {
    margin-bottom: 0;
}

body[data-theme=dark] #pimActivityLogModal .activity-log-product-card {
    background: var(--ui-subtle);
    border-color: rgba(var(--ui-muted-rgb), 0.45);
    box-shadow: none;
}

#pimActivityLogModal .activity-log-product-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 0.5px solid rgba(var(--ui-text-rgb), 0.12);
    cursor: pointer;
    list-style: none;
}

#pimActivityLogModal .activity-log-product-head::-webkit-details-marker,
#pimActivityLogModal .activity-log-product-head::marker {
    display: none;
}

#pimActivityLogModal .activity-log-product-card:not([open]) > .activity-log-product-head {
    border-bottom: 0;
}

body[data-theme=dark] #pimActivityLogModal .activity-log-product-head {
    border-bottom-color: rgba(var(--ui-muted-rgb), 0.45);
}

#pimActivityLogModal .activity-log-product-open {
    flex-shrink: 0;
}

#pimActivityLogModal .activity-log-product-chevron {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    opacity: 0.45;
    transition: transform 0.18s ease;
}

#pimActivityLogModal .activity-log-product-card[open] > .activity-log-product-head .activity-log-product-chevron {
    transform: rotate(90deg);
}

#pimActivityLogModal .activity-log-product-photo {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    object-fit: cover;
    background: rgba(var(--ui-muted-rgb), 0.12);
    flex-shrink: 0;
}

#pimActivityLogModal .activity-log-product-head-text {
    min-width: 0;
    flex: 1 1 auto;
    margin-right: auto;
}

#pimActivityLogModal .activity-log-product-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pimActivityLogModal .activity-log-product-meta {
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pimActivityLogModal .activity-log-product-body {
    padding: 0.7rem 0.75rem 0.85rem;
    background: var(--activity-log-sheet-bg);
}

#pimActivityLogModal .activity-log-product-body .activity-log-mp-block:last-child {
    margin-bottom: 0;
}

#pimActivityLogModal .activity-log-day .activity-log-product-card:last-child {
    margin-bottom: 0;
}

#productActivityLogModal .activity-log-retention,
#pimActivityLogModal .activity-log-retention {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--ui-muted);
    opacity: 0.85;
}

#bulkActionsModal .modal-title i {
    display: none;
}

#bulkActionsModal .modal-footer .form-select,
#bulkActionsModal .modal-footer .select2-container .select2-selection--multiple {
    font-family: inherit;
    font-size: var(--ui-fs-sm);
}

#bulkActionsModal #show-marketplace-price-targets {
    margin-bottom: 0.5rem !important;
}

#bulkActionsModal #show-marketplace-price-targets .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

#bulkActionsModal #show-marketplace-price-targets .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#bulkActionsModal .pricing-sections-card,
#bulkActionsModal .pricing-sections-card .form-control,
#bulkActionsModal .pricing-sections-card .form-select,
#bulkActionsModal .pricing-sections-card .form-label,
#bulkActionsModal .pricing-sections-card .input-group-text {
    font-family: inherit;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#bulkActionsModal .pricing-sections-card .form-control,
#bulkActionsModal .pricing-sections-card .form-select {
    min-height: 42px;
    color: var(--ui-text);
}

/* Inset groups and prefixed inputs read as one bordered kit field */
#bulkActionsModal .pricing-inset-group,
#bulkActionsModal .pricing-sections-card .input-group:not(.pricing-inset-group .input-group) {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    overflow: hidden;
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}

#bulkActionsModal .pricing-inset-group:focus-within,
#bulkActionsModal .pricing-sections-card .input-group:not(.pricing-inset-group .input-group):focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

#bulkActionsModal .pricing-inset-group .input-group {
    background: transparent;
    border-radius: 0;
}

#bulkActionsModal .pricing-sections-card .input-group .form-control,
#bulkActionsModal .pricing-sections-card .input-group .form-control:focus {
    border: 0 !important; /* darkmode.css paints .form-control with !important */
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;
}

#bulkActionsModal .pricing-sections-card .input-group-text {
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    padding-left: 0.85rem;
    padding-right: 0.45rem;
}

#bulkActionsModal .pricing-sections-card .form-check-input {
    width: 2.4rem;
    height: 1.4rem;
    cursor: pointer;
    box-shadow: none;
}

#bulkActionsModal #show-marketplace-price-adjustment {
    margin-bottom: 0 !important;
}

#bulkActionsModal .pricing-type-toggle {
    display: flex;
    gap: 2px;
    margin-bottom: 0.75rem;
    padding: 3px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#bulkActionsModal .pricing-type-toggle-btn {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--ui-text);
    margin-bottom: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

#bulkActionsModal .pricing-type-toggle-btn:hover {
    background: transparent;
}

#bulkActionsModal .pricing-type-toggle-btn .ptt-icon {
    display: none;
}

#bulkActionsModal .pricing-type-toggle-btn .ptt-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    white-space: nowrap;
}

#bulkActionsModal .pricing-type-toggle-btn .ptt-example {
    display: none !important;
}

#bulkActionsModal .btn-check:checked + .pricing-type-toggle-btn {
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-black-rgb), 0.12), 0 1px 1px rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] #bulkActionsModal .btn-check:checked + .pricing-type-toggle-btn {
    background: var(--ui-track);
    box-shadow: var(--ui-shadow-pop);
}

#bulkActionsModal .btn-check:checked + .pricing-type-toggle-btn .ptt-label {
    color: var(--ui-text);
    font-weight: 600;
}

#bulkActionsModal .btn-check:focus-visible + .pricing-type-toggle-btn {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.55);
    outline-offset: 1px;
}

#bulkActionsModal .pricing-field-hint,
#bulkActionsModal .ptt-example-caption,
#bulkActionsModal #bulk-source-price-range-display,
#bulkActionsModal #bulk-source-price-selection-info,
#bulkActionsModal #bulk-tier-pricing-empty-note:empty {
    display: none !important;
}

#bulkActionsModal .pricing-sections-card {
    overflow: visible;
    box-shadow: none;
    border: 0;
    background: transparent;
}

#bulkActionsModal .pricing-section {
    padding: 1rem 0;
}

#bulkActionsModal .pricing-section + .pricing-section,
#bulkActionsModal #show-marketplace-price-targets .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #bulkActionsModal .pricing-section + .pricing-section,
body[data-theme=dark] #bulkActionsModal #show-marketplace-price-targets .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#bulkActionsModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
    margin-bottom: 0;
}

#bulkActionsModal .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#bulkActionsModal .pricing-beta {
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    letter-spacing: 0.02em;
    color: var(--ui-muted);
    text-transform: uppercase;
}

#bulkActionsModal .pricing-source-skip-alert {
    margin-top: 0.55rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-warning-text);
    background: rgba(var(--ui-warning-rgb), 0.14);
}

body[data-theme=dark] #bulkActionsModal .pricing-source-skip-alert {
    color: var(--ui-warning-text);
    background: rgba(var(--ui-warning-rgb), 0.16);
}

#bulkActionsModal .pricing-source-skip-alert.is-all-skipped {
    color: var(--ui-danger-text);
    background: rgba(var(--ui-danger-rgb), 0.12);
}

body[data-theme=dark] #bulkActionsModal .pricing-source-skip-alert.is-all-skipped {
    color: var(--ui-danger-text);
    background: rgba(var(--ui-danger-rgb), 0.18);
}

#bulkActionsModal .pricing-live-range {
    margin-top: 0;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #bulkActionsModal .pricing-live-range {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#bulkActionsModal .pricing-live-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
}

#bulkActionsModal .pricing-live-range-row + .pricing-live-range-row {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #bulkActionsModal .pricing-live-range-row + .pricing-live-range-row {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#bulkActionsModal .pricing-live-range-label {
    color: var(--ui-muted);
    font-weight: 400;
    letter-spacing: -0.01em;
}

#bulkActionsModal .pricing-live-range-values {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

#bulkActionsModal .pricing-live-old {
    color: var(--ui-muted);
    font-weight: 400;
}

#bulkActionsModal .pricing-live-arrow {
    color: var(--ui-muted);
    font-weight: 400;
    opacity: 0.7;
}

#bulkActionsModal .pricing-live-new {
    font-weight: 600;
    color: var(--ui-text);
}

#bulkActionsModal .pricing-live-new.is-down {
    color: var(--ui-danger);
}

body[data-theme=dark] #bulkActionsModal .pricing-live-new.is-down {
    color: var(--ui-danger);
}

#bulkActionsModal .pricing-datetime-input[readonly] {
    cursor: pointer;
    background: transparent;
    opacity: 1;
}

#bulkActionsModal .pricing-live-new.is-warn {
    color: var(--ui-danger);
}

#bulkActionsModal .pricing-sections-card .btn-sm {
    border: 0;
    border-radius: var(--ui-radius-sm);
    min-height: 32px;
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-text);
    font-weight: 500;
}

#bulkActionsModal .pricing-sections-card .btn-sm:hover {
    background: rgba(var(--ui-muted-rgb), 0.2);
    color: var(--ui-text);
}

#bulkActionsModal .select2-container .select2-selection--multiple {
    border: 0 !important;
    border-radius: var(--ui-radius-md)!important;
    min-height: 42px;
    background: rgba(var(--ui-muted-rgb), 0.12) !important;
    padding: 0.25rem 0.4rem;
}

#bulkActionsModal .tier-pricing-row,
#bulkActionsModal #bulk-tier-pricing-rows-header {
    display: grid;
    grid-template-columns: 5.5rem minmax(6.5rem, 1fr) minmax(7.25rem, 1.2fr) 2rem;
    gap: 0.45rem;
    align-items: center;
}

#bulkActionsModal .bulk-tier-row-wrap .tier-pricing-row {
    margin-bottom: 0;
    padding: 0;
}

#bulkActionsModal #bulk-tier-pricing-rows-header {
    margin-bottom: 0.3rem;
    color: var(--ui-muted);
    font-weight: 500;
    font-size: var(--ui-fs-xs);
}

#bulkActionsModal .tier-qty-group,
#bulkActionsModal .tier-price-group,
#bulkActionsModal .tier-percent-group,
#bulkActionsModal .tier-value-group {
    width: 100%;
    max-width: none;
    min-width: 0;
}

#bulkActionsModal .tier-row-example {
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: var(--ui-fs-sm);
}

#bulkActionsModal .bulk-tier-inline-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.08rem;
    min-width: 0;
    min-height: 42px;
    padding-right: 0.15rem;
    font-variant-numeric: tabular-nums;
    font-size: var(--ui-fs-xs);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: right;
}

#bulkActionsModal .bulk-tier-inline-pair {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.28rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#bulkActionsModal .bulk-tier-inline-pair .pricing-live-old,
#bulkActionsModal .bulk-tier-inline-pair .pricing-live-arrow,
#bulkActionsModal .bulk-tier-inline-pair .pricing-live-new {
    font-size: inherit;
}

#bulkActionsModal #bulk-tier-pricing-rows-header .bulk-tier-inline-preview {
    justify-content: center;
    align-items: flex-end;
    min-height: 0;
    color: var(--ui-muted);
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    text-align: right;
}

#bulkActionsModal .remove-tier-row-btn {
    width: 2rem;
    height: 2rem;
    justify-self: end;
    border-radius: var(--ui-radius-pill);
}

#bulkPricePreviewModal {
    z-index: 2000;
}

#bulkPricePreviewModal .bpp-list-wrap {
    max-height: 55vh;
    overflow-y: auto;
}

#bulkPricePreviewModal .bpp-product-card {
    margin-bottom: 0.5rem;
}

#bulkPricePreviewModal .bpp-product-card .card-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem;
}

#bulkPricePreviewModal .bpp-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    flex-shrink: 0;
}

#bulkPricePreviewModal .bpp-product-info {
    flex: 0 1 170px;
    max-width: 170px;
    min-width: 0;
}

#bulkPricePreviewModal .bpp-product-title {
    font-weight: 500;
    font-size: var(--ui-fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkPricePreviewModal .bpp-product-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkPricePreviewModal .bpp-stat-block {
    flex: 1 1 0;
    text-align: right;
    min-width: 90px;
}

#bulkPricePreviewModal .bpp-stat-label {
    display: block;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ui-muted);
}

#bulkPricePreviewModal .bpp-stat-value {
    font-size: var(--ui-fs-md);
    font-weight: 700;
}

#bulkPricePreviewModal .bpp-stat-value.bpp-has-discount {
    color: var(--ui-danger);
}

#bulkPricePreviewModal .bpp-stat-value.bpp-muted-value {
    font-weight: 400;
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
}

#bulkPricePreviewModal .bpp-status-block {
    flex-shrink: 0;
}

#bulkPricePreviewModal #bulk-price-preview-search {
    max-width: 260px;
}

#bulkPricePreviewModal .bpp-discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.35rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
    margin-top: 0.1rem;
}

body[data-theme=dark] #bulkPricePreviewModal .bpp-discount-badge {
    color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

#bulkPricePreviewModal .bpp-errors-box {
    border: 1px solid var(--ui-danger-soft);
    background: var(--ui-danger-tint);
    border-radius: var(--ui-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

#bulkPricePreviewModal .bpp-errors-header {
    font-weight: 700;
    font-size: var(--ui-fs-sm);
    color: var(--ui-danger);
    margin-bottom: 0.35rem;
}

#bulkPricePreviewModal .bpp-errors-list {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 110px;
    overflow-y: auto;
}

#bulkPricePreviewModal .bpp-errors-list li {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

#bulkPricePreviewModal .bpp-errors-list li strong {
    font-weight: 600;
}

@media (hover: none) {
    .ui-page-seller-content .pim-status-filter-card__menu {
    opacity: 1;
    }
}

@media (max-width: 1199.98px) {
    .ui-page-seller-content .pim-overview__statuses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ui-page-seller-content .pim-status-filter-card {
    border-bottom: 1px solid var(--ui-border, var(--ui-border));
    }

    .ui-page-seller-content .pim-overview__statuses .pim-status-filter-card:first-child,
    .ui-page-seller-content .pim-overview__statuses .pim-status-filter-card:last-child {
    border-radius: 0;
    }

    .ui-page-seller-content .pim-status-filter-card:nth-child(4n) {
    border-right: 0;
    }

    .ui-page-seller-content .pim-status-filter-card:nth-last-child(-n+3) {
    border-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .ui-page-seller-content .pim-listings-chart-card__canvas-wrap:not(.is-empty) {
    padding-left: 0.4rem;
        padding-right: 0.5rem;
    }

    .ui-page-seller-content .pim-overview__statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-seller-content .pim-status-filter-card:nth-child(4n) {
    border-right: 1px solid var(--ui-border, var(--ui-border));
    }

    .ui-page-seller-content .pim-status-filter-card:nth-child(2n) {
    border-right: 0;
    }

    .ui-page-seller-content .pim-status-filter-card:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--ui-border, var(--ui-border));
    }

    .ui-page-seller-content .pim-status-filter-card:nth-last-child(-n+2) {
    border-bottom: 0;
    }

    .ui-page-seller-content .pim-status-filter-card:last-child:nth-child(odd) {
    grid-column: span 2;
    }

    .ui-page-seller-content .pim-status-filter-card:nth-last-child(2):nth-child(even) {
    border-bottom: 1px solid var(--ui-border, var(--ui-border));
    }

    .ui-page-seller-content .pim-status-filter-card__count {
    font-size: var(--ui-fs-lg);
    }

    .ui-page-seller-content .pim-filter-bar {
    grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .ui-page-seller-content .pim-guide__steps {
    grid-template-columns: minmax(0, 1fr);
    }

    .ui-page-seller-content .pim-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-seller-content .pim-wizard-connections-arrow {
    transform: rotate(90deg);
    }
}

@media (max-width: 767.98px) {
    #datatable-products_wrapper > .dataTables_filter {
    flex: 1 1 100%;
        margin-left: 0;
    }

    #datatable-products_wrapper > .dt-buttons {
    flex: 1 1 100%;
    }

    #datatable-products_wrapper > .dt-buttons > * {
    flex: 1 1 auto;
        justify-content: center;
    }

    #datatable-products_wrapper > .dt-buttons > .btn-group > .btn {
    width: 100%;
        justify-content: center;
    }

    .ui-page-seller-content .pim-product-title,
    .ui-page-seller-content .pim-tag-chips,
    .ui-page-seller-content .pim-marketplace-chips {
    max-width: 16rem;
    }

    .ui-page-seller-content .marketplace_products_table_wrapper .table-responsive {
    overflow-x: auto;
    }

    .ui-page-seller-content .variant-group-summary-card {
    flex-direction: column;
    }

    .ui-page-seller-content .variant-group-summary-photo-wrapper {
    width: 80px;
        min-width: 80px;
        height: 80px;
    }

    .ui-page-seller-content .variant-group-summary-stats {
    justify-content: flex-start;
    }

    .ui-page-seller-content .pim-wizard-panel {
    padding: 28px 22px 24px;
        border-radius: var(--ui-radius);
    }

    .ui-page-seller-content .pim-wizard-product-card {
    padding: 28px 20px 22px;
    }

    #productActivityLogModal .modal-content,
    #pimActivityLogModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }

    #bulkActionsModal .modal-content,
    #editMarketplacePriceModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }

    #bulkActionsModal .tier-pricing-row,
    #bulkActionsModal #bulk-tier-pricing-rows-header {
    grid-template-columns: 4.75rem minmax(5.5rem, 1fr) minmax(6.5rem, 1.1fr) 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bulkEditAttributesModal .bea-segmented-thumb {
    transition: none;
    }
}

@media (min-width: 576px) {
    #pimActivityLogModal .pim-activity-log-filters-row {
    display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
    }
}

@media (min-width: 768px) {
    #pimActivityLogModal .pim-activity-log-filters-row {
    grid-template-columns: 1fr 1fr 1fr;
    }
}

@keyframes pimWizardCardWave {
        0% {
            background-position: 180% 0, 0 0;
        }

        100% {
            background-position: -40% 0, 0 0;
        }
    }

/* ---------- Page: seller/fbcproducts.php (root .ui-page-seller-fbcproducts) ---------- */
#bulkActionsModal .modal-content {
    border: 0;
    box-shadow: none;
}

#bulkActionsModal .bulk-actions-modal-panel {
    border: 1px solid var(--ui-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

#bulkActionsModal .bulk-actions-modal-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
}

#bulkActionsModal .bulk-actions-modal-hero-start {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

#bulkActionsModal .bulk-actions-modal-hero-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-kpi);
    flex-shrink: 0;
}

#bulkActionsModal .bulk-actions-modal-hero-text {
    min-width: 0;
    flex: 1 1 auto;
}

#bulkActionsModal .bulk-actions-modal-hero-title {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.2;
}

#bulkActionsModal .bulk-actions-modal-hero-subline {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#bulkActionsModal .bulk-actions-modal-hero-subline-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

#bulkActionsModal .bulk-actions-modal-hero-subline-value {
    color: var(--ui-text);
    font-weight: 500;
}

#bulkActionsModal .bulk-actions-modal-hero-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

#bulkActionsModal .bulk-actions-modal-hero-dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
    border-radius: var(--ui-radius-pill);
}

#bulkActionsModal .bulk-actions-modal-hero-dirty-pill i {
    font-size: var(--ui-fs-2xs);
}

#bulkActionsModal .bulk-actions-modal-close {
    font-size: var(--ui-fs-base);
}

#bulkActionsModal .bulk-actions-modal-tabs {
    background: var(--ui-subtle);
    border-bottom: 1px solid var(--ui-border);
    padding: 0 1rem;
}

#bulkActionsModal .bulk-actions-modal-tabs .nav {
    gap: 0.25rem;
    border-bottom: 0;
}

#bulkActionsModal .bulk-actions-modal-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 1rem;
    font-weight: 500;
    color: var(--ui-muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#bulkActionsModal .bulk-actions-modal-tabs .nav-link:hover {
    color: var(--ui-text);
}

#bulkActionsModal .bulk-actions-modal-tabs .nav-link.active {
    color: var(--ui-primary);
    border-bottom-color: var(--ui-primary);
    font-weight: 600;
}

#bulkActionsModal .bulk-actions-modal-tabs .nav-link i {
    font-size: var(--ui-fs-lg);
}

#bulkActionsModal .modal-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

#bulkActionsModal .tab-content > .tab-pane {
    padding-top: 0.25rem;
}

#bulkActionsModal .bulk-actions-modal-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    margin-bottom: 1rem;
    overflow: hidden;
}

#bulkActionsModal .bulk-actions-modal-card--accent {
    background: linear-gradient(180deg, var(--ui-primary-soft), rgba(var(--ui-primary-rgb), 0));
    border-color: var(--ui-primary-line);
}

#bulkActionsModal .bulk-actions-modal-card--plain {
    background: var(--ui-subtle);
}

#bulkActionsModal .bulk-actions-modal-card-body {
    padding: 1rem 1.1rem;
}

#bulkActionsModal .bulk-actions-modal-card-body > .row:last-child {
    margin-bottom: 0;
}

#bulkActionsModal .bulk-actions-shortcut-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#bulkActionsModal .bulk-actions-shortcut-header i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

#bulkActionsModal .bulk-actions-shortcut-title {
    font-weight: 600;
    color: var(--ui-text);
}

#bulkActionsModal .bulk-actions-shortcut-hint {
    display: block;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    margin-top: 0.5rem;
}

#bulkActionsModal .bulk-actions-shortcut-hint-inline {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#bulkActionsModal .bulk-actions-shortcut-controls .form-select {
    font-weight: 500;
}

#bulkActionsModal .bulk-actions-inline-label {
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--ui-muted);
    margin-bottom: 0.25rem;
}

#bulkActionsModal .bulk-actions-forwarding-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem;
}

#bulkActionsModal .bulk-actions-forwarding-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 1rem;
    color: var(--ui-text);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    position: relative;
    min-height: 88px;
}

#bulkActionsModal .bulk-actions-forwarding-btn:hover {
    border-color: var(--ui-primary-line);
    background: var(--ui-subtle);
}

#bulkActionsModal .bulk-actions-forwarding-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line);
}

#bulkActionsModal .bulk-actions-forwarding-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xl);
    flex-shrink: 0;
}

#bulkActionsModal .bulk-actions-forwarding-btn--enable .bulk-actions-forwarding-icon {
    background: rgba(var(--ui-success-rgb), 0.12);
    color: var(--ui-success-text);
}

#bulkActionsModal .bulk-actions-forwarding-btn--disable .bulk-actions-forwarding-icon {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

#bulkActionsModal .bulk-actions-forwarding-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#bulkActionsModal .bulk-actions-forwarding-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
}

#bulkActionsModal .bulk-actions-forwarding-desc {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.35;
}

#bulkActionsModal .bulk-actions-forwarding-check {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--ui-radius-pill);
    border: 2px solid var(--ui-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-on-primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#bulkActionsModal .bulk-actions-forwarding-btn[aria-pressed="true"] {
    border-color: var(--ui-primary);
    background: var(--ui-row-hover);
    box-shadow: 0 0 0 1px var(--ui-primary) inset;
}

#bulkActionsModal .bulk-actions-forwarding-btn--enable[aria-pressed="true"] .bulk-actions-forwarding-check {
    background: var(--ui-series-3);
    border-color: var(--ui-series-3);
    opacity: 1;
}

#bulkActionsModal .bulk-actions-forwarding-btn--disable[aria-pressed="true"] .bulk-actions-forwarding-check {
    background: var(--ui-warning-text);
    border-color: var(--ui-warning-text);
    opacity: 1;
}

#bulkActionsModal .bulk-actions-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

#bulkActionsModal .bulk-actions-mode-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 0.85rem;
    color: var(--ui-text);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    position: relative;
    min-height: 88px;
}

#bulkActionsModal .bulk-actions-mode-btn:hover {
    border-color: var(--ui-primary-line);
    background: var(--ui-subtle);
}

#bulkActionsModal .bulk-actions-mode-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line);
}

#bulkActionsModal .bulk-actions-mode-btn.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: 0 0 0 1px var(--ui-primary) inset;
}

#bulkActionsModal .bulk-actions-mode-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-lg);
    flex-shrink: 0;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#bulkActionsModal .bulk-actions-mode-btn.is-active .bulk-actions-mode-icon {
    background: var(--ui-primary-line);
}

#bulkActionsModal .bulk-actions-mode-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#bulkActionsModal .bulk-actions-mode-title {
    font-weight: 600;
    font-size: var(--ui-fs-md);
}

#bulkActionsModal .bulk-actions-mode-desc {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

#bulkActionsModal .bulk-actions-mode-radio {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--ui-radius-pill);
    border: 2px solid var(--ui-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    flex-basis: 1.1rem;
    align-self: flex-start;
    margin-top: 0.1rem;
}

#bulkActionsModal .bulk-actions-mode-btn.is-active .bulk-actions-mode-radio {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
}

#bulkActionsModal .bulk-actions-mode-btn.is-active .bulk-actions-mode-radio::after {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
}

#bulkActionsModal .bulk-countries-matrix {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

#bulkActionsModal .bulk-continent-group {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    overflow: hidden;
}

#bulkActionsModal .bulk-continent-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--ui-subtle);
    border-bottom: 1px solid var(--ui-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

#bulkActionsModal .bulk-continent-group-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-text);
}

#bulkActionsModal .bulk-continent-group-name i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-md);
}

#bulkActionsModal .bulk-continent-group-count {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    background: rgba(var(--ui-black-rgb), 0.04);
    padding: 0.15rem 0.5rem;
    border-radius: var(--ui-radius-pill);
}

#bulkActionsModal .bulk-continent-group-body {
    display: grid;
    grid-template-columns: 1fr;
}

#bulkActionsModal .bulk-country-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--ui-border);
}

#bulkActionsModal .bulk-country-row:first-child {
    border-top: 0;
}

#bulkActionsModal .bulk-country-row-label {
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkActionsModal .bulk-country-row .form-select {
    font-size: var(--ui-fs-sm);
    min-width: 0;
}

#bulkActionsModal .bulk-country-row.is-dirty {
    background: var(--ui-primary-soft);
}

#bulkActionsModal .bulk-country-row.is-dirty .bulk-country-row-label {
    font-weight: 600;
}

#bulkActionsModal .bulk-actions-modal-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-subtle);
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
}

#bulkActionsModal .bulk-actions-modal-summary {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    min-width: 0;
}

#bulkActionsModal .bulk-actions-modal-summary i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
    flex-shrink: 0;
}

#bulkActionsModal .bulk-actions-modal-summary-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkActionsModal .bulk-actions-modal-summary.is-dirty {
    color: var(--ui-warning-text);
}

#bulkActionsModal .bulk-actions-modal-summary.is-dirty i {
    color: var(--ui-warning-text);
}

#bulkActionsModal .bulk-actions-modal-footer-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

#bulkActionsModal .bulk-actions-modal-apply {
    min-width: 9rem;
    font-weight: 600;
}

#bulkActionsModal .bulk-actions-modal-apply:disabled {
    cursor: not-allowed;
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-panel {
    border-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-hero {
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-hero-icon {
    background: var(--ui-primary-line);
    color: var(--ui-info);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-tabs {
    background: var(--ui-page);
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-card {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-card--accent {
    background: linear-gradient(180deg, var(--ui-primary-tint), rgba(var(--ui-primary-rgb), 0));
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-card--plain {
    background: var(--ui-surface);
}

body[data-theme=dark] #bulkActionsModal .bulk-continent-group {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-continent-group-header {
    background: var(--ui-track);
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-continent-group-count {
    background: var(--ui-track);
    color: var(--ui-faint);
}

body[data-theme=dark] #bulkActionsModal .bulk-country-row.is-dirty {
    background: var(--ui-primary-line);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-forwarding-btn {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-forwarding-btn:hover {
    background: var(--ui-border);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-btn {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-btn:hover {
    background: var(--ui-border);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-btn.is-active {
    background: var(--ui-primary-tint);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-icon {
    background: var(--ui-primary-line);
    color: var(--ui-info);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-btn.is-active .bulk-actions-mode-icon {
    color: var(--ui-info-text);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-mode-radio {
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-footer {
    background: var(--ui-page);
    border-top-color: var(--ui-border);
}

body[data-theme=dark] #bulkActionsModal .bulk-actions-modal-hero-dirty-pill {
    color: var(--ui-warning);
}

#fbc-products-page .subtitle a,
#fbc-products-page .fbc-howto-toggle {
    text-decoration: none;
}

#fbc-products-page .fbc-howto-toggle:hover {
    text-decoration: underline;
}

.ui-page-seller-fbcproducts .fbc-callout {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1rem;
    padding: 14px 16px;
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    border-left: 3px solid var(--ui-warning);
}

.ui-page-seller-fbcproducts .fbc-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    background: var(--ui-warning-tint);
    color: var(--ui-bronze);
    font-size: var(--ui-fs-xl);
}

.ui-page-seller-fbcproducts .fbc-callout-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-page-seller-fbcproducts .fbc-callout-title {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-callout-desc {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-callout .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.ui-page-seller-fbcproducts .fbc-howto {
    margin-bottom: 1rem;
    padding: 14px 16px 16px;
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.ui-page-seller-fbcproducts .fbc-howto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ui-page-seller-fbcproducts .fbc-howto-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-howto-title i {
    color: var(--ui-warning);
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-fbcproducts .fbc-howto-head .btn-close {
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-fbcproducts .fbc-howto-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-page-seller-fbcproducts .fbc-howto-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
}

.ui-page-seller-fbcproducts .fbc-howto-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

.ui-page-seller-fbcproducts .fbc-howto-step-title {
    font-size: var(--ui-fs-base);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-howto-step-desc {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.4;
}

.ui-page-seller-fbcproducts .fbc-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.ui-page-seller-fbcproducts .fbc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-page-seller-fbcproducts .fbc-chip {
    color: var(--ui-body);
    background: var(--ui-surface);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: max(36px, var(--ui-tap-min, 0px));
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.ui-page-seller-fbcproducts .fbc-chip:hover {
    border-color: var(--ui-faint);
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-chip.is-active {
    color: var(--primary);
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary);
}

.ui-page-seller-fbcproducts .fbc-chip i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-fbcproducts .fbc-chip-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    text-align: center;
}

.ui-page-seller-fbcproducts .fbc-chip.is-active .fbc-chip-count {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-page-seller-fbcproducts .fbc-dot-success {
    color: var(--ui-success);
}

.ui-page-seller-fbcproducts .fbc-dot-muted {
    color: var(--ui-faint);
}

.ui-page-seller-fbcproducts .fbc-dot-danger {
    color: var(--ui-danger);
}

.ui-page-seller-fbcproducts .fbc-center-filter {
    width: auto;
    min-width: 220px;
    max-width: 100%;
}

#fbc-products-page .fbc-table-card .card-body {
    padding: 16px;
}

#datatable-fbc-products tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

#datatable-fbc-products tbody tr {
    cursor: pointer;
}

#datatable-fbc-products tbody tr:hover td {
    background-color: var(--ui-row-hover);
}

#datatable-fbc-products th.fbc-col-check,
#datatable-fbc-products td.fbc-col-check {
    width: 44px;
    cursor: default;
}

#datatable-fbc-products td.fbc-col-open {
    width: 32px;
    color: var(--ui-faint);
    font-size: var(--ui-fs-lg);
    transition: color 150ms ease;
}

#datatable-fbc-products tbody tr:hover td.fbc-col-open {
    color: var(--ui-primary);
}

#datatable-fbc-products tbody tr.selected td.fbc-col-open {
    color: var(--ui-faint) !important;
}

#datatable-fbc-products_filter input,
#datatable-select-products_filter input {
    width: 260px;
    max-width: 100%;
}

.ui-page-seller-fbcproducts .fbc-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    text-align: left;
}

.ui-page-seller-fbcproducts .fbc-product-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-page-seller-fbcproducts .fbc-product-text {
    min-width: 0;
}

/* Product cells wrap (title + EAN/SKU) so the table fits a phone instead of one 600px nowrap line */
#datatable-fbc-products tbody td:has(.fbc-product-cell) {
    white-space: normal;
}

.ui-page-seller-fbcproducts #datatable-fbc-products .fbc-product-meta {
    white-space: normal;
    flex-wrap: wrap;
}

.ui-page-seller-fbcproducts .fbc-product-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-page-seller-fbcproducts .fbc-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-center-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ui-page-seller-fbcproducts .fbc-center-name {
    font-size: var(--ui-fs-base);
}

.ui-page-seller-fbcproducts .fbc-stock {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-stock.is-empty {
    color: var(--ui-danger);
}

.ui-page-seller-fbcproducts .fbc-badge-success,
.ui-page-seller-fbcproducts .fbc-badge-muted,
.ui-page-seller-fbcproducts .fbc-badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
}

.ui-page-seller-fbcproducts .fbc-badge-success i,
.ui-page-seller-fbcproducts .fbc-badge-muted i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-fbcproducts .fbc-badge-success {
    background: rgba(var(--ui-success-rgb), 0.12);
    color: var(--ui-success-text);
}

.ui-page-seller-fbcproducts .fbc-badge-muted {
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-badge-warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

#datatable-select-products tbody tr.selected > *,
#datatable-fbc-products tbody tr.selected > * {
    box-shadow: none !important;
    color: inherit !important;
}

.ui-page-seller-fbcproducts table.dataTable tbody > tr.selected,
.ui-page-seller-fbcproducts table.dataTable tbody > tr > .selected {
    background-color: transparent !important;
}

#datatable-select-products tbody tr.selected,
#datatable-fbc-products tbody tr.selected {
    color: var(--ui-body) !important;
}

#datatable-select-products tbody tr.selected td.fbc-muted-cell {
    color: var(--ui-muted) !important;
}

.ui-page-seller-fbcproducts .fbc-modal table.dataTable thead th {
    border-bottom-color: var(--ui-border) !important;
}

.ui-page-seller-fbcproducts .fbc-modal table.dataTable tbody td {
    border-color: var(--ui-border);
}

#datatable-fbc-products tbody tr.selected td,
#datatable-select-products tbody tr.selected td {
    background-color: var(--ui-row-hover) !important;
}

#fbcBulkActionsBtn .fbc-bulk-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-white-rgb), 0.25);
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-fbcproducts .dt-buttons #fbcBulkActionsBtn.btn,
.ui-page-seller-fbcproducts .dt-buttons #fbcBulkActionsBtn.btn:hover {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

.ui-page-seller-fbcproducts .dt-buttons #fbcBulkActionsBtn i {
    color: var(--ui-on-primary);
}

.ui-page-seller-fbcproducts .dt-buttons .fbc-clear-selection.btn {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--ui-muted) !important;
}

.ui-page-seller-fbcproducts .dt-buttons .fbc-clear-selection.btn:hover {
    color: var(--ui-text) !important;
}

.ui-page-seller-fbcproducts .fbc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
    white-space: normal;
}

.ui-page-seller-fbcproducts .fbc-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: var(--ui-radius);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-kpi);
}

.ui-page-seller-fbcproducts .fbc-empty-title {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-empty-desc {
    max-width: 420px;
    margin-bottom: 10px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-modal .fbc-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.ui-page-seller-fbcproducts .fbc-modal .fbc-modal-header .btn-close {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}

.ui-page-seller-fbcproducts .fbc-modal-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ui-border);
}

.ui-page-seller-fbcproducts .fbc-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
}

.ui-page-seller-fbcproducts .fbc-modal-heading {
    min-width: 0;
}

.ui-page-seller-fbcproducts .fbc-modal-heading .modal-title {
    margin: 0;
    line-height: 1.3;
}

.ui-page-seller-fbcproducts .fbc-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-modal .modal-body {
    padding: 20px;
}

.ui-page-seller-fbcproducts .fbc-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-section + .fbc-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ui-border);
}

.ui-page-seller-fbcproducts .fbc-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ui-page-seller-fbcproducts .fbc-section-title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-section-desc {
    margin: 2px 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-section-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.ui-page-seller-fbcproducts .fbc-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ui-page-seller-fbcproducts .fbc-center-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ui-page-seller-fbcproducts .fbc-center-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.ui-page-seller-fbcproducts .fbc-center-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ui-subtle);
}

.ui-page-seller-fbcproducts .fbc-center-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    color: var(--ui-muted);
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-fbcproducts .fbc-center-card-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-center-card-sub {
    flex-basis: 100%;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-center-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
}

.ui-page-seller-fbcproducts .fbc-setting {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ui-page-seller-fbcproducts .fbc-setting > .switch {
    flex-shrink: 0;
}

.ui-page-seller-fbcproducts .fbc-setting--boxed {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.ui-page-seller-fbcproducts .fbc-setting-title {
    display: block;
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    cursor: pointer;
}

.ui-page-seller-fbcproducts .fbc-setting-desc {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

.ui-page-seller-fbcproducts .fbc-cutoff {
    position: relative;
    flex-shrink: 0;
    width: 120px;
}

.ui-page-seller-fbcproducts .fbc-cutoff .form-control {
    padding-right: 30px;
    font-variant-numeric: tabular-nums;
}

.ui-page-seller-fbcproducts .fbc-cutoff-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    transform: translateY(-50%);
}

.ui-page-seller-fbcproducts .fbc-cutoff-clear:hover {
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-cutoff input[type=time]::-webkit-calendar-picker-indicator {
    display: none;
}

.ui-page-seller-fbcproducts .fbc-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ui-page-seller-fbcproducts .fbc-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
    min-width: 0;
}

.ui-page-seller-fbcproducts .fbc-fact-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-fact-value {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.ui-page-seller-fbcproducts .fbc-fact-value a {
    color: var(--ui-primary);
    text-decoration: none;
}

.ui-page-seller-fbcproducts .fbc-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--ui-radius);
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-fbcproducts .fbc-inline-warning i {
    margin-top: 2px;
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-fbcproducts .fbc-routing-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ui-page-seller-fbcproducts .fbc-routing-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-fbcproducts .fbc-routing-chip.is-warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-page-seller-fbcproducts .fbc-routing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.ui-page-seller-fbcproducts .fbc-routing-search {
    position: relative;
    flex: 1 1 220px;
}

.ui-page-seller-fbcproducts .fbc-routing-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--ui-faint);
    transform: translateY(-50%);
}

.ui-page-seller-fbcproducts .fbc-routing-search .form-control {
    padding-left: 34px;
}

.ui-page-seller-fbcproducts .fbc-routing-setall {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
}

.ui-page-seller-fbcproducts .fbc-routing-setall label {
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-routing-list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.ui-page-seller-fbcproducts .fbc-routing-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--ui-border);
    transition: background-color 150ms ease;
}

.ui-page-seller-fbcproducts .fbc-routing-row:last-child {
    border-bottom: 0;
}

.ui-page-seller-fbcproducts .fbc-routing-row:hover {
    background: var(--ui-subtle);
}

.ui-page-seller-fbcproducts .fbc-routing-row label {
    margin: 0;
    overflow: hidden;
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-fbcproducts .fbc-routing-row .form-select {
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-fbcproducts .fbc-routing-row.is-saved .form-select {
    border-color: var(--ui-success);
}

.ui-page-seller-fbcproducts .fbc-routing-empty {
    padding: 24px;
    font-size: var(--ui-fs-sm);
    text-align: center;
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
}

.ui-page-seller-fbcproducts .fbc-tag-filter-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

#product-tags-wrapper {
    display: flex !important; /* the wrapper also carries .d-inline-block */
    flex-wrap: wrap;
    gap: 6px;
}

#product-tags-wrapper .tag-buttons-inner-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Delete (×): a small badge on the pill's top-right corner, so the pill keeps even padding; shown on hover,
   always on touch screens */
#product-tags-wrapper .remove-tag {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-muted) !important;
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
}
#product-tags-wrapper .remove-tag::before {
    content: "\f00d"; /* fa-times: the circle icon would double the badge */
}
#product-tags-wrapper .tag-buttons-inner-wrapper:hover .remove-tag,
#product-tags-wrapper .remove-tag:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
#product-tags-wrapper .remove-tag:hover {
    border-color: var(--ui-danger, #dc3545);
    color: var(--ui-danger, #dc3545) !important;
}
@media (hover: none) {
    #product-tags-wrapper .remove-tag {
        opacity: 1;
        pointer-events: auto;
    }
}

#product-tags-wrapper .product-tag-selector {
    margin: 0 !important;
    padding: 5px 10px;
    border: 1px solid transparent;
    background: var(--ui-subtle) !important;
    color: var(--ui-body) !important;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

#product-tags-wrapper .product-tag-selector:hover {
    border-color: var(--ui-border-strong);
    color: var(--ui-text) !important;
}

#product-tags-wrapper .product-tag-selector.badge-primary {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

#datatable-select-products tbody tr {
    cursor: pointer;
}

#datatable-select-products tbody td {
    vertical-align: middle;
}

#datatable-select-products .fbc-product-cell {
    min-width: 0;
}

.ui-page-seller-fbcproducts .fbc-modal .fbc-select-col-check {
    width: 40px;
}

.ui-page-seller-fbcproducts .fbc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
}

.ui-page-seller-fbcproducts .fbc-modal-footer > * {
    margin: 0;
}

.ui-page-seller-fbcproducts .fbc-modal-footer-info {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-seller-fbcproducts .fbc-modal-footer-info b {
    color: var(--ui-text);
}

.ui-page-seller-fbcproducts .fbc-modal-footer-actions {
    display: flex;
    gap: 8px;
}

body[data-theme=dark] .ui-page-seller-fbcproducts .fbc-badge-warning,
body[data-theme=dark] .ui-page-seller-fbcproducts .fbc-routing-chip.is-warning {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-seller-fbcproducts .fbc-callout-icon {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-seller-fbcproducts .fbc-stock.is-empty {
    color: var(--ui-danger-soft);
}

@media (min-width: 768px) {
    #bulkActionsModal .bulk-actions-forwarding-card {
    grid-template-columns: 1fr 1fr;
    }

    #bulkActionsModal .bulk-actions-mode-grid {
    grid-template-columns: repeat(3, 1fr);
    }

    #bulkActionsModal .bulk-continent-group-body {
    grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    #bulkActionsModal .bulk-actions-modal-footer {
    flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    #bulkActionsModal .bulk-actions-modal-footer-actions {
    width: 100%;
    }

    #bulkActionsModal .bulk-actions-modal-footer-actions .btn {
    flex: 1 1 50%;
    }

    #bulkActionsModal .modal-dialog {
    margin: 0.5rem;
    }

    #bulkActionsModal .bulk-actions-modal-hero {
    padding: 0.85rem 1rem;
        gap: 0.6rem;
    }

    #bulkActionsModal .bulk-actions-modal-hero-icon {
    width: 2.1rem;
        height: 2.1rem;
        font-size: var(--ui-fs-xl);
    }

    #bulkActionsModal .bulk-actions-modal-hero-title {
    font-size: var(--ui-fs-lg);
    }

    #bulkActionsModal .bulk-actions-modal-tabs .nav-link {
    padding: 0.7rem 0.75rem;
        font-size: var(--ui-fs-base);
    }

    #bulkActionsModal .modal-body {
    padding: 1rem;
    }

    #bulkActionsModal .bulk-actions-forwarding-btn {
    min-height: 76px;
        padding: 0.85rem;
    }

    .ui-page-seller-fbcproducts .fbc-callout {
    flex-wrap: wrap;
    }

    .ui-page-seller-fbcproducts .fbc-callout .btn {
    width: 100%;
        justify-content: center;
    }

    .ui-page-seller-fbcproducts .fbc-center-filter {
    width: 100%;
    }

    .ui-page-seller-fbcproducts .fbc-center-card-body {
    grid-template-columns: 1fr;
    }

    .ui-page-seller-fbcproducts .fbc-facts {
    grid-template-columns: 1fr;
    }

    .ui-page-seller-fbcproducts .fbc-modal-footer {
    flex-direction: column;
        align-items: stretch;
    }

    .ui-page-seller-fbcproducts .fbc-modal-footer-actions {
    flex-direction: column-reverse;
    }
}

@media (max-width: 991.98px) {
    .ui-page-seller-fbcproducts .fbc-howto-steps {
    grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ui-page-seller-fbcproducts .fbc-routing-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    }
}

.ui-page-seller-prices .pim-prices-sidebar .pim-channel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 1.25rem;
}

.ui-page-seller-prices .pim-prices-sidebar .pim-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

.ui-page-seller-prices .pim-price-io-dropdown .dropdown-menu {
    min-width: 17rem;
    padding: 0.35rem;
}

.ui-page-seller-prices .pim-price-io-dropdown .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.55rem 0.75rem;
    white-space: normal;
}

.ui-page-seller-prices .pim-price-io-dropdown .dropdown-item .pim-price-io-menu-icon {
    width: 1.25rem;
    text-align: center;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.ui-page-seller-prices .pim-price-io-dropdown .dropdown-item small {
    line-height: 1.35;
    margin-top: 0.1rem;
}

.ui-page-seller-prices .pim-price-io-dropdown .dropdown-divider {
    margin: 0.35rem 0;
}

body[data-theme=dark] .ui-page-seller-prices .pim-prices-sidebar .pim-channel-chip {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

.ui-page-seller-prices .pim-prices-sidebar .pim-channel-chip img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.ui-page-seller-prices .pim-prices-sidebar .pim-channel-chip .pim-channel-chip-currency {
    color: var(--ui-muted);
    font-weight: 400;
}

.ui-page-seller-prices .pim-prices-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
}

.ui-page-seller-prices .pim-prices-setting-row + .pim-prices-setting-row {
    border-top: 1px solid var(--ui-border);
}

.ui-page-seller-prices .pim-prices-setting-copy {
    margin: 0;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.ui-page-seller-prices .pim-prices-setting-title {
    display: block;
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
}

.ui-page-seller-prices .pim-prices-setting-desc {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-prices-setting-row .form-check.form-switch {
    flex-shrink: 0;
    margin-bottom: 0;
    min-height: auto;
    padding-left: 0;
}

.ui-page-seller-prices .pim-prices-setting-row .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

#pim-bulk-actions-count {
    font-size: var(--ui-fs-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    font-weight: 500;
    min-width: 1.5rem;
    text-align: center;
    display: inline-block;
}

#pim-price-matrix-table_wrapper .dt-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    overflow: visible;
    position: relative;
    z-index: 3;
}

#pim-price-matrix-table_wrapper .dt-buttons .dt-button {
    margin-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
}

#pim-price-matrix-table_wrapper .dt-buttons .dropdown .dropdown-toggle {
    display: inline-flex;
    align-items: center;
}

#pim-price-matrix-table_wrapper .pim-price-dt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dt-buttons,
#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_length,
#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter {
    margin-bottom: 0 !important;
}

#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter {
    float: none !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    width: auto;
}

#pim-price-matrix-table_wrapper .dt-buttons .dropdown {
    overflow: visible;
}

#pim-price-matrix-table_wrapper .dt-buttons .dropdown-menu {
    z-index: 1055;
}

#pim-prices-main .table-column.card {
    overflow: visible;
}

#pim-price-matrix-table_wrapper .dataTables_scrollBody {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#pim-price-matrix-table {
    margin-bottom: 0 !important;
}

/* _wrapper: the scrollX header is a copy without the table id, so these rules have to reach both tables */
#pim-price-matrix-table_wrapper thead th {
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.6rem 0.55rem;
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] #pim-price-matrix-table_wrapper thead th {
    background: var(--ui-subtle);
}

#pim-price-matrix-table_wrapper thead th .dt-column-order {
    opacity: 0.45;
}

#pim-price-matrix-table_wrapper thead th.pim-price-header-product {
    text-align: left;
}

#pim-price-matrix-table_wrapper thead th.sticky-col {
    z-index: 5;
    background: var(--ui-surface);
}

#pim-price-matrix-table_wrapper thead th.pim-price-editable-col,
#pim-price-matrix-table_wrapper tbody td.pim-price-editable-col {
    min-width: 94px;
}

#pim-price-matrix-table_wrapper thead th.pim-price-editable-col {
    background: transparent;
}

#pim-price-matrix-table_wrapper thead th:first-child,
#pim-price-matrix-table_wrapper tbody td:first-child {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#pim-price-matrix-table_wrapper .custom-control.custom-checkbox {
    min-height: auto;
    padding-left: 0;
}

#pim-price-matrix-table_wrapper .custom-control.custom-checkbox .form-check-input {
    float: none;
    margin-right: 0;
}

#pim-price-matrix-table_wrapper tbody td {
    vertical-align: middle;
    font-size: var(--ui-fs-sm);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

#pim-price-matrix-table_wrapper .sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ui-surface);
    box-shadow: 2px 0 8px rgba(var(--ui-black-rgb), 0.04);
}

#pim-price-matrix-table_wrapper .sticky-col-2 {
    left: 52px;
    z-index: 2;
    min-width: 220px;
    max-width: 280px;
}

body[data-theme=dark] #pim-price-matrix-table_wrapper .sticky-col {
    background: var(--ui-surface);
    box-shadow: 2px 0 8px rgba(var(--ui-black-rgb), 0.25);
}

#pim-price-matrix-table tbody tr:hover td {
    background: rgba(var(--ui-primary-rgb), 0.03);
}

body[data-theme=dark] #pim-price-matrix-table tbody tr:hover td {
    background: var(--ui-subtle);
}

#pim-price-matrix-table tbody tr:hover .sticky-col {
    background: var(--ui-surface);
}

.ui-page-seller-prices .pim-price-product-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.15rem 0;
}

.ui-page-seller-prices .pim-price-product-cell .img-bg-thumbnail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.04);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-product-cell .img-bg-thumbnail-wrapper {
    background: var(--ui-subtle);
}

.ui-page-seller-prices .pim-price-product-cell .img-bg-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ui-page-seller-prices .pim-price-product-title {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.ui-page-seller-prices .pim-price-product-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
    margin-top: 0.1rem;
}

.ui-page-seller-prices .pim-price-readonly,
.ui-page-seller-prices .pim-price-cost-value {
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-prices .pim-price-readonly-muted {
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-price-field-group {
    display: flex;
    flex-direction: column;
    width: 76px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-field-group {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-page-seller-prices .ui-edit-cell.is-editable:hover .pim-price-field-group,
.ui-page-seller-prices .pim-price-field-group:focus-within {
    border-color: var(--ui-primary-line);
}

.ui-page-seller-prices .ui-edit-cell.is-dirty .pim-price-field-group {
    border-color: var(--ui-primary);
}

.ui-page-seller-prices .ui-edit-cell.is-changed .pim-price-field-group {
    border-color: rgba(var(--ui-warning-rgb), 0.55);
}

.ui-page-seller-prices .pim-price-field-group .ui-edit-cell__field,
.ui-page-seller-prices .pim-price-field-group .pim-price-readonly-wrap,
.ui-page-seller-prices .pim-price-alt-row {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    width: 100%;
    min-width: 0;
    padding: 0.12rem 0.32rem;
}

.ui-page-seller-prices .pim-price-field-group .ui-edit-cell__field {
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    padding-right: 0.55rem;
}

.ui-page-seller-prices .pim-price-field-group--readonly {
    cursor: default;
}

.ui-page-seller-prices .pim-price-readonly-wrap {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-price-readonly-wrap .currency-prefix {
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
    margin-right: 0;
    flex: 0 0 0.75rem;
}

.ui-page-seller-prices .pim-price-readonly-wrap .pim-price-readonly-amount {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.ui-page-seller-prices .pim-price-cell-alt-strip {
    border-top: 1px solid var(--ui-border);
    background: rgba(var(--ui-muted-rgb), 0.05);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-cell-alt-strip {
    background: var(--ui-subtle);
    border-top-color: var(--ui-border);
}

.ui-page-seller-prices .pim-price-alt-row {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    cursor: text;
}

.ui-page-seller-prices .ui-edit-cell.is-readonly .pim-price-readonly {
    display: inline-block;
    padding: 0.15rem 0.35rem;
}

.ui-page-seller-prices .pim-price-field-group .ui-edit-cell__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: 18px;
    box-sizing: border-box;
}

.ui-page-seller-prices .pim-price-field-group .ui-edit-cell__hint {
    position: absolute;
    right: 0.18rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ui-page-seller-prices .pim-price-unpushed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
    border: 1px solid var(--ui-warning);
    flex-shrink: 0;
    cursor: help;
}

.ui-page-seller-prices .pim-price-readonly-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-unpushed-badge {
    color: var(--ui-warning);
    background: var(--ui-warning-tint);
    border-color: var(--ui-warning);
}

.ui-page-seller-prices .pim-price-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    border-radius: 50%;
    font-size: var(--ui-fs-2xs);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ui-page-seller-prices .pim-price-discount-badge.is-active {
    color: var(--ui-danger-text);
    background: var(--ui-danger-tint);
    border: 1px solid var(--ui-danger-soft);
}

.ui-page-seller-prices .pim-price-discount-badge.is-active:hover {
    background: var(--ui-danger-tint);
}

.ui-page-seller-prices .pim-price-discount-badge.is-inactive {
    border: 1px solid var(--ui-border);
    opacity: 0.55;
}

.ui-page-seller-prices .pim-price-discount-badge.is-inactive:hover {
    opacity: 1;
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-discount-badge.is-active {
    color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-discount-badge.is-inactive {
    border-color: var(--ui-border-strong);
}

.ui-page-seller-prices .pim-price-row-unpushed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 0.15rem;
    padding: 0;
    border-radius: 50%;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
    border: 1px solid var(--ui-warning);
    flex-shrink: 0;
    cursor: help;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-row-unpushed-badge {
    color: var(--ui-warning);
}

.ui-page-seller-prices .pim-price-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-price-legend-sample,
.ui-page-seller-prices .pim-price-legend-editable-sample {
    white-space: nowrap;
}

.ui-page-seller-prices .pim-price-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ui-page-seller-prices .pim-price-legend-sample {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-warning-tint);
    border: 1px solid var(--ui-warning);
    color: var(--ui-warning-text);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
}

.ui-page-seller-prices .pim-price-legend-editable-sample {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.38rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.06);
    border: 1px dashed var(--ui-primary-line);
    color: var(--ui-text);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-legend-editable-sample {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-legend-sample {
    color: var(--ui-warning);
}

.ui-page-seller-prices .pim-price-cell-empty {
    color: var(--ui-muted);
    opacity: 0.45;
    text-align: center;
}

.ui-page-seller-prices .pim-price-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.38rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.07);
    border: 1px solid var(--ui-border);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-meta-badge {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-page-seller-prices .pim-price-meta-badge i {
    font-size: var(--ui-fs-2xs);
    opacity: 0.5;
}

.ui-page-seller-prices .pim-price-alt-prefix {
    font-size: var(--ui-fs-2xs);
    font-weight: 400;
    color: var(--ui-muted);
    flex: 0 0 0.75rem;
    user-select: none;
    opacity: 0.9;
}

.ui-page-seller-prices .pim-price-cell-alt-input {
    border: none;
    background: transparent;
    width: 48px;
    min-width: 40px;
    max-width: 56px;
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-height: 16px;
    padding: 0;
    outline: none;
    color: var(--ui-muted);
    text-align: right;
    -moz-appearance: textfield;
}

.ui-page-seller-prices .pim-price-field-group .pim-price-cell-alt-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.ui-page-seller-prices .pim-price-alt-row:focus-within .pim-price-cell-alt-input,
.ui-page-seller-prices .pim-price-cell-alt-input:focus {
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-price-cell-alt-input::-webkit-outer-spin-button,
.ui-page-seller-prices .pim-price-cell-alt-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui-page-seller-prices .pim-price-meta-badge--margin {
    color: var(--ui-success);
    background: var(--ui-success-tint);
    border-color: var(--ui-success-tint);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-meta-badge--margin {
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
}

.ui-page-seller-prices .pim-price-sync-ref {
    display: contents;
}

.ui-page-seller-prices .pim-price-col-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    max-width: 148px;
    margin: 0 auto;
}

.ui-page-seller-prices .pim-price-col-header--simple {
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    max-width: none;
}

#pim-price-matrix-table thead th.pim-price-header-product .pim-price-col-header {
    justify-content: flex-start;
    margin: 0;
    max-width: none;
}

.ui-page-seller-prices .pim-price-col-header-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    width: 100%;
}

.ui-page-seller-prices .pim-price-col-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.07);
    border: 1px solid var(--ui-primary-line);
    overflow: hidden;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-col-header-icon {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-page-seller-prices .pim-price-col-header-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.ui-page-seller-prices .pim-price-col-header-icon .fa-cube,
.ui-page-seller-prices .pim-price-col-header-icon .fa-receipt,
.ui-page-seller-prices .pim-price-col-header-icon .fa-percentage,
.ui-page-seller-prices .pim-price-col-header-icon .fa-box {
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-price-col-header-text {
    min-width: 0;
    flex: 1;
    text-align: left;
}

.ui-page-seller-prices .pim-price-col-header--simple .pim-price-col-header-text,
.ui-page-seller-prices .pim-price-col-header--simple .pim-price-col-header-title {
    text-align: center;
}

.ui-page-seller-prices .pim-price-col-header-title {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-prices .pim-price-col-header-meta {
    display: block;
    margin-top: 0.08rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-prices .pim-price-col-currency-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    padding: 0.06rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ui-muted);
    background: rgba(var(--ui-primary-rgb), 0.08);
    border: 1px solid var(--ui-primary-line);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-col-currency-badge {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-page-seller-prices .pim-price-col-header-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

#pim-price-matrix-table_wrapper .dataTables_length,
#pim-price-matrix-table_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}

#pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_length {
    margin-bottom: 0 !important;
}

#pim-price-matrix-table_wrapper .dataTables_length {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

#pim-price-matrix-table_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
}

#pim-price-matrix-table_wrapper .dataTables_length select {
    margin-bottom: 0;
}

#pim-price-matrix-table_wrapper .dataTables_filter input {
    min-width: 200px;
}

#pim-price-matrix-table_wrapper .dataTables_info {
    padding-top: 0.75rem;
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-channel-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.ui-page-seller-prices .pim-channel-picker-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, background 0.15s;
}

.ui-page-seller-prices .pim-channel-picker-item:hover {
    border-color: var(--ui-primary-line);
    background: rgba(var(--ui-primary-rgb), 0.04);
}

.ui-page-seller-prices .pim-channel-picker-item:has(input:checked) {
    border-color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

.ui-page-seller-prices .pim-channel-picker-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.ui-page-seller-prices .pim-channel-picker-text {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-prices .pim-channel-picker-text strong {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-prices .pim-channel-picker-text span {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#pimPriceBulkPushModal.is-pushing .modal-body {
    position: relative;
}

#pimPriceBulkPushModal.is-pushing .modal-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ui-surface) 62%, transparent);
    z-index: 2;
    pointer-events: none;
}

body[data-theme=dark] #pimPriceBulkPushModal.is-pushing .modal-body::after {
    background: rgba(var(--ui-ink-rgb), 0.72);
}

#pimPriceBulkPushModal.is-pushing .pim-bulk-push-loading-note {
    display: flex;
    position: relative;
    z-index: 3;
}

.ui-page-seller-prices .pim-bulk-push-loading-note {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    color: var(--ui-text);
    background: rgba(var(--ui-primary-rgb), 0.08);
    border: 1px solid var(--ui-primary-line);
}

body[data-theme=dark] .ui-page-seller-prices .pim-bulk-push-loading-note {
    background: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
}

#pim-bulk-push-confirm.is-loading {
    min-width: 10.5rem;
}

#pim-bulk-push-confirm.is-loading .spinner-border {
    vertical-align: -0.125em;
}

#pimPriceImportModal .modal-content {
    border: 0;
    overflow: hidden;
}

#pimPriceImportModal .modal-header {
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--ui-border);
    align-items: flex-start;
    gap: 0.75rem;
}

#pimPriceImportModal .modal-body {
    padding: 1.25rem 1.35rem;
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
}

.ui-page-seller-prices .pim-price-import-steps {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
}

.ui-page-seller-prices .pim-price-import-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

.ui-page-seller-prices .pim-price-import-step + .pim-price-import-step::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1px;
    margin: 0 0.5rem;
    background: var(--ui-border);
}

.ui-page-seller-prices .pim-price-import-step-index {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    flex-shrink: 0;
}

.ui-page-seller-prices .pim-price-import-step.is-active {
    color: var(--ui-primary);
}

.ui-page-seller-prices .pim-price-import-step.is-active .pim-price-import-step-index {
    border-color: var(--ui-primary);
    background: var(--ui-primary-tint);
}

.ui-page-seller-prices .pim-price-import-step.is-done {
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-price-import-step.is-done .pim-price-import-step-index {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

.ui-page-seller-prices .pim-price-import-panel {
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-import-panel {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    border: 1px solid rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-seller-prices .pim-price-import-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ui-page-seller-prices .pim-price-import-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    flex: 0 0 auto;
}

.ui-page-seller-prices .pim-price-import-panel-title {
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.25rem;
}

.ui-page-seller-prices .pim-price-import-panel-copy {
    color: var(--ui-muted);
    line-height: 1.55;
    margin-bottom: 0;
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-prices .pim-price-import-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.ui-page-seller-prices .pim-price-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

.ui-page-seller-prices .pim-price-import-chip-muted {
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-price-import-upload-wrap {
    position: relative;
}

.ui-page-seller-prices .pim-price-import-file-input {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.ui-page-seller-prices .pim-price-import-upload-target {
    width: 100%;
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.35rem 1.25rem;
    border-radius: var(--ui-radius-sm);
    border: 1px dashed var(--ui-primary-line);
    background: linear-gradient(135deg, var(--ui-row-hover), var(--ui-success-tint));
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-seller-prices .pim-price-import-upload-target:hover,
.ui-page-seller-prices .pim-price-import-upload-target.is-dragover {
    border-color: var(--ui-primary);
    transform: translateY(-1px);
    box-shadow: 0 0.18rem 0.55rem var(--ui-primary-soft);
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-import-upload-target {
    border-color: var(--ui-primary-line);
    background: linear-gradient(135deg, var(--ui-primary-tint), var(--ui-success-tint));
}

.ui-page-seller-prices .pim-price-import-upload-target.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

.ui-page-seller-prices .pim-price-import-upload-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    flex: 0 0 auto;
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-prices .pim-price-import-upload-title {
    display: block;
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-price-import-upload-subtitle {
    display: block;
    margin-top: 0.2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

.ui-page-seller-prices .pim-price-import-upload-filename {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-primary);
}

.ui-page-seller-prices .pim-price-import-upload-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-surface) 82%, transparent);
    z-index: 2;
}

body[data-theme=dark] .ui-page-seller-prices .pim-price-import-upload-loading {
    background: rgba(var(--ui-ink-rgb), 0.88);
}

.ui-page-seller-prices .pim-price-import-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-tint);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-prices .pim-price-import-tip i {
    color: var(--ui-primary);
    margin-top: 0.1rem;
}

.ui-page-seller-prices .pim-price-import-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

.ui-page-seller-prices .pim-price-import-summary-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 180px;
}

.ui-page-seller-prices .pim-price-import-summary-file i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
    flex-shrink: 0;
}

.ui-page-seller-prices .pim-price-import-summary-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-prices .pim-price-import-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ui-page-seller-prices .pim-price-import-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
}

.ui-page-seller-prices .pim-price-import-summary-badge.is-success {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

.ui-page-seller-prices .pim-price-import-preview-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
}

.ui-page-seller-prices .pim-price-import-preview-card .table {
    margin-bottom: 0;
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-prices .pim-price-import-preview-card thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-subtle);
    white-space: nowrap;
}

.ui-page-seller-prices .pim-price-import-preview-scroll {
    max-height: 240px;
    overflow: auto;
}

.ui-page-seller-prices .pim-price-import-options {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#pimPriceBulkPushResultsModal .modal-content {
    border: 0;
    overflow: hidden;
}

#pimPriceBulkPushResultsModal .modal-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#pimPriceBulkPushResultsModal .modal-body {
    padding: 0;
}

#pimPriceBulkPushResultsModal .modal-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-page-seller-prices .pim-push-results-hero {
    --ui-tone: var(--ui-primary);
    --ui-tone-soft: var(--ui-primary-tint);
    --ui-tone-line: var(--ui-primary-line);
    padding: 1.35rem 1.25rem 1.15rem;
    background: linear-gradient(180deg, var(--ui-tone-soft) 0%, transparent 100%);
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-seller-prices .pim-push-results-hero.is-success {
    --ui-tone: var(--ui-success);
    --ui-tone-soft: var(--ui-success-tint);
    --ui-tone-line: var(--ui-success);
}

.ui-page-seller-prices .pim-push-results-hero.is-error {
    --ui-tone: var(--ui-danger);
    --ui-tone-soft: var(--ui-danger-tint);
    --ui-tone-line: var(--ui-danger-soft);
}

.ui-page-seller-prices .pim-push-results-hero.is-partial {
    --ui-tone: var(--ui-warning);
    --ui-tone-soft: var(--ui-warning-tint);
    --ui-tone-line: var(--ui-warning);
}

.ui-page-seller-prices .pim-push-results-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.ui-page-seller-prices .pim-push-results-hero-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-tone-line);
    color: var(--ui-tone);
    font-size: var(--ui-fs-xl);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] .ui-page-seller-prices .pim-push-results-hero-icon {
    background: var(--ui-subtle);
}

.ui-page-seller-prices .pim-push-results-hero-copy {
    min-width: 0;
    flex: 1;
}

.ui-page-seller-prices .pim-push-results-hero-title {
    margin: 0 0 0.2rem;
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
}

.ui-page-seller-prices .pim-push-results-hero-subtitle {
    margin: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-prices .pim-push-results-progress {
    display: flex;
    width: 100%;
    height: 0.45rem;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
    background: rgba(var(--ui-muted-rgb), 0.12);
    margin-bottom: 0.85rem;
}

.ui-page-seller-prices .pim-push-results-progress-segment {
    height: 100%;
    transition: width 0.35s ease;
}

.ui-page-seller-prices .pim-push-results-progress-segment.is-success {
    background: var(--ui-success);
}

.ui-page-seller-prices .pim-push-results-progress-segment.is-failed {
    background: var(--ui-danger);
}

.ui-page-seller-prices .pim-push-results-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.ui-page-seller-prices .pim-push-results-stat {
    padding: 0.55rem 0.65rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    text-align: center;
}

body[data-theme=dark] .ui-page-seller-prices .pim-push-results-stat {
    background: var(--ui-subtle);
}

.ui-page-seller-prices .pim-push-results-stat-value {
    display: block;
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-push-results-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ui-page-seller-prices .pim-push-results-stat.is-success .pim-push-results-stat-value {
    color: var(--ui-success);
}

.ui-page-seller-prices .pim-push-results-stat.is-failed .pim-push-results-stat-value {
    color: var(--ui-danger);
}

.ui-page-seller-prices .pim-push-results-panel {
    padding: 1rem 1.25rem 1.25rem;
}

.ui-page-seller-prices .pim-push-results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.ui-page-seller-prices .pim-push-results-toolbar-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ui-page-seller-prices .pim-push-results-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.08);
}

body[data-theme=dark] .ui-page-seller-prices .pim-push-results-filters {
    background: var(--ui-subtle);
}

.ui-page-seller-prices .pim-push-results-filter {
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1;
    padding: 0.42rem 0.7rem;
    border-radius: var(--ui-radius-pill);
    transition: background 0.2s ease, color 0.2s ease;
}

.ui-page-seller-prices .pim-push-results-filter:hover {
    color: var(--ui-text);
}

.ui-page-seller-prices .pim-push-results-filter.is-active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.06);
}

body[data-theme=dark] .ui-page-seller-prices .pim-push-results-filter.is-active {
    background: var(--ui-track);
}

.ui-page-seller-prices .pim-push-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: min(52vh, 460px);
    overflow: auto;
    padding-right: 0.15rem;
}

.ui-page-seller-prices .pim-push-results-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body[data-theme=dark] .ui-page-seller-prices .pim-push-results-item {
    background: var(--ui-subtle);
}

.ui-page-seller-prices .pim-push-results-item.is-success {
    border-color: var(--ui-success);
}

.ui-page-seller-prices .pim-push-results-item.is-failed {
    border-color: var(--ui-danger-tint);
}

.ui-page-seller-prices .pim-push-results-item-status {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    margin-top: 0.05rem;
}

.ui-page-seller-prices .pim-push-results-item.is-success .pim-push-results-item-status {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

.ui-page-seller-prices .pim-push-results-item.is-failed .pim-push-results-item-status {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

.ui-page-seller-prices .pim-push-results-item-body {
    min-width: 0;
    flex: 1;
}

.ui-page-seller-prices .pim-push-results-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 0.65rem 0.85rem;
    align-items: start;
}

.ui-page-seller-prices .pim-push-results-item-product-title {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ui-page-seller-prices .pim-push-results-item-product-meta {
    margin-top: 0.18rem;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

.ui-page-seller-prices .pim-push-results-item-channel {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.ui-page-seller-prices .pim-push-results-channel-logo {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.ui-page-seller-prices .pim-push-results-channel-logo-fallback {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-prices .pim-push-results-item-channel-label {
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ui-page-seller-prices .pim-push-results-item-price {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    color: var(--ui-text);
    text-align: right;
}

.ui-page-seller-prices .pim-push-results-item-message {
    margin-top: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-danger-tint);
    border: 1px solid var(--ui-danger-tint);
    color: var(--ui-danger);
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    word-break: break-word;
}

.ui-page-seller-prices .pim-push-results-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.04);
}

#pimPriceImportModal .modal-footer {
    padding: 0.85rem 1.35rem;
    border-top: 1px solid var(--ui-border);
    gap: 0.5rem;
}

#pimPriceImportModal .pim-price-import-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

#pimPriceImportModal .pim-price-import-control-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#pimPriceImportModal .pim-price-import-clear-ai-btn {
    display: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    border-radius: var(--ui-radius-pill);
    padding: 0.48rem 0.8rem;
}

#pim-import-ai-status {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(135deg, var(--ui-primary-soft), var(--ui-success-tint));
    overflow: hidden;
    position: relative;
}

#pim-import-ai-status.is-done {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#pim-import-ai-status.is-error {
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

#pim-import-ai-status .ai-status-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
}

#pim-import-preview-table-wrapper.ai-detecting {
    opacity: 0.72;
    pointer-events: none;
}

#pim-import-preview-table .pim-price-import-select {
    min-width: 140px;
    font-size: var(--ui-fs-xs);
}

#pim-import-preview-table .pim-price-import-select.ai-detecting {
    background-image: linear-gradient(90deg, var(--ui-primary-soft), var(--ui-success-tint), var(--ui-primary-soft));
    background-size: 200% 100%;
    animation: pimPriceImportSelectShimmer 1.25s linear infinite;
}

#pim-import-preview-table .pim-price-import-select.ai-mapped {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 0.18rem var(--ui-primary-tint);
}

#pim-import-preview-table .pim-price-import-header-label {
    display: block;
    max-width: 160px;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pim-import-validation-hint {
    display: none;
    margin-bottom: 0.85rem;
}

@media (max-width: 767px) {
    #pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter {
    margin-left: 0;
        width: 100%;
    }

    #pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter label {
    width: 100%;
    }

    #pim-price-matrix-table_wrapper .pim-price-dt-toolbar .dataTables_filter input {
    width: 100%;
        min-width: 0;
    }

    #pimPriceImportModal .modal-body {
    padding: 1rem;
    }

    .ui-page-seller-prices .pim-price-import-panel-header {
    flex-direction: column;
    }

    .ui-page-seller-prices .pim-price-import-upload-target {
    align-items: flex-start;
        justify-content: flex-start;
    }

    .ui-page-seller-prices .pim-price-import-steps {
    flex-wrap: wrap;
    }

    .ui-page-seller-prices .pim-price-product-title {
    max-width: 130px;
    }
}

@media (max-width: 767.98px) {
    .ui-page-seller-prices .pim-push-results-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .ui-page-seller-prices .pim-push-results-stat {
    padding: 0.45rem 0.35rem;
    }

    .ui-page-seller-prices .pim-push-results-item-main {
    grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }

    .ui-page-seller-prices .pim-push-results-item-price {
    text-align: left;
    }

    .ui-page-seller-prices .pim-push-results-toolbar {
    align-items: stretch;
    }

    .ui-page-seller-prices .pim-push-results-filters {
    width: 100%;
        justify-content: space-between;
    }

    .ui-page-seller-prices .pim-push-results-filter {
    flex: 1 1 auto;
        text-align: center;
    }
}

@keyframes pimPriceImportSelectShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

/* ---------- Page: seller/accounting.php (root .ui-page-seller-accounting) ---------- */
.ui-page-seller-accounting.bookkeeping-page {
    /* Local palette — uses theme tokens so light + dark both work. */
}

.ui-page-seller-accounting .bookkeeping-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2rem 1.75rem 2rem;
    margin-bottom: 1.5rem;
    background:
    radial-gradient(900px 280px at -10% -50%, rgba(var(--ui-primary-rgb), 0.18), transparent 60%),
    radial-gradient(600px 220px at 110% 150%, rgba(var(--ui-info-rgb), 0.12), transparent 55%),
    var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 0.5rem 1.5rem rgba(var(--ui-ink-rgb), 0.06);
    overflow: hidden;
}

.ui-page-seller-accounting .bookkeeping-hero::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ui-primary), var(--ui-info));
}

.ui-page-seller-accounting .bookkeeping-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ui-primary);
    margin: 0 0 0.5rem 0;
}

.ui-page-seller-accounting .bookkeeping-hero__eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.ui-page-seller-accounting .bookkeeping-hero__title {
    line-height: 1.15;
    margin: 0 0 0.5rem 0;
}

.ui-page-seller-accounting .bookkeeping-hero__subtitle {
    font-size: var(--ui-fs-md);
    color: var(--ui-muted);
    margin: 0;
    max-width: 60ch;
    line-height: 1.5;
}

.ui-page-seller-accounting .bookkeeping-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ui-page-seller-accounting .bookkeeping-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.15);
    backdrop-filter: blur(4px);
}

.ui-page-seller-accounting .bookkeeping-hero__pill i {
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-accounting .bookkeeping-hero .btn-lg {
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ui-page-seller-accounting .bookkeeping-hero .btn-lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.75rem 1.5rem rgba(var(--ui-primary-rgb), 0.4);
}

.ui-page-seller-accounting .bookkeeping-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 0.25rem 1rem rgba(var(--ui-ink-rgb), 0.04);
    margin-bottom: 1.25rem;
}

.ui-page-seller-accounting .bookkeeping-section__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(180deg, rgba(var(--ui-primary-rgb), 0.025), transparent);
}

.ui-page-seller-accounting .bookkeeping-section__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ui-primary-soft), rgba(var(--ui-primary-rgb), 0.15));
    color: var(--ui-primary);
    border-radius: var(--ui-radius-md);
    flex: 0 0 40px;
    font-size: var(--ui-fs-md);
    box-shadow: inset 0 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}

.ui-page-seller-accounting .bookkeeping-section__title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-section__hint {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 0.15rem 0 0 0;
}

.ui-page-seller-accounting .bookkeeping-section__body {
    padding: 1.25rem;
}

.ui-page-seller-accounting .bookkeeping-period {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ui-page-seller-accounting .bookkeeping-period__chip {
    border-radius: var(--ui-radius-pill);
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    padding: 0.45rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.ui-page-seller-accounting .bookkeeping-period__chip:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ui-page-seller-accounting .bookkeeping-period__chip.is-active {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.ui-page-seller-accounting .bookkeeping-channel {
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ui-border);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.ui-page-seller-accounting .bookkeeping-channel:hover {
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-channel input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ui-page-seller-accounting .bookkeeping-channel__check {
    font-size: var(--ui-fs-xs);
    color: var(--ui-on-primary);
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ui-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    transition: all 0.15s ease;
}

.ui-page-seller-accounting .bookkeeping-channel.is-selected {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-channel.is-selected .bookkeeping-channel__check {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-channel__name {
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.ui-page-seller-accounting .bookkeeping-channel__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-accounting .bookkeeping-channel.is-native .bookkeeping-channel__icon {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-color: rgba(var(--ui-primary-rgb), 0.25);
    color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-channel.is-native {
    background: rgba(var(--ui-primary-rgb), 0.03);
    border-style: dashed;
}

.ui-page-seller-accounting .bookkeeping-channel.is-native.is-selected {
    background: var(--ui-primary-soft);
    border-style: solid;
}

.ui-page-seller-accounting .bookkeeping-conv {
    display: inline-flex;
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    padding: 3px;
    cursor: pointer;
}

.ui-page-seller-accounting .bookkeeping-conv__option {
    padding: 0.3rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    transition: all 0.15s ease;
    user-select: none;
}

.ui-page-seller-accounting .bookkeeping-conv__option.is-active {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    box-shadow: 0 1px 4px var(--ui-primary-line);
}

.ui-page-seller-accounting .bookkeeping-channel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.ui-page-seller-accounting .bookkeeping-channel-row__name {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-channel-row__default {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-left: 0.4rem;
}

.ui-page-seller-accounting .bookkeeping-recent {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 0.25rem 1rem rgba(var(--ui-ink-rgb), 0.04);
    overflow: hidden;
}

.ui-page-seller-accounting .bookkeeping-recent__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--ui-primary-soft), transparent 70%);
}

.ui-page-seller-accounting .bookkeeping-recent__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin: 0;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-recent__title i {
    color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-recent__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.5rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1;
}

.ui-page-seller-accounting .bookkeeping-recent__live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-page-seller-accounting .bookkeeping-recent__live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-success-text);
    box-shadow: 0 0 0 4px var(--ui-success-tint);
}

.ui-page-seller-accounting .bookkeeping-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-page-seller-accounting .bookkeeping-recent__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    transition: background 0.15s ease;
}

.ui-page-seller-accounting .bookkeeping-recent__item:hover {
    background: var(--ui-subtle);
}

.ui-page-seller-accounting .bookkeeping-recent__item:last-child {
    border-bottom: none;
}

.ui-page-seller-accounting .bookkeeping-recent__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    flex: 0 0 38px;
    font-size: var(--ui-fs-md);
}

.ui-page-seller-accounting .bookkeeping-recent__icon.is-xlsx {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-seller-accounting .bookkeeping-recent__icon.is-csv {
    background: var(--ui-primary-tint); color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-recent__icon.is-pdf {
    background: var(--ui-danger-tint);  color: var(--ui-danger);
}

.ui-page-seller-accounting .bookkeeping-recent__main {
    flex: 1 1 180px;
    min-width: 0;
}

.ui-page-seller-accounting .bookkeeping-recent__label {
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-accounting .bookkeeping-recent__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-seller-accounting .bookkeeping-recent__meta i {
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-accounting .bookkeeping-recent__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ui-page-seller-accounting .bookkeeping-recent__action {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.ui-page-seller-accounting .bookkeeping-recent__action:hover {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-page-seller-accounting .bookkeeping-recent__action--ghost {
    color: var(--ui-muted);
    background: transparent;
    border-color: var(--ui-border);
}

.ui-page-seller-accounting .bookkeeping-recent__action--ghost:hover {
    background: var(--ui-subtle);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.ui-page-seller-accounting .bookkeeping-recent__action--danger {
    color: var(--ui-danger);
    background: transparent;
    border-color: var(--ui-danger-soft);
}

.ui-page-seller-accounting .bookkeeping-recent__action--danger:hover {
    background: var(--ui-danger);
    color: var(--ui-on-primary);
    border-color: var(--ui-danger);
}

.ui-page-seller-accounting .bookkeeping-recent__action--icon-only {
    padding: 0.3rem 0.5rem;
}

.ui-page-seller-accounting .bookkeeping-recent__action--ghost[disabled],
.ui-page-seller-accounting .bookkeeping-recent__action--danger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-page-seller-accounting .bookkeeping-recent__item.is-deleting {
    opacity: 0.5;
    pointer-events: none;
}

.ui-page-seller-accounting .bookkeeping-swal-popup {
    border-radius: var(--ui-radius)!important;
    box-shadow: 0 1.5rem 4rem rgba(var(--ui-ink-rgb), 0.18) !important;
    border: 1px solid var(--ui-border) !important;
    overflow: hidden;
}

.ui-page-seller-accounting .bookkeeping-swal-popup .swal2-title {
    display: none !important;          /* replaced by our html content */
}

.ui-page-seller-accounting .bookkeeping-swal-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--ui-fs-lg)!important;
    line-height: 1.5 !important;
}

.ui-page-seller-accounting .bookkeeping-swal-popup .swal2-actions {
    margin-top: 1.15rem !important;
    justify-content: flex-end !important;
}

.ui-page-seller-accounting .bookkeeping-recent__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.25rem 1.25rem 1.5rem;
}

.ui-page-seller-accounting .bookkeeping-recent__state-icon {
    position: relative;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: 1.75rem;
    margin-bottom: 0.85rem;
}

.ui-page-seller-accounting .bookkeeping-recent__state-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px dashed var(--ui-border);
    opacity: 0.7;
}

.ui-page-seller-accounting .bookkeeping-recent__state-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-recent__state-text {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 0;
    max-width: 28ch;
}

.ui-page-seller-accounting .bookkeeping-recent__footer {
    padding: 0.7rem 1.25rem;
    background: var(--ui-subtle);
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ui-page-seller-accounting .bookkeeping-recent__footer i {
    opacity: 0.6;
}

.ui-page-seller-accounting .bookkeeping-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.ui-page-seller-accounting .bookkeeping-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ui-page-seller-accounting .bookkeeping-status.pending {
    color: var(--ui-muted); background: var(--ui-neutral-tint);
}

.ui-page-seller-accounting .bookkeeping-status.processing {
    color: var(--ui-primary);            background: var(--ui-primary-tint);
}

.ui-page-seller-accounting .bookkeeping-status.processing::before {
    animation: bk-pulse 1.4s ease-in-out infinite;
}

.ui-page-seller-accounting .bookkeeping-status.done {
    color: var(--ui-success-text);            background: var(--ui-success-tint);
}

.ui-page-seller-accounting .bookkeeping-status.failed {
    color: var(--ui-danger);            background: var(--ui-danger-tint);
}

.ui-page-seller-accounting .bookkeeping-vat-explainer {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 0.25rem 1rem rgba(var(--ui-ink-rgb), 0.04);
    margin-top: 1.25rem;
    overflow: hidden;
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--ui-primary-soft), transparent 65%);
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 2px 6px var(--ui-primary-line);
    flex: 0 0 36px;
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-seller-accounting .bookkeeping-vat-explainer__body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.ui-page-seller-accounting .bookkeeping-vat-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ui-page-seller-accounting .bookkeeping-vat-steps::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(180deg,
    var(--ui-primary-soft) 0%,
    var(--ui-border) 50%,
    var(--ui-primary-soft) 100%);
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-accounting .bookkeeping-vat-step {
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0;
    position: relative;
}

.ui-page-seller-accounting .bookkeeping-vat-step__num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface);
    border: 1.5px solid var(--ui-primary);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    border-radius: 50%;
    z-index: 1;
}

.ui-page-seller-accounting .bookkeeping-vat-step__body {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-accounting .bookkeeping-vat-step__title {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
    margin: 0;
}

.ui-page-seller-accounting .bookkeeping-vat-step__text {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
    margin: 0.1rem 0 0 0;
}

.ui-page-seller-accounting .bookkeeping-vat-scenarios {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ui-border);
}

.ui-page-seller-accounting .bookkeeping-vat-scenarios__title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ui-muted);
    margin: 0 0 0.6rem 0;
}

.ui-page-seller-accounting .bookkeeping-vat-scenario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.55rem 0.7rem;
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    margin-bottom: 0.45rem;
}

.ui-page-seller-accounting .bookkeeping-vat-scenario:last-child {
    margin-bottom: 0;
}

.ui-page-seller-accounting .bookkeeping-vat-scenario__code {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-vat-scenario__arrow {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-accounting .bookkeeping-vat-scenario__rate {
    margin-left: auto;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-vat-meta {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--ui-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}

.ui-page-seller-accounting .bookkeeping-vat-meta__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-accounting .bookkeeping-vat-meta__label {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-muted);
}

.ui-page-seller-accounting .bookkeeping-vat-meta__value {
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-seller-accounting .bookkeeping-vat-meta__value.is-on {
    color: var(--ui-success-text);
}

.ui-page-seller-accounting .bookkeeping-vat-meta__value.is-off {
    color: var(--ui-muted);
}

.ui-page-seller-accounting.bookkeeping-page .form-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.35rem;
}

.ui-page-seller-accounting.bookkeeping-page .form-text {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-accounting.bookkeeping-page .form-check-input {
    margin-top: 0.2rem;
}

.ui-page-seller-accounting.bookkeeping-page .form-check-label {
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

.ui-page-seller-accounting.bookkeeping-page .form-switch {
    padding-left: 3rem;
    min-height: 1.65rem;
}

.ui-page-seller-accounting.bookkeeping-page .form-switch .form-check-input {
    width: 2.25rem;
    height: 1.15rem;
    margin-left: -3rem;
    cursor: pointer;
    border-color: var(--ui-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ui-page-seller-accounting.bookkeeping-page .form-switch .form-check-input:checked {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting.bookkeeping-page .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.2);
    border-color: var(--ui-primary);
}

.ui-page-seller-accounting .bookkeeping-switch-row {
    background: var(--ui-subtle);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-page-seller-accounting .bookkeeping-switch-row:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.4);
}

.ui-page-seller-accounting .bookkeeping-switch-row__copy {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-accounting .bookkeeping-switch-row__label {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
    margin: 0;
    cursor: pointer;
}

.ui-page-seller-accounting .bookkeeping-switch-row__hint {
    display: block;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 0.15rem 0 0 0;
}

.ui-page-seller-accounting.bookkeeping-page .form-select,
.ui-page-seller-accounting.bookkeeping-page .form-control {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-page-seller-accounting.bookkeeping-page .form-select:focus,
.ui-page-seller-accounting.bookkeeping-page .form-control:focus {
    border-color: rgba(var(--ui-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.15);
}

.ui-page-seller-accounting .bookkeeping-form-label {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.4rem;
}

.ui-page-seller-accounting .bookkeeping-sticky-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.ui-page-seller-accounting .bookkeeping-sticky-cta__hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    max-width: 36ch;
}

.ui-page-seller-accounting.bookkeeping-page .btn:focus,
.ui-page-seller-accounting.bookkeeping-page .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line) !important;
}

@media (max-width: 767.98px) {
    .ui-page-seller-accounting .bookkeeping-hero {
    padding: 1.1rem 1.15rem;
    }

    .ui-page-seller-accounting .bookkeeping-channel-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@keyframes bk-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

/* ---------- Page: dashboard/threepl.php (root .ui-page-dashboard-threepl) ---------- */


#threepl-dashboard .tpl-panel-card .card-header {
    padding: 0.85rem 1.25rem;
}

#threepl-dashboard .tpl-panel-table-wrap {
    padding: 0 0.25rem 0.25rem;
}

#threepl-dashboard .tpl-clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#threepl-dashboard .tpl-ops-widget {
    min-height: 0;
}

#threepl-dashboard .tpl-ops-widget > .tpl-ops-widget-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0.75rem 1rem 1rem;
    gap: 0.65rem;
}

#threepl-dashboard .tpl-ops-surface {
    min-height: 0;
    background-color: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
}

body[data-theme=dark] #threepl-dashboard .tpl-ops-surface {
    border-color: var(--ui-border-strong);
}

#threepl-dashboard .tpl-ops-toolbar .form-label {
    font-size: var(--ui-fs-xs);
    margin-bottom: 0.25rem;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-ops-toolbar .form-select {
    font-size: var(--ui-fs-sm);
    min-height: max(38px, var(--ui-tap-min, 0px));
    border-color: var(--ui-border);
}

body[data-theme=dark] #threepl-dashboard .tpl-ops-toolbar .form-select {
    border-color: var(--ui-border-strong);
}

#threepl-dashboard .tpl-mini-kanban {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

#threepl-dashboard .tpl-mini-kanban-board.tpl-ops-surface {
    flex: 1 1 auto;
    display: flex;
    gap: 0;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 250px;
    padding: 0;
}

#threepl-dashboard .tpl-mini-kanban-column {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    border-right: 1px solid var(--ui-border);
}

#threepl-dashboard .tpl-mini-kanban-column:last-child {
    border-right: 0;
}

#threepl-dashboard .tpl-mini-kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-body);
    border-bottom: 1px solid var(--ui-border);
    background-color: color-mix(in srgb, var(--ui-surface) 75%, transparent);
}

body[data-theme=dark] #threepl-dashboard .tpl-mini-kanban-column-header {
    background-color: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-mini-kanban-column-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

#threepl-dashboard .tpl-mini-kanban-status-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

#threepl-dashboard .tpl-mini-kanban-status-dot--open {
    background-color: var(--ui-neutral);
}

#threepl-dashboard .tpl-mini-kanban-status-dot--waiting {
    background-color: var(--ui-warning);
}

#threepl-dashboard .tpl-mini-kanban-status-dot--in_progress {
    background-color: var(--ui-success);
}

#threepl-dashboard .tpl-mini-kanban-count {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: var(--ui-radius);
    background-color: var(--ui-track);
}

body[data-theme=dark] #threepl-dashboard .tpl-mini-kanban-count {
    color: var(--ui-text);
}

#threepl-dashboard .tpl-mini-kanban-column-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-y: auto;
}

#threepl-dashboard .tpl-mini-kanban-column-content::-webkit-scrollbar {
    width: 5px;
}

#threepl-dashboard .tpl-mini-kanban-column-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ui-faint) 60%, transparent);
    border-radius: var(--ui-radius-xs);
}

#threepl-dashboard .tpl-mini-kanban-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.65rem 0.5rem;
    text-align: center;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background-color: color-mix(in srgb, var(--ui-surface) 65%, transparent);
}

body[data-theme=dark] #threepl-dashboard .tpl-mini-kanban-empty {
    border-color: var(--ui-border-strong);
    background-color: var(--ui-subtle);
    color: var(--ui-faint);
}

#threepl-dashboard .tpl-mini-kanban-card {
    display: flex;
    flex-direction: column;
    min-height: 4.5rem;
    padding: 0.6rem 0.7rem;
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body[data-theme=dark] #threepl-dashboard .tpl-mini-kanban-card {
    border-color: var(--ui-border-strong);
}

#threepl-dashboard .tpl-mini-kanban-card:hover {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0.15rem 0.5rem var(--ui-primary-tint);
}

#threepl-dashboard .tpl-mini-kanban-card-title {
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
}

#threepl-dashboard .tpl-mini-kanban-card-meta {
    font-size: var(--ui-fs-xs);
    margin-top: 0.2rem;
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#threepl-dashboard .tpl-mini-kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.4rem;
    min-height: 1.1rem;
}

#threepl-dashboard .tpl-mini-kanban-card-date-text {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.2;
}

#threepl-dashboard .tpl-mini-kanban-overdue {
    color: var(--ui-danger);
    font-size: var(--ui-fs-xs);
    line-height: 1;
    flex-shrink: 0;
}

#threepl-dashboard .tpl-mini-kanban-overdue--placeholder {
    visibility: hidden;
    width: 0.75rem;
}

#threepl-dashboard .tpl-row-title {
    font-weight: 500;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-chat-widget .tpl-chat-thread.tpl-ops-surface {
    flex: 1 1 auto;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#threepl-dashboard .tpl-chat-messages-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#threepl-dashboard .tpl-chat-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
    border-radius: var(--ui-radius-xs);
    pointer-events: none;
}

#threepl-dashboard .tpl-chat-messages-list::-webkit-scrollbar {
    width: 6px;
}

#threepl-dashboard .tpl-chat-messages-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ui-faint) 60%, transparent);
    border-radius: var(--ui-radius-xs);
}

#threepl-dashboard .tpl-chat-msg-row {
    display: flex;
    width: 100%;
}

#threepl-dashboard .tpl-chat-msg-row--in {
    justify-content: flex-start;
}

#threepl-dashboard .tpl-chat-msg-row--out {
    justify-content: flex-end;
}

#threepl-dashboard .tpl-chat-msg__bubble {
    max-width: 88%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    line-height: 1.5;
    word-break: break-word;
}

#threepl-dashboard .tpl-chat-msg-row--in .tpl-chat-msg__bubble {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius) var(--ui-radius-xs);
}

#threepl-dashboard .tpl-chat-msg-row--out .tpl-chat-msg__bubble {
    background-color: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius-xs) var(--ui-radius);
    box-shadow: 0 1px 2px var(--ui-primary-soft);
}

body[data-theme=dark] #threepl-dashboard .tpl-chat-msg-row--in .tpl-chat-msg__bubble {
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #threepl-dashboard .tpl-chat-msg-row--out .tpl-chat-msg__bubble {
    background-color: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-chat-msg__text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

#threepl-dashboard .tpl-chat-msg__time {
    display: block;
    font-size: var(--ui-fs-2xs);
    margin-top: 0.35rem;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-chat-msg-row--out .tpl-chat-msg__time {
    text-align: right;
}

#threepl-dashboard .tpl-chat-thread .empty-state-container {
    padding: 1.25rem 0.5rem;
}

#threepl-dashboard .tpl-chat-thread .empty-state-icon {
    font-size: var(--ui-fs-kpi);
}

#threepl-dashboard .tpl-chat-thread .empty-state-title {
    font-size: var(--ui-fs-base);
}

#threepl-dashboard .tpl-chat-compose textarea {
    font-size: var(--ui-fs-lg);
    min-height: 44px;
    resize: none;
    border-color: var(--ui-border);
}

body[data-theme=dark] #threepl-dashboard .tpl-chat-compose textarea {
    border-color: var(--ui-border-strong);
}

#threepl-dashboard .tpl-chat-send-btn {
    min-height: 44px;
    min-width: 44px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

#threepl-dashboard .tpl-page-header-logo {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

#threepl-dashboard .tpl-fulfillment-tabs-card .tpl-fulfillment-card-head {
    padding-bottom: 0.85rem;
    border-bottom: 0;
}

#threepl-dashboard .tpl-fulfillment-tabbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 0 1.25rem;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

#threepl-dashboard .tpl-fulfillment-tabs {
    border-bottom: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#threepl-dashboard .tpl-fulfillment-tabs .nav-item {
    margin-bottom: 0;
}

#threepl-dashboard .tpl-fulfillment-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
    padding: 0.7rem 0.85rem;
    white-space: nowrap;
    min-height: 44px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#threepl-dashboard .tpl-fulfillment-tabs .nav-link:hover {
    color: var(--ui-body);
    border-bottom-color: var(--ui-border) !important;
}

#threepl-dashboard .tpl-fulfillment-tabs .nav-link.active,
#threepl-dashboard .tpl-fulfillment-tabs .nav-link.active:hover,
#threepl-dashboard .tpl-fulfillment-tabs .nav-link.active:focus {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom-color: var(--ui-primary) !important;
}

body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-tabs .nav-link:hover {
    color: var(--ui-text);
    border-bottom-color: var(--ui-border-strong) !important;
}

body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-tabs .nav-link.active,
body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-tabs .nav-link.active:hover,
body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-tabs .nav-link.active:focus {
    border-bottom-color: var(--ui-primary) !important;
}

#threepl-dashboard .tpl-fulfillment-tab-count {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: var(--ui-radius);
    background-color: var(--ui-track);
    color: var(--ui-body);
}

#threepl-dashboard .tpl-fulfillment-tabs .nav-link.active .tpl-fulfillment-tab-count {
    background-color: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-tab-count {
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-fulfillment-tabbar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-left: 1px solid var(--ui-border);
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

#threepl-dashboard .tpl-fulfillment-search {
    position: relative;
    width: 11.5rem;
    max-width: 42vw;
}

#threepl-dashboard .tpl-fulfillment-search .form-control {
    min-height: max(34px, var(--ui-tap-min, 0px));
    padding-left: 2rem;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs)!important;
    border-color: var(--ui-border);
}

body[data-theme=dark] #threepl-dashboard .tpl-fulfillment-search .form-control {
    border-color: var(--ui-border-strong);
}

#threepl-dashboard .tpl-fulfillment-search__icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    pointer-events: none;
}

#threepl-dashboard .tpl-fulfillment-tab-links {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#threepl-dashboard .tpl-fulfillment-tabbar-actions .tpl-fulfillment-tab-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

#threepl-dashboard .tpl-fulfillment-tabbar-actions .tpl-fulfillment-tab-action:hover {
    color: var(--ui-primary-hover) !important;
}

#threepl-dashboard .tpl-fulfillment-tabs-card .tab-content {
    background-color: var(--ui-surface);
}

#threepl-dashboard .tpl-fulfillment-tabs-card .tab-pane {
    min-height: 12rem;
}

#threepl-dashboard .tpl-fulfillment-tabs-card .tpl-panel-table-wrap {
    padding: 0;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap {
    padding: 0;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_wrapper {
    padding: 0;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_length,
#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_filter,
#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_info,
#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_paginate {
    display: none !important;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead th {
    border-bottom: 1px solid var(--ui-border) !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting:before,
#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting:after,
#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting_asc:before,
#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting_asc:after,
#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting_desc:before,
#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable thead .sorting_desc:after {
    opacity: 0.35;
    font-size: 0.65em;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable tbody td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable tbody tr {
    cursor: pointer;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap table.dataTable tbody tr:hover td {
    background-color: var(--ui-row-hover);
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_empty .empty-state-container {
    min-height: 8rem;
    padding: 1.5rem 1rem;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_empty .empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_empty .empty-state-icon i {
    font-size: var(--ui-fs-xl);
}

#threepl-dashboard .tpl-fulfillment-dt-wrap .dataTables_empty .empty-state-title {
    font-size: var(--ui-fs-md);
    margin-bottom: 0;
}

#threepl-dashboard .tpl-skeleton--value {
    width: 5.5rem; height: 1.9rem;
}

#threepl-dashboard .tpl-skeleton--chip {
    display: inline-block; width: 9rem; height: 1.85rem; border-radius: var(--ui-radius);
}

#threepl-dashboard .tpl-skeleton--row {
    width: 100%; height: 1.1rem; margin: 0.55rem 0;
}

#threepl-dashboard .tpl-skeleton--bar {
    width: 100%; height: 0.75rem; margin-bottom: 1rem; border-radius: var(--ui-radius);
}

#threepl-dashboard .tpl-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

#threepl-dashboard .tpl-updated {
    font-size: var(--ui-fs-xs);
}

#threepl-dashboard .tpl-refresh-btn {
    font-size: var(--ui-fs-sm);
    min-height: max(34px, var(--ui-tap-min, 0px));
}

#threepl-dashboard .tpl-refresh-btn.is-loading .fa-sync-alt {
    animation: fa-spin 1s linear infinite;
}

#threepl-dashboard .tpl-delta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius);
    background: var(--ui-track);
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-delta--good {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

#threepl-dashboard .tpl-delta--bad {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

#threepl-dashboard .tpl-chart-wrap {
    position: relative;
    height: 260px;
}

#threepl-dashboard .tpl-chart-wrap canvas {
    max-width: 100%;
}

#threepl-dashboard .tpl-chart-summary {
    display: flex;
    gap: 1.25rem;
    text-align: right;
}

#threepl-dashboard .tpl-chart-summary__item span {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-chart-summary__item strong {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-card-footnote {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    padding-top: 0.75rem;
}

#threepl-dashboard .tpl-empty-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 6rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    text-align: center;
}

#threepl-dashboard .tpl-aging {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

#threepl-dashboard .tpl-track {
    height: 0.5rem;
    border-radius: var(--ui-radius);
    background: var(--ui-track);
    overflow: hidden;
}

#threepl-dashboard .tpl-track__fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: var(--ui-radius);
    transition: width 0.5s ease;
}

#threepl-dashboard .tpl-segbar {
    display: flex;
    gap: 2px;
    height: 0.75rem;
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-track);
    margin-bottom: 1rem;
}

#threepl-dashboard .tpl-segbar__seg {
    height: 100%;
    transition: width 0.5s ease;
}

#threepl-dashboard .tpl-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#threepl-dashboard .tpl-legend__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-legend__swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: var(--ui-radius-xs);
}

#threepl-dashboard .tpl-legend__icon {
    width: 0.9rem;
    text-align: center;
    font-size: var(--ui-fs-xs);
}

#threepl-dashboard .tpl-legend__count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-legend__pct {
    min-width: 3rem;
    text-align: right;
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-legend__item.is-zero {
    opacity: 0.5;
}

#threepl-dashboard .tpl-carrier-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

#threepl-dashboard .tpl-carrier__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.3rem;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-carrier__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#threepl-dashboard .tpl-carrier__value {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-carrier__value strong {
    color: var(--ui-text);
    font-weight: 600;
    margin-right: 0.35rem;
}

#threepl-dashboard .tpl-onboarding {
    border: 1px dashed var(--ui-primary-line);
    background: linear-gradient(135deg, var(--ui-primary-soft), var(--ui-row-hover));
}

#threepl-dashboard .tpl-onboarding .card-body {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
}

#threepl-dashboard .tpl-onboarding__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xl);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#threepl-dashboard .tpl-onboarding__title {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    margin: 0 0 0.35rem;
}

#threepl-dashboard .tpl-onboarding__text {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    max-width: 36rem;
    margin-bottom: 1rem;
}

#threepl-dashboard .tpl-stock-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 1.25rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-stock-summary strong {
    color: var(--ui-text);
    font-weight: 600;
    margin-right: 0.25rem;
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-stock-summary i {
    margin-right: 0.35rem;
}

#threepl-dashboard .tpl-stock-product {
    display: block;
    max-width: 16rem;
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#threepl-dashboard .tpl-stock-sku {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-cover {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-cover .tpl-track {
    width: 3.5rem;
    height: 0.35rem;
}

#threepl-dashboard #tpl-stock-table tbody td {
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-inbound-list {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0.25rem;
}

#threepl-dashboard .tpl-inbound-list > li {
    padding: 0 1rem;
}

#threepl-dashboard .tpl-inbound-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ui-border);
    color: inherit;
    text-decoration: none;
}

#threepl-dashboard .tpl-inbound-list > li:last-child .tpl-inbound-item {
    border-bottom: 0;
}

#threepl-dashboard .tpl-inbound-item:hover .tpl-inbound-item__ref {
    color: var(--ui-primary);
}

#threepl-dashboard .tpl-inbound-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    font-size: var(--ui-fs-2xs);
    line-height: 1.1;
    color: var(--ui-muted);
    text-transform: uppercase;
}

#threepl-dashboard .tpl-inbound-item__date strong {
    font-size: var(--ui-fs-lg);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-inbound-item__date.is-overdue {
    border-color: var(--ui-danger-soft);
}

#threepl-dashboard .tpl-inbound-item__ref {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#threepl-dashboard .tpl-inbound-item__meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#threepl-dashboard [data-tpl-requires-centers].tpl-hidden,
#threepl-dashboard .tpl-hidden {
    display: none !important;
}

@media (max-width: 575.98px) {
    #threepl-dashboard .tpl-mini-kanban-board.tpl-ops-surface {
    overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
    }

    #threepl-dashboard .tpl-mini-kanban-column {
    flex: 0 0 78%;
        min-width: 78%;
        min-height: 12rem;
        border-right: 1px solid var(--ui-border);
    }
}

@media (max-width: 767.98px) {
    #threepl-dashboard .tpl-fulfillment-search {
    width: 100%;
        max-width: none;
        order: 3;
    }

    #threepl-dashboard .tpl-fulfillment-tabbar-actions {
    flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        padding-bottom: 0.5rem;
    }

    #threepl-dashboard .tpl-fulfillment-tabbar {
    flex-wrap: wrap;
        align-items: stretch;
        padding: 0 0.75rem 0.5rem;
    }

    #threepl-dashboard .tpl-fulfillment-tabs {
    padding: 0 0.75rem;
    }

    #threepl-dashboard .tpl-fulfillment-tabbar-actions {
    border-left: 0;
        border-top: 1px solid var(--ui-border);
        margin-left: 0;
        padding: 0.5rem 1rem 0.65rem;
        justify-content: flex-end;
    }

    #threepl-dashboard .tpl-chart-wrap {
    height: 210px;
    }

    #threepl-dashboard .tpl-onboarding .card-body {
    flex-direction: column;
    }

    #threepl-dashboard .tpl-panel-card .card-header {
    flex-direction: column;
        align-items: flex-start !important;
    }
}

/* 3PL dashboard layout: attention rows, one KPI strip, main column + insight rail */
#threepl-dashboard {
    --tpl-series-1: var(--ui-series-1);
    --tpl-series-2: var(--ui-series-2);
    --tpl-series-3: var(--ui-series-3);
    --tpl-series-4: var(--ui-series-4);
    --tpl-status-good: var(--ui-success);
    --tpl-status-neutral: var(--ui-neutral);
    --tpl-status-warning: var(--ui-warning);
    --tpl-status-serious: var(--ui-series-2);
    --tpl-status-critical: var(--ui-danger);
    --tpl-ink-muted: var(--ui-muted);
    --tpl-track: var(--ui-track);
}

/* Four tabs plus search do not always fit one line: the actions drop below instead of hiding a tab */
#threepl-dashboard .tpl-fulfillment-tabbar {
    flex-wrap: wrap;
}

#threepl-dashboard .tpl-fulfillment-tabbar-actions {
    margin-left: auto;
    border-left: 0;
}

#threepl-dashboard .tpl-attention-card {
    padding: var(--ui-space-1) var(--ui-space-5);
    border: 1px solid var(--ui-border);
    box-shadow: none;
}

#threepl-dashboard .tpl-attention-card__title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-3) 0 var(--ui-space-2);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-attention-card__count {
    min-width: 1.4rem;
    padding: 1px 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
    font-size: var(--ui-fs-xs);
    text-align: center;
}

#threepl-dashboard .tpl-attention-list {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--ui-space-1);
}

#threepl-dashboard .tpl-attention-list > .ui-skeleton {
    margin: var(--ui-space-2) 0;
}

#threepl-dashboard .tpl-attention-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-3);
    padding: var(--ui-space-3) 0;
    border-top: 1px solid var(--ui-border);
}

#threepl-dashboard .tpl-attention-row__icon {
    width: 1rem;
    text-align: center;
    color: var(--ui-info);
}

#threepl-dashboard .tpl-attention-row--critical .tpl-attention-row__icon {
    color: var(--ui-danger);
}

#threepl-dashboard .tpl-attention-row--warning .tpl-attention-row__icon {
    color: var(--ui-warning);
}

#threepl-dashboard .tpl-attention-row--good .tpl-attention-row__icon {
    color: var(--ui-success);
}

#threepl-dashboard .tpl-attention-row__text {
    flex: 1 1 160px;
    min-width: 0;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-attention-row__text strong {
    font-weight: 600;
}

#threepl-dashboard .tpl-attention-row__hint {
    margin-left: var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-attention-row__action {
    flex-shrink: 0;
}

#threepl-dashboard .tpl-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    border: 1px solid var(--ui-border);
    box-shadow: none;
    overflow: hidden;
}

#threepl-dashboard .tpl-kpi-strip.tpl-hidden {
    display: none;
}

#threepl-dashboard .tpl-kpi-cell {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    min-width: 0;
    padding: var(--ui-space-4) var(--ui-space-5);
    border-right: 1px solid var(--ui-border);
    color: var(--ui-text);
    text-decoration: none;
    transition: background var(--ui-ease);
}

#threepl-dashboard .tpl-kpi-cell:last-child {
    border-right: 0;
}

#threepl-dashboard .tpl-kpi-cell:hover {
    background: var(--ui-row-hover);
    color: var(--ui-text);
}

#threepl-dashboard .tpl-kpi-cell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
}

#threepl-dashboard .tpl-kpi-cell__label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-kpi-cell__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

#threepl-dashboard .tpl-kpi-cell__sub {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-kpi-cell__sub .is-critical {
    font-weight: 500;
    color: var(--ui-danger-text);
}

#threepl-dashboard .tpl-kpi-cell__sub .is-good {
    color: var(--ui-success-text);
}

#threepl-dashboard .tpl-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ui-space-4);
}

#threepl-dashboard .tpl-layout__main {
    display: flex;
    flex: 999 1 600px;
    flex-direction: column;
    gap: var(--ui-space-4);
    min-width: 0;
}

#threepl-dashboard .tpl-layout__main > .tpl-hidden {
    display: none;
}

#threepl-dashboard #tpl-throughput-row .tpl-chart-wrap {
    height: 220px;
}

#threepl-dashboard .tpl-aging-section {
    padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-2);
    border-top: 1px solid var(--ui-border);
}

#threepl-dashboard .tpl-aging-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
}

#threepl-dashboard .tpl-aging-section__title {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-aging-section__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ui-space-3);
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-aging .tpl-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ui-space-1) var(--ui-space-4);
}

#threepl-dashboard .tpl-chat-slot > .tpl-chat-widget {
    min-height: 360px;
}

#threepl-dashboard #tpl-tab-tasks .tpl-mini-kanban .tpl-ops-surface {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}

#threepl-dashboard #tpl-tab-tasks .tpl-mini-kanban > .tpl-ops-surface.tpl-ops-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

#threepl-dashboard #tpl-tab-tasks .tpl-ops-empty .empty-state-container {
    min-height: 0;
    padding: 1.5rem;
}

#threepl-dashboard #tpl-tab-tasks .tpl-ops-empty .empty-state-title {
    max-width: 16rem;
    margin-bottom: 0;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-fulfillment-tab-count--critical {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

#threepl-dashboard .tpl-rail {
    flex: 1 1 320px;
    min-width: 0;
    border: 1px solid var(--ui-border);
    box-shadow: none;
}

#threepl-dashboard .tpl-rail__section {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-top: 1px solid var(--ui-border);
}

#threepl-dashboard .tpl-rail__section:first-child,
#threepl-dashboard .tpl-rail__section.tpl-hidden + .tpl-rail__section {
    border-top: 0;
}

#threepl-dashboard .tpl-rail__section.tpl-hidden {
    display: none;
}

#threepl-dashboard .tpl-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-2);
}

#threepl-dashboard .tpl-rail__head .ui-link {
    font-size: var(--ui-fs-sm);
    white-space: nowrap;
}

#threepl-dashboard .tpl-rail__title {
    margin: 0 0 var(--ui-space-3);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-rail__subtitle {
    margin: var(--ui-space-4) 0 var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-rail__count {
    margin-left: var(--ui-space-1);
    padding: 0 6px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-rail .tpl-segbar {
    height: 0.5rem;
    margin-bottom: var(--ui-space-2);
}

#threepl-dashboard .tpl-rail .tpl-legend {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#threepl-dashboard .tpl-rail .tpl-legend__item {
    padding: 6px 0;
    border-bottom: 1px dashed var(--ui-border);
}

#threepl-dashboard .tpl-rail .tpl-legend__item:last-child {
    border-bottom: 0;
}

#threepl-dashboard .tpl-rail .tpl-card-footnote {
    margin-top: var(--ui-space-2);
}

#threepl-dashboard .tpl-rail .tpl-stock-summary {
    padding: 0 0 var(--ui-space-2);
    border: 0;
    background: none;
}

#threepl-dashboard .tpl-rail-table th,
#threepl-dashboard .tpl-rail-table td {
    padding-right: var(--ui-space-2);
    padding-left: 0;
}

/* The rail is narrow; stock cover already tells the story, so sold-per-day stays on the products page */
#threepl-dashboard .tpl-rail-table th:nth-child(3),
#threepl-dashboard .tpl-rail-table td:nth-child(3) {
    display: none;
}

#threepl-dashboard .tpl-rail .tpl-inbound-list {
    margin: 0 calc(-1 * var(--ui-space-2));
}

#threepl-dashboard .tpl-kv {
    margin: 0;
}

#threepl-dashboard .tpl-kv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 7px 0;
    border-bottom: 1px dashed var(--ui-border);
}

#threepl-dashboard .tpl-kv__row:last-child {
    border-bottom: 0;
}

#threepl-dashboard .tpl-kv__row.tpl-hidden {
    display: none;
}

#threepl-dashboard .tpl-kv dt {
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    color: var(--ui-muted);
}

#threepl-dashboard .tpl-kv dt a {
    color: inherit;
}

#threepl-dashboard .tpl-kv dt a:hover {
    color: var(--ui-primary);
}

#threepl-dashboard .tpl-kv dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

#threepl-dashboard .tpl-kv dd.is-warning {
    color: var(--ui-warning-text);
}

@media (max-width: 575.98px) {
    #threepl-dashboard .tpl-attention-card,
    #threepl-dashboard .tpl-rail__section {
        padding-right: var(--ui-space-4);
        padding-left: var(--ui-space-4);
    }

    #threepl-dashboard .tpl-kpi-cell {
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }

    #threepl-dashboard .tpl-kpi-cell:last-child {
        border-bottom: 0;
    }

    #threepl-dashboard .tpl-attention-row__hint {
        display: block;
        margin-left: 0;
    }
}

/* ---------- Page: center/packing_bins.php (root .ui-page-center-packing-bins) ---------- */
.ui-page-center-packing-bins .pbins-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 2rem;
}

.ui-page-center-packing-bins .pbins-toolbar-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 200px;
}

.ui-page-center-packing-bins .pbins-toolbar-section--bins {
    min-width: 280px;
    flex: 1 1 auto;
    max-width: 460px;
}

.ui-page-center-packing-bins .pbins-toolbar-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ui-page-center-packing-bins .pbins-toolbar-label i {
    font-size: var(--ui-fs-xs);
    opacity: 0.7;
}

.ui-page-center-packing-bins .pbins-toolbar .form-select,
.ui-page-center-packing-bins .pbins-toolbar .form-control {
    border-radius: var(--ui-radius-xs);
    height: 38px;
}

.ui-page-center-packing-bins .pbins-toolbar .form-select {
    border-color: var(--ui-border);
}

.ui-page-center-packing-bins .pbins-toolbar .form-control#packing_bins_total {
    max-width: 100px;
    text-align: center;
    font-weight: 600;
}

.ui-page-center-packing-bins .pbins-toolbar-inline {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.ui-page-center-packing-bins .pbins-toolbar .btn-primary {
    height: 38px;
    padding: 0 1.1rem;
    font-weight: 500;
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-page-center-packing-bins .pbins-toolbar-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin: 0;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.ui-page-center-packing-bins .pbins-toolbar-hint i {
    opacity: 0.7;
    margin-top: 0.05rem;
}

.ui-page-center-packing-bins .pbins-toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: var(--ui-border);
    opacity: 0.6;
}

.ui-page-center-packing-bins .pbins-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.ui-page-center-packing-bins .pbins-stat {
    position: relative;
    width: 100%;
    min-height: 62px;
    appearance: none;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 0.75rem 2.25rem 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ui-page-center-packing-bins .pbins-stat:hover {
    transform: translateY(-1px);
    border-color: var(--ui-primary-line);
    box-shadow: 0 4px 12px rgba(var(--ui-ink-rgb), 0.08);
}

.ui-page-center-packing-bins .pbins-stat:focus-visible {
    outline: 3px solid var(--ui-primary-line);
    outline-offset: 2px;
}

.ui-page-center-packing-bins .pbins-stat.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-row-hover);
    box-shadow: 0 0 0 1px var(--ui-primary), 0 5px 14px var(--ui-primary-tint);
}

.ui-page-center-packing-bins .pbins-stat-filter-indicator {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    font-size: var(--ui-fs-2xs);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-page-center-packing-bins .pbins-stat.is-active .pbins-stat-filter-indicator {
    opacity: 1;
    transform: scale(1);
}

.ui-page-center-packing-bins .pbins-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-md);
    flex-shrink: 0;
}

.ui-page-center-packing-bins .pbins-stat-label {
    display: block;
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin: 0;
    line-height: 1.1;
    font-weight: 500;
}

.ui-page-center-packing-bins .pbins-stat-value {
    display: block;
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    line-height: 1.1;
    margin: 0.1rem 0 0;
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-occupied {
    background: var(--ui-primary-tint);
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-free {
    background: var(--ui-success-tint);
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-overflow {
    background: var(--ui-danger-tint); color: var(--ui-danger);
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-total {
    background: rgba(var(--ui-ink-rgb), 0.06); color: var(--ui-muted);
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-stale {
    background: var(--ui-warning-tint); color: var(--ui-warning-text);
}

.ui-page-center-packing-bins .pbins-stat-icon.bg-critical {
    background: var(--ui-danger-tint); color: var(--ui-danger-text);
}

.ui-page-center-packing-bins .pbins-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ui-page-center-packing-bins .pbins-search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.ui-page-center-packing-bins .pbins-missing-actions {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-page-center-packing-bins .pbins-missing-actions:hover {
    border-color: var(--ui-primary-line);
    box-shadow: 0 4px 12px rgba(var(--ui-ink-rgb), 0.09);
}

.ui-page-center-packing-bins .pbins-missing-view-btn,
.ui-page-center-packing-bins .pbins-export-btn {
    min-height: max(38px, var(--ui-tap-min, 0px));
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-page-center-packing-bins .pbins-missing-actions .pbins-missing-view-btn {
    padding: 0.45rem 0.75rem;
    gap: 0.45rem;
    color: var(--ui-text);
    background: transparent;
    border: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

.ui-page-center-packing-bins .pbins-missing-actions .pbins-missing-view-btn > i {
    color: var(--ui-primary);
}

.ui-page-center-packing-bins .pbins-missing-actions .pbins-missing-view-btn:hover,
.ui-page-center-packing-bins .pbins-missing-actions .pbins-missing-view-btn:focus-visible {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: none;
}

.ui-page-center-packing-bins .pbins-export-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
}

.ui-page-center-packing-bins .pbins-missing-actions .pbins-export-btn {
    background: var(--ui-primary-soft);
    border: 0;
    border-left: 1px solid var(--ui-primary-line);
    text-decoration: none;
}

.ui-page-center-packing-bins .pbins-export-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.ui-page-center-packing-bins .pbins-missing-actions .pbins-export-btn:hover,
.ui-page-center-packing-bins .pbins-missing-actions .pbins-export-btn:focus-visible {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    box-shadow: none;
}

#pbinsMissingItemsModal .modal-footer .pbins-export-btn {
    width: auto;
    min-width: 0;
    padding: 0.5rem 1rem;
    gap: 0.45rem;
    border-left: 1px solid var(--ui-primary);
    border-radius: var(--ui-radius-xs);
}

.ui-page-center-packing-bins .pbins-export-count {
    min-width: 1.4rem;
    padding: 0.08rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.ui-page-center-packing-bins .pbins-search-wrap .form-control {
    border-radius: var(--ui-radius-xs);
    padding-left: 2.25rem;
    height: 38px;
    width: 100%;
}

.ui-page-center-packing-bins .pbins-search-wrap > i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    pointer-events: none;
    opacity: 0.7;
}

.ui-page-center-packing-bins .pbins-search-wrap .form-control:focus + i,
.ui-page-center-packing-bins .pbins-search-wrap .form-control:focus ~ i {
    opacity: 1;
    color: var(--ui-primary);
}

.ui-page-center-packing-bins .pbins-missing-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-row-hover);
}

.ui-page-center-packing-bins .pbins-missing-summary-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.ui-page-center-packing-bins .pbins-missing-summary-icon {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
}

.ui-page-center-packing-bins .pbins-missing-table-wrap {
    max-height: min(58vh, 620px);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}

.ui-page-center-packing-bins .pbins-missing-table {
    margin-bottom: 0;
    min-width: 1050px;
}

.ui-page-center-packing-bins .pbins-missing-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0;
    background: var(--ui-surface);
    white-space: nowrap;
}

.ui-page-center-packing-bins .pbins-missing-sort {
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.ui-page-center-packing-bins .pbins-missing-sort:hover,
.ui-page-center-packing-bins .pbins-missing-sort:focus-visible {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
    outline: none;
}

.ui-page-center-packing-bins .pbins-missing-sort i {
    width: 0.75rem;
    font-size: var(--ui-fs-2xs);
    opacity: 0.4;
}

.ui-page-center-packing-bins .pbins-missing-sort.is-active i {
    opacity: 1;
    color: var(--ui-primary);
}

.ui-page-center-packing-bins .pbins-missing-table td {
    vertical-align: middle;
}

.ui-page-center-packing-bins .pbins-row-label-actions {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-row-hover);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

.ui-page-center-packing-bins .pbins-row-label-actions .cd-icon-btn {
    width: 2.15rem;
    height: 2rem;
    border-radius: 0;
    color: var(--ui-primary);
    background: transparent;
    font-size: var(--ui-fs-xs);
}

.ui-page-center-packing-bins .pbins-row-label-actions .cd-icon-btn + .cd-icon-btn {
    border-left: 1px solid var(--ui-primary-line);
}

.ui-page-center-packing-bins .pbins-row-label-actions .cd-icon-btn:hover,
.ui-page-center-packing-bins .pbins-row-label-actions .cd-icon-btn:focus-visible {
    color: var(--ui-on-primary);
    background: var(--ui-primary);
}

.ui-page-center-packing-bins .pbins-row-label-actions .cd-icon-btn:active {
    background: var(--ui-primary-hover);
}

.ui-page-center-packing-bins .pbins-missing-product {
    min-width: 220px;
    max-width: 330px;
}

.ui-page-center-packing-bins .pbins-missing-product-title {
    color: var(--ui-text);
    font-weight: 500;
    line-height: 1.35;
}

.ui-page-center-packing-bins .pbins-missing-product-meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    margin-top: 0.15rem;
}

.ui-page-center-packing-bins .pbins-missing-qty {
    display: inline-flex;
    min-width: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-danger-text);
    background: var(--ui-warning-tint);
    font-weight: 600;
}

.ui-page-center-packing-bins .pbins-log-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ui-page-center-packing-bins .pbins-log-timeline-item {
    --ui-tone: var(--ui-primary);
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
}

.ui-page-center-packing-bins .pbins-log-timeline-marker {
    position: relative;
    min-height: 100%;
    display: flex;
    justify-content: center;
}

.ui-page-center-packing-bins .pbins-log-timeline-marker::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -0.75rem;
    width: 2px;
    background: rgba(var(--ui-muted-rgb), 0.35);
}

.ui-page-center-packing-bins .pbins-log-timeline-item:last-child .pbins-log-timeline-marker::before {
    bottom: 0.65rem;
}

.ui-page-center-packing-bins .pbins-log-timeline-dot {
    position: relative;
    margin-top: 0.55rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-tone);
    box-shadow: 0 0 0 3px rgba(var(--ui-black-rgb), 0.08);
    z-index: 1;
}

.ui-page-center-packing-bins .pbins-log-item {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 3px solid var(--ui-tone);
    border-radius: var(--ui-radius-xs);
    padding: 0.65rem 0.75rem;
}

.ui-page-center-packing-bins .pbins-log-title {
    font-weight: 600;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
}

.ui-page-center-packing-bins .pbins-log-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-center-packing-bins .pbins-log-description {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    margin-top: 0.25rem;
}

.ui-page-center-packing-bins .pbins-log-status {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-pill);
}

.ui-page-center-packing-bins .pbins-log-status-info {
    background: var(--ui-primary-line); color: var(--ui-primary);
}

.ui-page-center-packing-bins .pbins-log-status-warning {
    background: var(--ui-warning-tint); color: var(--ui-warning-text);
}

.ui-page-center-packing-bins .pbins-log-status-success {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-center-packing-bins .pbins-log-context {
    font-size: var(--ui-fs-xs);
    margin-top: 0.35rem;
    padding: 0.45rem;
    background: rgba(var(--ui-muted-rgb), 0.08);
    border-radius: var(--ui-radius-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

#pbinsHistoryModal .modal-header {
    align-items: flex-start;
    gap: 0.75rem;
}

#pbinsHistoryModalSubtitle {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ui-page-center-packing-bins .pbins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.ui-page-center-packing-bins .pbins-card {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 1rem 0.95rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 138px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}

.ui-page-center-packing-bins .pbins-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--ui-ink-rgb), 0.09);
}

.ui-page-center-packing-bins .pbins-card.is-occupied::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
}

.ui-page-center-packing-bins .pbins-card.is-overflow {
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

.ui-page-center-packing-bins .pbins-card.is-overflow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ui-danger);
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
}

.ui-page-center-packing-bins .pbins-card.is-stale {
    background: var(--ui-warning-tint);
    border-color: var(--ui-warning);
}

.ui-page-center-packing-bins .pbins-card.is-stale::before {
    background: var(--ui-warning);
}

.ui-page-center-packing-bins .pbins-card.is-critical {
    border-color: var(--ui-danger);
}

.ui-page-center-packing-bins .pbins-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ui-page-center-packing-bins .pbins-card-number {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: var(--ui-fs-md);
    line-height: 1.1;
}

.ui-page-center-packing-bins .pbins-card-number-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.35rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-ink-rgb), 0.06);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.ui-page-center-packing-bins .pbins-card.is-free .pbins-card-number-index {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

.ui-page-center-packing-bins .pbins-card.is-overflow .pbins-card-number-index {
    background: var(--ui-danger);
    color: var(--ui-on-primary);
}

.ui-page-center-packing-bins .pbins-status-pill {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    padding: 0.22em 0.55em;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ui-page-center-packing-bins .pbins-status-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ui-page-center-packing-bins .pbins-status-pill.is-free {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-center-packing-bins .pbins-status-pill.is-occupied {
    background: var(--ui-primary-tint);
    color: var(--ui-info-text);
}

.ui-page-center-packing-bins .pbins-status-pill.is-overflow {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

.ui-page-center-packing-bins .pbins-age-badge {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    padding: 0.18em 0.5em;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.ui-page-center-packing-bins .pbins-age-badge.is-stale {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-page-center-packing-bins .pbins-age-badge.is-critical {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

.ui-page-center-packing-bins .pbins-order {
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
    word-break: break-word;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.05);
}

.ui-page-center-packing-bins .pbins-order-label {
    font-size: var(--ui-fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    display: block;
    margin-bottom: 0.1rem;
    font-weight: 600;
}

.ui-page-center-packing-bins .pbins-order a {
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ui-page-center-packing-bins .pbins-order a:hover {
    text-decoration: underline;
}

.ui-page-center-packing-bins .pbins-order-extlink {
    font-size: var(--ui-fs-2xs);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-page-center-packing-bins .pbins-order a:hover .pbins-order-extlink {
    opacity: 1;
    transform: translate(1px, -1px);
}

.ui-page-center-packing-bins .pbins-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
}

.ui-page-center-packing-bins .pbins-meta i {
    font-size: var(--ui-fs-xs);
    opacity: 0.7;
}

.ui-page-center-packing-bins .pbins-pack {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--ui-surface);
    border: 1px solid rgba(var(--ui-ink-rgb), 0.05);
    border-radius: var(--ui-radius-xs);
    padding: 0.4rem 0.55rem;
}

.ui-page-center-packing-bins .pbins-pack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ui-page-center-packing-bins .pbins-pack-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-center-packing-bins .pbins-pack-label i {
    font-size: var(--ui-fs-2xs);
    opacity: 0.7;
}

.ui-page-center-packing-bins .pbins-pack-count {
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.ui-page-center-packing-bins .pbins-pack-progress {
    position: relative;
    height: 6px;
    background: rgba(var(--ui-ink-rgb), 0.08);
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
}

.ui-page-center-packing-bins .pbins-pack-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 0;
    background: var(--ui-primary);
    border-radius: var(--ui-radius-pill);
    transition: width 0.4s ease;
    box-shadow: 0 1px 2px var(--ui-primary-line);
}

.ui-page-center-packing-bins .pbins-card.is-complete .pbins-status-pill.is-occupied {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-center-packing-bins .pbins-card.is-complete {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

.ui-page-center-packing-bins .pbins-actions {
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

.ui-page-center-packing-bins .pbins-card-btn {
    font-size: var(--ui-fs-2xs);
    padding: 0.12rem 0.3rem;
    min-height: max(24px, var(--ui-tap-min, 0px));
    border: none;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-weight: 500;
    line-height: 1;
    opacity: 0.88;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ui-page-center-packing-bins .pbins-card-btn:focus {
    box-shadow: none;
    outline: none;
}

.ui-page-center-packing-bins .pbins-card-btn:focus-visible {
    outline: 2px solid var(--ui-primary-line);
    outline-offset: 1px;
}

.ui-page-center-packing-bins .pbins-card-btn i {
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.ui-page-center-packing-bins .pbins-card-btn span {
    white-space: nowrap;
}

.ui-page-center-packing-bins .pbins-card.is-free .pbins-actions {
    justify-content: center;
}

.ui-page-center-packing-bins .pbins-history-btn:hover,
.ui-page-center-packing-bins .pbins-history-btn:focus-visible {
    opacity: 1;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ui-page-center-packing-bins .pbins-history-btn:hover i,
.ui-page-center-packing-bins .pbins-history-btn:focus-visible i {
    opacity: 1;
}

.ui-page-center-packing-bins .pbins-free-btn:hover,
.ui-page-center-packing-bins .pbins-free-btn:focus-visible {
    opacity: 1;
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
}

.ui-page-center-packing-bins .pbins-free-btn:hover i,
.ui-page-center-packing-bins .pbins-free-btn:focus-visible i {
    opacity: 1;
}

.ui-page-center-packing-bins .pbins-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ui-muted);
}

.ui-page-center-packing-bins .pbins-empty-state i {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 0.75rem;
}

.ui-page-center-packing-bins .pbins-empty-state p {
    font-size: var(--ui-fs-md);
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .ui-page-center-packing-bins .pbins-toolbar {
    flex-direction: column;
        align-items: stretch;
    }

    .ui-page-center-packing-bins .pbins-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-center-packing-bins .pbins-stat {
    padding-right: 0.9rem;
    gap: 0.6rem;
    }

    .ui-page-center-packing-bins .pbins-stat-label {
    white-space: normal;
    hyphens: auto;
    }

    .ui-page-center-packing-bins .pbins-stat > span:not(.pbins-stat-icon) {
    min-width: 0;
    }

    .ui-page-center-packing-bins .pbins-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 0.6rem;
    }

    .ui-page-center-packing-bins .pbins-search-wrap,
    .ui-page-center-packing-bins .pbins-missing-actions {
    width: 100%;
    }

    .ui-page-center-packing-bins .pbins-missing-view-btn {
    flex: 1 1 auto;
    }

    .ui-page-center-packing-bins .pbins-missing-actions .pbins-export-btn {
    width: 46px;
        min-width: 46px;
    }

    .ui-page-center-packing-bins .pbins-missing-summary {
    align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Page: seller/b2b_portal/setup.php (root .ui-page-seller-b2b-portal-setup) ---------- */
.ui-page-seller-b2b-portal-setup .b2b-setup-url-card {
    border-left: 3px solid var(--ui-primary);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem 0.85rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__body {
    padding: 0 1.25rem 1.25rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__panel {
    background: var(--ui-row-hover);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    cursor: text;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__panel:hover,
.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__panel:focus-within {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-soft);
    background: var(--ui-row-hover);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__panel-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-primary);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-text);
    outline: none;
    cursor: text;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__copy-btn,
.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-weight: 500;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__meta-text {
    flex: 1;
    min-width: 12rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.5;
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__slug {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__slug-label {
    color: var(--ui-muted);
    font-weight: 500;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-url-card__slug code {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-xs);
    color: var(--ui-primary);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card {
    border-left: 3px solid var(--ui-success);
    background: rgba(var(--ui-success-rgb), 0.04);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card.is-off {
    border-left-color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.06);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card.is-saving {
    opacity: 0.72;
    pointer-events: none;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-md);
    color: var(--ui-success);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card.is-off .b2b-setup-availability-card__icon {
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__content {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    margin: 0 0 0.15rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__text {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    flex-shrink: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    min-height: 44px;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__switch .form-check-input {
    margin: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-card {
    border-left: 3px solid var(--ui-series-5);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-card__body {
    padding: 0 1.25rem 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-group {
    margin-bottom: 1.35rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-group__title {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.85rem;
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-branding-group__hint {
    font-size: var(--ui-fs-xs);
    line-height: 1.5;
    margin: -0.45rem 0 0.85rem;
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field:focus-within {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-soft);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__swatch {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    padding: 0.2rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__swatch:hover {
    transform: scale(1.03);
    box-shadow: var(--ui-shadow);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__swatch-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__meta {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__label {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    margin-bottom: 0.15rem;
    cursor: pointer;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__hex {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-color-field__input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-identity-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-identity-field--logo {
    max-width: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card {
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
    margin-bottom: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__toggle {
    background: var(--ui-surface);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 0;
    text-align: left;
    transition: background 0.2s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__toggle:hover,
.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__toggle:focus-visible {
    background: var(--ui-row-hover);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ui-primary-tint);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__status {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.35em 0.65em;
    white-space: nowrap;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__status--on {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__status--off {
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__chevron {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    transition: transform 0.25s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__toggle:not(.collapsed) .b2b-setup-section-card__chevron {
    transform: rotate(180deg);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-section-card__intro {
    line-height: 1.6;
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-steps {
    position: relative;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step:last-child {
    padding-bottom: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.06rem;
    top: 2.35rem;
    bottom: 0;
    width: 2px;
    background: var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step__marker {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    border: 1px solid var(--ui-primary-line);
    z-index: 1;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step__content {
    flex: 1;
    min-width: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step__title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    margin: 0 0 0.35rem;
    color: var(--ui-text);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step__text {
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
    color: var(--ui-muted);
    margin: 0 0 0.85rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step__control {
    max-width: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step.is-disabled {
    opacity: 0.55;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-step.is-disabled .b2b-setup-embed-step__control {
    pointer-events: none;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-snippet {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-snippet__code {
    font-size: var(--ui-fs-xs);
    line-height: 1.5;
    resize: vertical;
    min-height: 6.5rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-embed-snippet__copy {
    align-self: flex-start;
    min-height: 44px;
}

body[data-theme=dark] .ui-page-seller-b2b-portal-setup .b2b-setup-section-card__status--on {
    color: var(--ui-success);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-help {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone {
    background: var(--ui-surface);
    display: block;
    position: relative;
    min-height: 148px;
    padding: 1.25rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone:hover,
.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone:focus-within {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-soft);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.is-dragover {
    border-color: var(--ui-primary);
    background: var(--ui-row-hover);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.is-uploading {
    pointer-events: none;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-empty,
.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 108px;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    margin-bottom: 0.65rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-title {
    font-weight: 500;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-hint {
    color: var(--ui-muted);
    margin-top: 0.25rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-preview {
    position: relative;
    width: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-preview-img {
    max-height: 72px;
    max-width: min(100%, 220px);
    object-fit: contain;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.75rem;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0.65rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-dropzone-empty,
.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-dropzone-preview {
    min-height: 0;
    height: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-preview-img {
    max-height: 100%;
    max-width: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-dropzone-icon {
    width: 2rem;
    height: 2rem;
    font-size: var(--ui-fs-base);
    margin-bottom: 0.35rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-dropzone-title {
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.b2b-setup-logo-dropzone--square .b2b-setup-logo-dropzone-hint {
    font-size: var(--ui-fs-2xs);
    line-height: 1.25;
    margin-top: 0.15rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-black-rgb), 0.45);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.has-logo:hover .b2b-setup-logo-dropzone-overlay,
.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone.has-logo:focus-within .b2b-setup-logo-dropzone-overlay {
    opacity: 1;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-logo-dropzone-spinner {
    background: rgba(var(--bs-card-bg-rgb, 32, 33, 36), 0.92);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-card__subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-status {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.35em 0.65em;
    white-space: nowrap;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-status--on {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-status--off {
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-frame {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border-strong);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome__dot:first-child {
    background: var(--ui-series-2);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome__dot:nth-child(2) {
    background: var(--ui-warning);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome__dot:nth-child(3) {
    background: var(--ui-success);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-chrome__url {
    margin-left: 0.35rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__shell {
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__brand {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 1rem 1.15rem;
    color: var(--ui-on-primary);
    background: linear-gradient(
    155deg,
    var(--preview-primary, var(--ui-primary)) 0%,
    color-mix(in srgb, var(--preview-primary, var(--ui-primary)) 78%, rgb(var(--ui-black-rgb))) 52%,
    color-mix(in srgb, var(--preview-primary, var(--ui-primary)) 62%, rgb(var(--ui-black-rgb))) 100%
    );
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__brand-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
    radial-gradient(circle at 18% 18%, var(--ui-surface) 0, transparent 42%),
    radial-gradient(circle at 82% 8%, var(--ui-surface) 0, transparent 34%);
    pointer-events: none;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__brand-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.95rem;
    padding: 0.65rem 0.95rem;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-hover);
    line-height: 0;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__logo {
    max-height: 40px;
    max-width: 130px;
    object-fit: contain;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__logo-fallback {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--preview-primary, var(--ui-primary));
    font-size: var(--ui-fs-lg);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__copy {
    margin-bottom: 0.75rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__accent {
    display: block;
    width: 1.75rem;
    height: 2px;
    margin: 0 auto 0.65rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-white-rgb), 0.45);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__welcome {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
    color: color-mix(in srgb, var(--ui-on-primary) 96%, transparent);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.4rem 0.25rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-white-rgb), 0.1);
    border: 1px solid rgba(var(--ui-white-rgb), 0.14);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    color: color-mix(in srgb, var(--ui-on-primary) 92%, transparent);
    line-height: 1.25;
    min-height: 100%;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__feature-icon {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--ui-white-rgb), 0.16);
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem 1.5rem;
    background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--preview-primary, var(--ui-primary) 5%, transparent) 0, transparent 42%),
    var(--ui-surface));
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__form-card {
    width: 100%;
    max-width: 100%;
    padding: 1.1rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__form-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin: 0 0 0.2rem;
    color: var(--ui-text);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__form-subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin: 0 0 0.85rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__field {
    margin-bottom: 0.65rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__field-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__input {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__input i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-xs);
    margin-bottom: 0.85rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__checkbox {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-primary-soft);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__submit {
    width: 100%;
    min-height: max(38px, var(--ui-tap-min, 0px));
    border: 0;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-on-primary);
    padding: 0.45rem 1rem;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__help {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    margin: 0.75rem 0 0;
    text-align: center;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview__help span {
    color: var(--preview-primary, var(--ui-primary));
}

body[data-theme=dark] .ui-page-seller-b2b-portal-setup .b2b-setup-preview-status--on {
    color: var(--ui-success);
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-frame.is-disabled {
    opacity: 0.78;
}

.ui-page-seller-b2b-portal-setup .b2b-setup-preview-frame.is-disabled .b2b-setup-preview__submit {
    opacity: 0.65;
}

@media (max-width: 575.98px) {
    .ui-page-seller-b2b-portal-setup .b2b-setup-url-card__actions {
    flex-direction: column;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-url-card__copy-btn,
    .ui-page-seller-b2b-portal-setup .b2b-setup-url-card__open-btn {
    width: 100%;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-url-card__meta {
    flex-direction: column;
        align-items: flex-start;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-section-card__toggle {
    flex-wrap: wrap;
        padding: 1rem;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-section-card__status {
    order: 4;
        margin-left: 3.35rem;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-section-card__chevron {
    margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    .ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__body {
    flex-wrap: wrap;
        align-items: flex-start;
    }

    .ui-page-seller-b2b-portal-setup .b2b-setup-availability-card__actions {
    width: 100%;
        justify-content: space-between;
    }
}

/* ---------- Page: center/sellers.php (root .ui-page-center-sellers) ---------- */
#sellerDetailModal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.25rem;
}

#sellerDetailModal .modal-body {
    padding: 1.25rem;
}

.ui-page-center-sellers .seller-detail-modal-overview .card,
.ui-page-center-sellers .seller-detail-modal-kpis .card {
    border: 1px solid var(--ui-border);
}

#sellerDetailModal .seller-kpi-skeleton-line {
    height: 0.875rem;
    border-radius: var(--ui-radius-xs);
    max-width: 100%;
    background: linear-gradient(
    90deg,
    rgba(var(--ui-text-rgb), 0.07) 0%,
    rgba(var(--ui-text-rgb), 0.14) 45%,
    rgba(var(--ui-text-rgb), 0.07) 90%
    );
    background-size: 200% 100%;
    animation: seller-kpi-skeleton-shimmer 1.15s ease-in-out infinite;
}

#sellerDetailModal .seller-kpi-skeleton-line-lg {
    height: 1.75rem;
    border-radius: var(--ui-radius-xs);
}

#sellerDetailModal .seller-kpi-skeleton-progress {
    height: 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-text-rgb), 0.09);
    overflow: hidden;
    position: relative;
}

#sellerDetailModal .seller-kpi-skeleton-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ui-text-rgb), 0.12) 45%,
    transparent 90%
    );
    background-size: 220% 100%;
    animation: seller-kpi-skeleton-shimmer 1.15s ease-in-out infinite;
}

#sellerDetailModal .seller-kpi-skeleton-btn-placeholder {
    height: 2.35rem;
    border-radius: var(--ui-radius-xs);
    background: linear-gradient(
    90deg,
    rgba(var(--ui-text-rgb), 0.06) 0%,
    rgba(var(--ui-text-rgb), 0.11) 50%,
    rgba(var(--ui-text-rgb), 0.06) 100%
    );
    background-size: 200% 100%;
    animation: seller-kpi-skeleton-shimmer 1.15s ease-in-out infinite;
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-skeleton-line,
body[data-theme=dark] #sellerDetailModal .seller-kpi-skeleton-btn-placeholder {
    background: linear-gradient(
    90deg,
    rgba(var(--ui-text-rgb), 0.1) 0%,
    rgba(var(--ui-text-rgb), 0.18) 45%,
    rgba(var(--ui-text-rgb), 0.1) 90%
    );
    background-size: 200% 100%;
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-skeleton-progress {
    background: rgba(var(--ui-text-rgb), 0.12);
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-skeleton-progress::after {
    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ui-text-rgb), 0.18) 45%,
    transparent 90%
    );
    background-size: 220% 100%;
}

#sellerDetailModal .seller-kpi-value {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

#sellerDetailModal .seller-kpi-value-secondary {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    opacity: 0.82;
}

#sellerDetailModal .seller-kpi-compare-slash {
    font-size: var(--ui-fs-lg);
    opacity: 0.55;
    line-height: 1;
}

#sellerDetailModal .seller-kpi-sla-window-badge {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    padding: 0.2rem 0.45rem;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    border: 0;
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-sla-window-badge {
    background: rgba(var(--ui-primary-rgb), 0.22);
    color: var(--ui-text);
}

#sellerDetailModal .seller-kpi-sla-percent {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ui-text);
}

#sellerDetailModal .seller-kpi-sla-progress {
    background: rgba(var(--ui-text-rgb), 0.08);
}

#sellerDetailModal .seller-kpi-sla-progress-bar {
    transition: width 0.35s ease;
}

#sellerDetailModal .seller-kpi-sales-channels-with-errors.text-danger {
    color: var(--ui-danger) !important;
}

#sellerDetailModal .seller-kpi-api-errors-row {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 18%, transparent);
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-api-errors-row {
    border-top-color: color-mix(in srgb, var(--ui-border) 22%, transparent);
}

#sellerDetailModal .seller-kpi-api-errors-btn {
    margin: 0;
    padding: 0.35rem 0.45rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

#sellerDetailModal .seller-kpi-api-errors-chevron {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--ui-muted);
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled) .seller-kpi-api-errors-chevron {
    opacity: 0.45;
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):hover .seller-kpi-api-errors-chevron {
    opacity: 0.75;
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled) {
    cursor: pointer;
    background: rgba(var(--ui-danger-rgb), 0.09);
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled) {
    background: rgba(var(--ui-danger-rgb), 0.14);
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):hover {
    background: rgba(var(--ui-danger-rgb), 0.13);
    color: inherit;
}

body[data-theme=dark] #sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):hover {
    background: rgba(var(--ui-danger-rgb), 0.2);
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):hover .seller-kpi-api-errors-label {
    color: var(--ui-text);
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):focus {
    outline: none;
}

#sellerDetailModal .seller-kpi-api-errors-btn:not(:disabled):focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-danger-rgb), 0.35);
}

#sellerDetailModal .seller-kpi-api-errors-btn:disabled {
    cursor: default;
    opacity: 1;
}

#sellerDetailModal .seller-kpi-api-errors-label {
    line-height: 1.45;
    transition: color 0.2s ease;
}

#sellerDetailModal .card-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 0.75rem 1rem;
}

#sellerDetailModal .card-header h6 {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

#sellerDetailModal .card-body,
#sellerDetailModal .accordion-body {
    padding: 1rem;
}

.ui-page-center-sellers .seller-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-page-center-sellers .seller-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-center-sellers .seller-info-item:last-child {
    border-bottom: none;
}

.ui-page-center-sellers .seller-info-label {
    font-weight: 500;
    color: var(--ui-muted);
    min-width: 120px;
    font-size: var(--ui-fs-base);
}

.ui-page-center-sellers .seller-info-value {
    color: var(--ui-text);
    text-align: right;
    font-size: var(--ui-fs-base);
    word-break: break-word;
}

#sellerPrivateNoteCard .card-body textarea {
    resize: vertical;
}

.ui-page-center-sellers .seller-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-center-sellers .seller-setting-item:last-child {
    border-bottom: none;
}

.ui-page-center-sellers .seller-setting-label {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

.ui-page-center-sellers .seller-setting-label span {
    font-weight: 400;
}

.ui-page-center-sellers .seller-setting-label small {
    font-size: var(--ui-fs-xs);
    margin-top: 0.2rem;
}

.ui-page-center-sellers .seller-setting-input {
    display: flex;
    align-items: center;
}

.ui-page-center-sellers .seller-setting-item .seller-setting-input textarea {
    width: 100%;
}

body[data-theme=dark] #sellerDetailModal .card-header {
    background: var(--ui-surface);
    border-bottom-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-page-center-sellers .seller-info-item,
body[data-theme=dark] .ui-page-center-sellers .seller-setting-item {
    border-bottom-color: var(--ui-border-strong);
}

#shipmentMethodRestrictionsTable tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#shipmentMethodRestrictionsTable tbody tr:hover {
    background-color: var(--ui-row-hover);
}

#shipmentMethodRestrictionsTable tbody tr td:first-child {
    cursor: default;
}

#shipmentMethodRestrictionsTable tbody tr:hover td:first-child {
    background-color: transparent;
}

#apiLogModal .dataTables_wrapper .dt-buttons {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

#apiLogModal .table {
    margin-bottom: 0;
}

#apiLogModal code {
    font-size: var(--ui-fs-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

body[data-theme=dark] #apiLogModal .table code.text-muted {
    color: var(--ui-muted) !important;
}

.ui-page-center-sellers .jtl-ffn-map-busy {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: color-mix(in srgb, rgb(var(--ui-white-rgb)) 92%, transparent);
    border-radius: inherit;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-search {
    position: relative;
    margin-bottom: 0.65rem;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-search .form-control {
    padding-left: 2.2rem;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-toolbar .btn-link {
    color: var(--ui-muted);
    text-decoration: none;
    padding: 0;
    min-height: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

#jtlFfnMerchantMapModal .jtl-ffn-sm-count {
    margin-left: auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#jtlFfnMapShippingMethodList {
    background: rgba(var(--ui-muted-rgb), 0.12);
    border-radius: var(--ui-radius-md);
    overflow: auto;
    max-height: min(36vh, 280px);
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border-bottom: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
    cursor: pointer;
}

body[data-theme=dark] #jtlFfnMapShippingMethodList .jtl-ffn-sm-row {
    border-bottom-color: rgba(var(--ui-muted-rgb), 0.45);
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-row:last-child {
    border-bottom: 0;
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-row .form-check-input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-name {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    margin-top: 0.1rem;
}

#jtlFfnMapShippingMethodList .jtl-ffn-sm-synced {
    flex: 0 0 auto;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.16);
    border-radius: var(--ui-radius-pill);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    margin-top: 0.1rem;
}

#jtlFfnMapShippingMethodStatus {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    padding: 0.85rem;
}

#sellerSignUpLinkModal .seller-sign-up-link-sheet {
    border-radius: var(--ui-radius-sm);
}

#sellerSignUpLinkModal .seller-sign-up-link-hero {
    background: linear-gradient(155deg, var(--ui-primary-tint) 0%, var(--ui-success-tint) 42%, var(--ui-row-hover) 100%);
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] #sellerSignUpLinkModal .seller-sign-up-link-hero {
    background: linear-gradient(155deg, var(--ui-primary-line) 0%, var(--ui-success-tint) 45%, rgba(var(--ui-black-rgb), 0.15) 100%);
    border-bottom-color: var(--ui-border);
}

#sellerSignUpLinkModal .seller-sign-up-link-icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: var(--ui-fs-kpi);
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
    box-shadow: 0 0.35rem 1.25rem var(--ui-primary-line);
}

body[data-theme=dark] #sellerSignUpLinkModal .seller-sign-up-link-icon {
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
    box-shadow: var(--ui-shadow-pop);
    color: var(--ui-info);
}

#sellerSignUpLinkModal .seller-sign-up-link-subtitle {
    max-width: 26rem;
    line-height: 1.55;
    color: var(--ui-muted);
}

#sellerSignUpLinkModal .seller-sign-up-link-url {
    display: block;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.65rem 0.85rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    text-align: center;
    word-break: break-all;
    color: var(--ui-text);
    background: rgba(var(--ui-black-rgb), 0.04);
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] #sellerSignUpLinkModal .seller-sign-up-link-url {
    background: var(--ui-track);
}

#sellerSignUpLinkModal .seller-sign-up-link-choice-hint {
    max-width: 28rem;
    line-height: 1.5;
    color: var(--ui-muted);
}

#shipmentMethodRestrictionsTable_wrapper div.dataTables_length select {
    min-width: 80px;
}

#bulkSellerOnboardingModal .card > .card-header {
    background: rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] #bulkSellerOnboardingModal .card > .card-header {
    background: var(--ui-subtle);
}

#bulkSellerOnboardingModal .bulk-onboarding-step-badge {
    font-weight: 600;
    font-size: var(--ui-fs-xs);
    padding: 0.35em 0.75em;
    flex-shrink: 0;
}

#bulkSellerOnboardingModal .modal-title {
    font-weight: 600;
}

#bulkSellerOnboardingModal .modal-body {
    font-size: var(--ui-fs-md);
}

#bulkSellerOnboardingModal .modal-body .small,
#bulkSellerOnboardingModal .modal-body .form-text {
    font-size: var(--ui-fs-md)!important;
    line-height: 1.55;
}

#bulkSellerOnboardingModal .modal-body .form-label.fw-semibold {
    font-size: var(--ui-fs-lg);
    margin-bottom: 0.35rem;
}

#bulkSellerOnboardingModal #bulk_seller_invite_message.bulk-seller-invite-message-input {
    min-height: 16rem;
    resize: vertical;
}

#bulkSellerOnboardingModal #bulk_preview_message {
    font-size: var(--ui-fs-lg)!important;
    line-height: 1.6 !important;
}

#bulkSellerOnboardingModal .bulk-seller-preview-body-wrap table table td > p:last-child {
    font-size: var(--ui-fs-base)!important;
    line-height: 1.55 !important;
}

#bulkSellerOnboardingModal .bulk-seller-preview-body-wrap table table td > p:nth-last-child(2) span {
    font-size: var(--ui-fs-md)!important;
}

#bulkSellerOnboardingModal .bulk-seller-preview-subject-bar {
    background: rgb(var(--ui-ink-rgb));
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

#bulkSellerOnboardingModal .bulk-seller-preview-subject-bar,
#bulkSellerOnboardingModal .bulk-seller-preview-subject-bar *,
#bulkSellerOnboardingModal .bulk-seller-preview-subject-bar .text-muted {
    color: var(--ui-on-primary) !important;
}

#bulkSellerOnboardingModal .bulk-seller-preview-subject-bar .text-muted {
    opacity: 0.65;
}

#bulkSellerOnboardingModal .bulk-seller-preview-body-wrap {
    max-height: 420px;
    overflow-y: auto;
    background: var(--ui-subtle);
}

body[data-theme=dark] #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap {
    background: var(--ui-surface);
}

body[data-theme=dark] #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap table[role=presentation] {
    background: var(--ui-surface) !important;
}

body[data-theme=dark] #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap table[style*="background:var(--ui-surface)"] {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap p,
body[data-theme=dark] #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap div {
    color: var(--ui-text) !important;
}

#bulkSellerOnboardingResultModal .bulk-onboarding-stat-tile {
    background: var(--ui-surface);
}

#bulkSellerOnboardingResultModal .bulk-onboarding-result-icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

#bulkSellerOnboardingResultModal.is-warning-state .bulk-onboarding-result-icon-wrap {
    background: var(--ui-warning-tint);
    color: var(--ui-warning);
}

body[data-theme=dark] #bulkSellerOnboardingResultModal .bulk-onboarding-stat-tile {
    background: var(--ui-subtle);
}

#bulkSellerOnboardingResultModal .bulk-onboarding-result-modal-footer {
    border-top: 1px solid var(--ui-border);
    margin-top: 0;
    flex-shrink: 0;
}

#bulkSellerOnboardingResultModal .bulk-onboarding-result-alert {
    align-items: center;
}

#bulkSellerOnboardingResultModal .bulk-onboarding-result-alert > i.bx {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.08em;
}

#bulkSellerOnboardingResultModal .bulk-onboarding-result-alert .bulk-onboarding-result-alert-text {
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .ui-page-center-sellers .seller-info-item,
    .ui-page-center-sellers .seller-setting-item {
    flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ui-page-center-sellers .seller-info-value {
    text-align: left;
    }

    .ui-page-center-sellers .seller-setting-input {
    width: 100%;
    }

    .ui-page-center-sellers .seller-setting-input .input-group {
    max-width: 100% !important;
    }

    #bulkSellerOnboardingModal .bulk-seller-preview-body-wrap {
    max-height: 280px;
    }
}

@keyframes seller-kpi-skeleton-shimmer {
                    0% { background-position: 100% 0; }
                    100% { background-position: -100% 0; }
                  }

/* ---------- Page: home/center_app_home.php (root .ui-page-home-center-app-home) ---------- */
#resultsDropdown {
    position: absolute;
    z-index: 1000;
    /* Ensure it appears above other elements */
    top: 100%;
    /* Ensure it appears below the search bar */
}

.ui-page-home-center-app-home .tasks-list-minimal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-page-home-center-app-home .task-item-minimal {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
    border: 1px solid var(--ui-border);
    position: relative;
}

.ui-page-home-center-app-home .task-item-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-minimal {
    background: var(--ui-surface);
    border-color: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-home-center-app-home .task-item-minimal:hover {
    text-decoration: none;
    color: inherit;
}

.ui-page-home-center-app-home .task-item-minimal:hover {
    background: var(--ui-page);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-minimal:hover {
    background: rgba(var(--ui-white-rgb), 0.05);
    border-color: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-home-center-app-home .task-item-minimal.overdue {
    border-left-color: var(--ui-danger);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-minimal.overdue {
    border-left-color: var(--ui-danger);
}

.ui-page-home-center-app-home .task-item-minimal.in_progress {
    border-left-color: var(--ui-primary);
}

.ui-page-home-center-app-home .task-item-minimal.waiting {
    border-left-color: var(--ui-gold);
}

.ui-page-home-center-app-home .task-item-minimal.open {
    border-left-color: rgb(var(--ui-black-rgb));
}

.ui-page-home-center-app-home .task-item-content {
    flex: 1;
    min-width: 0;
}

.ui-page-home-center-app-home .task-item-title {
    font-weight: 500;
    font-size: var(--ui-fs-base);
    margin-bottom: 0.125rem;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-title {
    color: var(--ui-text);
}

.ui-page-home-center-app-home .task-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-text);
    margin-left: 5px;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-meta {
    color: var(--ui-silver);
}

.ui-page-home-center-app-home .task-item-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ui-page-home-center-app-home .task-item-status.open {
    background: var(--ui-border);
    color: var(--ui-body);
}

.ui-page-home-center-app-home .task-item-status.in_progress {
    background: var(--ui-border-strong);
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-status.in_progress {
    background: rgba(var(--ui-primary-rgb), 0.2);
    color: var(--ui-info);
}

.ui-page-home-center-app-home .task-item-status.waiting {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-status.waiting {
    background: rgba(var(--ui-warning-rgb), 0.2);
    color: var(--ui-gold);
}

.ui-page-home-center-app-home .task-item-date {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ui-page-home-center-app-home .task-item-date.overdue {
    color: var(--ui-danger);
    font-weight: 600;
}

.ui-page-home-center-app-home .task-context-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.ui-page-home-center-app-home .task-context-link:hover {
    text-decoration: none;
    color: inherit;
}

.ui-page-home-center-app-home .task-context-link .task-item-date {
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-page-home-center-app-home .task-context-link:hover .task-item-date {
    color: var(--ui-primary);
    text-decoration: underline;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-context-link:hover .task-item-date {
    color: var(--ui-info);
}

.ui-page-home-center-app-home .task-product-context {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(var(--ui-black-rgb), 0.03);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 200px;
    text-decoration: none;
    color: inherit;
    vertical-align: middle;
    flex-shrink: 0;
}

.ui-page-home-center-app-home .task-product-context:hover {
    background: rgba(var(--ui-black-rgb), 0.06);
    text-decoration: none;
    color: inherit;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-product-context {
    background: rgba(var(--ui-white-rgb), 0.05);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-product-context:hover {
    background: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-home-center-app-home .task-product-img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
    border: 1px solid rgba(var(--ui-black-rgb), 0.1);
    flex-shrink: 0;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-product-img {
    border-color: rgba(var(--ui-white-rgb), 0.2);
}

.ui-page-home-center-app-home .task-product-title {
    font-size: var(--ui-fs-xs);
    color: var(--ui-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-product-title {
    color: var(--ui-silver);
}

.ui-page-home-center-app-home .task-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-info-rgb), 0.08);
    color: var(--ui-info);
    margin-right: 0.625rem;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-item-icon {
    background: rgba(var(--ui-info-rgb), 0.2);
}

.ui-page-home-center-app-home .task-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ui-page-home-center-app-home .task-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    color: var(--ui-text);
    opacity: 0.6;
}

.ui-page-home-center-app-home .task-action-btn:hover {
    background: rgba(var(--ui-black-rgb), 0.05);
    color: var(--ui-body);
    opacity: 1;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-action-btn {
    background: rgba(var(--ui-white-rgb), 0.05);
    color: var(--ui-silver);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-action-btn:hover {
    background: rgba(var(--ui-white-rgb), 0.15);
    color: var(--ui-text);
}

.ui-page-home-center-app-home .task-action-btn.complete-btn {
    color: var(--ui-success-text);
    background: transparent;
}

.ui-page-home-center-app-home .task-action-btn.complete-btn:hover {
    background: rgba(var(--ui-success-rgb), 0.1);
    color: var(--ui-success-text);
}

.ui-page-home-center-app-home .task-action-btn svg {
    width: 14px;
    height: 14px;
}

.ui-page-home-center-app-home .task-status-dropdown {
    position: relative;
}

.ui-page-home-center-app-home .task-status-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 2px 8px rgba(var(--ui-black-rgb), 0.15);
    z-index: 1000;
    min-width: 140px;
    display: none;
    padding: 0.25rem 0;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-status-menu {
    background: var(--ui-surface);
    border-color: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-home-center-app-home .task-status-menu.show {
    display: block;
}

.ui-page-home-center-app-home .task-status-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
    transition: background 0.2s ease;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-status-menu-item {
    color: var(--ui-text);
}

.ui-page-home-center-app-home .task-status-menu-item:hover {
    background: var(--ui-page);
}

body[data-theme=dark] .ui-page-home-center-app-home .task-status-menu-item:hover {
    background: rgba(var(--ui-white-rgb), 0.05);
}

.ui-page-home-center-app-home .task-status-menu-item.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-weight: 500;
}

body[data-theme=dark] .ui-page-home-center-app-home .task-status-menu-item.active {
    background: rgba(var(--ui-primary-rgb), 0.2);
    color: var(--ui-info);
}

.ui-page-home-center-app-home .feature-tile {
    transition: all 0.2s ease;
    border-radius: var(--ui-radius-sm);
    border: none;
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-black-rgb), 0.1);
    overflow: hidden;
    position: relative;
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile {
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-black-rgb), 0.3);
}

.ui-page-home-center-app-home .feature-tile:hover {
    background: var(--ui-page);
    box-shadow: 0 2px 6px rgba(var(--ui-black-rgb), 0.15);
    text-decoration: none;
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile:hover {
    background: rgba(var(--ui-white-rgb), 0.05);
}

.ui-page-home-center-app-home .feature-tile:active,
.ui-page-home-center-app-home .feature-tile:focus,
.ui-page-home-center-app-home .feature-tile .btn:active,
.ui-page-home-center-app-home .feature-tile .btn:focus {
    background: var(--ui-page) !important;
    box-shadow: 0 2px 6px rgba(var(--ui-black-rgb), 0.15) !important;
    border: none !important;
    outline: none !important;
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile:active,
body[data-theme=dark] .ui-page-home-center-app-home .feature-tile:focus,
body[data-theme=dark] .ui-page-home-center-app-home .feature-tile .btn:active,
body[data-theme=dark] .ui-page-home-center-app-home .feature-tile .btn:focus {
    background: rgba(var(--ui-white-rgb), 0.05) !important;
    box-shadow: 0 2px 6px rgba(var(--ui-black-rgb), 0.3) !important;
}

.ui-page-home-center-app-home .feature-tile a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.ui-page-home-center-app-home .feature-tile a:active,
.ui-page-home-center-app-home .feature-tile a:focus {
    background: transparent !important;
    outline: none !important;
}

.ui-page-home-center-app-home .feature-tile .btn {
    border: none;
    padding: 0;
    height: 100%;
    background: transparent;
    width: 100%;
}

.ui-page-home-center-app-home .feature-tile .btn:focus,
.ui-page-home-center-app-home .feature-tile .btn:active,
.ui-page-home-center-app-home .feature-tile .btn:focus-visible {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ui-page-home-center-app-home .feature-tile .btn-header {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.ui-page-home-center-app-home .feature-tile svg {
    transition: all 0.2s ease;
    opacity: 0.9;
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile svg {
    opacity: 0.95;
    color: var(--ui-text);
}

.ui-page-home-center-app-home .feature-tile:hover svg {
    opacity: 1;
    transform: scale(1.05);
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile:hover svg {
    color: var(--ui-text);
}

.ui-page-home-center-app-home .feature-tile h6 {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin: 0;
    transition: color 0.2s ease;
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile h6,
body[data-theme=dark] .ui-page-home-center-app-home .feature-tile h2 {
    color: var(--ui-text) !important;
}

.ui-page-home-center-app-home .feature-tile:hover h6 {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-home-center-app-home .feature-tile:hover h6 {
    color: var(--ui-text);
}

.ui-page-home-center-app-home .feature-tile h2 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#floatingButton {
    display: none;
}

@media (max-width: 768px) {
    .ui-page-home-center-app-home .task-item-minimal {
    padding: 0.625rem 0.75rem;
    }

    .ui-page-home-center-app-home .task-item-title {
    font-size: var(--ui-fs-base);
    }

    .ui-page-home-center-app-home .task-item-meta {
    flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ui-page-home-center-app-home .feature-tile .btn-header {
    padding: 1.25rem 0.75rem;
        gap: 0.5rem;
    }

    .ui-page-home-center-app-home .feature-tile h6 {
    font-size: var(--ui-fs-base);
    }

    .ui-page-home-center-app-home .feature-tile svg {
    height: 28px;
        width: auto;
    }
}

/* ---------- Page: home/seller_home.php (root .ui-page-home-seller-home) ---------- */
.ui-page-home-seller-home .chart-wrapper-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: height 0.5s ease;
    margin: 10px 0;
}

.ui-page-home-seller-home .chart-wrapper {
    width: 100%;
    height: 250px;
    max-height: 250px;
    min-height: 250px;
    position: relative;
}

.ui-page-home-seller-home .chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.ui-page-home-seller-home .pim-module-overlay {
    background: color-mix(in srgb, var(--ui-surface) 95%, transparent);
}

.ui-page-home-seller-home .user-action-table-wrapper {
    max-height: 60vh;
    overflow-y: auto;
}

.ui-page-home-seller-home .user-action-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-surface) !important;
}

.ui-page-home-seller-home .user-action-table .type-column {
    width: 120px;
}

.ui-page-home-seller-home .user-action-table .title-column {
    min-width: 200px;
}

.ui-page-home-seller-home .user-action-table .description-column {
    min-width: 300px;
}

.ui-page-home-seller-home .user-action-table .date-column {
    width: 180px; white-space: nowrap;
}

/* Seller home only: the stock advice page keeps the kit's toolbar, search on the right */
.ui-page-home-seller-home #stockAdviceTable_wrapper .dataTables_filter,
.ui-page-home-seller-home #userActionTable_wrapper .dataTables_filter {
    width: 100%;
    margin-bottom: 1rem;
}

.ui-page-home-seller-home #stockAdviceTable_wrapper .dataTables_filter label,
.ui-page-home-seller-home #userActionTable_wrapper .dataTables_filter label {
    width: 100%;
}

.ui-page-home-seller-home #stockAdviceTable_wrapper .dataTables_filter input,
.ui-page-home-seller-home #userActionTable_wrapper .dataTables_filter input {
    width: 100% !important;
}

#seller-home .sh-header__title {
    margin-bottom: 0;
    min-width: 0;
}

#seller-home .sh-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 480px;
}

#seller-home .sh-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#seller-home .sh-filter--date {
    flex: 1 1 260px;
}

#seller-home .sh-filter--tag {
    flex: 1 1 200px;
}

#seller-home .sh-input-icon {
    position: relative;
}

#seller-home .sh-input-icon > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ui-fs-sm);
    color: var(--ui-faint);
    pointer-events: none;
}

#seller-home .sh-input-icon .form-control {
    padding-left: 34px;
}

#seller-home .sh-filters .form-control,
#seller-home .sh-filters .form-select,
#seller-home .sh-filters .select2-container .select2-selection--single {
    height: var(--ui-control-h, 40px);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    box-shadow: var(--ui-shadow);
    transition: border-color 150ms ease;
}

#seller-home .sh-filters .form-control:focus,
#seller-home .sh-filters .form-select:focus,
#seller-home .sh-filters .select2-container--focus .select2-selection--single,
#seller-home .sh-filters .select2-container--open .select2-selection--single {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow);
}

#seller-home .sh-filters .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--ui-control-h, 40px) - 2px);
    padding-left: 12px;
    color: var(--ui-text);
}

#seller-home .sh-filters .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-control-h, 40px) - 2px);
    right: 6px;
}

#seller-home .sh-kpi__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

#seller-home .sh-kpi__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 20px;
}

/* Layout: "Your day" and the team on the left, performance on the right; one column below 1200px */
#seller-home .sh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#seller-home .sh-side,
#seller-home .sh-content {
    display: grid;
    gap: 24px;
    min-width: 0;
}

#seller-home .sh-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    align-items: start;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #seller-home .sh-side {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        align-items: start;
    }
}

@media (min-width: 1200px) {
    #seller-home .sh-layout {
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    }
}

/* ---------- Your day ---------- */
#seller-home .sh-day {
    padding: 8px;
}

#seller-home .sh-day__title {
    margin: 0;
    padding: 10px 12px 8px;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

#seller-home .sh-day__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#seller-home .sh-day__item {
    --tone-bg: var(--ui-primary-tint);
    --tone-text: var(--ui-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    text-decoration: none;
    transition: background-color 150ms ease;
}

#seller-home .sh-day__item[data-tone="danger"] {
    --tone-bg: rgba(var(--ui-danger-rgb), .14);
    --tone-text: var(--ui-danger-text);
}

#seller-home .sh-day__item[data-tone="warning"] {
    --tone-bg: var(--ui-warning-tint);
    --tone-text: var(--ui-warning-text);
}

#seller-home .sh-day__item:hover,
#seller-home .sh-day__item:focus-visible {
    background: var(--ui-subtle);
    color: var(--ui-text);
}

#seller-home .sh-day__list .sh-day__item[data-tone="danger"]:not(.is-loading) {
    background: rgba(var(--ui-danger-rgb), .06);
}

#seller-home .sh-day__list .sh-day__item[data-tone="danger"]:not(.is-loading):hover,
#seller-home .sh-day__list .sh-day__item[data-tone="danger"]:not(.is-loading):focus-visible {
    background: rgba(var(--ui-danger-rgb), .1);
}

#seller-home .sh-day__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    background: var(--tone-bg);
    color: var(--tone-text);
    font-size: var(--ui-fs-md);
}

#seller-home .sh-day__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#seller-home .sh-day__label {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.3;
}

#seller-home .sh-day__hint {
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    color: var(--ui-muted);
}

#seller-home .sh-day__list .sh-day__item[data-tone="danger"]:not(.is-loading) .sh-day__hint,
#seller-home .sh-day__list .sh-day__item[data-tone="danger"]:not(.is-loading) .sh-day__count {
    color: var(--ui-danger-text);
}

#seller-home .sh-day__count {
    flex-shrink: 0;
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#seller-home .sh-day__item.is-loading .sh-day__count {
    color: var(--ui-faint);
}

#seller-home .sh-day__go {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    transition: transform 150ms ease, color 150ms ease;
}

#seller-home .sh-day__item:hover .sh-day__go,
#seller-home .sh-day__item:focus-visible .sh-day__go {
    color: var(--ui-primary);
    transform: translateX(2px);
}

#seller-home .sh-day__done {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px 10px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-success-text);
}

#seller-home .sh-day__clear {
    display: flex;
    flex-direction: column;
    margin: 6px 12px 2px;
    padding-top: 6px;
    border-top: 1px solid var(--ui-border);
}

/* Zero counts: one quiet line each, the item's icon swapped for a check */
#seller-home .sh-day__clear .sh-day__item {
    min-height: max(34px, var(--ui-tap-min, 0px));
    gap: 8px;
    padding: 4px 0;
    border-radius: 0;
    background: none;
}

#seller-home .sh-day__clear .sh-day__icon {
    width: 16px;
    height: auto;
    background: none;
    color: var(--ui-success-text);
    font-size: var(--ui-fs-xs);
}

#seller-home .sh-day__clear .sh-day__icon i::before {
    content: "\f00c";
}

#seller-home .sh-day__clear .sh-day__hint,
#seller-home .sh-day__clear .sh-day__go {
    display: none;
}

#seller-home .sh-day__clear .sh-day__label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-body);
}

#seller-home .sh-day__clear .sh-day__count {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

#seller-home .sh-day__clear .sh-day__item:hover .sh-day__label,
#seller-home .sh-day__clear .sh-day__item:focus-visible .sh-day__label {
    color: var(--ui-primary);
}

/* ---------- Team ---------- */
#seller-home .sh-team .leaderboard-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 20px 20px;
}

#seller-home .sh-skeleton--team {
    height: 40px;
}

#seller-home .sh-team__list {
    display: flex;
    flex-direction: column;
    padding: 0 8px 8px;
}

#seller-home .sh-team__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: transparent;
    color: var(--ui-text);
    text-align: left;
    transition: background-color 150ms ease;
}

#seller-home .sh-team__row:hover,
#seller-home .sh-team__row:focus-visible {
    background: var(--ui-subtle);
}

#seller-home .sh-team__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

#seller-home .sh-team__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#seller-home .sh-team__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

#seller-home .sh-team__name {
    min-width: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#seller-home .sh-team__total {
    flex-shrink: 0;
    font-size: var(--ui-fs-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#seller-home .sh-team__total small {
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

#seller-home .sh-team__bar {
    height: 6px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
}

#seller-home .sh-team__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
}

#seller-home .sh-team__meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#seller-home .sh-team__more,
#seller-home .sh-team__empty {
    margin: 0;
    padding: 0 20px 18px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#seller-home .sh-team__more {
    padding-top: 2px;
    font-size: var(--ui-fs-xs);
}

/* ---------- Performance: KPI tiles pick what the chart shows ---------- */
#seller-home .sh-perf__kpis {
    border-bottom: 1px solid var(--ui-border);
}

#seller-home .sh-perf__kpi {
    position: relative;
    padding: 18px 20px 16px;
    border-radius: 0;
    transition: background-color 150ms ease;
}

#seller-home .sh-perf__kpi:first-child {
    border-top-left-radius: var(--ui-radius);
}

#seller-home .sh-perf__kpi:last-child {
    border-top-right-radius: var(--ui-radius);
}

#seller-home .sh-perf__pick {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

#seller-home .sh-perf__pick:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: -2px;
}

/* The help icon stays clickable above the tile's button */
#seller-home .sh-perf__kpi .ui-help {
    position: relative;
    z-index: 2;
}

#seller-home .sh-perf__kpi:hover {
    background: var(--ui-subtle);
}

#seller-home .sh-perf__kpi.is-active {
    background: var(--ui-primary-soft);
}

#seller-home .sh-perf__kpi.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ui-primary);
}

#seller-home .sh-perf__kpi.is-active .ui-stat__label {
    color: var(--ui-primary);
}

/* ---------- Listings ---------- */
#seller-home .sh-listings__total {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    white-space: nowrap;
}

#seller-home .sh-listings__total span {
    font-weight: 700;
    color: var(--ui-text);
}

#seller-home .sh-listings .ui-card__body {
    padding-top: 8px;
}

#seller-home .sh-pim {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#seller-home .sh-pim__bar {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
}

#seller-home .sh-pim__bar.is-empty {
    display: none;
}

#seller-home .sh-pim__seg {
    flex: 0 1 0;
    min-width: 6px;
}

#seller-home .sh-pim__seg[data-tone="danger"],
#seller-home .sh-pim__dot[data-tone="danger"] {
    background: var(--ui-danger);
}

#seller-home .sh-pim__seg[data-tone="danger-strong"],
#seller-home .sh-pim__dot[data-tone="danger-strong"] {
    background: var(--ui-danger-text);
}

#seller-home .sh-pim__seg[data-tone="warning"],
#seller-home .sh-pim__dot[data-tone="warning"] {
    background: var(--ui-warning);
}

#seller-home .sh-pim__seg[data-tone="primary"],
#seller-home .sh-pim__dot[data-tone="primary"] {
    background: var(--ui-primary);
}

#seller-home .sh-pim__seg[data-tone="success"],
#seller-home .sh-pim__dot[data-tone="success"] {
    background: var(--ui-success);
}

#seller-home .sh-pim__seg[data-tone="muted"],
#seller-home .sh-pim__dot[data-tone="muted"] {
    background: var(--ui-faint);
}

#seller-home .sh-pim__state .sh-skeleton--line {
    height: 10px;
}

#seller-home .sh-pim__none {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#seller-home .sh-pim__legend {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
}

#seller-home .sh-pim__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: max(40px, var(--ui-tap-min, 0px));
    padding: 6px 8px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-body);
    font-size: var(--ui-fs-base);
    text-align: left;
    transition: background-color 150ms ease;
}

#seller-home .sh-pim__row:hover,
#seller-home .sh-pim__row:focus-visible {
    background: var(--ui-subtle);
}

#seller-home .sh-pim__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

#seller-home .sh-pim__label {
    flex: 1 1 auto;
}

#seller-home .sh-pim__count {
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#seller-home .sh-pim__row.is-zero {
    color: var(--ui-muted);
}

#seller-home .sh-pim__row.is-zero .sh-pim__count {
    font-weight: 500;
    color: var(--ui-faint);
}

#seller-home .sh-pim__row.is-zero .sh-pim__dot {
    opacity: .45;
}

@media (max-width: 991.98px) {
    #seller-home .sh-perf__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #seller-home .sh-perf__kpi:nth-child(odd) {
        border-left: 0;
    }

    #seller-home .sh-perf__kpi:nth-child(n+3) {
        border-top: 1px solid var(--ui-border);
    }

    #seller-home .sh-perf__kpi:nth-child(2) {
        border-top-right-radius: var(--ui-radius);
    }

    #seller-home .sh-perf__kpi:last-child {
        border-top-right-radius: 0;
    }
}

#seller-home .sh-chart-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px 0 12px;
    border-bottom: 1px solid var(--ui-border);
}

#seller-home .sh-chart-card__body {
    position: relative;
    padding: 16px 20px;
    min-height: 340px;
}

#seller-home .sh-chart-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 500px;
    margin: auto;
    pointer-events: none;
}

#seller-home .sh-chart-hint {
    position: absolute;
    bottom: -14px;
    left: 30px;
}

#seller-home .sh-chart-hint h6 {
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

#seller-home .sh-top-list {
    padding: 0 8px 10px;
}

#seller-home .sh-top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--ui-radius);
    transition: background-color 150ms ease;
}

#seller-home .sh-top-item:not(.sh-skeleton-row):hover {
    background: var(--ui-subtle);
}

#seller-home .sh-top-item__img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface) center / contain no-repeat;
}

#seller-home .sh-top-item__main {
    flex: 1 1 auto;
    min-width: 0;
}

#seller-home .sh-top-item__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#seller-home .sh-top-item__stock {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#seller-home .sh-top-item__stock.is-warning {
    color: var(--ui-warning);
}

#seller-home .sh-top-item__stock.is-danger {
    color: var(--ui-danger);
}

#seller-home .sh-top-item__units {
    flex-shrink: 0;
    text-align: right;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

#seller-home .sh-top-item__units small {
    display: inline;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

#seller-home .sh-skeleton--thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

#seller-home .sh-skeleton--line {
    height: 12px;
    flex: 1 1 auto;
}

#seller-home .pim-module-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#seller-home .stock-advice-table .img-bg-thumbnail {
    width: 40px;
    height: 40px;
    border-color: var(--ui-border);
}

#seller-home .sh-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#seller-home .sh-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

#seller-home .sh-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-body);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    transition: border-color 150ms ease, opacity 150ms ease;
}

#seller-home .sh-legend__item:hover {
    border-color: var(--ui-border-strong);
}

#seller-home .sh-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#seller-home .sh-legend__name {
    min-width: 0;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#seller-home .sh-legend__value {
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#seller-home .sh-legend__item.is-off {
    opacity: .5;
}

#seller-home .sh-legend__item.is-off .sh-legend__dot {
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--ui-faint);
}

#seller-home .sh-legend__item.is-off .sh-legend__name {
    text-decoration: line-through;
}

#seller-home .sh-legend__idle {
    padding: 0 4px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
}

#seller-home #stockAdviceTable_wrapper.is-single-page .dataTables_info,
#seller-home #stockAdviceTable_wrapper.is-single-page .dataTables_paginate {
    display: none;
}

#userActionModal .modal-content,
#stockAdviceExplanationModal .modal-content {
    border: 0;
    box-shadow: var(--ui-shadow-pop);
    overflow: hidden;
}

#userActionModal .user-action-icon-wrapper {
    border-radius: var(--ui-radius);
}

#seller-home .sh-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    margin-left: 4px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    vertical-align: 1px;
}

#seller-home #stockAdviceTable thead {
    display: none;
}

#seller-home #stockAdviceTable {
    width: 100% !important;
    border-top: 1px solid var(--ui-border);
}

#seller-home #stockAdviceTable tbody tr {
    cursor: default;
}

#seller-home #stockAdviceTable tbody td {
    padding: 12px 8px;
    vertical-align: middle;
}

#seller-home #stockAdviceTable tbody td:first-child {
    width: 56px;
    padding-left: 20px;
}

#seller-home #stockAdviceTable tbody td:nth-child(2) {
    width: 100%;
    max-width: 0;
}

#seller-home #stockAdviceTable tbody td:last-child {
    padding-right: 20px;
    text-align: right;
    white-space: nowrap;
}

#seller-home #stockAdviceTable .img-bg-thumbnail {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ui-border);
    background-size: contain;
    background-repeat: no-repeat;
}

#seller-home .sa-advice {
    min-width: 0;
}

#seller-home .sa-advice__title {
    font-size: var(--ui-fs-base);
    font-weight: 700;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#seller-home .sa-advice__text {
    margin-top: 2px;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#seller-home .sa-advice__text > * + *::before {
    content: "\00b7";
    margin: 0 6px;
    color: var(--ui-faint);
}

#seller-home .sa-advice__type {
    font-weight: 600;
    color: var(--ui-body);
}

#seller-home .sa-due__when {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-body);
}

#seller-home .sa-due__when[data-tone="warning"] {
    color: var(--ui-warning);
}

#seller-home .sa-due__when[data-tone="danger"] {
    color: var(--ui-danger);
}

#seller-home .sa-due {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
    text-align: right;
}

#seller-home .sa-due__stock {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#seller-home #stockAdviceTable tbody td .btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    /* style.css paints .btn-primary solid primary (!important): this is a soft action, so tint it instead */
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    width: auto !important;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

#seller-home #stockAdviceTable tbody td .btn:hover {
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

#seller-home .dataTable tbody > tr > td {
    border-top: 0 !important;
}

#seller-home .dataTable tbody > tr + tr > td {
    border-top: 1px solid var(--ui-border) !important;
}

#seller-home #stockAdviceTable tbody td .btn.btn-secondary {
    color: var(--ui-muted) !important;
}

#seller-home #stockAdviceTable_wrapper .dataTables_info {
    padding: 10px 16px 0;
}

#seller-home #stockAdviceTable_wrapper .dataTables_paginate {
    padding: 6px 16px 0;
}

#seller-home #stockAdviceTable_wrapper .dataTables_paginate .page-link {
    font-size: var(--ui-fs-xs);
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 8px;
}

@media (max-width: 425px) {
    .ui-page-home-seller-home .chart-wrapper {
    height: 200px;
        max-height: 200px;
        min-height: 200px;
    }
}

@media (max-width: 991.98px) {
    #seller-home .sh-filters {
    flex-basis: 100%;
    }
}

@media (max-width: 575.98px) {
    #seller-home .ui-link span {
    display: none;
    }

    #seller-home #stockAdviceTable tbody tr {
    display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 12px 12px 10px;
        border-bottom: 1px solid var(--ui-border);
    }

    #seller-home #stockAdviceTable tbody td {
    display: block;
        padding: 0;
        border: 0;
    }

    #seller-home #stockAdviceTable tbody tr + tr > td {
    border-top: 0 !important;
    }

    #seller-home #stockAdviceTable tbody td:first-child {
    grid-row: span 3;
        width: auto;
        padding: 0;
    }

    #seller-home #stockAdviceTable tbody td:nth-child(3),
    #seller-home #stockAdviceTable tbody td:last-child {
    margin-top: 8px;
    }

    #seller-home #stockAdviceTable tbody td:last-child {
    text-align: left;
        padding: 0;
    }

    #seller-home #stockAdviceTable tbody td.dataTables_empty {
    grid-column: 1 / -1;
    }

    #seller-home .sa-due {
    flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    #seller-home #stockAdviceTable tbody td:nth-child(2) {
    width: auto;
        max-width: none;
        min-width: 0;
    }
}

@media (min-width: 576px) {
    #seller-home #stockAdviceTable_wrapper {
    display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    #seller-home #stockAdviceTable_wrapper > table {
    flex: 0 0 100%;
    }
}

#wms-dashboard .wms-filter {
    position: relative;
    display: flex;
    align-items: center;
}

#wms-dashboard .wms-filter > i {
    position: absolute;
    left: 0.75rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    pointer-events: none;
    z-index: 1;
}

#wms-dashboard #dateRangeSelectorDashboard {
    width: 15.5rem;
    padding-left: 2.1rem;
    border-radius: var(--ui-radius-sm);
}

#wms-dashboard .wms-filter--tag {
    width: 13rem;
}

#wms-dashboard .wms-filter--tag .form-select {
    border-radius: var(--ui-radius-sm);
}

#wms-dashboard .wms-attention {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
}

#wms-dashboard .wms-attention__label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-muted);
}

#wms-dashboard .wms-attention__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#wms-dashboard .wms-alert-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#wms-dashboard a.wms-alert-pill:hover {
    border-color: currentColor;
    box-shadow: var(--ui-shadow);
}

#wms-dashboard .wms-alert-pill strong {
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-alert-pill .wms-alert-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

#wms-dashboard .wms-alert-pill--critical .wms-alert-dot {
    background: var(--ui-danger);
}

#wms-dashboard .wms-alert-pill--warning .wms-alert-dot {
    background: var(--ui-warning);
}

#wms-dashboard .wms-alert-pill--neutral .wms-alert-dot {
    background: var(--ui-neutral);
}

#wms-dashboard .wms-alert-pill--good {
    color: var(--ui-success-text); border-color: transparent; background: var(--ui-success-tint);
}

#wms-dashboard .wms-seg--sm > button {
    padding: 0.2rem 0.6rem;
}

#wms-dashboard .wms-panel-card .card-header {
    padding: 1rem 1.25rem 0.25rem;
    border-bottom: 0;
}

#wms-dashboard .card-header .card-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

#wms-dashboard .wms-panel-card__subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin: 0.15rem 0 0;
}

#wms-dashboard .wms-section-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-muted);
    margin: 0 0 0.6rem;
}

#wms-dashboard .wms-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.85rem 0 0;
    padding: 0;
    font-size: var(--ui-fs-sm);
}

#wms-dashboard .wms-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ui-muted);
}

#wms-dashboard .wms-legend li strong {
    color: var(--ui-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-legend li.is-zero {
    opacity: 0.55;
}

#wms-dashboard .wms-swatch {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--ui-radius-xs);
    flex-shrink: 0;
}

#wms-dashboard .wms-hero {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.85rem;
}

#wms-dashboard .wms-hero__value {
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-hero__meta {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#wms-dashboard .wms-footnote {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#wms-dashboard .wms-footnote:empty {
    display: none;
}

#wms-dashboard .wms-perf {
    padding: 1rem 1.25rem;
}

#wms-dashboard .wms-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

#wms-dashboard .wms-stat {
    min-width: 0;
}

#wms-dashboard .wms-stat[title] {
    cursor: help;
}

#wms-dashboard .wms-stat__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wms-dashboard .wms-stat__value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-stat__foot {
    margin-top: 0.2rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    min-height: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wms-dashboard .wms-chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin-bottom: 0.5rem;
}

#wms-dashboard .wms-chart-summary:empty {
    display: none;
}

#wms-dashboard .wms-chart-summary > div {
    display: flex;
    flex-direction: column;
}

#wms-dashboard .wms-chart-summary span {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#wms-dashboard .wms-chart-summary strong {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-stock-panel {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border);
}

#wms-dashboard .wms-stock-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

#wms-dashboard .wms-stock-panel__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-right: 0.5rem;
}

#wms-dashboard .wms-stock-panel__value {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-stock-chart {
    position: relative;
    height: 6.5rem;
}

#wms-dashboard .wms-info {
    color: var(--ui-muted);
    opacity: 0.7;
    cursor: help;
    font-size: var(--ui-fs-xs);
}

#wms-dashboard .wms-hbars {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

#wms-dashboard .wms-hbar__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--ui-fs-sm);
}

#wms-dashboard .wms-hbar__row--wide {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3rem;
}

#wms-dashboard .wms-hbar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wms-dashboard .wms-hbar__track {
    height: 0.6rem;
    border-radius: 0 var(--ui-radius-xs) var(--ui-radius-xs) 0;
    background: var(--ui-subtle);
    position: relative;
}

#wms-dashboard .wms-hbar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 0 var(--ui-radius-xs) var(--ui-radius-xs) 0;
    transition: width 0.45s ease;
}

#wms-dashboard .wms-hbar__value {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-heatmap {
    display: grid;
    grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr));
    gap: 3px;
    position: relative;
}

#wms-dashboard .wms-heatmap__day,
#wms-dashboard .wms-heatmap__hour {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    display: flex;
    align-items: center;
}

#wms-dashboard .wms-heatmap__hour {
    justify-content: center;
    min-height: 1rem;
}

#wms-dashboard .wms-heatmap__cell {
    height: 1.35rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
    cursor: default;
    outline: none;
}

#wms-dashboard .wms-heatmap__cell:hover,
#wms-dashboard .wms-heatmap__cell:focus-visible {
    box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 3.5px var(--ui-primary);
}

#wms-dashboard .wms-heatmap-scale {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
}

#wms-dashboard .wms-heatmap-scale__ramp {
    width: 6rem;
    height: 0.5rem;
    border-radius: var(--ui-radius-xs);
    background: linear-gradient(90deg, var(--ui-primary-tint), var(--ui-primary));
}

#wms-dashboard .wms-tooltip {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    padding: 0.4rem 0.6rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-text);
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    box-shadow: var(--ui-shadow-pop);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s ease;
}

#wms-dashboard .wms-tooltip.is-visible {
    opacity: 1;
}

#wms-dashboard .wms-insight-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.85rem;
}

#wms-dashboard .wms-insight-line strong {
    color: var(--ui-text);
    font-weight: 600;
}

#wms-dashboard .wms-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#wms-dashboard .wms-mini-stat__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-bottom: 0.2rem;
}

#wms-dashboard .wms-mini-stat__value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-callouts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

#wms-dashboard .wms-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-sm);
    color: inherit;
    text-decoration: none;
}

#wms-dashboard a.wms-callout:hover {
    background: var(--ui-primary-tint);
}

#wms-dashboard .wms-callout i {
    margin-top: 0.15rem;
    width: 1rem;
    text-align: center;
}

#wms-dashboard .wms-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#wms-dashboard .wms-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--ui-border);
}

#wms-dashboard .wms-list li:last-child .wms-list__item {
    border-bottom: 0;
}

#wms-dashboard a.wms-list__item:hover {
    background: var(--ui-subtle);
}

#wms-dashboard .wms-thumb--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
}

#wms-dashboard .wms-list__main {
    flex: 1 1 auto;
    min-width: 0;
}

#wms-dashboard .wms-list__title {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wms-dashboard .wms-list__sub {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wms-dashboard .wms-list__side {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

#wms-dashboard .wms-pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

#wms-dashboard .wms-stage {
    position: relative;
    padding: 0.65rem 0.7rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    min-width: 0;
}

#wms-dashboard .wms-stage__label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wms-dashboard .wms-pipeline--3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
}

#wms-dashboard .wms-pipeline--3 .wms-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
}

#wms-dashboard .wms-pipeline--3 .wms-stage__label {
    font-size: var(--ui-fs-sm);
}

#wms-dashboard .wms-pipeline--3 .wms-stage__value {
    font-size: var(--ui-fs-lg);
}

#wms-dashboard .wms-stage__value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

#wms-dashboard .wms-stage__sub {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    white-space: nowrap;
}

#wms-dashboard .wms-stage.is-active {
    background: var(--ui-primary-tint);
}

#wms-dashboard .wms-stage.is-active .wms-stage__value {
    color: var(--ui-primary);
}

#wms-dashboard .wms-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0;
    font-size: var(--ui-fs-sm);
}

#wms-dashboard .wms-kv + .wms-kv {
    border-top: 1px dashed var(--ui-border);
}

#wms-dashboard .wms-kv__label {
    color: var(--ui-muted);
}

#wms-dashboard .wms-kv__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#wms-dashboard .wms-channel-legend-wrap {
    margin-top: 0.5rem;
}

#wms-dashboard .wms-channel-legend-toggle {
    font-size: var(--ui-fs-sm);
    text-decoration: none;
}

#wms-dashboard .wms-channel-legend-toggle:hover {
    text-decoration: underline;
}

#wms-dashboard .wms-channel-legend-toggle .fa-chevron-down {
    transition: transform 0.2s ease;
}

#wms-dashboard .wms-channel-legend-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

#wms-dashboard .wms-channel-legend {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.15rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#wms-dashboard .wms-channel-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 11rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

#wms-dashboard .wms-channel-chip:hover {
    border-color: var(--ui-primary);
}

#wms-dashboard .wms-channel-chip.is-off {
    opacity: 0.45;
}

#wms-dashboard .wms-channel-chip img {
    height: 16px;
    width: auto;
    flex-shrink: 0;
}

#wms-dashboard .wms-channel-chip .wms-channel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#wms-dashboard .wms-channel-chip .wms-channel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wms-dashboard .wms-channel-chip .form-check-input {
    display: none;
}

body[data-theme=dark] #wms-dashboard .wms-channel-chip {
    background: var(--ui-surface);
}

#wms-dashboard .chart-wrapper-container {
    width: 100%;
    position: relative;
    margin: 10px 0;
}

#wms-dashboard .chart-wrapper {
    width: 100%;
    height: 250px;
    max-height: 250px;
    min-height: 250px;
    position: relative;
}

#wms-dashboard .wms-charts-row {
    align-items: stretch;
}

#wms-dashboard .wms-charts-row > * {
    display: flex;
    flex-direction: column;
}

#wms-dashboard .wms-orders-inventory-card,
#wms-dashboard .wms-shipments-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin-bottom: 0 !important;
}

#wms-dashboard .wms-orders-inventory-card > .card-body,
#wms-dashboard .wms-shipments-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#wms-dashboard .wms-combined-chart-grow,
#wms-dashboard .wms-shipments-chart-grow {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#wms-dashboard .wms-combined-chart-grow .chart-wrapper-container,
#wms-dashboard .wms-shipments-chart-grow .chart-wrapper-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

#wms-dashboard .wms-combined-chart-grow .chart-wrapper--combined {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 15rem;
}

#wms-dashboard .chart-wrapper--shipments-h {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 12rem;
}

#wms-dashboard .wms-chart-panel {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
}

#wms-dashboard .wms-chart-empty,
#wms-dashboard .wms-chart-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
}

#wms-dashboard .wms-chart-overlay {
    z-index: 3;
}

#wms-dashboard .wms-chart-empty .empty-state-container {
    min-height: 0;
    padding: 0;
}

#wms-dashboard .wms-chart-empty .empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
}

#wms-dashboard .wms-chart-empty .empty-state-title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    margin-bottom: 0;
    max-width: 16rem;
}

#wms-dashboard .chart-wrapper canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

#wms-dashboard #stockAdviceTable_wrapper .dt-buttons {
    margin-bottom: 0.5rem;
}

@media (max-width: 1199.98px) {
    #wms-dashboard .wms-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #wms-dashboard .ui-page-header__actions,
    #wms-dashboard .wms-filter,
    #wms-dashboard #dateRangeSelectorDashboard,
    #wms-dashboard .wms-filter--tag {
    width: 100%;
    }

    #wms-dashboard .wms-charts-row > * {
    display: block;
    }

    #wms-dashboard .wms-orders-inventory-card,
    #wms-dashboard .wms-shipments-card {
    margin-bottom: 1rem !important;
    }

    #wms-dashboard .wms-mini-stats,
    #wms-dashboard .wms-pipeline:not(.wms-pipeline--3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #wms-dashboard .wms-heatmap {
    grid-template-columns: 1.8rem repeat(24, minmax(0, 1fr));
        gap: 2px;
    }
}

/* ---------- Page: center/invoicing_profiles.php (root .ui-page-center-invoicing-profiles) ---------- */
#rulesListModal .modal-header .btn i {
    vertical-align: -0.125em;
    line-height: 1;
}

#rulesListModal .modal-header .btn {
    align-items: center;
    display: inline-flex;
}

#datatable-invoicing-exports tbody tr td.export-row-checkbox-cell {
    width: 38px;
    padding-left: 0.75rem;
    padding-right: 0;
}

#datatable-invoicing-exports tbody td {
    vertical-align: middle;
}

#datatable-invoicing-exports tbody tr[data-edit-html-available="1"] {
    cursor: pointer;
}

.ui-page-center-invoicing-profiles .export-row-main {
    min-width: 240px;
}

.ui-page-center-invoicing-profiles .export-row-title {
    color: var(--ui-text);
    word-break: break-word;
}

.ui-page-center-invoicing-profiles .export-row-meta {
    line-height: 1.4;
}

.ui-page-center-invoicing-profiles .export-row-meta .export-row-seller,
.ui-page-center-invoicing-profiles .export-row-meta .export-row-profile {
    display: inline-flex;
    align-items: center;
}

.ui-page-center-invoicing-profiles .export-row-created {
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-page-center-invoicing-profiles .export-row-actions .export-format-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    background: transparent;
    text-decoration: none;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.ui-page-center-invoicing-profiles .export-row-actions .export-format-action:hover {
    background: var(--ui-subtle);
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .export-row-actions .export-format-action:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 1px;
}

#profilesListModal .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

#profilesListModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-page-center-invoicing-profiles .profiles-list-modal-header {
    align-items: flex-start;
}

.ui-page-center-invoicing-profiles .profiles-list-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xl);
}

.ui-page-center-invoicing-profiles .profiles-list-modal-subtitle {
    line-height: 1.35;
}

#profilesListModal .modal-body {
    padding: 1.25rem 1.5rem;
    background: var(--ui-subtle);
}

.ui-page-center-invoicing-profiles .profiles-list-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.45rem 0.75rem 0.45rem 2.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ui-page-center-invoicing-profiles .profiles-list-search-wrap:hover {
    border-color: var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .profiles-list-search-wrap:focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
    background: var(--ui-surface);
}

.ui-page-center-invoicing-profiles .profiles-list-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
    pointer-events: none;
    transition: color 0.15s ease;
}

.ui-page-center-invoicing-profiles .profiles-list-search-wrap:focus-within .profiles-list-search-icon {
    color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .profiles-list-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    line-height: 1.4;
}

.ui-page-center-invoicing-profiles .profiles-list-search-input::placeholder {
    color: var(--ui-muted);
    opacity: 0.85;
}

.ui-page-center-invoicing-profiles .profiles-list-search-input::-webkit-search-decoration,
.ui-page-center-invoicing-profiles .profiles-list-search-input::-webkit-search-cancel-button,
.ui-page-center-invoicing-profiles .profiles-list-search-input::-webkit-search-results-button,
.ui-page-center-invoicing-profiles .profiles-list-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.ui-page-center-invoicing-profiles .profiles-list-search-clear {
    background: transparent;
    border: 0;
    padding: 0 0 0 0.5rem;
    color: var(--ui-muted);
    cursor: pointer;
    line-height: 1;
    font-size: var(--ui-fs-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
    border-radius: 50%;
}

.ui-page-center-invoicing-profiles .profiles-list-search-clear:hover {
    color: var(--ui-text);
    transform: scale(1.08);
}

.ui-page-center-invoicing-profiles .profiles-list-search-clear:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 1px;
}

.ui-page-center-invoicing-profiles .profiles-list-empty {
    padding: 2.5rem 1rem;
}

.ui-page-center-invoicing-profiles .profiles-list-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

#profilesList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    transition: background 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease, transform 0.13s ease;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-primary-line);
    box-shadow: var(--ui-shadow);
}

.ui-page-center-invoicing-profiles .invoicing-profile-row.profile-selected {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
    transition: background 0.15s ease;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row:hover .profile-icon,
.ui-page-center-invoicing-profiles .invoicing-profile-row.profile-selected .profile-icon {
    background: var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-name {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.13s;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row:hover .profile-name,
.ui-page-center-invoicing-profiles .invoicing-profile-row.profile-selected .profile-name {
    color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-desc {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-default-pill {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    text-transform: uppercase;
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-meta-item i {
    color: var(--ui-muted);
    opacity: 0.7;
    font-size: var(--ui-fs-xs);
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-action-toggle {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-xs);
    border: 1px solid transparent;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
    color: var(--ui-muted);
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
}

.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-action-toggle:hover,
.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-action-toggle:focus,
.ui-page-center-invoicing-profiles .invoicing-profile-row .profile-action-toggle[aria-expanded="true"] {
    background: var(--ui-subtle);
    color: var(--ui-text);
    border-color: var(--ui-border);
    outline: none;
}

#rulesListModal .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

#rulesListModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-page-center-invoicing-profiles .rules-list-modal-header {
    align-items: flex-start;
}

.ui-page-center-invoicing-profiles .rules-list-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xl);
}

.ui-page-center-invoicing-profiles .rules-list-modal-subtitle {
    line-height: 1.35;
}

.ui-page-center-invoicing-profiles .rules-list-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    text-transform: none;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .rules-list-profile-pill:empty {
    display: none;
}

#rulesListModal .modal-body {
    padding: 1.25rem 1.5rem;
    background: var(--ui-subtle);
}

#rulesListModal .rules-filter-bar {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

#rulesListModal .rules-filter-bar .form-label {
    font-weight: 500;
}

#rulesListModal .rules-filter-bar .form-control,
#rulesListModal .rules-filter-bar .form-select {
    border-color: var(--ui-border);
}

#rulesListModal .rules-filter-bar .form-control:focus,
#rulesListModal .rules-filter-bar .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
}

#rulesListModal .table-responsive {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    overflow: hidden;
}

#rulesListModal .table {
    margin-bottom: 0;
}

#rulesListModal .table thead th {
    background: var(--ui-subtle);
    border-bottom: 1px solid var(--ui-border);
    padding: 0.75rem 0.875rem;
}

#rulesListModal .table tbody td {
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
    border-color: var(--ui-border);
}

#rulesListModal .table tbody tr:last-child td {
    border-bottom: 0;
}

#rulesListModal .table tbody tr:hover > td {
    background: var(--ui-subtle);
}

.ui-page-center-invoicing-profiles .rules-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}

.ui-page-center-invoicing-profiles .rules-empty-state--compact {
    padding: 1.5rem 1rem;
}

.ui-page-center-invoicing-profiles .rules-empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.875rem;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-kpi);
}

.ui-page-center-invoicing-profiles .rules-empty-state-icon--sm {
    width: 48px;
    height: 48px;
    font-size: var(--ui-fs-xl);
    margin-bottom: 0.5rem;
}

#rulesTableBody tr td {
    vertical-align: middle;
}

#rulesTableBody tr.rule-row-last-opened {
    background: var(--ui-primary-soft) !important;
    border-left: 3px solid var(--ui-primary);
}

#rulesTableBody tr.rule-row-last-opened td {
    border-left: none;
}

body[data-theme=dark] #rulesTableBody tr.rule-row-last-opened {
    background: var(--ui-primary-line) !important;
}

.ui-page-center-invoicing-profiles .rule-name-cell {
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .fee-amount-text {
    font-family: monospace;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .fee-charge-type-badge {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.2em 0.5em;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .cost-category-badge {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.2em 0.55em;
    border-radius: var(--ui-radius);
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-shipment {
    background: var(--ui-info-tint); color: var(--ui-info-text);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-pick {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-storage {
    background: var(--ui-warning-tint); color: var(--ui-warning-text);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-inbound {
    background: var(--ui-purple-tint); color: var(--ui-purple);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-return {
    background: var(--ui-danger-tint); color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-surcharge {
    background: var(--ui-warning-tint); color: var(--ui-warning-text);
}

.ui-page-center-invoicing-profiles .invoicing-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    z-index: 5;
    border-radius: var(--ui-radius-xs);
    min-height: 120px;
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-loading-overlay {
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
}

.ui-page-center-invoicing-profiles .cost-category-badge.cat-other {
    background: var(--ui-subtle); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .invoicing-conditions-card .card-header {
    background: var(--ui-subtle);
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-center-invoicing-profiles .condition-group {
    transition: background 0.2s ease;
}

.ui-page-center-invoicing-profiles .condition-group-nested {
    border-left: 3px solid var(--ui-primary);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    margin-left: 0.75rem;
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .condition-group-nested {
    background: rgba(var(--ui-primary-rgb), 0.06);
    border-color: var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .condition-group .logical-operator-row {
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--ui-border);
}

.ui-page-center-invoicing-profiles .condition-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.375rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-center-invoicing-profiles .condition-row:hover {
    border-color: var(--ui-border);
}

.ui-page-center-invoicing-profiles .condition-row-incompatible {
    border-color: var(--ui-warning-tint);
    background: var(--ui-warning-tint);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .condition-row-incompatible {
    background: var(--ui-warning-tint);
}

.ui-page-center-invoicing-profiles .condition-row .form-select,
.ui-page-center-invoicing-profiles .condition-row .form-control {
    min-width: 0;
}

.ui-page-center-invoicing-profiles .condition-row .btn-remove-condition {
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.ui-page-center-invoicing-profiles .condition-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--ui-muted);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

.ui-page-center-invoicing-profiles .condition-remove-btn:hover {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    opacity: 1;
}

.ui-page-center-invoicing-profiles .condition-row .btn-remove-condition:hover {
    opacity: 1;
}

.ui-page-center-invoicing-profiles .group-actions .btn {
    transition: all 0.2s ease;
}

.ui-page-center-invoicing-profiles .group-actions .btn:hover {
    transform: translateY(-1px);
}

.ui-page-center-invoicing-profiles .export-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    padding: 0.25em 0.65em;
    border-radius: var(--ui-radius);
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .export-status-badge.status-pending {
    background: var(--ui-warning-tint); color: var(--ui-warning-text);
}

.ui-page-center-invoicing-profiles .export-status-badge.status-processing {
    background: var(--ui-info-tint); color: var(--ui-info-text);
}

.ui-page-center-invoicing-profiles .export-status-badge.status-done {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-center-invoicing-profiles .export-status-badge.status-failed {
    background: var(--ui-danger-tint); color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .invoice-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    border-radius: var(--ui-radius-pill);
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-draft {
    background: var(--ui-subtle); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.12); color: var(--ui-info-text);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.15); color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-paid {
    background: rgba(var(--ui-success-rgb), 0.15); color: var(--ui-success-text);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.15); color: var(--ui-series-2);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-overdue {
    background: var(--ui-danger-tint); color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.2); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .invoice-status-badge.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.2); color: var(--ui-series-2);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.25); color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.25); color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-paid {
    background: rgba(var(--ui-success-rgb), 0.25); color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.25); color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-overdue {
    background: rgba(var(--ui-danger-rgb), 0.25); color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.3); color: var(--ui-body);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoice-status-badge.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.25); color: var(--ui-warning-text);
}

.ui-page-center-invoicing-profiles button.invoice-status-picker {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    gap: 0.28rem;
    text-align: left;
}

.ui-page-center-invoicing-profiles button.invoice-status-picker .invoice-status-picker-caret {
    font-size: var(--ui-fs-2xs);
    opacity: 0.7;
}

.ui-page-center-invoicing-profiles button.invoice-status-picker:hover .invoice-status-picker-caret,
.ui-page-center-invoicing-profiles button.invoice-status-picker[aria-expanded="true"] .invoice-status-picker-caret {
    opacity: 1;
}

.ui-page-center-invoicing-profiles button.invoice-status-picker:focus {
    box-shadow: none;
}

.ui-page-center-invoicing-profiles button.invoice-status-picker:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

.ui-page-center-invoicing-profiles .invoice-status-menu {
    position: fixed;
    z-index: 1080;
    min-width: 11.5rem;
    padding: 0.3rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 8px 24px rgba(var(--ui-ink-rgb), 0.12);
}

.ui-page-center-invoicing-profiles .invoice-status-menu[hidden] {
    display: none !important;
}

.ui-page-center-invoicing-profiles .invoice-status-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: var(--ui-radius-xs);
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .invoice-status-menu-item:hover,
.ui-page-center-invoicing-profiles .invoice-status-menu-item.is-active {
    background: rgba(var(--ui-muted-rgb), 0.12);
}

.ui-page-center-invoicing-profiles .invoice-status-menu-item .fa-check {
    font-size: var(--ui-fs-xs);
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.06);
    border: 1px solid var(--ui-border-strong);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), inset 0 1px 0 color-mix(in srgb, var(--ui-surface) 65%, transparent);
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .main-buttons .invoicing-export-view-toggle {
    align-self: stretch;
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-export-view-toggle {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.2), inset 0 1px 0 rgba(var(--ui-white-rgb), 0.04);
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    height: 100%;
    padding: 0 0.9rem;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-center-invoicing-profiles .main-buttons .invoicing-export-view-toggle .invoicing-export-view-option {
    min-height: 0;
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option:hover {
    color: var(--ui-text);
    background: rgba(var(--ui-muted-rgb), 0.08);
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option:focus,
.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 1px 3px rgba(var(--ui-ink-rgb), 0.1);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option.active {
    background: var(--ui-track);
    box-shadow: var(--ui-shadow-pop);
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option i {
    font-size: var(--ui-fs-sm);
    opacity: 0.85;
}

.ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option.active i {
    color: var(--ui-primary);
    opacity: 1;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid-wrap {
    overflow: auto;
    max-height: min(75vh, calc(100vh - 260px));
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid {
    display: grid;
    min-width: 1200px;
    --coverage-month-count: 12;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid-header {
    display: contents;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-seller-track {
    grid-column: 2 / -1;
    position: relative;
    min-height: 2.75rem;
    border-bottom: 1px solid var(--ui-border-strong);
    border-right: 1px solid var(--ui-border-strong);
    box-sizing: border-box;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-track-months {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--coverage-month-count), minmax(0, 1fr));
    pointer-events: none;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-track-month {
    min-height: 100%;
    border-right: 1px solid var(--ui-border-strong);
    box-sizing: border-box;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-track-month:last-child {
    border-right: 0;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-track-month.is-gap {
    background: repeating-linear-gradient(
    -45deg,
    var(--ui-neutral-tint),
    var(--ui-neutral-tint) 5px,
    transparent 5px,
    transparent 10px
    );
    border-top: 1px dashed rgba(var(--ui-muted-rgb), 0.22);
    border-bottom: 1px dashed rgba(var(--ui-muted-rgb), 0.22);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-track-bars {
    position: absolute;
    inset: 0.45rem 0;
    pointer-events: none;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-export-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 0;
    pointer-events: auto;
    box-sizing: border-box;
    padding: 0 0.2rem;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-export-bar .coverage-cell-card {
    height: 100%;
    width: 100%;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-corner,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-month-header,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-seller-label,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell {
    border-bottom: 1px solid var(--ui-border-strong);
    border-right: 1px solid var(--ui-border-strong);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 5;
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 0 var(--ui-border-strong);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-month-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-align: center;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 var(--ui-border-strong);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-seller-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ui-surface);
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    padding: 0.45rem 0.5rem;
    border-left-width: 4px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-draft {
    background: var(--ui-neutral-tint);
    border-left-color: var(--ui-muted);
    border-color: rgba(var(--ui-muted-rgb), 0.28);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.16);
    border-left-color: var(--ui-series-1);
    border-color: rgba(var(--ui-primary-rgb), 0.28);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.16);
    border-left-color: var(--ui-series-1);
    border-color: rgba(var(--ui-info-rgb), 0.28);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-paid {
    background: rgba(var(--ui-success-rgb), 0.18);
    border-left-color: var(--ui-series-3);
    border-color: rgba(var(--ui-success-rgb), 0.3);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.16);
    border-left-color: var(--ui-series-2);
    border-color: rgba(var(--ui-warning-rgb), 0.3);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-overdue {
    background: rgba(var(--ui-danger-rgb), 0.16);
    border-left-color: var(--ui-danger);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.2);
    border-left-color: var(--ui-silver);
    border-color: rgba(var(--ui-muted-rgb), 0.32);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.18);
    border-left-color: var(--ui-series-2);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.gen-active {
    box-shadow: inset 0 0 0 1px rgba(var(--ui-primary-rgb), 0.2);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.gen-failed {
    background: rgba(var(--ui-danger-rgb), 0.14);
    border-color: rgba(var(--ui-danger-rgb), 0.35);
    border-left-color: var(--ui-danger);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-draft {
    background: rgba(var(--ui-muted-rgb), 0.22);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-paid {
    background: rgba(var(--ui-success-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-overdue {
    background: rgba(var(--ui-danger-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.32);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.28);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-card.gen-failed {
    background: rgba(var(--ui-danger-rgb), 0.26);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-body {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    line-height: 1.1;
    padding: 0.12rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-draft {
    background: rgba(var(--ui-muted-rgb), 0.25); color: var(--ui-body);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.22); color: var(--ui-info-text);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.22); color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-paid {
    background: rgba(var(--ui-success-rgb), 0.25); color: var(--ui-success-text);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.22); color: var(--ui-series-2);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-overdue {
    background: var(--ui-danger-tint); color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.3); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.28); color: var(--ui-series-2);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-draft {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-sent {
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-viewed {
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-paid {
    color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-partially_paid {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-overdue {
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-cancelled {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-status-pill.status-refunded {
    color: var(--ui-warning-text);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    cursor: default;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-gen-spinner {
    width: 0.65rem;
    height: 0.65rem;
    flex-shrink: 0;
    border-width: 0.12em;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-gen-failed-icon {
    font-size: var(--ui-fs-2xs);
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.05rem;
    flex: 0 0 auto;
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-download-btn,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-open-btn,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--ui-radius-xs);
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-download-btn:hover,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-open-btn:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-delete-btn:hover {
    background: rgba(var(--ui-danger-rgb), 0.1);
    color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-download-btn i,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-open-btn i,
.ui-page-center-invoicing-profiles .invoicing-coverage-grid .coverage-cell-delete-btn i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .invoicing-coverage-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ui-page-center-invoicing-profiles .invoicing-coverage-legend-title {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-right: 0.15rem;
}

.ui-page-center-invoicing-profiles .coverage-legend-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.is-gap {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-draft {
    background: var(--ui-neutral-tint); border-color: rgba(var(--ui-muted-rgb), 0.35); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-sent {
    background: rgba(var(--ui-primary-rgb), 0.16); border-color: rgba(var(--ui-primary-rgb), 0.35); color: var(--ui-info-text);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-viewed {
    background: rgba(var(--ui-info-rgb), 0.16); border-color: rgba(var(--ui-info-rgb), 0.35); color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-paid {
    background: rgba(var(--ui-success-rgb), 0.18); border-color: rgba(var(--ui-success-rgb), 0.38); color: var(--ui-success-text);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-partially_paid {
    background: rgba(var(--ui-warning-rgb), 0.16); border-color: rgba(var(--ui-warning-rgb), 0.35); color: var(--ui-series-2);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-overdue {
    background: var(--ui-danger-tint); border-color: var(--ui-danger); color: var(--ui-danger-text);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.2); border-color: rgba(var(--ui-muted-rgb), 0.38); color: var(--ui-muted);
}

.ui-page-center-invoicing-profiles .coverage-legend-chip.status-refunded {
    background: rgba(var(--ui-warning-rgb), 0.18); border-color: rgba(var(--ui-danger-rgb), 0.35); color: var(--ui-series-2);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-draft {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-sent {
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-viewed {
    color: var(--ui-info-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-paid {
    color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-partially_paid {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-overdue {
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-cancelled {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .coverage-legend-chip.status-refunded {
    color: var(--ui-warning-text);
}

#datatable-invoicing-exports tbody tr.export-row-highlight td {
    background: var(--ui-primary-soft) !important;
}

body[data-theme=dark] #datatable-invoicing-exports tbody tr.export-row-highlight td {
    background: var(--ui-primary-line) !important;
}

.ui-page-center-invoicing-profiles .export-format-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.ui-page-center-invoicing-profiles .export-format-action:hover {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ui-page-center-invoicing-profiles button.export-format-action {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.ui-page-center-invoicing-profiles .export-progress {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 6px;
    margin-top: 0.4rem;
    background: var(--ui-track);
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
}

.ui-page-center-invoicing-profiles .export-progress-bar {
    height: 100%;
    background: var(--ui-primary);
    border-radius: var(--ui-radius-pill);
    transition: width 0.4s ease;
}

.ui-page-center-invoicing-profiles .export-progress.is-indeterminate .export-progress-bar {
    width: 40% !important;
    animation: exportProgressIndeterminate 1.2s ease-in-out infinite;
}

.ui-page-center-invoicing-profiles .export-progress-label {
    font-size: var(--ui-fs-xs);
    margin-top: 0.15rem;
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .export-progress {
    background: var(--ui-track);
}

.ui-page-center-invoicing-profiles .export-bulk-toolbar,
.ui-page-center-invoicing-profiles .rules-bulk-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

#rulesTableBody tr.rule-row-selected td {
    background: rgba(var(--ui-primary-rgb), 0.06);
}

.ui-page-center-invoicing-profiles .bulk-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    border-radius: var(--ui-radius-pill);
    padding: 0 0.3em;
    line-height: 1;
}

.ui-page-center-invoicing-profiles .bulk-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--ui-border);
    flex-shrink: 0;
    margin: 0 0.2rem;
}

.ui-page-center-invoicing-profiles .bulk-group {
    flex-wrap: wrap;
}

.ui-page-center-invoicing-profiles .bulk-status-select {
    max-width: 180px;
    min-width: 120px;
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: var(--ui-on-primary);
    font-weight: 500;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-primary:hover {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-light {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
    font-weight: 500;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-light:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-danger {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-danger);
    font-weight: 500;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .btn.bulk-btn-danger:hover {
    background: var(--ui-danger-tint);
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}

body[data-theme=dark] .ui-page-center-invoicing-profiles .export-bulk-toolbar,
body[data-theme=dark] .ui-page-center-invoicing-profiles .rules-bulk-toolbar {
    box-shadow: var(--ui-shadow-pop);
}

body[data-theme=dark] #rulesTableBody tr.rule-row-selected td {
    background: var(--ui-primary-line);
}

.ui-page-center-invoicing-profiles .copy-rules-profile-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    margin: 0;
}

.ui-page-center-invoicing-profiles .copy-rules-profile-check .form-check-input {
    margin-top: 0;
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .copy-rules-profile-check .form-check-label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.ui-page-center-invoicing-profiles .rule-drag-handle {
    min-width: 32px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    cursor: grab;
    touch-action: none;
}

.ui-page-center-invoicing-profiles .rule-drag-handle:active {
    cursor: grabbing;
}

#rulesTableBody tr.ui-sortable-helper td {
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-hover);
}

#rulesTableBody tr.ui-sortable-placeholder td {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border: 1px dashed var(--ui-primary);
    height: 44px;
}

.ui-page-center-invoicing-profiles .rules-filter-bar .form-control,
.ui-page-center-invoicing-profiles .rules-filter-bar .form-select {
    min-height: 36px;
}

.ui-page-center-invoicing-profiles .simulate-rules-nested {
    padding-left: 1.25rem;
}

.ui-page-center-invoicing-profiles .simulate-unmatched td {
    opacity: 0.75;
}

#simulateProfileModal #simulateLookupRow .form-control,
#simulateProfileModal #simulateLookupRow .select2-container,
#simulateProfileModal #simulateLookupRow .select2-container--default .select2-selection--single,
#simulateProfileModal #btnRunSimulation {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

#simulateProfileModal #simulate_lookup {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 42px;
}

#simulateProfileModal #simulateLookupRow .select2-container {
    display: block;
}

#simulateProfileModal #simulateLookupRow .select2-container--default .select2-selection--single {
    height: 44px !important;
}

#simulateProfileModal #simulateLookupRow .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

#simulateProfileModal #simulateLookupRow .select2-container--default .select2-selection--single .select2-selection__arrow,
#simulateProfileModal #simulateLookupRow .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 42px;
    line-height: 42px;
}

#simulateProfileModal .simulate-mode-choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

#simulateProfileModal .simulate-mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
    margin: 0;
    padding: 1.5rem 1.25rem;
    min-height: 44px;
    border: 2px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#simulateProfileModal .simulate-mode-card:hover {
    border-color: var(--ui-primary-line);
}

#simulateProfileModal .simulate-mode-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#simulateProfileModal .simulate-mode-card:focus-within {
    outline: 2px solid var(--ui-primary-line);
    outline-offset: 2px;
}

#simulateProfileModal .simulate-mode-icon {
    display: block;
    margin-bottom: 0.75rem;
    line-height: 1;
}

#simulateProfileModal .simulate-mode-card.is-selected {
    border-color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

#simulateProfileModal #simulateModeOneCard.is-selected {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#simulateProfileModal .simulate-mode-title {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

#simulateProfileModal .simulate-mode-desc {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#simulateProfileModal .simulate-diagnosis {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    overflow: hidden;
}

#simulateProfileModal .simulate-diagnosis + .simulate-diagnosis {
    margin-top: 0.75rem;
}

#simulateProfileModal .simulate-diagnosis-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--ui-border-strong);
}

#simulateProfileModal .simulate-diagnosis-status {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-lg);
}

#simulateProfileModal .simulate-diagnosis-head.is-miss .simulate-diagnosis-status {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#simulateProfileModal .simulate-diagnosis-head.is-match .simulate-diagnosis-status {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

#simulateProfileModal .simulate-diagnosis-copy {
    min-width: 0;
    flex: 1;
}

#simulateProfileModal .simulate-diagnosis-headline {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

#simulateProfileModal .simulate-diagnosis-rule {
    margin-top: 0.15rem;
    color: var(--ui-text);
    font-weight: 500;
}

#simulateProfileModal .simulate-diagnosis-meta,
#simulateProfileModal .simulate-diagnosis-detail {
    margin-top: 0.2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#simulateProfileModal .simulate-diagnosis-body {
    padding: 0.35rem 0.4rem 0.5rem;
}

#simulateProfileModal .simulate-check {
    padding: 0.85rem 0.75rem;
}

#simulateProfileModal .simulate-check + .simulate-check {
    border-top: 1px solid var(--ui-border-strong);
}

#simulateProfileModal .simulate-check-field {
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.55rem;
}

#simulateProfileModal .simulate-check-op {
    font-weight: 400;
    color: var(--ui-muted);
}

#simulateProfileModal .simulate-check-compare {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
}

#simulateProfileModal .simulate-check-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#simulateProfileModal .simulate-check-kicker {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

#simulateProfileModal .simulate-check-value {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

#simulateProfileModal .simulate-check-value.is-expected {
    background: var(--ui-primary-line);
    color: var(--ui-text);
}

#simulateProfileModal .simulate-check-value.is-actual {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#simulateProfileModal .simulate-check-arrow {
    align-self: flex-end;
    margin-bottom: 0.55rem;
    color: var(--ui-muted);
    flex-shrink: 0;
}

#simulateProfileModal .simulate-check-note,
#simulateProfileModal .simulate-check.is-note {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#simulateProfileModal .simulate-fee {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.75rem;
    color: var(--ui-text);
}

#simulateProfileModal .simulate-fee + .simulate-fee,
#simulateProfileModal .simulate-check + .simulate-fee {
    border-top: 1px solid var(--ui-border-strong);
}

#simulateProfileModal .simulate-line {
    margin: 0.35rem 0.35rem 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}

.ui-page-center-invoicing-profiles .export-preset-row {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.65rem 0.75rem;
    background: var(--ui-surface);
    transition: border-color 0.12s ease;
}

.ui-page-center-invoicing-profiles .export-preset-row + .export-preset-row {
    margin-top: 0.5rem;
}

.ui-page-center-invoicing-profiles .preset-collapsed .preset-apply-area {
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.ui-page-center-invoicing-profiles .preset-collapsed .preset-apply-area:hover .preset-name {
    color: var(--ui-primary);
}

.ui-page-center-invoicing-profiles .preset-collapsed .preset-name {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    transition: color 0.13s;
}

.ui-page-center-invoicing-profiles .preset-collapsed .preset-meta {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-center-invoicing-profiles .preset-collapsed .preset-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}

.ui-page-center-invoicing-profiles .preset-expanded {
    border-top: 1px solid var(--ui-border);
    margin-top: 0.65rem;
    padding-top: 0.75rem;
}

.ui-page-center-invoicing-profiles .export-preset-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: var(--ui-fs-sm);
    text-decoration: none;
}

.ui-page-center-invoicing-profiles .export-preset-icon-btn:hover {
    background: var(--ui-subtle);
    color: var(--ui-text);
}

.ui-page-center-invoicing-profiles .export-preset-icon-btn.btn-delete:hover {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

.ui-page-center-invoicing-profiles .rule-action-delete:hover {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-tint) !important;
}

#invoicingExportForm .btn-primary {
    white-space: nowrap;
}

#invoicingExportModal .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

#invoicingExportModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-page-center-invoicing-profiles .invoicing-export-modal-header {
    align-items: flex-start;
}

.ui-page-center-invoicing-profiles .invoicing-export-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xl);
}

.ui-page-center-invoicing-profiles .invoicing-export-modal-subtitle {
    line-height: 1.4;
}

#invoicingExportModal .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--ui-subtle);
}

#invoicingExportModal .modal-footer {
    padding: 0.9rem 1.5rem;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    gap: 0.5rem;
}

.ui-page-center-invoicing-profiles .invoicing-export-modal-footer .btn {
    min-width: 110px;
}

#invoicingExportModal .invoicing-export-preset-bar {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#invoicingExportModal .invoicing-export-preset-bar:focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
}

#invoicingExportModal .invoicing-export-preset-bar .form-select {
    border: 0;
    padding: 0.15rem 2rem 0.15rem 0.25rem;
    background-color: transparent;
    box-shadow: none;
    font-weight: 500;
}

#invoicingExportModal .invoicing-export-preset-bar .form-select:focus {
    box-shadow: none;
    border-color: transparent;
}

#invoicingExportModal .invoicing-export-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
}

#invoicingExportModal .invoicing-export-section:last-of-type {
    margin-bottom: 1rem;
}

#invoicingExportModal .invoicing-export-section .form-label {
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.4rem;
}

#invoicingExportModal .select2-container {
    width: 100% !important;
}

#invoicingExportModal .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    padding: 0.15rem 0.4rem;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background-color: var(--ui-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#invoicingExportModal .select2-container--default.select2-container--focus .select2-selection--multiple,
#invoicingExportModal .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-tint);
}

#invoicingExportModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-xs);
    padding: 0.15rem 0.5rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

#invoicingExportModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--ui-muted);
    margin-right: 0.35rem;
}

#invoicingExportModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--ui-danger);
}

#invoicingExportModal .select2-container--default .select2-selection--multiple .select2-search__field {
    margin-top: 0.25rem;
}

#invoicingExportModal #export_date_range {
    background-color: var(--ui-surface);
}

#invoiceHtmlEditorStatus {
    font-size: var(--ui-fs-sm);
}

@media (max-width: 767.98px) {
    .ui-page-center-invoicing-profiles .invoicing-profile-row {
    flex-wrap: wrap;
        gap: 0.75rem;
    }

    .ui-page-center-invoicing-profiles .invoicing-profile-row .profile-body {
    flex: 1 1 100%;
        order: 2;
    }

    .ui-page-center-invoicing-profiles .invoicing-profile-row .profile-icon {
    order: 1;
    }

    .ui-page-center-invoicing-profiles .invoicing-profile-row .profile-meta {
    order: 3;
        align-items: flex-start;
        flex-direction: row;
    }

    .ui-page-center-invoicing-profiles .invoicing-profile-row .profile-actions {
    order: 4;
        margin-left: auto;
    }

    .ui-page-center-invoicing-profiles .invoicing-export-view-toggle {
    width: 100%;
    }

    .ui-page-center-invoicing-profiles .invoicing-export-view-toggle .invoicing-export-view-option {
    flex: 1 1 50%;
    }

    #simulateProfileModal .simulate-check-compare {
    flex-direction: column;
        align-items: flex-start;
    }

    #simulateProfileModal .simulate-check-arrow {
    transform: rotate(90deg);
        align-self: flex-start;
        margin: 0 0 0 0.35rem;
    }
}

@media (max-width: 575px) {
    .ui-page-center-invoicing-profiles .invoicing-profile-row {
    padding: 0.75rem 0.875rem;
    }

    .ui-page-center-invoicing-profiles .invoicing-profile-row .profile-name {
    max-width: 100%;
    }
}

@media (min-width: 768px) {
    #simulateProfileModal .simulate-mode-choice {
    grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .ui-page-center-invoicing-profiles .export-bulk-toolbar {
    position: sticky;
        bottom: 0;
        top: auto;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    }

    .ui-page-center-invoicing-profiles .bulk-toolbar-divider {
    display: none;
    }

    .ui-page-center-invoicing-profiles .bulk-status-select {
    max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    #invoicingExportModal .modal-header,
    #invoicingExportModal .modal-body,
    #invoicingExportModal .modal-footer {
    padding-left: 1rem;
        padding-right: 1rem;
    }

    .ui-page-center-invoicing-profiles .invoicing-export-modal-footer .btn {
    min-width: 0;
    }
}

@keyframes exportProgressIndeterminate {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ---------- Page: ai/chat.php (root .ui-page-ai-chat) ---------- */
#ai-chat-page .ai-chat-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--ui-page);
}

#ai-chat-page .ai-chat-aurora {
    position: absolute;
    inset: -12%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
    radial-gradient(ellipse 42% 36% at 22% 18%, rgba(var(--ui-primary-rgb), 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 38% 32% at 82% 28%, rgba(var(--ui-purple-rgb), 0.12) 0%, transparent 72%),
    radial-gradient(ellipse 46% 34% at 48% 92%, rgba(var(--ui-success-rgb), 0.1) 0%, transparent 70%);
    background-repeat: no-repeat;
    animation: ai-chat-aurora-shift 14s ease-in-out infinite;
}

#ai-chat-page .ai-chat-aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform, opacity;
}

#ai-chat-page .ai-chat-aurora-orb--a {
    width: min(48vw, 30rem);
    height: min(48vw, 30rem);
    top: -8%;
    left: -6%;
    background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.28) 0%, transparent 70%);
    animation: ai-chat-aurora-drift-a 12s ease-in-out infinite;
}

#ai-chat-page .ai-chat-aurora-orb--b {
    width: min(40vw, 26rem);
    height: min(40vw, 26rem);
    top: 18%;
    right: -8%;
    background: radial-gradient(circle, rgba(var(--ui-purple-rgb), 0.18) 0%, transparent 70%);
    animation: ai-chat-aurora-drift-b 16s ease-in-out infinite;
}

#ai-chat-page .ai-chat-aurora-orb--c {
    width: min(44vw, 28rem);
    height: min(44vw, 28rem);
    bottom: -14%;
    left: 28%;
    background: radial-gradient(circle, rgba(var(--ui-success-rgb), 0.14) 0%, transparent 70%);
    animation: ai-chat-aurora-drift-c 15s ease-in-out infinite;
}

body[data-theme=dark] #ai-chat-page .ai-chat-aurora {
    background: radial-gradient(ellipse 42% 36% at 22% 18%, rgba(var(--ui-primary-rgb), 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 38% 32% at 82% 28%, rgba(var(--ui-info-rgb), 0.16) 0%, transparent 72%),
    radial-gradient(ellipse 46% 34% at 48% 92%, rgba(var(--ui-success-rgb), 0.14) 0%, transparent 70%);
}

body[data-theme=dark] #ai-chat-page .ai-chat-aurora-orb--a {
    background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.34) 0%, transparent 70%);
}

body[data-theme=dark] #ai-chat-page .ai-chat-aurora-orb--b {
    background: radial-gradient(circle, rgba(var(--ui-info-rgb), 0.22) 0%, transparent 70%);
}

body[data-theme=dark] #ai-chat-page .ai-chat-aurora-orb--c {
    background: radial-gradient(circle, rgba(var(--ui-success-rgb), 0.18) 0%, transparent 70%);
}

#ai-chat-page.is-landing .ai-chat-topbar {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 2;
    min-height: auto;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    justify-content: flex-end;
}

#ai-chat-page.is-landing .ai-chat-topbar-actions {
    display: none;
}

#ai-chat-page.is-landing .ai-chat-usage {
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[data-theme=dark] #ai-chat-page.is-landing .ai-chat-usage {
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
}

#ai-chat-page.is-landing .ai-chat-panel {
    justify-content: flex-start;
    align-items: center;
    padding: 7.5rem 1.25rem 12.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#ai-chat-page.is-landing .ai-chat-panel > :first-child {
    margin-top: auto;
}

#ai-chat-page.is-landing .ai-chat-panel > :last-child {
    margin-bottom: auto;
}

#ai-chat-page.is-landing .chat-messages-wrap,
#ai-chat-page.is-landing .ai-chat-context-banner {
    display: none !important;
}

#ai-chat-page.is-thread .ai-chat-landing-hero,
#ai-chat-page.is-thread .ai-chat-hero-chips,
#ai-chat-page.is-thread .ai-chat-home-tasks {
    display: none !important;
}

#ai-chat-page.is-thread .ai-chat-panel {
    background: transparent;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#ai-chat-page .ai-chat-landing-hero {
    text-align: center;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 1.75rem;
}

#ai-chat-page .ai-chat-landing-hero h2 {
    font-size: clamp(1.5rem, 3.2vw, 1.875rem);
    font-weight: 500;
    color: var(--ui-text);
    margin: 0 0 0.625rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

#ai-chat-page .ai-chat-landing-hero p {
    font-size: var(--ui-fs-md);
    color: var(--ui-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

#ai-chat-page .ai-chat-landing-hero--assistant {
    position: relative;
    margin-bottom: 1.35rem;
    overflow: visible;
}

#ai-chat-page .ai-chat-landing-hero--assistant::before {
    content: '';
    position: absolute;
    top: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(30rem, 100vw);
    height: 14rem;
    background: radial-gradient(
    ellipse closest-side at 50% 45%,
    rgba(var(--ui-primary-rgb), 0.1) 0%,
    rgba(var(--ui-primary-rgb), 0.035) 45%,
    transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

#ai-chat-page .ai-chat-landing-hero--assistant > * {
    position: relative;
    z-index: 1;
}

#ai-chat-page .ai-chat-landing-hero--assistant .cd-ai-hero-logo--assistant {
    margin-bottom: 0.35rem;
}

#ai-chat-page .ai-chat-landing-hero--assistant h2 {
    margin-top: 0;
}

body[data-theme=dark] #ai-chat-page .ai-chat-landing-hero--assistant::before {
    background: radial-gradient(
    ellipse closest-side at 50% 45%,
    rgba(var(--ui-primary-rgb), 0.18) 0%,
    rgba(var(--ui-primary-rgb), 0.06) 45%,
    transparent 100%
    );
}

#ai-chat-page .ai-chat-composer {
    flex-shrink: 0;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 0;
}

#ai-chat-page.is-thread .ai-chat-composer {
    flex-shrink: 0;
    z-index: 5;
    background: linear-gradient(to top, color-mix(in srgb, var(--ui-page) 72%, transparent) 70%, transparent);
}

#ai-chat-page.is-landing .ai-chat-composer {
    max-width: 42rem;
    padding: 0;
}

#ai-chat-page .ai-chat-composer-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ui-radius-pill);
    padding: 0.45rem 0.5rem 0.45rem 0.45rem;
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 12px 36px rgba(var(--ui-ink-rgb), 0.08);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid color-mix(in srgb, var(--ui-surface) 55%, transparent);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#ai-chat-page.is-landing .ai-chat-composer-card:focus-within {
    border-color: rgba(var(--ui-primary-rgb), 0.28);
    box-shadow:
    0 1px 2px rgba(var(--ui-ink-rgb), 0.04),
    0 8px 28px rgba(var(--ui-ink-rgb), 0.08),
    0 0 0 3px rgba(var(--ui-primary-rgb), 0.1);
}

body[data-theme=dark] #ai-chat-page .ai-chat-composer-card {
    background: color-mix(in srgb, var(--ui-surface) 62%, transparent);
    border-color: var(--ui-border);
    0 14px 40px rgba(var(--ui-black-rgb), 0.38);
}

body[data-theme=dark] #ai-chat-page.is-landing .ai-chat-composer-card:focus-within {
    border-color: rgba(var(--ui-primary-rgb), 0.4);
    box-shadow: 0 10px 32px rgba(var(--ui-black-rgb), 0.4),
    0 0 0 3px rgba(var(--ui-primary-rgb), 0.15);
}

#ai-chat-page .ai-chat-input-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
}

#ai-chat-page .ai-chat-input-row:focus-within {
    box-shadow: none;
}

#ai-chat-page .ai-chat-icon-btn {
    color: var(--ui-muted);
    background: transparent;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

#ai-chat-page .ai-chat-icon-btn:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-text);
}

#ai-chat-page #ai-chat-input {
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-lg);
    min-height: 40px;
    max-height: 160px;
    resize: none;
    padding: 0.5rem 0.25rem;
}

#ai-chat-page #ai-chat-input:focus {
    box-shadow: none;
    outline: none;
}

body[data-theme=dark] #ai-chat-page #ai-chat-input.form-control {
    background-color: transparent !important;
    border-color: transparent !important;
}

body[data-theme=dark] #ai-chat-page #ai-chat-input.form-control:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#ai-chat-page .ai-chat-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.55rem;
    min-height: 0;
}

#ai-chat-page .ai-chat-pending:empty {
    display: none;
}

#ai-chat-page .ai-chat-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 14rem;
    padding: 0.2rem 0.35rem 0.2rem 0.2rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-pending-chip img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: cover;
    border-radius: var(--ui-radius-xs);
}

#ai-chat-page .ai-chat-pending-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-file-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

#ai-chat-page .ai-chat-file-card {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 16rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-primary-soft);
    color: inherit;
    text-decoration: none;
    font-size: var(--ui-fs-sm);
}

#ai-chat-page .ai-chat-file-card:hover {
    text-decoration: none;
    color: inherit;
    background: rgba(var(--ui-primary-rgb), 0.08);
}

#ai-chat-page .ai-chat-file-card .ai-chat-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-media-attachment {
    position: relative;
    display: inline-block;
    max-width: min(100%, 22rem);
    margin-top: 0.65rem;
}

#ai-chat-page .ai-chat-media-thumb {
    display: block;
    max-width: 100%;
    max-height: 18rem;
    border-radius: var(--ui-radius);
    cursor: zoom-in;
    background: var(--ui-primary-soft);
}

#ai-chat-page video.ai-chat-media-thumb,
#ai-chat-page audio.ai-chat-media-thumb {
    cursor: default;
    width: 100%;
}

#ai-chat-page .ai-chat-media-download {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-ink-rgb), 0.72);
    color: var(--ui-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ai-chat-page .ai-chat-composer-card.is-drop {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .ai-chat-send-btn {
    background: rgb(var(--ui-ink-rgb));
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-on-primary);
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

#ai-chat-page .ai-chat-send-btn:hover:not(:disabled) {
    background: rgb(var(--ui-black-rgb));
    color: var(--ui-on-primary);
}

body[data-theme=dark] #ai-chat-page .ai-chat-send-btn {
    background: var(--ui-text);
    color: var(--ui-surface);
}

#ai-chat-page .ai-chat-send-btn:active:not(:disabled) {
    transform: scale(0.96);
}

#ai-chat-page .ai-chat-send-btn:focus {
    box-shadow: none;
    outline: none;
}

#ai-chat-page .ai-chat-send-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-black-rgb), 0.2);
}

body[data-theme=dark] #ai-chat-page .ai-chat-send-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-white-rgb), 0.2);
}

#ai-chat-page .ai-chat-send-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#ai-chat-page .ai-chat-send-btn.is-stop {
    opacity: 1;
    cursor: pointer;
}

#ai-chat-page .ai-chat-send-btn i {
    font-size: var(--ui-fs-sm);
}

#ai-chat-page .ai-chat-send-btn.is-stop i {
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .ai-chat-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.125rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

#ai-chat-page .ai-chat-hero-chip {
    background: var(--ui-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    padding: 0.5rem 1rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.2;
    min-height: 44px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#ai-chat-page .ai-chat-hero-chip:hover,
#ai-chat-page .ai-chat-hero-chip:focus-visible {
    border-color: rgba(var(--ui-primary-rgb), 0.3);
    background: var(--ui-primary-soft);
    color: var(--ui-text);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(var(--ui-ink-rgb), 0.06);
    transform: translateY(-1px);
    outline: none;
}

#ai-chat-page .ai-chat-hero-chip i {
    font-size: var(--ui-fs-xs);
    opacity: 0.85;
}

#ai-chat-page .chat-msg.assistant {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
}

#ai-chat-page .ai-chat-reply-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    max-width: 100%;
}

#ai-chat-page .ai-chat-reply-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid rgba(var(--ui-primary-rgb), 0.2);
    border-radius: var(--ui-radius-pill);
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.25;
    min-height: 2.375rem;
    cursor: pointer;
    box-shadow:
    0 4px 14px rgba(var(--ui-ink-rgb), 0.05),
    0 0 0 1px rgba(var(--ui-white-rgb), 0.4) inset;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#ai-chat-page .ai-chat-reply-chip-label {
    min-width: 0;
}

#ai-chat-page .ai-chat-reply-chip i {
    font-size: var(--ui-fs-xs);
    width: 1em;
    text-align: center;
    color: var(--ui-primary);
    opacity: 0.88;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#ai-chat-page .ai-chat-reply-chip:hover,
#ai-chat-page .ai-chat-reply-chip:focus-visible {
    border-color: rgba(var(--ui-primary-rgb), 0.42);
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
    color: var(--ui-text);
    box-shadow:
    0 10px 24px rgba(var(--ui-primary-rgb), 0.16),
    0 0 0 1px color-mix(in srgb, var(--ui-surface) 55%, transparent) inset;
    transform: translateY(-2px);
    outline: none;
}

#ai-chat-page .ai-chat-reply-chip:hover i,
#ai-chat-page .ai-chat-reply-chip:focus-visible i {
    transform: scale(1.08);
    opacity: 1;
}

#ai-chat-page .ai-chat-reply-chip:active {
    transform: translateY(0);
}

body[data-theme=dark] #ai-chat-page .ai-chat-reply-chip {
    background: var(--ui-track);
    border-color: rgba(var(--ui-primary-rgb), 0.32);
    box-shadow: var(--ui-shadow-pop);
    color: var(--ui-text);
}

body[data-theme=dark] #ai-chat-page .ai-chat-reply-chip:hover,
body[data-theme=dark] #ai-chat-page .ai-chat-reply-chip:focus-visible {
    background: var(--ui-track);
    border-color: rgba(var(--ui-primary-rgb), 0.5);
    box-shadow: 0 10px 26px rgba(var(--ui-primary-rgb), 0.18);
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-panel {
    animation: ai-chat-intro-panel-reveal 1.4s ease-out both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-usage {
    opacity: 0;
    animation: ai-chat-intro-drop 0.85s cubic-bezier(0.16, 1.02, 0.32, 1) 0.08s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .cd-ai-hero-logo:not(.cd-ai-hero-logo--assistant) {
    opacity: 0;
    animation: ai-chat-intro-logo-stage 1.2s cubic-bezier(0.16, 1.08, 0.28, 1) 0s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .cd-ai-hero-logo--assistant {
    opacity: 0;
    animation: ai-chat-intro-assistant-hero 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero--assistant::before {
    opacity: 0;
    animation: ai-chat-intro-assistant-bloom 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero--assistant h2 {
    opacity: 0;
    animation: ai-chat-intro-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

#ai-chat-page.is-landing.ai-chat-intro-settled .cd-ai-hero-logo {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
}

#ai-chat-page.is-landing.ai-chat-intro-settled .ai-chat-landing-hero--assistant::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: none;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero:not(.ai-chat-landing-hero--assistant) h2 {
    opacity: 0;
    animation: ai-chat-intro-rise 1s cubic-bezier(0.16, 1.06, 0.32, 1) 0.72s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero p {
    opacity: 0;
    animation: ai-chat-intro-fade-up 0.9s cubic-bezier(0.16, 1, 0.32, 1) 1.05s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer {
    opacity: 0;
    animation: ai-chat-intro-rise 0.85s cubic-bezier(0.16, 1.04, 0.32, 1) 1.18s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer-card {
    opacity: 0;
    animation: ai-chat-intro-input-shell 1.05s cubic-bezier(0.16, 1.1, 0.28, 1) 1.24s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer-card .ai-chat-icon-btn {
    opacity: 0;
    animation: ai-chat-intro-slide-left 0.8s cubic-bezier(0.16, 1.05, 0.32, 1) 1.38s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play #ai-chat-input {
    opacity: 0;
    animation: ai-chat-intro-input-field 0.85s cubic-bezier(0.16, 1, 0.32, 1) 1.48s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-send-btn {
    opacity: 0;
    animation: ai-chat-intro-pop-in 0.75s cubic-bezier(0.16, 1.2, 0.32, 1) 1.58s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-input-glow {
    animation: ai-chat-glow-layer-off 4.6s ease forwards;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chips {
    opacity: 0;
    animation: ai-chat-intro-fade-up 0.7s cubic-bezier(0.16, 1, 0.32, 1) 1.62s both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip {
    opacity: 0;
    animation: ai-chat-intro-chip-pop 0.8s cubic-bezier(0.16, 1.12, 0.32, 1) both;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip:nth-child(1) {
    animation-delay: 1.72s;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip:nth-child(2) {
    animation-delay: 1.86s;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip:nth-child(3) {
    animation-delay: 2s;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip:nth-child(4) {
    animation-delay: 2.14s;
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip:nth-child(5) {
    animation-delay: 2.28s;
}

#ai-chat-page .ai-chat-home-tasks {
    width: 100%;
    max-width: 42rem;
    margin: 1.125rem auto 0;
    padding: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-ink-rgb), 0.06);
}

body[data-theme=dark] #ai-chat-page .ai-chat-home-tasks {
    box-shadow: var(--ui-shadow-hover);
}

#ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-home-tasks {
    opacity: 0;
    animation: ai-chat-intro-fade-up 0.75s cubic-bezier(0.16, 1, 0.32, 1) 2.42s both;
}

#ai-chat-page .ai-chat-home-tasks__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.125rem;
}

#ai-chat-page .ai-chat-home-tasks__title {
    margin: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    letter-spacing: -0.01em;
}

#ai-chat-page .ai-chat-home-tasks__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.375rem;
    padding: 0 0.375rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    vertical-align: middle;
}

#ai-chat-page .ai-chat-home-tasks__link {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-home-tasks__link:hover {
    color: var(--ui-primary-hover);
    text-decoration: underline;
}

#ai-chat-page .ai-chat-home-tasks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

#ai-chat-page .ai-chat-home-tasks__item {
    background: var(--ui-page);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5625rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#ai-chat-page .ai-chat-home-tasks__item:hover,
#ai-chat-page .ai-chat-home-tasks__item:focus-visible {
    background: var(--ui-primary-soft);
    border-color: rgba(var(--ui-primary-rgb), 0.22);
    outline: none;
}

#ai-chat-page .ai-chat-home-tasks__dot {
    flex: 0 0 auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
}

#ai-chat-page .ai-chat-home-tasks__dot.is-open {
    background: var(--ui-primary);
}

#ai-chat-page .ai-chat-home-tasks__dot.is-in_progress {
    background: var(--ui-series-1);
}

#ai-chat-page .ai-chat-home-tasks__dot.is-waiting {
    background: var(--ui-silver);
}

#ai-chat-page .ai-chat-home-tasks__body {
    flex: 1 1 auto;
    min-width: 0;
}

#ai-chat-page .ai-chat-home-tasks__name {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-home-tasks__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .ai-chat-home-tasks__meta.is-overdue {
    color: var(--ui-danger);
    font-weight: 600;
}

#ai-chat-page .ai-chat-home-tasks__meta-status {
    font-weight: 600;
}

#ai-chat-page .ai-chat-home-tasks__meta:not(.is-overdue) .ai-chat-home-tasks__meta-status--open {
    color: var(--ui-series-2);
}

#ai-chat-page .ai-chat-home-tasks__meta-sep {
    color: var(--ui-muted);
    opacity: 0.5;
    user-select: none;
}

#ai-chat-page .ai-chat-entity-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: min(10rem, 42vw);
    color: var(--ui-muted);
    font-weight: 500;
    line-height: inherit;
    text-decoration: none;
    vertical-align: baseline;
    transition: color 0.15s ease;
}

#ai-chat-page a.ai-chat-entity-link:hover,
#ai-chat-page a.ai-chat-entity-link:focus-visible {
    color: var(--ui-primary);
    text-decoration: underline;
    outline: none;
}

body[data-theme=dark] #ai-chat-page a.ai-chat-entity-link:hover,
body[data-theme=dark] #ai-chat-page a.ai-chat-entity-link:focus-visible {
    color: var(--ui-info);
}

#ai-chat-page .ai-chat-entity-link__icon {
    flex: 0 0 auto;
    font-size: var(--ui-fs-2xs);
    opacity: 0.7;
}

#ai-chat-page .ai-chat-entity-link__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-home-tasks__ai {
    background: rgba(var(--ui-purple-rgb), 0.1);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-purple);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#ai-chat-page .ai-chat-home-tasks__ai:hover,
#ai-chat-page .ai-chat-home-tasks__ai:focus-visible {
    background: rgba(var(--ui-purple-rgb), 0.16);
    outline: none;
}

body[data-theme=dark] #ai-chat-page .ai-chat-home-tasks__ai {
    background: rgba(var(--ui-purple-rgb), 0.2);
    color: var(--ui-series-5);
}

#ai-chat-page .ai-chat-task-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] #ai-chat-page .ai-chat-task-context {
    box-shadow: var(--ui-shadow-hover);
}

#ai-chat-page .ai-chat-task-context[hidden] {
    display: none !important;
}

#ai-chat-page .ai-chat-task-context__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

#ai-chat-page .ai-chat-task-context__dot {
    flex: 0 0 auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
}

#ai-chat-page .ai-chat-task-context__dot.is-open {
    background: var(--ui-primary);
}

#ai-chat-page .ai-chat-task-context__dot.is-in_progress {
    background: var(--ui-series-1);
}

#ai-chat-page .ai-chat-task-context__dot.is-waiting {
    background: var(--ui-silver);
}

#ai-chat-page .ai-chat-task-context__body {
    flex: 1 1 auto;
    min-width: 0;
}

#ai-chat-page .ai-chat-task-context__line {
    margin: 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-task-context__title {
    font-weight: 600;
}

#ai-chat-page .ai-chat-task-context__entity-wrap[hidden] {
    display: none;
}

#ai-chat-page .ai-chat-task-context__entity-wrap .ai-chat-entity-link {
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .ai-chat-task-context__line-sep {
    color: var(--ui-muted);
    opacity: 0.45;
    margin: 0 0.125rem;
}

#ai-chat-page .ai-chat-task-context__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}

#ai-chat-page .ai-chat-task-context__complete {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 30px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

#ai-chat-page .ai-chat-task-context__complete i {
    font-size: var(--ui-fs-2xs);
}

#ai-chat-page .ai-chat-task-context__complete:hover:not(:disabled),
#ai-chat-page .ai-chat-task-context__complete:focus-visible:not(:disabled) {
    background: var(--ui-primary-soft);
    border-color: var(--ui-success);
    color: var(--ui-success);
    outline: none;
}

#ai-chat-page .ai-chat-task-context__complete:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#ai-chat-page .ai-chat-task-context__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    min-width: 1.625rem;
    height: 1.625rem;
    min-height: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#ai-chat-page .ai-chat-task-context__dismiss:hover,
#ai-chat-page .ai-chat-task-context__dismiss:focus-visible {
    background: var(--ui-primary-soft);
    color: var(--ui-text);
    outline: none;
}

#ai-chat-page .ai-chat-action-card {
    margin-top: 0.875rem;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 1px 3px rgba(var(--ui-ink-rgb), 0.06), 0 0 0 1px rgba(var(--ui-white-rgb), 0.4) inset;
    overflow: hidden;
}

body[data-theme=dark] #ai-chat-page .ai-chat-action-card {
    background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-pop);
}

#ai-chat-page .ai-chat-action-card.is-confirmed {
    border-color: var(--ui-success);
    background: linear-gradient(180deg, var(--ui-success-tint) 0%, var(--ui-surface) 3rem);
}

body[data-theme=dark] #ai-chat-page .ai-chat-action-card.is-confirmed {
    background: linear-gradient(180deg, var(--ui-success-tint) 0%, color-mix(in srgb, var(--ui-surface) 98%, transparent) 3rem);
}

#ai-chat-page .ai-chat-action-card.is-cancelled,
#ai-chat-page .ai-chat-action-card.is-expired {
    opacity: 0.75;
}

#ai-chat-page .ai-chat-action-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: rgba(var(--ui-primary-rgb), 0.04);
}

body[data-theme=dark] #ai-chat-page .ai-chat-action-card__header {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-bottom-color: var(--ui-border);
}

#ai-chat-page .ai-chat-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
}

#ai-chat-page .ai-chat-action-card.is-confirmed .ai-chat-action-card__icon {
    background: var(--ui-success);
}

#ai-chat-page .ai-chat-action-card__heading {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
    color: var(--ui-text);
    letter-spacing: 0.01em;
}

#ai-chat-page .ai-chat-action-card__badge {
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .ai-chat-action-card__body {
    padding: 0.875rem 1rem 0;
}

#ai-chat-page .ai-chat-action-card__hero {
    margin: 0 0 0.75rem;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ui-text);
    word-break: break-word;
}

#ai-chat-page .ai-chat-action-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

#ai-chat-page .ai-chat-action-card__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-ink-rgb), 0.03);
}

body[data-theme=dark] #ai-chat-page .ai-chat-action-card__detail {
    background: var(--ui-subtle);
}

#ai-chat-page .ai-chat-action-card__detail--wide {
    grid-column: 1 / -1;
}

#ai-chat-page .ai-chat-action-card__detail-icon {
    flex-shrink: 0;
    width: 1rem;
    margin-top: 0.1rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    text-align: center;
}

#ai-chat-page .ai-chat-action-card__detail-text {
    flex: 1 1 auto;
    min-width: 0;
}

#ai-chat-page .ai-chat-action-card__detail-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ui-muted);
    margin-bottom: 0.125rem;
}

#ai-chat-page .ai-chat-action-card__detail-value {
    display: block;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-text);
    word-break: break-word;
}

#ai-chat-page .ai-chat-action-card__detail-value .ai-chat-action-card__status-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: capitalize;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

#ai-chat-page .ai-chat-action-card__detail-value .ai-chat-action-card__status-pill.is-completed {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

#ai-chat-page .ai-chat-action-card__detail-value .ai-chat-action-card__status-pill.is-waiting,
#ai-chat-page .ai-chat-action-card__detail-value .ai-chat-action-card__status-pill.is-cancelled {
    background: rgba(var(--ui-muted-rgb), 0.18);
    color: var(--ui-series-6);
}

#ai-chat-page .ai-chat-action-card__detail-value .ai-chat-action-card__status-pill.is-in_progress {
    background: rgba(var(--ui-primary-rgb), 0.15);
    color: var(--ui-info-text);
}

#ai-chat-page .ai-chat-action-card__hint {
    margin: 0 0 0.75rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
}

#ai-chat-page .ai-chat-action-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ui-border);
    background: rgba(var(--ui-ink-rgb), 0.02);
}

body[data-theme=dark] #ai-chat-page .ai-chat-action-card__footer {
    border-top-color: var(--ui-border);
    background: rgba(var(--ui-black-rgb), 0.12);
}

#ai-chat-page .ai-chat-action-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

#ai-chat-page .ai-chat-action-card__confirm,
#ai-chat-page .ai-chat-action-card__cancel {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1.125rem;
    font-weight: 500;
    border-radius: var(--ui-radius-xs);
}

#ai-chat-page .ai-chat-action-card__confirm {
    box-shadow: 0 1px 2px var(--ui-primary-line);
}

#ai-chat-page .ai-chat-action-card__status {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-text);
    margin: 0;
    padding: 0.875rem 1rem 1rem;
}

#ai-chat-page .ai-chat-action-card__status-icon {
    flex-shrink: 0;
    color: var(--ui-success);
    font-size: var(--ui-fs-lg);
    margin-top: 0.05rem;
}

#ai-chat-page .ai-chat-action-card__status a {
    color: var(--ui-primary);
    font-weight: 500;
}

#ai-chat-page .ai-chat-listing-card {
    margin-top: 0.875rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    overflow: hidden;
}

body[data-theme=dark] #ai-chat-page .ai-chat-listing-card {
    border-color: var(--ui-border);
}

#ai-chat-page .ai-chat-listing-card.is-loading .ai-chat-listing-card__inner {
    min-height: 5.5rem;
    opacity: 0.65;
}

#ai-chat-page .ai-chat-listing-card__inner {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
}

#ai-chat-page .ai-chat-listing-card__thumbs {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: rgba(var(--ui-muted-rgb), 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

#ai-chat-page .ai-chat-listing-card__thumbs.is-single {
    grid-template-columns: 1fr;
}

#ai-chat-page .ai-chat-listing-card__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#ai-chat-page .ai-chat-listing-card__thumbs.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xl);
}

#ai-chat-page .ai-chat-listing-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#ai-chat-page .ai-chat-listing-card__kicker {
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ui-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
}

#ai-chat-page .ai-chat-listing-card__status {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

#ai-chat-page .ai-chat-listing-card__title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 650;
    line-height: 1.3;
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-listing-card__excerpt,
#ai-chat-page .ai-chat-listing-card__meta {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.4;
}

#ai-chat-page .ai-chat-listing-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

#ai-chat-page .ai-chat-listing-card__chip {
    font-size: var(--ui-fs-xs);
    line-height: 1.2;
    padding: 0.15rem 0.4rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-page .ai-chat-listing-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

#ai-chat-listing-modal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 1.25rem 3rem rgba(var(--ui-ink-rgb), 0.18);
}

#ai-chat-listing-modal .modal-header {
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.65rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#ai-chat-listing-modal .ai-chat-listing-modal__heading {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
}

#ai-chat-listing-modal .modal-title {
    margin: 0;
    flex: 0 1 auto;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    white-space: nowrap;
}

#ai-chat-listing-modal .ai-chat-listing-modal__subtitle {
    display: contents;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#ai-chat-listing-modal .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
}

#ai-chat-listing-modal .ai-chat-listing-modal__market {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0.12rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    font-weight: 650;
    white-space: nowrap;
}

#ai-chat-listing-modal .ai-chat-listing-lqs {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 1 auto;
    margin-left: auto;
    max-width: 100%;
    padding: 0.28rem 0.35rem 0.28rem 0.7rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#ai-chat-listing-modal .ai-chat-listing-lqs.is-good {
    --lqs-color: var(--ui-success);
}

#ai-chat-listing-modal .ai-chat-listing-lqs.is-mid {
    --lqs-color: var(--ui-warning);
}

#ai-chat-listing-modal .ai-chat-listing-lqs.is-low {
    --lqs-color: var(--ui-danger);
}

#ai-chat-listing-modal .ai-chat-listing-lqs__copy {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 0.15rem 0.4rem;
    min-width: 0;
    line-height: 1.15;
}

#ai-chat-listing-modal .ai-chat-listing-lqs__label {
    font-size: var(--ui-fs-2xs);
    font-weight: 650;
    color: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-lqs__score {
    font-size: var(--ui-fs-base);
    font-weight: 700;
    color: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-lqs__track {
    width: 4.5rem;
    height: 0.35rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.16);
    overflow: hidden;
}

#ai-chat-listing-modal .ai-chat-listing-lqs__track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-lqs__refresh.cd-icon-btn {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--ui-radius-md);
}

#ai-chat-listing-modal .ai-chat-listing-lqs__refresh i {
    font-size: var(--ui-fs-xs);
    line-height: 1;
}

#ai-chat-listing-modal .modal-body {
    padding: 1.15rem 1.25rem 1.4rem;
    background:
    linear-gradient(180deg, rgba(var(--ui-muted-rgb), 0.045), transparent 7rem),
    var(--ui-surface);
}

#ai-chat-listing-modal .ai-chat-listing-modal__section + .ai-chat-listing-modal__section {
    margin-top: 1.35rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp + .ai-chat-listing-modal__section {
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ui-border);
}

#ai-chat-listing-modal .ai-chat-listing-pdp {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr);
    gap: 1.5rem 1.75rem;
    align-items: start;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__media {
    min-width: 0;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: zoom-in;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-page);
    aspect-ratio: 1 / 1;
    max-height: 22rem;
    margin-inline: auto;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(var(--ui-white-rgb), 0.4);
}

body[data-theme=dark] #ai-chat-listing-modal .ai-chat-listing-pdp__stage {
    background: var(--ui-subtle);
    box-shadow: none;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage-count,
#ai-chat-listing-modal .ai-chat-listing-pdp__stage-edit {
    position: absolute;
    padding: 0.15rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-ink-rgb), 0.72);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    pointer-events: none;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage-count {
    right: 0.65rem;
    bottom: 0.65rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage-edit {
    left: 0.65rem;
    top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stage.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-muted);
    font-size: 2rem;
    background: rgba(var(--ui-muted-rgb), 0.06);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumbs {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.35rem;
    scrollbar-width: thin;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumb {
    flex: 0 0 auto;
    width: 3.75rem;
    height: 3.75rem;
    padding: 0.2rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-page);
    overflow: hidden;
    cursor: pointer;
}

body[data-theme=dark] #ai-chat-listing-modal .ai-chat-listing-pdp__thumb {
    background: var(--ui-subtle);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--ui-radius-xs);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumb:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumb.is-active {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px rgba(var(--ui-primary-rgb), 0.22);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__thumb:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 1px;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__brand {
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-primary);
    margin-bottom: 0.25rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__title {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 0.7rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__ids {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__id {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    max-width: 100%;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__id b {
    font-weight: 650;
    color: var(--ui-text);
    overflow-wrap: break-word;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__buybox {
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    padding: 1rem 1.1rem 0.95rem;
    background: var(--ui-surface);
    box-shadow: 0 0.35rem 1rem rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] #ai-chat-listing-modal .ai-chat-listing-pdp__buybox {
    box-shadow: none;
    background: var(--ui-subtle);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__price {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__price-note {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stock.is-in {
    background: rgba(var(--ui-success-rgb), 0.12);
    color: var(--ui-success);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__stock.is-out {
    background: rgba(var(--ui-danger-rgb), 0.1);
    color: var(--ui-danger);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__progress {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__progress-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.3rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__highlights {
    margin: 0.85rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__highlight {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-muted-rgb), 0.06);
}

#ai-chat-listing-modal .ai-chat-listing-pdp__highlight-name {
    min-width: 0;
    font-size: var(--ui-fs-2xs);
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    overflow-wrap: break-word;
}

#ai-chat-listing-modal .ai-chat-listing-pdp__highlight-value {
    min-width: 0;
    font-size: var(--ui-fs-base);
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: break-word;
}

#ai-chat-listing-modal .ai-chat-listing-modal__section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-modal__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-text);
    font-size: var(--ui-fs-2xs);
    letter-spacing: 0;
}

#ai-chat-listing-modal .ai-chat-listing-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 650;
    background: rgba(var(--ui-muted-rgb), 0.14);
    color: var(--ui-text);
}

#ai-chat-listing-modal .ai-chat-listing-status.is-live,
#ai-chat-page .ai-chat-listing-card__status.is-live {
    background: rgba(var(--ui-success-rgb), 0.14);
    color: var(--ui-success);
}

#ai-chat-listing-modal .ai-chat-listing-status.is-pending,
#ai-chat-page .ai-chat-listing-card__status.is-pending {
    background: rgba(var(--ui-warning-rgb), 0.18);
    color: var(--ui-warning-text);
}

body[data-theme=dark] #ai-chat-listing-modal .ai-chat-listing-status.is-pending,
body[data-theme=dark] #ai-chat-page .ai-chat-listing-card__status.is-pending {
    color: var(--ui-warning);
}

#ai-chat-listing-modal .ai-chat-listing-status.is-error,
#ai-chat-page .ai-chat-listing-card__status.is-error {
    background: rgba(var(--ui-danger-rgb), 0.14);
    color: var(--ui-danger);
}

#ai-chat-listing-modal .ai-chat-listing-modal__meter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#ai-chat-listing-modal .ai-chat-listing-modal__meter-track {
    flex: 1 1 auto;
    height: 0.375rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.18);
    overflow: hidden;
}

#ai-chat-listing-modal .ai-chat-listing-modal__meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary);
}

#ai-chat-listing-modal .ai-chat-listing-modal__meter-value {
    flex: 0 0 auto;
    font-size: var(--ui-fs-sm);
    font-weight: 650;
}

#ai-chat-listing-modal .ai-chat-listing-modal__errors-panel {
    border-radius: var(--ui-radius);
    border: 1px solid rgba(var(--ui-danger-rgb), 0.22);
    background: rgba(var(--ui-danger-rgb), 0.06);
    overflow: hidden;
}

#ai-chat-listing-modal .ai-chat-listing-modal__errors-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    padding: 0.55rem 0.7rem 0.55rem 0.9rem;
    color: var(--ui-danger);
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#ai-chat-listing-modal .ai-chat-listing-modal__autofix {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--ui-fs-sm);
    background: var(--ui-surface);
}

#ai-chat-listing-modal .ai-chat-listing-modal__autofix:disabled {
    opacity: 0.7;
}

#ai-chat-listing-modal .ai-chat-listing-modal__errors {
    list-style: none;
    margin: 0;
    padding: 0 0.55rem 0.55rem;
    display: grid;
    gap: 0.35rem;
}

#ai-chat-listing-modal .ai-chat-listing-modal__error {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

#ai-chat-listing-modal .ai-chat-listing-modal__error-field {
    font-weight: 700;
}

#ai-chat-listing-modal .ai-chat-listing-modal__error-message {
    color: var(--ui-muted);
}

#ai-chat-listing-modal .ai-chat-listing-modal__desc {
    position: relative;
    white-space: pre-wrap;
    font-size: var(--ui-fs-md);
    line-height: 1.65;
    color: var(--ui-text);
    max-width: 68ch;
}

#ai-chat-listing-modal .ai-chat-listing-modal__desc.is-clamped {
    max-height: 9.5rem;
    overflow: hidden;
}

#ai-chat-listing-modal .ai-chat-listing-modal__desc.is-clamped::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--ui-surface));
    pointer-events: none;
}

#ai-chat-listing-modal .ai-chat-listing-modal__desc-toggle {
    margin-top: 0.55rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 650;
}

#ai-chat-listing-modal .ai-chat-listing-modal__desc-toggle:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    color: var(--ui-primary);
}

#ai-chat-listing-modal .ai-chat-listing-modal__attrs {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-surface);
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr {
    display: grid;
    grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 0.7rem 0.95rem;
    font-size: var(--ui-fs-base);
    border-top: 1px solid var(--ui-border);
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr:first-child {
    border-top: 0;
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr:nth-child(even) {
    background: rgba(var(--ui-muted-rgb), 0.05);
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr:hover {
    background: rgba(var(--ui-primary-rgb), 0.06);
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr-name {
    flex: 0 0 34%;
    min-width: 0;
    color: var(--ui-muted);
    overflow-wrap: break-word;
    word-break: normal;
}

#ai-chat-listing-modal .ai-chat-listing-modal__attr-value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 550;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: normal;
}

#ai-chat-listing-modal .modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--ui-border);
    padding: 0.7rem 1.15rem;
    background: var(--ui-surface);
}

#ai-chat-listing-modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 0;
    padding: 0.4rem 0.95rem;
    line-height: 1.2;
    border-radius: var(--ui-radius);
    font-weight: 650;
}

#ai-chat-listing-modal .modal-footer .btn i {
    line-height: 1;
}

#ai-chat-page .ai-chat-greeting.is-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 0.82em;
    margin-left: 3px;
    vertical-align: -0.06em;
    background: var(--ui-primary);
    animation: ai-chat-cursor-blink 0.75s step-end infinite;
}

#ai-chat-page.is-thread .ai-chat-input-glow,
#ai-chat-page .ai-chat-input-glow.is-dismissed {
    display: none !important;
}

#ai-chat-page .ai-chat-input-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(0 round 999px);
    contain: paint;
    opacity: 1;
    animation: ai-chat-glow-layer-off 3.1s ease forwards;
}

#ai-chat-page .ai-chat-input-glow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(320px, 140vw);
    height: min(320px, 140vw);
    translate: -50% -50%;
    scale: 1 0.45;
    rotate: 90deg;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

#ai-chat-page .ai-chat-input-glow--ring::before {
    background: conic-gradient(
    rgba(var(--ui-primary-rgb), 0) 0deg,
    rgba(var(--ui-primary-rgb), 0) 232deg,
    rgba(var(--ui-primary-rgb), 0.22) 258deg,
    rgba(var(--ui-primary-rgb), 0.45) 278deg,
    rgba(var(--ui-primary-rgb), 0.65) 296deg,
    var(--ui-primary) 312deg,
    var(--ui-primary) 328deg,
    var(--ui-surface) 342deg,
    var(--ui-surface) 352deg,
    var(--ui-primary) 360deg
    );
    filter: blur(10px);
    animation:
    ai-chat-glow-spin 3s linear forwards,
    ai-chat-glow-fade 3s ease forwards;
}

#ai-chat-page .ai-chat-input-glow--soft::before {
    background: conic-gradient(
    rgba(var(--ui-primary-rgb), 0) 0deg,
    rgba(var(--ui-primary-rgb), 0) 172deg,
    rgba(var(--ui-primary-rgb), 0.1) 208deg,
    rgba(var(--ui-primary-rgb), 0.26) 235deg,
    rgba(var(--ui-primary-rgb), 0.42) 260deg,
    rgba(var(--ui-primary-rgb), 0.58) 285deg,
    rgba(var(--ui-primary-rgb), 0.76) 315deg,
    rgba(var(--ui-primary-rgb), 0.92) 360deg
    );
    filter: blur(16px);
    animation:
    ai-chat-glow-spin 3s linear 0.06s forwards,
    ai-chat-glow-fade 3s ease 0.06s forwards;
}

#ai-chat-page .ai-chat-input-glow--ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ui-surface);
    z-index: 0;
}

#ai-chat-page .ai-chat-input-row {
    position: relative;
    z-index: 1;
}

#ai-chat-page .ai-chat-canvas {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#ai-chat-page .ai-chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    min-height: 56px;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.35);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body[data-theme=dark] #ai-chat-page .ai-chat-topbar {
    background: color-mix(in srgb, var(--ui-surface) 38%, transparent);
    border-bottom-color: var(--ui-border);
}

#ai-chat-page .ai-chat-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

#ai-chat-page .ai-chat-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid transparent;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#ai-chat-page .ai-chat-toolbar-btn:focus {
    box-shadow: none;
    outline: none;
}

#ai-chat-page .ai-chat-toolbar-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.25);
}

#ai-chat-page .ai-chat-toolbar-btn-primary {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: var(--ui-on-primary);
}

#ai-chat-page .ai-chat-toolbar-btn-primary:hover {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

#ai-chat-page .ai-chat-toolbar-btn-secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-toolbar-btn-secondary:hover {
    background: var(--ui-primary-soft);
    border-color: rgba(var(--ui-primary-rgb), 0.25);
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-toolbar-btn i {
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .ai-chat-toolbar-btn-label {
    white-space: nowrap;
}

#ai-chat-page .ai-chat-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#ai-chat-page .ai-chat-topbar-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* The hidden offline alert under the navbar is 58px tall but pulled up 68px, so pages start 10px
   under the navbar; padded pages hide that, the chat's top bar lost its top padding to it and its
   buttons looked stuck to the top. Out of the flow until it actually shows (the classes animate it in). */
body:has(#ai-chat-page) #network-status-alert:not(.network-warning):not(.network-success) {
    display: none;
}

#ai-chat-page .ai-chat-debug-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

#ai-chat-page .ai-chat-debug-toggle-text {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    white-space: nowrap;
}

#ai-chat-page .ai-chat-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

#ai-chat-page .ai-chat-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#ai-chat-page .ai-chat-switch-slider {
    background: var(--ui-border);
    position: absolute;
    inset: 0;
    border-radius: var(--ui-radius-pill);
    transition: background 0.2s ease;
}

#ai-chat-page .ai-chat-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-hover);
    transition: transform 0.2s ease;
}

body[data-theme=dark] #ai-chat-page .ai-chat-switch-slider::before {
    background: var(--ui-surface);
}

#ai-chat-page .ai-chat-switch input:focus-visible + .ai-chat-switch-slider {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.25);
}

#ai-chat-page .ai-chat-switch input:checked + .ai-chat-switch-slider {
    background: var(--ui-primary);
}

#ai-chat-page .ai-chat-switch input:checked + .ai-chat-switch-slider::before {
    transform: translateX(16px);
}

#ai-chat-page .ai-chat-debug-toggle.is-active .ai-chat-debug-toggle-text {
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-smoke-btn {
    color: var(--ui-text);
    background: var(--ui-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: max(36px, var(--ui-tap-min, 0px));
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

#ai-chat-page .ai-chat-smoke-btn:hover:not(:disabled) {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    color: var(--ui-primary);
}

#ai-chat-page .ai-chat-smoke-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

#ai-chat-page .ai-chat-smoke-btn:focus {
    box-shadow: none;
}

#ai-chat-page .ai-chat-smoke-btn:focus-visible {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.35);
    outline-offset: 2px;
}

#ai-chat-page .ai-chat-smoke-group {
    display: inline-flex;
    align-items: stretch;
}

#ai-chat-page .ai-chat-smoke-group .ai-chat-smoke-btn-split {
    padding-left: 0.5rem;
    padding-right: 0.7rem;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#ai-chat-page .ai-chat-smoke-group > .ai-chat-smoke-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ai-chat-page .ai-chat-smoke-group .dropdown-menu {
    font-size: var(--ui-fs-sm);
    min-width: 12rem;
}

#ai-chat-page .ai-chat-smoke-group .dropdown-item {
    min-height: 36px;
    display: flex;
    align-items: center;
}

#ai-chat-smoke-modal .modal-header.ai-chat-smoke-modal-header,
#ai-chat-smoke-modal .modal-footer {
    border-color: var(--ui-border);
}

#ai-chat-smoke-modal .modal-header.ai-chat-smoke-modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 0.9rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-header-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-header-title-wrap {
    min-width: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-header-title-wrap .modal-title {
    margin-bottom: 0;
    line-height: 1.35;
}

#ai-chat-smoke-modal .ai-chat-smoke-set-label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.25rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-set-label[hidden] {
    display: none !important;
}

#ai-chat-smoke-modal .ai-chat-smoke-header-progress {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), 0.04);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #ai-chat-smoke-modal .ai-chat-smoke-header-progress {
    background: var(--ui-subtle);
}

#ai-chat-smoke-modal .modal-body {
    max-height: min(68vh, 560px);
    overflow-y: auto;
    padding: 0.75rem 1.15rem 1rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-dashboard {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-dash-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-dash-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-fraction {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

#ai-chat-smoke-modal .ai-chat-smoke-inline-counts {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

#ai-chat-smoke-modal .ai-chat-smoke-inline-counts .is-passed {
    color: var(--ui-success);
    font-weight: 500;
}

#ai-chat-smoke-modal .ai-chat-smoke-inline-counts .is-failed {
    color: var(--ui-danger);
    font-weight: 500;
}

#ai-chat-smoke-modal .ai-chat-smoke-progress-pct {
    flex-shrink: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

#ai-chat-smoke-modal .ai-chat-smoke-current {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    margin-bottom: 0.55rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    opacity: 0.85;
}

#ai-chat-smoke-modal .ai-chat-smoke-current .spinner-border {
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.12em;
}

#ai-chat-smoke-modal .ai-chat-smoke-current span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-smoke-modal .ai-chat-smoke-progress-track {
    height: 6px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.12);
    overflow: hidden;
}

body[data-theme=dark] #ai-chat-smoke-modal .ai-chat-smoke-progress-track {
    background: var(--ui-track);
}

#ai-chat-smoke-modal .ai-chat-smoke-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
    transition: width 0.35s ease;
    width: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-status-msg {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-bottom: 0.55rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-dashboard.is-idle .ai-chat-smoke-current {
    margin-bottom: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-results {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-result {
    border-radius: var(--ui-radius-sm);
    transition: background 0.2s ease;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact {
    padding: 0.5rem 0.35rem;
    cursor: pointer;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact:hover {
    background: var(--ui-primary-soft);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact.is-running {
    padding: 0.5rem 0.55rem;
    background: rgba(var(--ui-primary-rgb), 0.06);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.14);
    border-radius: var(--ui-radius-sm);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact:focus-visible {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.35);
    outline-offset: 1px;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-expanded {
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.15rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #ai-chat-smoke-modal .ai-chat-smoke-result.is-expanded {
    background: var(--ui-subtle);
    box-shadow: none;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-expanded.is-failed {
    border-color: var(--ui-danger-soft);
}

#ai-chat-smoke-modal .ai-chat-smoke-result-top {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--ui-muted);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact .ai-chat-smoke-dot {
    margin-top: 0.28rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-passed .ai-chat-smoke-dot {
    background: var(--ui-success);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-failed .ai-chat-smoke-dot {
    background: var(--ui-danger);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-running .ai-chat-smoke-dot {
    background: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.18);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-skipped .ai-chat-smoke-dot,
#ai-chat-smoke-modal .ai-chat-smoke-result.is-manual .ai-chat-smoke-dot {
    background: var(--ui-muted);
    opacity: 0.65;
}

#ai-chat-smoke-modal .ai-chat-smoke-result-title {
    flex: 1;
    min-width: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ui-text);
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-compact .ai-chat-smoke-result-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-chat-smoke-modal .ai-chat-smoke-result-meta {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

#ai-chat-smoke-modal .ai-chat-smoke-result-body {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

#ai-chat-smoke-modal .ai-chat-smoke-result-reason {
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-danger);
    margin: 0 0 0.65rem;
    word-break: break-word;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-skipped .ai-chat-smoke-result-reason,
#ai-chat-smoke-modal .ai-chat-smoke-result.is-manual .ai-chat-smoke-result-reason {
    color: var(--ui-muted);
}

#ai-chat-smoke-modal .ai-chat-smoke-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.15rem 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg-row {
    display: flex;
    width: 100%;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg-row.user {
    justify-content: flex-end;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg-row.assistant {
    justify-content: flex-start;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.user {
    max-width: 78%;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.assistant {
    max-width: 92%;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble {
    display: block;
    padding: 0.7rem 0.95rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-base);
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.user .bubble {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    border-bottom-right-radius: 0.4rem;
    box-shadow: none;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.assistant .bubble {
    background: rgba(var(--ui-muted-rgb), 0.1);
    border: 0;
    color: var(--ui-text);
    border-radius: var(--ui-radius);
    border-bottom-left-radius: 0.4rem;
    padding: 0.7rem 0.95rem;
    box-shadow: none;
}

body[data-theme=dark] #ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.assistant .bubble {
    background: var(--ui-track);
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .chat-msg.user .bubble a {
    color: var(--ui-on-primary);
    text-decoration: underline;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-rich {
    font-size: inherit;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-p {
    margin: 0 0 0.4rem;
    font-size: inherit;
    color: var(--ui-text);
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-p:last-child {
    margin-bottom: 0;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-section + .ai-chat-section {
    margin-top: 0.5rem;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble a {
    color: var(--ui-primary);
    font-weight: 500;
}

#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-foot,
#ai-chat-smoke-modal .ai-chat-smoke-thread .bubble .ai-chat-foot .ai-chat-p {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#ai-chat-smoke-modal .ai-chat-smoke-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 140px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#ai-chat-smoke-modal .ai-chat-smoke-section-title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin: 0.85rem 0 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ui-border);
}

#ai-chat-smoke-modal .ai-chat-smoke-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#ai-chat-smoke-modal .ai-chat-smoke-result.is-new {
    animation: ai-chat-smoke-result-in 0.25s ease-out;
}

#ai-chat-page .ai-chat-usage {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 132px;
    max-width: 180px;
    height: 36px;
    padding: 0 0.9rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    cursor: pointer;
    appearance: none;
    text-align: left;
    font: inherit;
    color: inherit;
}

body[data-theme=dark] #ai-chat-page .ai-chat-usage {
    border-color: var(--ui-border);
}

#ai-chat-page .ai-chat-usage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}

#ai-chat-page .ai-chat-usage-label {
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

#ai-chat-page .ai-chat-usage-pct {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#ai-chat-page .ai-chat-usage-track {
    height: 3px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.1);
    overflow: hidden;
}

body[data-theme=dark] #ai-chat-page .ai-chat-usage-track {
    background: var(--ui-track);
}

#ai-chat-page .ai-chat-usage-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: rgba(var(--ui-primary-rgb), 0.45);
    transition: width 0.35s ease, background-color 0.2s ease;
}

body[data-theme=dark] #ai-chat-page .ai-chat-usage-fill {
    background: rgba(var(--ui-primary-rgb), 0.55);
}

#ai-chat-page .ai-chat-usage.is-warning .ai-chat-usage-fill {
    background: rgba(var(--ui-warning-rgb), 0.65);
}

#ai-chat-page .ai-chat-usage.is-danger .ai-chat-usage-fill {
    background: rgba(var(--ui-danger-rgb), 0.7);
}

#ai-chat-page .ai-chat-usage.is-warning .ai-chat-usage-pct,
#ai-chat-page .ai-chat-usage.is-danger .ai-chat-usage-pct {
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-usage.is-unlimited .ai-chat-usage-track {
    display: none;
}

#ai-chat-page .ai-chat-usage.is-unlimited .ai-chat-usage-head {
    margin-bottom: 0;
}

#aiChatCreditsModal {
    word-spacing: normal;
    letter-spacing: normal;
}

#aiChatCreditsModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

#aiChatCreditsModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#aiChatCreditsModal .modal-title i {
    display: none;
}

#aiChatCreditsModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#aiChatCreditsModal .modal-body {
    padding: 0.15rem 1.35rem 0.35rem;
    line-height: 1.45;
    word-spacing: 0.04em;
    color: var(--ui-text);
}

#aiChatCreditsModal .modal-footer {
    border-top: 0 !important;
    background: transparent;
    padding: 0.5rem 1.35rem 1.2rem;
}

#aiChatCreditsModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
}

#aiChatCreditsModal .ai-chat-credits-balance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 0 0 0.85rem;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#aiChatCreditsModal .ai-chat-credits-balance-label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    letter-spacing: 0;
}

#aiChatCreditsModal .ai-chat-credits-balance-value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ui-page-ai-chat .ai-chat-credits-notice {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.ui-page-ai-chat .ai-chat-credits-notice-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-ai-chat .ai-chat-credits-notice-title .fa-coins {
    color: var(--ui-warning);
}

.ui-page-ai-chat .ai-chat-credits-notice-text {
    margin: 0.35rem 0 0.75rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    line-height: 1.45;
}

#aiChatCreditsModal .ai-chat-credits-note {
    margin: 0 0 0.9rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#aiChatCreditsModal .ai-chat-credits-packs {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#aiChatCreditsModal .ai-chat-credit-pack {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-muted-rgb), 0.1);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#aiChatCreditsModal .ai-chat-credit-pack.is-selected {
    background: var(--ui-surface);
    border-color: rgba(var(--ui-primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.16);
}

body[data-theme=dark] #aiChatCreditsModal .ai-chat-credit-pack.is-selected {
    background: var(--ui-subtle);
}

#aiChatCreditsModal .ai-chat-credit-pack input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#aiChatCreditsModal .ai-chat-credit-pack-radio {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--ui-radius-pill);
    border: 1.5px solid rgba(var(--ui-text-rgb), 0.28);
    background: transparent;
    position: relative;
}

#aiChatCreditsModal .ai-chat-credit-pack.is-selected .ai-chat-credit-pack-radio {
    border-color: var(--ui-primary);
}

#aiChatCreditsModal .ai-chat-credit-pack.is-selected .ai-chat-credit-pack-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--ui-primary);
}

#aiChatCreditsModal .ai-chat-credit-pack-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

#aiChatCreditsModal .ai-chat-credit-pack-pay {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-text);
}

#aiChatCreditsModal .ai-chat-credit-pack-get {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#aiChatCreditsModal .ai-chat-credit-pack-bonus {
    flex-shrink: 0;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-success-rgb), 0.14);
    color: var(--ui-success-text);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body[data-theme=dark] #aiChatCreditsModal .ai-chat-credit-pack-bonus {
    background: rgba(var(--ui-success-rgb), 0.18);
    color: var(--ui-success);
}

#aiChatCreditsModal .ai-chat-credits-method {
    margin: 0.85rem 0 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
}

#ai-chat-page .chat-messages-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#ai-chat-page .chat-messages {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#ai-chat-page .chat-messages.has-thread {
    padding: 1.25rem 1rem 1.25rem;
}

#ai-chat-page .chat-messages.has-thread.is-sending {
    padding-bottom: 1.5rem;
}

#ai-chat-page .ai-chat-thread-skeleton {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

#ai-chat-page .ai-chat-skel-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}

#ai-chat-page .ai-chat-skel-row.is-user {
    flex-direction: row-reverse;
}

#ai-chat-page .ai-chat-skel-avatar,
#ai-chat-page .ai-chat-skel-line,
#ai-chat-page .ai-chat-skel-bubble {
    position: relative;
    overflow: hidden;
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#ai-chat-page .ai-chat-skel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

#ai-chat-page .ai-chat-skel-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

#ai-chat-page .ai-chat-skel-line {
    display: block;
    height: 0.7rem;
    border-radius: var(--ui-radius-xs);
}

#ai-chat-page .ai-chat-skel-bubble {
    height: 2.55rem;
    border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius-xs) var(--ui-radius);
}

#ai-chat-page .ai-chat-skel-avatar::after,
#ai-chat-page .ai-chat-skel-line::after,
#ai-chat-page .ai-chat-skel-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-surface) 55%, transparent), transparent);
    transform: translateX(-100%);
    animation: ai-chat-skel-shimmer 1.4s ease-in-out infinite;
}

body[data-theme=dark] #ai-chat-page .ai-chat-skel-avatar,
body[data-theme=dark] #ai-chat-page .ai-chat-skel-line,
body[data-theme=dark] #ai-chat-page .ai-chat-skel-bubble {
    background: rgba(var(--ui-muted-rgb), 0.22);
}

body[data-theme=dark] #ai-chat-page .ai-chat-skel-avatar::after,
body[data-theme=dark] #ai-chat-page .ai-chat-skel-line::after,
body[data-theme=dark] #ai-chat-page .ai-chat-skel-bubble::after {
    background: linear-gradient(90deg, transparent, rgba(var(--ui-white-rgb), 0.12), transparent);
}

#ai-chat-page .ai-chat-messages-inner {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

#ai-chat-page .chat-msg-row {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
    align-items: flex-start;
}

#ai-chat-page .chat-msg-row.user {
    flex-direction: row-reverse;
    margin-bottom: 1.15rem;
}

#ai-chat-page .chat-msg-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

#ai-chat-page .chat-msg-row.user .chat-msg-avatar {
    display: none;
}

#ai-chat-page .chat-msg-row.assistant .chat-msg-avatar {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

#ai-chat-page .chat-msg {
    min-width: 0;
    max-width: min(42rem, calc(100% - 44px));
}

#ai-chat-page .chat-msg.user {
    margin-left: auto;
    max-width: min(34rem, 82%);
}

#ai-chat-page .chat-msg-row.user .chat-msg {
    max-width: min(34rem, 86%);
}

#ai-chat-page .chat-msg .bubble {
    padding: 0.85rem 1.05rem;
    border-radius: var(--ui-radius);
    text-align: left;
    line-height: 1.6;
    font-size: var(--ui-fs-md);
    overflow-wrap: anywhere;
    word-break: break-word;
    letter-spacing: 0;
    word-spacing: normal;
}

#ai-chat-page .chat-msg.user .bubble {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    border-bottom-right-radius: 0.4rem;
    position: relative;
    box-shadow:
    0 10px 28px rgba(var(--ui-primary-rgb), 0.22),
    0 0 36px rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .chat-msg.user .chat-msg-user-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#ai-chat-page .chat-msg.assistant .bubble {
    background: color-mix(in srgb, var(--ui-surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-surface) 55%, transparent);
    box-shadow:
    0 12px 40px rgba(var(--ui-ink-rgb), 0.06),
    0 0 0 1px rgba(var(--ui-primary-rgb), 0.04);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-radius: var(--ui-radius);
    border-bottom-left-radius: 0.4rem;
    color: var(--ui-text);
    position: relative;
    padding: 0.9rem 3.5rem 0.85rem 1.1rem;
}

body[data-theme=dark] #ai-chat-page .chat-msg.assistant .bubble {
    background: rgba(var(--ui-ink-rgb), 0.55);
    border-color: var(--ui-border);
    box-shadow: 0 16px 48px rgba(var(--ui-black-rgb), 0.28),
    0 0 0 1px rgba(var(--ui-primary-rgb), 0.08);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-rich > *:last-child {
    margin-bottom: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-lead {
    margin: 0 0 0.85rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    line-height: 1.65;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 0.85rem;
    padding: 0.8rem 0.95rem;
    border-radius: var(--ui-radius);
    background: var(--ui-danger-tint);
    border: 1px solid var(--ui-danger-tint);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-notice-icon {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    font-size: var(--ui-fs-sm);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-notice .ai-chat-p {
    margin: 0;
    font-size: var(--ui-fs-base);
    line-height: 1.5;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-wrap {
    margin: 0.35rem 0 0.85rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: rgba(var(--ui-primary-rgb), 0.03);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table th,
#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table td {
    padding: 0.55rem 0.85rem;
    vertical-align: top;
    border: 0;
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table tr:first-child th,
#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table tr:first-child td {
    border-top: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table th {
    width: 34%;
    max-width: 10rem;
    font-weight: 600;
    color: var(--ui-primary);
    white-space: normal;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table td {
    color: var(--ui-text);
    word-break: break-word;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-table a.ai-chat-link {
    font-weight: 600;
}

body[data-theme=dark] #ai-chat-page .chat-msg.assistant .bubble .ai-chat-kv-wrap {
    background: var(--ui-subtle);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-points {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.35rem 0 0.85rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-primary-rgb), 0.045);
    border: 1px solid color-mix(in srgb, var(--ui-border) 80%, rgba(var(--ui-primary-rgb), 0.18));
}

body[data-theme=dark] #ai-chat-page .chat-msg.assistant .bubble .ai-chat-point {
    background: var(--ui-subtle);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding-top: 0.05rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-num {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-points--ul .ai-chat-point-icon {
    width: 1.75rem;
    height: 1.75rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-main {
    min-width: 0;
    flex: 1 1 auto;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-title {
    margin: 0 0 0.28rem;
    font-size: var(--ui-fs-md);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ui-text);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-text {
    margin: 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-text);
    opacity: 0.92;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-lead .ai-chat-p {
    margin: 0 0 0.35rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-lead .ai-chat-p:last-child {
    margin-bottom: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-section {
    margin: 0 0 1rem;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 3px solid var(--ui-primary-line);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-section + .ai-chat-section {
    margin-top: 0.25rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-section:last-of-type {
    margin-bottom: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-md-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    color: var(--ui-primary);
    font-size: 0.92em;
    opacity: 0.92;
}

#ai-chat-page .chat-msg.assistant .bubble strong {
    font-weight: 650;
    color: var(--ui-text);
}

#ai-chat-page .chat-msg.assistant .bubble em {
    font-style: italic;
    color: var(--ui-text);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-callout {
    margin: 0.55rem 0 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-left: 3px solid var(--ui-primary);
    border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
    background: rgba(var(--ui-primary-rgb), 0.07);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-callout .ai-chat-p {
    margin: 0;
    font-size: var(--ui-fs-base);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-hr {
    margin: 0.85rem 0;
    border: 0;
    border-top: 1px solid var(--ui-border);
    opacity: 0.8;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-figure {
    margin: 0.55rem 0 0.8rem;
    padding: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-img {
    display: block;
    max-width: min(100%, 22rem);
    max-height: 14rem;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: rgba(var(--ui-primary-rgb), 0.04);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-img--inline {
    display: inline-block;
    max-width: 8rem;
    max-height: 5.5rem;
    vertical-align: middle;
    margin: 0.15rem 0.2rem;
    border-radius: var(--ui-radius-sm);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-figcaption {
    margin: 0.35rem 0 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-p {
    margin: 0 0 0.7rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    line-height: 1.65;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-foot {
    margin: 0.7rem 0 0;
    padding-top: 0;
    border-top: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    line-height: 1.55;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-foot .ai-chat-p {
    margin: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-foot a.ai-chat-link {
    text-decoration: none;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-item-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-term {
    display: inline;
    font-weight: 500;
    font-size: var(--ui-fs-sm);
    color: var(--ui-primary);
    margin: 0;
    line-height: 1.4;
    flex-shrink: 0;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-desc {
    display: inline;
    font-weight: 400;
    color: var(--ui-text);
    line-height: 1.5;
    min-width: 0;
    flex: 1 1 8rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-stat {
    margin: 0.45rem 0 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.06);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #ai-chat-page .chat-msg.assistant .bubble .ai-chat-stat {
    background: rgba(var(--ui-primary-rgb), 0.1);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-stat .ai-chat-stat-inner strong {
    color: var(--ui-primary);
    font-weight: 500;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-table-wrap {
    margin: 0.5rem 0 0.75rem;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-table {
    margin: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-text);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-table th {
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    border-color: var(--ui-border);
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-table td {
    border-color: var(--ui-border);
    vertical-align: top;
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    vertical-align: baseline;
    color: var(--ui-primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.35);
    text-underline-offset: unset;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link--btn,
#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-actions a.ai-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    border-bottom: 0;
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1.2;
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link--btn:hover,
#ai-chat-page .chat-msg.assistant .bubble .ai-chat-point-actions a.ai-chat-link:hover {
    background: rgba(var(--ui-primary-rgb), 0.16);
    color: var(--ui-primary-hover);
    border-bottom-color: transparent;
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link:hover {
    color: var(--ui-primary-hover);
    border-bottom-color: var(--ui-primary-hover);
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link .ai-chat-link-icon {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
    opacity: 0.92;
}

#ai-chat-page .chat-msg.assistant .bubble a.ai-chat-link .ai-chat-link-text {
    min-width: 0;
    word-break: break-word;
}

#ai-chat-page .chat-msg.assistant .bubble .ai-chat-foot a.ai-chat-link {
    border-bottom-color: rgba(var(--ui-primary-rgb), 0.45);
}

#ai-chat-page .chat-msg.user .bubble a.ai-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ui-on-primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-surface) 55%, transparent);
}

#ai-chat-page .chat-msg.user .bubble a.ai-chat-link:hover {
    border-bottom-color: var(--ui-surface);
}

#ai-chat-page .chat-msg.user .bubble a.ai-chat-link .ai-chat-link-icon {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
    opacity: 0.9;
}

#ai-chat-page .chat-msg.assistant .bubble:has(.ai-chat-feedback.is-expanded) {
    padding-right: 1.1rem;
}

#ai-chat-page .ai-chat-feedback {
    position: absolute;
    right: 0.45rem;
    bottom: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 1;
}

#ai-chat-page .ai-chat-feedback.is-expanded {
    position: static;
    width: 100%;
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--ui-muted-rgb), 0.14);
    justify-content: flex-start;
}

#ai-chat-page .ai-chat-feedback-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#ai-chat-page .ai-chat-feedback-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

#ai-chat-page .ai-chat-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    min-width: 1.55rem;
    min-height: 1.55rem;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1;
    cursor: pointer;
    opacity: 0.38;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

#ai-chat-page .chat-msg.assistant:hover .ai-chat-feedback-btn,
#ai-chat-page .chat-msg.assistant:focus-within .ai-chat-feedback-btn,
#ai-chat-page .ai-chat-feedback-btn.is-active {
    opacity: 0.85;
}

#ai-chat-page .ai-chat-feedback-btn:hover {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
    opacity: 1;
}

#ai-chat-page .ai-chat-feedback-btn.is-active {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .ai-chat-feedback-btn.is-active[data-rating="down"] {
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
}

#ai-chat-page .ai-chat-feedback-comment-wrap {
    flex: 1 1 100%;
    margin-top: 0.35rem;
}

#ai-chat-page .ai-chat-feedback-comment {
    width: 100%;
    min-height: 36px;
    max-height: 120px;
    padding: 0.35rem 0.55rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

#ai-chat-page .ai-chat-feedback-comment:focus {
    outline: none;
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .ai-chat-feedback-comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.35rem;
}

#ai-chat-page .ai-chat-feedback-comment-save {
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .chat-msg-user-actions {
    position: absolute;
    right: calc(100% + 0.3rem);
    bottom: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.05rem;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

#ai-chat-page .chat-msg-row.user:hover .chat-msg-user-actions,
#ai-chat-page .chat-msg-row.user:focus-within .chat-msg-user-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#ai-chat-page .chat-msg-user-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    opacity: 0.7;
    font-size: var(--ui-fs-2xs);
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

#ai-chat-page .chat-msg-row.user:hover .chat-msg-user-action-btn,
#ai-chat-page .chat-msg-row.user:focus-within .chat-msg-user-action-btn {
    opacity: 0.85;
}

#ai-chat-page .chat-msg-user-action-btn:hover,
#ai-chat-page .chat-msg-user-action-btn:focus-visible {
    opacity: 1;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
    outline: none;
}

body[data-theme=dark] #ai-chat-page .chat-msg-user-action-btn:hover,
body[data-theme=dark] #ai-chat-page .chat-msg-user-action-btn:focus-visible {
    background: rgba(var(--ui-primary-rgb), 0.14);
}

#ai-chat-page .chat-msg-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#ai-chat-page .chat-msg-edit-input {
    width: 100%;
    min-height: 72px;
    max-height: 200px;
    padding: 0.55rem 0.7rem;
    font-size: var(--ui-fs-base);
    line-height: 1.45;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-text);
    resize: vertical;
}

#ai-chat-page .chat-msg-edit-input:focus {
    outline: none;
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .chat-msg-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

#ai-chat-page .chat-msg-edit-save,
#ai-chat-page .chat-msg-edit-cancel {
    min-height: 44px;
    padding: 0.35rem 0.85rem;
    font-size: var(--ui-fs-xs);
}

#ai-chat-page .chat-loading-thread {
    margin-bottom: 0.5rem;
}

#ai-chat-page .chat-loading-thread .chat-msg-avatar {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

#ai-chat-page .chat-msg.assistant .bubble.chat-loading-bubble {
    padding: 0.85rem 1.05rem 0.75rem;
    min-width: 16rem;
    max-width: 22.5rem;
}

body[data-theme=dark] #ai-chat-page .chat-loading-bubble {
    box-shadow: none;
}

#ai-chat-page .chat-loading-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

#ai-chat-page .chat-loading-head-copy {
    min-width: 0;
    flex: 1;
}

#ai-chat-page .chat-loading-now-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

#ai-chat-page #ai-chat-loading-now {
    min-width: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--ui-text);
}

#ai-chat-page #ai-chat-loading-detail {
    display: none;
    margin-top: 0.28rem;
    max-width: 100%;
}

#ai-chat-page #ai-chat-loading-detail.is-visible {
    display: inline-block;
}

#ai-chat-page .chat-loading-elapsed {
    flex-shrink: 0;
    margin-top: 0.12rem;
    font-size: var(--ui-fs-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ui-muted);
    letter-spacing: 0.01em;
}

#ai-chat-page .chat-loading-steps {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0.55rem 0 0;
    border-top: 1px solid var(--ui-border);
    max-height: 9.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    scrollbar-width: thin;
}

#ai-chat-page .chat-loading-bubble:not(.has-trail) .chat-loading-steps {
    display: none;
}

#ai-chat-page .chat-loading-step {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    color: var(--ui-muted);
    font-weight: 400;
}

#ai-chat-page .chat-loading-mark {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-success-tint);
    color: var(--ui-success);
    font-size: var(--ui-fs-2xs);
}

#ai-chat-page .chat-loading-step-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
}

#ai-chat-page .chat-loading-step-chip {
    display: inline-block;
    max-width: 100%;
    padding: 0.05rem 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ai-chat-page #ai-chat-loading-detail.chat-loading-step-chip {
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
}

#ai-chat-page .chat-loading-step-icon {
    line-height: 1;
}

#ai-chat-page .chat-loading-step.is-enter {
    animation: ai-chat-step-in 0.28s ease;
}

#ai-chat-page .chat-loading-head .chat-loading-dots {
    flex-shrink: 0;
    margin-top: 0;
}

#ai-chat-page .chat-loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 10px;
}

#ai-chat-page .chat-loading-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ui-primary);
    opacity: 0.35;
    animation: ai-chat-dot 1.4s infinite ease-in-out;
}

#ai-chat-page .chat-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

#ai-chat-page .chat-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

#ai-chat-page .ai-chat-debug-panel {
    flex-shrink: 0;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem 0.65rem;
}

#ai-chat-page .ai-chat-debug-panel.d-none {
    display: none !important;
}

#ai-chat-page .ai-chat-debug-card {
    border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-primary-rgb), 0.04);
    overflow: hidden;
}

body[data-theme=dark] #ai-chat-page .ai-chat-debug-card {
    border-color: rgba(var(--ui-primary-rgb), 0.22);
    background: rgba(var(--ui-primary-rgb), 0.08);
}

#ai-chat-page .ai-chat-debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.12);
}

body[data-theme=dark] #ai-chat-page .ai-chat-debug-header {
    background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
    border-bottom-color: var(--ui-border);
}

#ai-chat-page .ai-chat-debug-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

#ai-chat-page .ai-chat-debug-title i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

#ai-chat-page .ai-chat-debug-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.12);
}

#ai-chat-page .ai-chat-debug-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

#ai-chat-page .ai-chat-debug-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 30px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#ai-chat-page .ai-chat-debug-btn:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-text);
    border-color: rgba(var(--ui-primary-rgb), 0.25);
}

#ai-chat-page .ai-chat-debug-btn:focus {
    box-shadow: none;
    outline: none;
}

#ai-chat-page .ai-chat-debug-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.2);
}

#ai-chat-page .ai-chat-debug-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem 0.45rem;
}

#ai-chat-page .ai-chat-debug-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--ui-fs-xs);
    line-height: 1.2;
    color: var(--ui-text);
}

#ai-chat-page .ai-chat-debug-chip-label {
    color: var(--ui-muted);
    font-weight: 400;
}

#ai-chat-page .ai-chat-debug-chip-value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#ai-chat-page .ai-chat-debug-chip.is-flag-true {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#ai-chat-page .ai-chat-debug-chip.is-flag-false {
    color: var(--ui-muted);
}

#ai-chat-page .ai-chat-debug-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.75rem 0.65rem;
}

#ai-chat-page .ai-chat-debug-tool {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.22rem 0.5rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.35;
    word-break: break-word;
}

#ai-chat-page .ai-chat-debug-body {
    border-top: 1px solid rgba(var(--ui-primary-rgb), 0.1);
}

body[data-theme=dark] #ai-chat-page .ai-chat-debug-body {
    background: rgba(var(--ui-black-rgb), 0.18);
    border-top-color: var(--ui-border);
}

#ai-chat-page .ai-chat-debug-panel.is-collapsed .ai-chat-debug-body {
    display: none;
}

#ai-chat-page .ai-chat-debug-json {
    margin: 0;
    padding: 0.75rem;
    max-height: 180px;
    overflow: auto;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#ai-chat-page .ai-chat-context-banner {
    flex-shrink: 0;
    padding: 0.75rem 1rem 0;
    max-width: 48rem;
    margin: 0 auto;
    width: 100%;
}

#ai-chat-page .ai-chat-startup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--ui-radius);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
}

#ai-chat-page .ai-chat-startup[hidden] {
    display: none !important;
}

/* --ui-danger is a hex colour, so rgba(var(--ui-danger-rgb), …) was invalid and the border fell back to black */
#ai-chat-page .ai-chat-startup.is-error,
body[data-theme=dark] #ai-chat-page .ai-chat-startup.is-error {
    border-color: color-mix(in srgb, var(--ui-danger) 28%, transparent);
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}
#ai-chat-page .ai-chat-startup.is-error::before {
    content: "\f071";
    flex: none;
    font: 900 1rem/1 "Font Awesome 6 Free", "Font Awesome 5 Free";
    color: var(--ui-danger);
}
#ai-chat-page .ai-chat-startup.is-error .ai-chat-startup__hint {
    color: var(--ui-body);
}

#ai-chat-page .ai-chat-startup__spinner {
    flex: 0 0 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(var(--ui-primary-rgb), 0.2);
    border-top-color: var(--ui-primary);
    animation: ai-chat-startup-spin 0.7s linear infinite;
}

#ai-chat-page .ai-chat-startup.is-error .ai-chat-startup__spinner {
    display: none;
}

#ai-chat-page .ai-chat-startup__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
}

#ai-chat-page .ai-chat-startup__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.3;
}

#ai-chat-page .ai-chat-startup__hint {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
}

#ai-chat-page.is-hermes-starting .ai-chat-composer-card,
#ai-chat-page.is-hermes-starting .ai-chat-hero-chips {
    opacity: 0.55;
    pointer-events: none;
}

#ai-chat-page.is-landing .ai-chat-startup {
    margin-bottom: 1rem;
}

body[data-theme=dark] #ai-chat-page .ai-chat-startup {
    border-color: rgba(var(--ui-primary-rgb), 0.28);
    background: rgba(var(--ui-primary-rgb), 0.12);
}

@media (min-width: 1200px) {
    #ai-chat-page.is-landing .ai-chat-topbar {
    position: absolute;
        top: 0;
        right: 0;
        left: 0;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0.85rem 1.25rem;
        flex-wrap: nowrap;
    }
}

@media (max-width: 576px) {
    #ai-chat-page .ai-chat-action-card__details {
    grid-template-columns: 1fr;
    }

    #ai-chat-page .ai-chat-action-card__footer {
    flex-direction: column;
        align-items: stretch;
    }

    #ai-chat-page .ai-chat-action-card__hint {
    margin-bottom: 0;
    }

    #ai-chat-page .ai-chat-action-card__actions {
    margin-left: 0;
        flex-direction: column;
    }

    #ai-chat-page .ai-chat-action-card__confirm,
    #ai-chat-page .ai-chat-action-card__cancel {
    width: 100%;
    }
}

@media (max-width: 767.98px) {
    #ai-chat-listing-modal .ai-chat-listing-pdp {
    grid-template-columns: minmax(0, 1fr);
    }

    #aiChatCreditsModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }

    #ai-chat-page.is-landing .ai-chat-panel {
    align-items: stretch;
        padding: 1rem 1rem 1.5rem;
    }

    #ai-chat-page.is-landing .ai-chat-panel > :first-child {
    margin-top: 0.75rem;
    }

    #ai-chat-page.is-landing .ai-chat-landing-hero {
    text-align: center;
    }

    #ai-chat-page.is-landing .ai-chat-composer,
    #ai-chat-page.is-landing .ai-chat-hero-chips,
    #ai-chat-page.is-landing .ai-chat-home-tasks {
    width: 100%;
        max-width: none;
    }

    #ai-chat-page .ai-chat-composer {
    padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    #ai-chat-listing-modal .ai-chat-listing-pdp__highlights,
    #ai-chat-listing-modal .ai-chat-listing-modal__attr {
    grid-template-columns: minmax(0, 1fr);
    }

    #ai-chat-page .ai-chat-topbar {
    padding: 0.55rem 0.85rem;
        gap: 0.65rem;
    }

    #ai-chat-page .ai-chat-toolbar-btn {
    min-height: 40px;
        padding: 0.35rem 0.75rem;
    }

    #ai-chat-page .ai-chat-toolbar-btn-label-short {
    display: none;
    }

    #ai-chat-page .ai-chat-debug-toggle-text {
    display: none;
    }

    #ai-chat-page .ai-chat-usage {
    min-width: 72px;
        max-width: 88px;
        padding: 0.32rem 0.55rem 0.38rem;
    }

    #ai-chat-page .ai-chat-usage-label {
    display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-panel,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-usage,
    #ai-chat-page.is-landing.ai-chat-intro-play .cd-ai-hero-logo,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero h2,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-landing-hero p,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer-card,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-composer-card .ai-chat-icon-btn,
    #ai-chat-page.is-landing.ai-chat-intro-play #ai-chat-input,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-send-btn,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chips,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-hero-chip,
    #ai-chat-page.is-landing.ai-chat-intro-play .ai-chat-home-tasks {
    animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }

    #ai-chat-page .ai-chat-input-glow {
    display: none !important;
    }

    #ai-chat-page .ai-chat-aurora,
    #ai-chat-page .ai-chat-aurora-orb {
    animation: none !important;
    }

    #ai-chat-smoke-modal .ai-chat-smoke-progress-fill,
    #ai-chat-smoke-modal .ai-chat-smoke-result.is-new {
    animation: none;
        transition: none;
    }

    #ai-chat-page .ai-chat-skel-avatar::after,
    #ai-chat-page .ai-chat-skel-line::after,
    #ai-chat-page .ai-chat-skel-bubble::after {
    animation: none;
    }

    #ai-chat-page .chat-loading-dots span,
    #ai-chat-page .chat-loading-step.is-enter {
    animation: none !important;
    }
}

@media (max-width: 1199.98px) {
    #ai-chat-page.is-landing .ai-chat-topbar-meta {
    flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }
}

@media (hover: none) {
    #ai-chat-page .ai-chat-feedback-btn {
    opacity: 0.55;
    }

    #ai-chat-page .chat-msg-row.user:active .chat-msg-user-actions,
    #ai-chat-page .chat-msg-row.user:focus-within .chat-msg-user-actions {
    opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@keyframes ai-chat-aurora-shift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
    }

@keyframes ai-chat-aurora-drift-a {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
        50% { transform: translate3d(18%, 14%, 0) scale(1.15); opacity: 1; }
    }

@keyframes ai-chat-aurora-drift-b {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.75; }
        50% { transform: translate3d(-16%, 10%, 0) scale(0.9); opacity: 1; }
    }

@keyframes ai-chat-aurora-drift-c {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
        50% { transform: translate3d(12%, -16%, 0) scale(1.12); opacity: 0.95; }
    }

@keyframes ai-chat-intro-panel-reveal {
        0% {
            opacity: 0.35;
        }
        100% {
            opacity: 1;
        }
    }

@keyframes ai-chat-intro-drop {
        0% {
            opacity: 0;
            transform: translateY(-16px);
            filter: blur(4px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

@keyframes ai-chat-intro-logo-stage {
        0% {
            opacity: 0;
            transform: translateY(32px) scale(0.65);
            filter: blur(10px);
        }
        55% {
            opacity: 1;
            transform: translateY(-6px) scale(1.06);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

@keyframes ai-chat-intro-assistant-hero {
        0% {
            opacity: 0;
            transform: translateY(14px) scale(0.94);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

@keyframes ai-chat-intro-assistant-bloom {
        0% {
            opacity: 0;
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            opacity: 0.75;
            transform: translateX(-50%) scale(1.04);
        }
        100% {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
    }

@keyframes ai-chat-intro-rise {
        0% {
            opacity: 0;
            transform: translateY(26px);
            filter: blur(6px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

@keyframes ai-chat-intro-fade-up {
        0% {
            opacity: 0;
            transform: translateY(14px);
            filter: blur(3px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

@keyframes ai-chat-intro-input-shell {
        0% {
            opacity: 0;
            transform: translateY(22px) scale(0.88);
            filter: blur(5px);
        }
        50% {
            opacity: 1;
            transform: translateY(0) scale(1.02);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

@keyframes ai-chat-intro-slide-left {
        0% {
            opacity: 0;
            transform: translateX(-14px) scale(0.85);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

@keyframes ai-chat-intro-input-field {
        0% {
            opacity: 0;
            transform: scaleX(0.92);
            transform-origin: left center;
        }
        100% {
            opacity: 1;
            transform: scaleX(1);
        }
    }

@keyframes ai-chat-intro-pop-in {
        0% {
            opacity: 0;
            transform: scale(0.4) rotate(-12deg);
        }
        65% {
            opacity: 1;
            transform: scale(1.08) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

@keyframes ai-chat-intro-chip-pop {
        0% {
            opacity: 0;
            transform: translateY(18px) scale(0.88);
            filter: blur(4px);
        }
        70% {
            opacity: 1;
            transform: translateY(-2px) scale(1.02);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

@keyframes ai-chat-cursor-blink {
    50% { opacity: 0; }
}

@keyframes ai-chat-glow-layer-off {
        0%, 92% { opacity: 1; visibility: visible; }
        100% { opacity: 0; visibility: hidden; display: none; }
    }

@keyframes ai-chat-glow-spin {
    from { rotate: 90deg; }
    to { rotate: 450deg; }
}

@keyframes ai-chat-smoke-result-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-chat-skel-shimmer {
    100% { transform: translateX(100%); }
}

@keyframes ai-chat-step-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes ai-chat-dot {
        0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
        40% { opacity: 0.9; transform: translateY(-1px); }
    }

@keyframes ai-chat-startup-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Page: seller/pos/checkout.php (root .ui-page-seller-pos-checkout) ---------- */
#pos-checkout {
    -webkit-tap-highlight-color: transparent;
}

#pos-checkout .pos-touch-target,
#pos-checkout .pos-payment-pill,
#pos-checkout .pos-customer-toggle,
#pos-checkout .pos-clear-cart-btn,
#pos-checkout .pos-complete-btn,
#pos-checkout .pos-header-link {
    touch-action: manipulation;
}

#pos-checkout .pos-search-section {
    position: relative;
    padding: 1.375rem 1.25rem 1.125rem;
    overflow: visible;
}

#pos-checkout .pos-section-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.75rem;
}

#pos-checkout .pos-search-input-wrap {
    background: var(--ui-surface);
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ui-border-strong);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#pos-checkout .pos-search-input-wrap:focus-within {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px var(--ui-primary-tint), 0 1px 3px rgba(var(--ui-ink-rgb), 0.06);
}

body[data-theme=dark] #pos-checkout .pos-search-input-wrap {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #pos-checkout .pos-search-input-wrap:focus-within {
    background: var(--ui-track);
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 3px var(--ui-primary-line);
}

#pos-checkout .pos-search-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 3.5rem;
    padding: 0 0.25rem;
    color: var(--ui-text);
    background: var(--ui-subtle);
    border-right: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #pos-checkout .pos-search-icon-wrap {
    border-right-color: var(--ui-border);
}

#pos-checkout .pos-scan-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    border: 0 !important;
    background-color: transparent !important;
    padding: 0 1rem;
    color: var(--ui-text);
}

#pos-checkout .pos-scan-input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    background-color: transparent !important;
    color: var(--ui-text);
}

#pos-checkout .pos-scan-input::placeholder {
    color: var(--ui-muted);
    opacity: 1;
}

body[data-theme=dark] #pos-checkout .pos-scan-input::placeholder {
    color: var(--ui-faint);
}

#pos-checkout .pos-search-hint {
    margin: 0.75rem 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

#pos-checkout .pos-search-hint--kiosk {
    display: none;
}

body[data-theme=dark] #pos-checkout .pos-search-hint {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent);
}

#pos-checkout .pos-customer-fields {
    padding: 0;
}

#pos-checkout .pos-customer-address-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#pos-checkout .pos-customer-address-line {
    display: grid;
    gap: 0.65rem;
    align-items: end;
}

#pos-checkout .pos-customer-address-line--street {
    grid-template-columns: minmax(0, 1fr);
}

#pos-checkout .pos-customer-address-line--locality {
    grid-template-columns: minmax(0, 1fr);
}

#pos-checkout .pos-customer-field {
    min-width: 0;
}

#pos-checkout .pos-customer-field .form-label {
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

#pos-checkout .pos-customer-address-grid .pos-customer-input.form-select {
    font-size: var(--ui-fs-base);
    font-weight: 400;
    line-height: 1.35;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    text-overflow: ellipsis;
}

#pos-checkout .pos-customer-input,
#pos-checkout .pos-customer-fields .pos-customer-input.form-control,
#pos-checkout .pos-customer-fields .pos-customer-input.form-select,
#pos-checkout .pos-context-modal .form-select {
    min-height: 48px;
    font-size: var(--ui-fs-lg);
    color: var(--ui-text);
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-xs);
    box-shadow: none;
}

#pos-checkout .pos-customer-input:focus,
#pos-checkout .pos-customer-fields .pos-customer-input.form-control:focus,
#pos-checkout .pos-customer-fields .pos-customer-input.form-select:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px var(--ui-primary-tint) !important;
    color: var(--ui-text);
    outline: 0;
}

body[data-theme=dark] #pos-checkout .pos-customer-input,
body[data-theme=dark] #pos-checkout .pos-customer-fields .pos-customer-input.form-control,
body[data-theme=dark] #pos-checkout .pos-customer-fields .pos-customer-input.form-select,
body[data-theme=dark] #pos-checkout .pos-context-modal .form-select {
    color: var(--ui-text);
    background-color: var(--ui-subtle) !important;
    border-color: var(--ui-border-strong) !important;
    color-scheme: dark;
}

body[data-theme=dark] #pos-checkout .pos-customer-input:focus,
body[data-theme=dark] #pos-checkout .pos-customer-fields .pos-customer-input.form-control:focus,
body[data-theme=dark] #pos-checkout .pos-customer-fields .pos-customer-input.form-select:focus,
body[data-theme=dark] #pos-checkout .pos-context-modal .form-select:focus {
    border-color: var(--ui-primary-line) !important;
    box-shadow: 0 0 0 3px var(--ui-primary-line) !important;
    color: var(--ui-text);
}

body[data-theme=dark] #pos-checkout .pos-context-modal .form-label {
    color: color-mix(in srgb, var(--ui-on-primary) 75%, transparent);
}

#pos-checkout .pos-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: min(100%, 16rem);
    padding: 0.35rem 0.65rem 0.35rem 0.55rem;
    border: 1px solid var(--ui-border);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
    text-align: left;
    min-height: 44px;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#pos-checkout .pos-context-chip:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
    color: var(--ui-text);
}

body[data-theme=dark] #pos-checkout .pos-context-chip {
    border-color: var(--ui-border-strong);
    color: color-mix(in srgb, var(--ui-on-primary) 65%, transparent);
}

body[data-theme=dark] #pos-checkout .pos-context-chip:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

#pos-checkout .pos-context-chip--incomplete {
    border-color: var(--ui-primary-line);
}

#pos-checkout .pos-context-chip-value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout .pos-context-chip-value--muted {
    font-weight: 400;
}

#pos-checkout .pos-context-chip-chevron {
    flex-shrink: 0;
    opacity: 0.55;
}

#pos-checkout .pos-shift-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: min(100%, 16rem);
    padding: 0.35rem 0.7rem;
    border: 1px solid transparent;
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
    min-height: 44px;
    touch-action: manipulation;
    cursor: pointer;
    transition: filter 0.2s ease;
}

#pos-checkout .pos-shift-chip:hover {
    filter: brightness(0.97);
}

#pos-checkout .pos-shift-chip--open {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
}

#pos-checkout .pos-shift-chip--closed {
    color: var(--ui-warning-text);
    border-color: var(--ui-warning);
}

body[data-theme=dark] #pos-checkout .pos-shift-chip--open {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

#pos-checkout .pos-shift-chip-icon {
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
}

#pos-checkout .pos-shift-chip-value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout .pos-context-modal-hint {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
    margin-bottom: 1rem;
}

body[data-theme=dark] #pos-checkout .pos-context-modal-hint {
    color: color-mix(in srgb, var(--ui-on-primary) 60%, transparent);
}

#pos-checkout .pos-customer-input--textarea {
    min-height: 88px;
    resize: vertical;
}

#pos-checkout .pos-cart-panel {
    position: sticky;
    top: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#pos-checkout .pos-cart-panel .card-header {
    border-bottom: 1px solid var(--ui-border-strong);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

#pos-checkout .pos-cart-panel .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    min-height: 0;
}

#pos-checkout .pos-cart-count {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1;
    color: var(--ui-muted);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    padding: 0.3rem 0.6rem;
    min-width: 1.75rem;
    text-align: center;
}

#pos-checkout .pos-clear-cart-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0.5rem 0.875rem;
    font-weight: 500;
}

#pos-checkout .pos-cart-body {
    flex: 1 1 auto;
    padding: 1rem 1.25rem;
    min-height: 6rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#pos-checkout .order-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#pos-checkout .order-item-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 0.45rem 0.5rem;
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.75rem;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "image title price remove"
    "image meta qty qty"
    "image location location location";
    gap: 0.1rem 0.5rem;
    align-items: center;
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] #pos-checkout .order-item-card {
    background: var(--ui-subtle);
    box-shadow: none;
}

#pos-checkout .order-item-header,
#pos-checkout .order-item-body {
    display: contents;
}

#pos-checkout .order-item-info {
    display: contents;
}

#pos-checkout .order-item-image-wrapper {
    grid-area: image;
    grid-row: 1 / -1;
    width: 2.5rem;
    height: 2.5rem;
    align-self: center;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    background-color: var(--ui-surface);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #pos-checkout .order-item-image-wrapper {
    background-color: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-checkout .order-item-title {
    grid-area: title;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    min-width: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    align-self: end;
    padding-bottom: 0.05rem;
}

#pos-checkout .order-item-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
    color: var(--ui-muted);
    align-self: start;
}

body[data-theme=dark] #pos-checkout .order-item-meta {
    color: color-mix(in srgb, var(--ui-on-primary) 62%, transparent);
}

#pos-checkout .order-item-details {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

#pos-checkout .order-item-details + .order-item-stock::before {
    content: '·';
    margin: 0 0.4em; /* the spaces in content are dropped in a flex row */
    color: var(--ui-muted);
    flex-shrink: 0;
}

#pos-checkout .order-item-stock {
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    white-space: nowrap;
}

/* Phones: EAN/SKU and stock on their own lines (side by side the EAN/SKU shrank to nothing) */
@media (max-width: 575.98px) {
    #pos-checkout .order-item-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    #pos-checkout .order-item-details {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #pos-checkout .order-item-details + .order-item-stock::before {
        content: none;
    }
}

#pos-checkout .order-item-stock.text-danger {
    color: var(--ui-danger);
}

#pos-checkout .order-item-stock.text-danger strong {
    font-weight: 600;
}

#pos-checkout .order-item-location {
    grid-area: location;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding-top: 0.15rem;
}

#pos-checkout .order-item-location-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    white-space: nowrap;
}

#pos-checkout .order-item-location-label i {
    color: var(--ui-primary);
    margin-right: 0.15rem;
}

body[data-theme=dark] #pos-checkout .order-item-location-label {
    color: color-mix(in srgb, var(--ui-on-primary) 62%, transparent);
}

#pos-checkout .order-item-location .pos-stock-location-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

#pos-checkout .order-item-location-empty {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pos-checkout .order-item-remove {
    grid-area: remove;
    align-self: center;
    justify-self: end;
    min-width: 1.75rem;
    min-height: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1;
    padding: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#pos-checkout .order-item-remove:hover {
    background: rgba(var(--ui-black-rgb), 0.04);
    color: var(--ui-text);
}

body[data-theme=dark] #pos-checkout .order-item-remove:hover {
    background: var(--ui-track);
}

#pos-checkout .order-item-remove:active {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#pos-checkout .order-item-quantity {
    grid-area: qty;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
    justify-self: end;
    align-self: start;
    padding-top: 0.05rem;
}

#pos-checkout .order-item-quantity-label {
    display: none;
}

#pos-checkout .order-item-price {
    grid-area: price;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    white-space: nowrap;
    justify-self: end;
    align-self: end;
    padding: 0 0.15rem 0.05rem 0;
    color: var(--ui-text);
}

#pos-checkout .order-item-price.pos-editable-price {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

#pos-checkout .pos-price-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#pos-checkout .pos-price-edit-btn:hover {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

#pos-checkout .order-item-card.pos-price-overridden .pos-price-display-value {
    color: var(--ui-series-2);
}

#pos-checkout .order-item-card.pos-price-overridden .pos-price-display-value::after {
    content: '*';
}

#posPriceEditModal .pos-price-edit-dialog {
    max-width: 380px;
}

#posPriceEditModal .pos-price-edit-content {
    border: 0;
    overflow: hidden;
}

#posPriceEditModal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#posPriceEditModal .pos-price-edit-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-base);
    flex-shrink: 0;
}

body[data-theme=dark] #posPriceEditModal .pos-price-edit-title-icon {
    background: var(--ui-primary-line);
}

#posPriceEditModal .pos-price-edit-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.6rem 0.75rem;
    margin-bottom: 1.25rem;
}

body[data-theme=dark] #posPriceEditModal .pos-price-edit-product {
    border-color: var(--ui-border-strong);
}

#posPriceEditModal .pos-price-edit-product-image {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    background-color: var(--ui-surface);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #posPriceEditModal .pos-price-edit-product-image {
    background-color: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posPriceEditModal .pos-price-edit-product-info {
    min-width: 0;
}

#posPriceEditModal .pos-price-edit-product-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

#posPriceEditModal .pos-price-edit-product-catalog {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

#posPriceEditModal .bootstrap-touchspin .pos-price-edit-input {
    text-align: center;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

#posPriceEditModal .pos-price-edit-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    padding: 0.3rem 0.55rem;
    margin-left: -0.55rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-muted);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

#posPriceEditModal .pos-price-edit-reset-btn i {
    font-size: var(--ui-fs-xs);
    transition: transform 0.25s ease;
}

#posPriceEditModal .pos-price-edit-reset-btn:hover {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
    color: var(--ui-primary);
}

#posPriceEditModal .pos-price-edit-reset-btn:hover i {
    transform: rotate(-90deg);
}

#posPriceEditModal .pos-price-edit-reset-btn:active {
    background: var(--ui-primary-tint);
}

#posPriceEditModal .pos-price-edit-reset-btn:focus-visible {
    outline: none;
    color: var(--ui-primary);
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line);
}

body[data-theme=dark] #posPriceEditModal .pos-price-edit-reset-btn:hover {
    background: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

#pos-checkout .bootstrap-touchspin {
    max-width: 6.5rem;
}

#pos-checkout .bootstrap-touchspin .input-group-btn-vertical > .btn,
#pos-checkout .bootstrap-touchspin .btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    font-size: var(--ui-fs-md);
    border-radius: var(--ui-radius-xs);
}

#pos-checkout .bootstrap-touchspin .form-control {
    min-height: 2.25rem;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    text-align: center;
    padding: 0.1rem 0.25rem;
}

#pos-checkout .pos-empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 2rem 1.25rem;
    gap: 0.85rem;
}

#pos-checkout .pos-empty-cart-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

#pos-checkout .pos-empty-cart-icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary-soft);
}

body[data-theme=dark] #pos-checkout .pos-empty-cart-icon-wrap {
    background: var(--ui-primary-line);
    box-shadow: 0 0 0 1px var(--ui-primary-tint);
}

#pos-checkout .pos-empty-cart-icon-wrap i {
    opacity: 1;
    margin: 0;
}

#pos-checkout .pos-empty-cart-copy {
    max-width: 18rem;
}

#pos-checkout .pos-empty-cart-title {
    font-weight: 500;
    color: var(--ui-body);
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

body[data-theme=dark] #pos-checkout .pos-empty-cart-title {
    color: var(--ui-text);
}

#pos-checkout .pos-empty-cart-hint {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    line-height: 1.5;
    margin: 0;
}

#pos-checkout .pos-empty-cart-tips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

#pos-checkout .pos-empty-cart-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-body);
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-tint);
}

body[data-theme=dark] #pos-checkout .pos-empty-cart-tip {
    color: color-mix(in srgb, var(--ui-on-primary) 90%, transparent);
    background: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

#pos-checkout .pos-empty-cart-tip i {
    font-size: var(--ui-fs-xs);
    color: var(--ui-primary);
    opacity: 1;
}

#pos-checkout .pos-cart-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--ui-border-strong);
    padding: 1.125rem 1.25rem 1.25rem;
    background: var(--ui-surface);
}

#pos-checkout .pos-cart-footer--compact {
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#pos-checkout .pos-cart-footer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

#pos-checkout .pos-cart-footer--compact .pos-total-label {
    font-weight: 500;
    color: var(--ui-text);
}

#pos-checkout .pos-cart-footer-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
}

#pos-checkout .pos-cart-footer-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: auto;
    max-width: none;
}

#pos-checkout .pos-cart-footer-actions .pos-exchange-btn {
    flex: 2 1 0;
    min-width: 0;
    margin-top: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout .pos-cart-footer-actions .pos-exchange-btn i {
    flex-shrink: 0;
    margin-right: 0.35rem !important;
}

#pos-checkout .pos-cart-footer-actions .pos-complete-btn {
    font-size: var(--ui-fs-lg);
    flex: 3 1 0;
    min-width: 0;
    margin-top: 0;
    font-weight: 500;
}

#pos-checkout .pos-cart-footer-actions .pos-exchange-btn.d-none + .pos-complete-btn {
    flex: 1 1 100%;
}

body[data-theme=dark] #pos-checkout .pos-cart-footer {
    background: var(--ui-surface);
}

#pos-checkout .pos-cart-discount-wrap {
    margin-bottom: 0.85rem;
}

#pos-checkout .pos-cart-discount-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    margin-bottom: 0.4rem;
}

#pos-checkout .pos-cart-discount-controls {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

#pos-checkout .pos-cart-discount-type {
    display: flex;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
}

#pos-checkout .pos-cart-discount-type-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem 0.65rem;
    border: 0;
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

body[data-theme=dark] #pos-checkout .pos-cart-discount-type-btn {
    background: var(--ui-subtle);
    color: var(--ui-text);
}

#pos-checkout .pos-cart-discount-type-btn + .pos-cart-discount-type-btn {
    border-left: 1px solid var(--ui-border-strong);
}

#pos-checkout .pos-cart-discount-type-btn.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] #pos-checkout .pos-cart-discount-type-btn.active {
    background: var(--ui-primary-line);
    color: var(--ui-info);
}

#pos-checkout .pos-cart-discount-input {
    flex: 1;
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#pos-checkout .pos-cart-totals-breakdown {
    margin-bottom: 1rem;
}

#pos-checkout .pos-cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
}

#pos-checkout .pos-cart-totals-row--discount {
    color: var(--ui-success);
}

#pos-checkout .pos-cart-totals-row--total {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ui-border-strong);
    margin-bottom: 0;
}

body[data-theme=dark] #pos-checkout .pos-cart-totals-row--total {
    border-top-color: var(--ui-border);
}

#pos-checkout .pos-total-amount {
    font-weight: 600;
    color: var(--ui-body);
    line-height: 1;
}

body[data-theme=dark] #pos-checkout .pos-total-amount {
    color: var(--ui-text);
}

#pos-checkout .pos-payment-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.625rem;
    margin-bottom: 1rem;
}

#pos-checkout .pos-payment-pill {
    min-height: 56px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    user-select: none;
}

#pos-checkout .pos-payment-pill i {
    font-size: var(--ui-fs-lg);
}

#pos-checkout .pos-payment-pill:active {
    transform: scale(0.97);
}

#pos-checkout .pos-payment-pill.active {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
    color: var(--ui-success);
    box-shadow: inset 0 0 0 1px var(--ui-success-tint);
}

#pos-checkout .pos-complete-btn {
    font-size: var(--ui-fs-lg);
    min-height: 56px;
    font-weight: 500;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#pos-checkout .pos-complete-btn:active:not(:disabled) {
    transform: scale(0.99);
}

#pos-checkout .pos-cart-totals-row--total .pos-total-amount {
    font-size: var(--ui-fs-kpi);
}

.pos-product-autocomplete-menu {
    max-height: min(50vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1060 !important;
    margin-top: 0;
    padding: 0.2rem 0;
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-hover);
}

body[data-theme=dark] .pos-product-autocomplete-menu {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-pop);
}

.pos-product-autocomplete-menu .ui-menu-item {
    margin: 0;
}

.pos-product-autocomplete-menu .pos-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem !important;
    min-height: 44px;
    border-bottom: 1px solid var(--ui-border-strong);
}

.pos-product-autocomplete-menu .ui-menu-item:last-child .pos-autocomplete-item {
    border-bottom: 0;
}

.pos-product-autocomplete-menu .ui-menu-item-wrapper {
    padding: 0 !important;
    border: 0;
}

.pos-product-autocomplete-menu .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    background: transparent !important;
    border: 0;
    color: inherit;
}

.pos-product-autocomplete-menu .ui-menu-item-wrapper.ui-state-active .pos-autocomplete-item {
    background: var(--ui-primary-soft);
}

body[data-theme=dark] .pos-product-autocomplete-menu .ui-menu-item-wrapper.ui-state-active .pos-autocomplete-item {
    background: var(--ui-primary-line);
}

.pos-product-autocomplete-menu .pos-autocomplete-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-theme=dark] .pos-product-autocomplete-menu .pos-autocomplete-thumb {
    background: var(--ui-surface);
    border-color: rgba(var(--ui-black-rgb), 0.12);
}

.pos-product-autocomplete-menu .pos-autocomplete-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--ui-surface);
}

.pos-product-autocomplete-menu .pos-autocomplete-info {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-product-autocomplete-menu .pos-autocomplete-title {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.15rem;
    color: var(--ui-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-product-autocomplete-menu .pos-autocomplete-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

.pos-product-autocomplete-menu .pos-autocomplete-ean,
.pos-product-autocomplete-menu .pos-autocomplete-sku,
.pos-product-autocomplete-menu .pos-autocomplete-identifier {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.01em;
}

.pos-product-autocomplete-menu .pos-autocomplete-meta-sep {
    color: var(--ui-muted);
}

.pos-product-autocomplete-menu .pos-autocomplete-stock {
    flex: 0 0 100%;
    font-weight: 500;
    white-space: nowrap;
}

.pos-product-autocomplete-menu .pos-autocomplete-stock--empty {
    color: var(--ui-danger);
}

.pos-product-autocomplete-menu .pos-autocomplete-stock--ok {
    color: var(--ui-success);
}

#posSaleCompleteModal .pos-sale-complete-dialog {
    max-width: 420px;
}

#posSaleCompleteModal .pos-sale-complete-content {
    border: 0;
    overflow: hidden;
}

#posSaleCompleteModal .pos-sale-complete-body {
    padding: 2rem 1.5rem 1.5rem;
}

#posSaleCompleteModal .pos-sale-complete-hero {
    margin-bottom: 0.25rem;
}

#posSaleCompleteModal .pos-sale-complete-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ui-success-tint);
    color: var(--ui-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
    box-shadow: 0 0 0 6px var(--ui-success-tint);
}

#posSaleCompleteModal .pos-sale-complete-title {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.5rem;
}

#posSaleCompleteModal .pos-sale-complete-subtitle {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 0.25rem;
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-subtitle {
    color: color-mix(in srgb, var(--ui-on-primary) 62%, transparent);
}

#posSaleCompleteModal .pos-sale-summary {
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.875rem 1rem;
    margin: 0;
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-summary {
    border-color: var(--ui-border-strong);
}

#posSaleCompleteModal .pos-sale-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
}

#posSaleCompleteModal .pos-sale-summary-row + .pos-sale-summary-row {
    border-top: 1px solid var(--ui-border);
}

#posSaleCompleteModal .pos-sale-summary-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 0;
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-summary-label {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent);
}

#posSaleCompleteModal .pos-sale-summary-value {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    margin: 0;
    text-align: right;
}

#posSaleCompleteModal .pos-sale-summary-value-total {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-body);
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-summary-value-total {
    color: var(--ui-text);
}

#posSaleCompleteModal .pos-sale-complete-footer {
    border-top: 1px solid var(--ui-border-strong);
    padding: 1rem 1.5rem 1.5rem;
    gap: 0.625rem;
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-footer {
    border-top-color: var(--ui-border);
}

#posTerminalModal .pos-terminal-dialog {
    max-width: 400px;
}

#posTerminalModal .pos-terminal-content {
    border: 0;
    overflow: hidden;
}

#posTerminalModal .pos-terminal-body {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

#posTerminalModal .pos-terminal-hero {
    margin-bottom: 1.25rem;
}

#posTerminalModal .pos-terminal-icon-wrap {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
}

#posTerminalModal .pos-terminal-pulse {
    position: absolute;
    inset: 0;
    border-radius: var(--ui-radius);
    border: 2px solid var(--ui-primary-line);
    animation: pos-terminal-pulse 2s ease-out infinite;
    pointer-events: none;
}

#posTerminalModal .pos-terminal-pulse::before {
    content: '';
    position: absolute;
    inset: -0.35rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-primary-line);
    animation: pos-terminal-pulse 2s ease-out infinite 0.35s;
}

#posTerminalModal .pos-terminal-logo-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    padding: 0.75rem;
    box-shadow: 0 4px 16px rgba(var(--ui-ink-rgb), 0.08);
}

body[data-theme=dark] #posTerminalModal .pos-terminal-logo-box {
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-pop);
}

#posTerminalModal .pos-terminal-provider-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#posTerminalModal .pos-terminal-icon-fallback {
    font-size: var(--ui-fs-kpi);
    color: var(--ui-primary);
}

#posTerminalModal .pos-terminal-title {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.45rem;
}

#posTerminalModal .pos-terminal-subtitle {
    font-size: var(--ui-fs-base);
    line-height: 1.55;
    color: var(--ui-muted);
    margin: 0 auto;
    max-width: 18rem;
}

body[data-theme=dark] #posTerminalModal .pos-terminal-subtitle {
    color: color-mix(in srgb, var(--ui-on-primary) 62%, transparent);
}

#posTerminalModal .pos-terminal-subtitle.is-warning {
    color: var(--ui-warning-text);
}

body[data-theme=dark] #posTerminalModal .pos-terminal-subtitle.is-warning {
    color: var(--ui-warning);
}

#posTerminalModal .pos-terminal-amount-card {
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 1rem 1.125rem;
    margin-bottom: 0.875rem;
}

body[data-theme=dark] #posTerminalModal .pos-terminal-amount-card {
    border-color: var(--ui-border-strong);
}

#posTerminalModal .pos-terminal-amount-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.25rem;
}

body[data-theme=dark] #posTerminalModal .pos-terminal-amount-label {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent);
}

#posTerminalModal .pos-terminal-amount-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-text);
}

#posTerminalModal .pos-terminal-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    background: var(--ui-primary-soft);
    border: 1px solid var(--ui-primary-tint);
    border-radius: var(--ui-radius);
    padding: 0.35rem 0.75rem;
    margin-bottom: 1.25rem;
}

body[data-theme=dark] #posTerminalModal .pos-terminal-meta {
    color: color-mix(in srgb, var(--ui-on-primary) 70%, transparent);
    background: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
}

#posTerminalModal .pos-terminal-meta i {
    font-size: var(--ui-fs-xs);
    opacity: 0.8;
}

#posTerminalModal .pos-terminal-meta-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

#posTerminalModal .pos-terminal-cancel-btn {
    min-height: 48px;
    font-weight: 500;
    border-radius: var(--ui-radius-xs);
}

#posSaleCompleteModal .pos-sale-complete-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-weight: 500;
}

#posSaleCompleteModal .pos-sale-complete-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    width: 100%;
}

#posSaleCompleteModal .pos-sale-complete-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-body);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#posSaleCompleteModal .pos-sale-complete-action-btn:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-action-btn {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-action-btn:hover {
    background: var(--ui-track);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

#posSaleCompleteModal .pos-sale-complete-action-btn i {
    font-size: var(--ui-fs-base);
    opacity: 0.85;
}

#posSaleCompleteModal .pos-sale-complete-receipt-actions {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    min-width: 0;
}

#posSaleCompleteModal .pos-sale-complete-action-btn--grow {
    flex: 1;
    min-width: 0;
}

#posSaleCompleteModal .pos-sale-complete-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-body);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#posSaleCompleteModal .pos-sale-complete-action-icon-btn:hover,
#posSaleCompleteModal .pos-sale-complete-action-icon-btn:focus {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-action-icon-btn {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-action-icon-btn:hover,
body[data-theme=dark] #posSaleCompleteModal .pos-sale-complete-action-icon-btn:focus {
    background: var(--ui-track);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

#posSaleCompleteModal .pos-sale-complete-action-icon-btn i {
    font-size: var(--ui-fs-base);
    opacity: 0.9;
}

.ui-page-seller-pos-checkout .swal2-popup .btn {
    min-height: 48px;
    min-width: 5.5rem;
}

body[data-kiosk="true"] #pos-checkout.pos-checkout--register {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body[data-kiosk="true"] #pos-checkout.pos-checkout--register .container-fluid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100dvh;
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.65rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
}

.wrapper:has(#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk)) {
    height: 100dvh;
    height: 100vh;
    max-height: 100dvh;
    max-height: 100vh;
    overflow: hidden;
}

.wrapper:has(#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk)) > .main {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wrapper:has(#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk)) > .main > #shell-content-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wrapper:has(#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk)) #shell-content-root > .content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .container-fluid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0.75rem;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .page-header,
#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-actions {
    flex-shrink: 0;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-header {
    margin-bottom: 1.5rem;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-header-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-actions {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto;
    align-self: flex-start;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register .pos-register-layout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar {
    flex: 0 0 auto;
    width: 13.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border-right: 0;
    align-self: stretch;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ui-border-strong);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-sidebar-card .card-header {
    border-bottom-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-sidebar-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 1.15rem 1.15rem;
}

#pos-checkout.pos-checkout--register .pos-register-session {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 0 0 auto;
}

#pos-checkout.pos-checkout--register .pos-register-session-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem 0.75rem;
    text-align: center;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-setup {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-checkout.pos-checkout--register .pos-register-session-setup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.06);
    font-size: var(--ui-fs-lg);
    margin-bottom: 0.1rem;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-setup-icon {
    background: rgba(var(--ui-primary-rgb), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}

#pos-checkout.pos-checkout--register .pos-register-session-setup-title {
    margin: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-setup-title {
    color: var(--ui-text);
}

#pos-checkout.pos-checkout--register .pos-register-session-setup-hint {
    margin: 0;
    max-width: 11.5rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-session-setup-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.15rem;
    padding: 0.55rem 1rem;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
}

#pos-checkout.pos-checkout--register .pos-register-session-row--placeholder {
    cursor: default;
    border-style: dashed;
    opacity: 1;
}

#pos-checkout.pos-checkout--register .pos-register-session-row--placeholder:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface);
    box-shadow: none;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-row--placeholder:hover {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--placeholder .pos-register-session-icon {
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--placeholder .pos-register-session-title,
#pos-checkout.pos-checkout--register .pos-register-session-row--placeholder .pos-register-session-meta {
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-session-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    max-width: none;
    padding: 0.7rem 0.75rem;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    text-align: left;
    min-height: 44px;
    touch-action: manipulation;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#pos-checkout.pos-checkout--register .pos-register-session-row:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ui-primary-line);
}

#pos-checkout.pos-checkout--register .pos-register-session-row.pos-context-chip,
#pos-checkout.pos-checkout--register .pos-register-session-row.pos-shift-chip {
    max-width: none;
    filter: none;
}

#pos-checkout.pos-checkout--register .pos-register-session-row--context:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-row {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--context.pos-context-chip--incomplete {
    border-color: var(--ui-primary-line);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--shift.pos-shift-chip--open {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--shift.pos-shift-chip--open:hover {
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
    box-shadow: 0 2px 8px var(--ui-success-tint);
    filter: none;
}

#pos-checkout.pos-checkout--register .pos-register-session-row--shift.pos-shift-chip--closed {
    border-color: var(--ui-warning);
    background: var(--ui-warning-tint);
}

#pos-checkout.pos-checkout--register .pos-register-session-row--shift.pos-shift-chip--closed:hover {
    background: var(--ui-warning-tint);
    border-color: rgba(var(--ui-warning-rgb), 0.5);
    box-shadow: 0 2px 8px var(--ui-warning-tint);
    filter: none;
}

#pos-checkout.pos-checkout--register .pos-register-session-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-sm);
}

#pos-checkout.pos-checkout--register .pos-register-session-icon--primary {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-icon--shift {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--closed .pos-register-session-icon--shift {
    background: var(--ui-warning-tint);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-icon--shift {
    color: var(--ui-success-text);
}

#pos-checkout.pos-checkout--register .pos-register-session-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

#pos-checkout.pos-checkout--register .pos-register-session-title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout.pos-checkout--register .pos-register-session-title--muted,
#pos-checkout.pos-checkout--register .pos-context-chip-value--muted {
    font-weight: 400;
}

#pos-checkout.pos-checkout--register .pos-register-session-meta {
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-session-meta {
    color: color-mix(in srgb, var(--ui-on-primary) 50%, transparent);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-title {
    color: var(--ui-success-text);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-meta {
    color: rgba(var(--ui-success-rgb), 0.78);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--closed .pos-register-session-title {
    color: var(--ui-warning-text);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-title {
    color: var(--ui-success-text);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-meta {
    color: rgba(var(--ui-success-rgb), 0.75);
}

#pos-checkout.pos-checkout--register .pos-register-session-chevron {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    opacity: 0.45;
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-session-trail {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.35rem;
}

#pos-checkout.pos-checkout--register .pos-register-session-action {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

#pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-action {
    color: var(--ui-success-text);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-action {
    color: var(--ui-success-text);
}

#pos-checkout.pos-checkout--register .pos-shift-chip--open .pos-register-session-chevron {
    color: var(--ui-success-text);
    opacity: 0.65;
}

#pos-checkout.pos-checkout--register .pos-shift-chip--closed .pos-register-session-chevron {
    color: var(--ui-warning-text);
    opacity: 0.65;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sales {
    border-top-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex: 0 0 auto;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-title {
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-all {
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
    text-decoration: none;
    white-space: nowrap;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-all:hover {
    color: var(--ui-primary);
    text-decoration: none;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: 0;
    overflow: visible;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sales-items {
    border-color: transparent;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-items > li {
    border-bottom: 0;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale {
    background: rgba(var(--ui-black-rgb), 0.02);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    text-align: left;
    min-height: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale:hover {
    background: var(--ui-row-hover);
    border-color: var(--ui-primary-tint);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale:focus-visible {
    outline: 2px solid var(--ui-primary-line);
    outline-offset: 1px;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale:hover {
    background: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale--refunded {
    opacity: 0.72;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-order {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-amount {
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: var(--ui-fs-xs);
    line-height: 1.25;
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-method-dot {
    flex-shrink: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    opacity: 0.45;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale--cash .pos-register-recent-sale-method-dot {
    background: var(--ui-success);
    opacity: 1;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale--card .pos-register-recent-sale-method-dot {
    background: var(--ui-primary);
    opacity: 1;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale--split .pos-register-recent-sale-method-dot {
    background: var(--ui-bronze);
    opacity: 1;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-badge {
    display: inline;
    padding: 0;
    font-weight: 500;
    line-height: inherit;
    white-space: nowrap;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-badge--refunded {
    color: var(--ui-danger);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale-badge--refunded {
    color: var(--ui-danger-soft);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    padding: 0.15rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-black-rgb), 0.04);
    border: 1px solid var(--ui-border);
    cursor: default;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale-actions {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn {
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
    font-size: var(--ui-fs-sm);
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn {
    background: var(--ui-track);
    box-shadow: none;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn:hover:not(:disabled) {
    background: var(--ui-surface);
    color: var(--ui-primary);
    box-shadow: 0 1px 4px var(--ui-primary-tint);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn:hover:not(:disabled) {
    background: var(--ui-track);
    color: var(--ui-info);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn:active:not(:disabled) {
    transform: scale(0.96);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-exchange-btn:not(:disabled) {
    color: var(--ui-text);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn i {
    opacity: 1;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sale-action-btn span {
    display: none;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-loading,
#pos-checkout.pos-checkout--register .pos-register-recent-sales-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 6rem;
    padding: 0.75rem 0.5rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
    text-align: center;
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 7.5rem;
    padding: 1.15rem 0.75rem;
    text-align: center;
    gap: 0.45rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sales-empty {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.06);
    font-size: var(--ui-fs-lg);
    margin-bottom: 0.1rem;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sales-empty-icon {
    background: rgba(var(--ui-primary-rgb), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-empty-title {
    margin: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-recent-sales-empty-title {
    color: var(--ui-text);
}

#pos-checkout.pos-checkout--register .pos-register-recent-sales-empty-hint {
    margin: 0;
    max-width: 11.5rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-sidebar-foot {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border-strong);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-sidebar-foot {
    border-top-color: var(--ui-border);
}

#pos-checkout.pos-checkout--register .pos-register-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#pos-checkout.pos-checkout--register .pos-register-main > .pos-checkout-grid {
    flex: 1 1 auto;
    min-height: 0;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.5rem;
    border-radius: var(--ui-radius-xs);
    padding: 0.45rem 0.4rem;
    margin: 0;
    min-height: 44px;
    white-space: normal;
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit i {
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    line-height: 1.35;
    color: inherit;
}

#pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit:hover {
    color: var(--ui-text);
    background-color: rgba(var(--ui-black-rgb), 0.04);
}

#pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit:hover i {
    color: var(--ui-text);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit:hover {
    background-color: var(--ui-subtle);
}

#pos-checkout.pos-checkout--register .pos-checkout-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-direction: column;
}

#pos-checkout.pos-checkout--register .pos-checkout-grid > .pos-register-cart-col {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    padding: 0;
}

#pos-checkout.pos-checkout--register .pos-register-cart-col .pos-cart-panel {
    flex: 1 1 auto;
    min-height: 0;
}

#pos-checkout.pos-checkout--register .pos-cart-panel {
    position: static;
    top: auto;
    max-height: none;
    height: 100%;
    margin-bottom: 0;
}

#pos-checkout.pos-checkout--register .pos-cart-panel .card-header {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

#pos-checkout.pos-checkout--register .pos-cart-header--with-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

#pos-checkout.pos-checkout--register .pos-cart-header-start {
    flex: 0 0 auto;
}

#pos-checkout.pos-checkout--register .pos-cart-header-start .card-title {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    white-space: nowrap;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-search-section {
    padding: 0;
    overflow: visible;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-section-label,
#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-search-hint {
    display: none;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-search-input-wrap {
    border-radius: var(--ui-radius-sm);
    box-shadow: none;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-search-icon-wrap {
    min-width: 2.75rem;
    padding: 0;
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-search-icon {
    font-size: var(--ui-fs-lg);
}

#pos-checkout.pos-checkout--register .pos-cart-header-search .pos-scan-input {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    padding: 0 0.75rem;
}

#pos-checkout.pos-checkout--register .pos-cart-header-end {
    flex: 0 0 auto;
}

#pos-checkout.pos-checkout--register .pos-cart-header--with-search .pos-clear-cart-btn {
    min-height: 44px;
    min-width: auto;
    padding: 0.4rem 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

#pos-checkout.pos-checkout--register .pos-cart-panel .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#pos-checkout.pos-checkout--register .pos-cart-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.65rem 0.9rem;
    display: flex;
    flex-direction: column;
}

#pos-checkout.pos-checkout--register .pos-empty-cart {
    padding: 1.5rem 1rem;
    gap: 0.75rem;
}

#pos-checkout.pos-checkout--register .pos-empty-cart-icon-wrap {
    width: 4rem;
    height: 4rem;
}

#pos-checkout.pos-checkout--register .pos-empty-cart-icon-wrap i {
    font-size: var(--ui-fs-kpi);
}

#pos-checkout.pos-checkout--register .pos-empty-cart-title {
    font-size: var(--ui-fs-lg);
}

#pos-checkout.pos-checkout--register .pos-cart-footer {
    flex-shrink: 0;
    padding: 0.7rem 0.9rem 0.8rem;
    box-shadow: 0 -3px 10px rgba(var(--ui-black-rgb), 0.05);
}

body[data-theme=dark] #pos-checkout.pos-checkout--register .pos-cart-footer {
    box-shadow: 0 -3px 12px rgba(var(--ui-black-rgb), 0.28);
}

#pos-checkout.pos-checkout--register .pos-search-hint:not(.pos-search-hint--kiosk) {
    display: none;
}

#pos-checkout.pos-checkout--register .pos-search-hint--kiosk {
    display: block;
}

#pos-checkout.pos-checkout--register .pos-scan-input {
    min-height: 48px;
}

#pos-checkout.pos-checkout--register .pos-search-icon-wrap {
    min-width: 3rem;
}

#pos-checkout.pos-checkout--register .pos-cart-discount-wrap {
    margin-bottom: 0.5rem;
}

#pos-checkout.pos-checkout--register .pos-cart-totals-breakdown {
    margin-bottom: 0.55rem;
}

#pos-checkout.pos-checkout--register .pos-cart-totals-row {
    margin-bottom: 0.2rem;
}

#pos-checkout.pos-checkout--register .pos-total-amount,
#pos-checkout.pos-checkout--register .pos-cart-totals-row--total .pos-total-amount {
    font-size: 1.75rem !important;
}

#pos-checkout.pos-checkout--register .pos-cart-footer--compact .pos-total-label {
    font-size: var(--ui-fs-lg);
}

#pos-checkout.pos-checkout--register .pos-payment-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

#pos-checkout.pos-checkout--register .pos-payment-pill {
    min-height: 48px;
    padding: 0.4rem 0.35rem;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
}

#pos-checkout.pos-checkout--register .pos-payment-pill i {
    font-size: var(--ui-fs-md);
}

#pos-checkout.pos-checkout--register .pos-complete-btn {
    font-size: var(--ui-fs-lg);
    min-height: 48px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

#pos-checkout.pos-checkout--register .order-item-card {
    padding: 0.5rem 0.55rem;
    gap: 0.15rem 0.45rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.85rem;
}

#pos-checkout.pos-checkout--register .order-item-image-wrapper {
    width: 2.5rem;
    height: 2.5rem;
}

#pos-checkout.pos-checkout--register .order-item-title {
    font-size: var(--ui-fs-md);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#pos-checkout.pos-checkout--register .order-item-meta {
    font-size: var(--ui-fs-sm);
}

#pos-checkout.pos-checkout--register .order-item-price {
    font-size: var(--ui-fs-md);
}

#pos-checkout.pos-checkout--register .order-item-remove {
    min-width: 1.85rem;
    min-height: 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    font-size: var(--ui-fs-xs);
}

#pos-checkout.pos-checkout--register .bootstrap-touchspin {
    max-width: 6.75rem;
}

#pos-checkout.pos-checkout--register .bootstrap-touchspin .input-group-btn-vertical > .btn,
#pos-checkout.pos-checkout--register .bootstrap-touchspin .btn,
#pos-checkout.pos-checkout--register .bootstrap-touchspin .form-control {
    min-width: 2.25rem;
    min-height: 2.25rem;
    font-size: var(--ui-fs-md);
}

#pos-checkout .pos-register-exit-link {
    font-size: var(--ui-fs-sm);
    font-weight: 400;
    color: var(--ui-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    margin: -0.35rem -0.5rem -0.35rem 0;
    border-radius: var(--ui-radius-xs);
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

#pos-checkout .pos-register-exit-link i {
    font-size: var(--ui-fs-xs);
    opacity: 0.75;
}

#pos-checkout .pos-register-exit-link:hover {
    color: var(--ui-text);
    background-color: rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] #pos-checkout .pos-register-exit-link:hover {
    color: var(--ui-text);
    background-color: var(--ui-subtle);
}

#posCheckoutWizardModal #posWizardPayCash {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary {
    background: var(--ui-subtle);
    padding: 0.7rem 0.8rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    transition: background 0.2s ease, border-color 0.2s ease;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-pending {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-short {
    background: var(--ui-warning-tint);
    border-color: var(--ui-warning);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-ready {
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary-main {
    text-align: center;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-pending .pos-cash-tender-inline-meta {
    display: none;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-hero-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.2rem;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-hero-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-short .pos-cash-tender-hero-value {
    color: var(--ui-warning-text);
    font-size: var(--ui-fs-kpi);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-summary.is-ready .pos-cash-tender-hero-value {
    color: var(--ui-success);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-inline-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-inline-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-inline-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-inline-sep {
    opacity: 0.45;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-hero-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    text-align: center;
    color: var(--ui-muted);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input-wrap {
    margin-bottom: 0;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input-group {
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(var(--ui-black-rgb), 0.06);
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input-group {
    box-shadow: 0 0 0 1px rgba(var(--ui-white-rgb), 0.1);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input-group .input-group-text {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    min-width: 2.5rem;
    padding: 0.35rem 0.55rem;
    justify-content: center;
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input-group .input-group-text {
    background: var(--ui-track);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    min-height: 44px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-color: var(--ui-border-strong);
    -moz-appearance: textfield;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input::placeholder {
    color: var(--ui-faint);
    font-size: var(--ui-fs-base);
    font-weight: 400;
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input {
    border-color: var(--ui-border-strong);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input::-webkit-outer-spin-button,
#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-quick .btn {
    min-height: 36px;
    padding: 0.25rem 0.65rem;
    font-weight: 500;
    border-radius: var(--ui-radius);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-quick .btn-light {
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-quick .btn-light {
    border-color: var(--ui-border-strong);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-denoms {
    padding: 0.6rem 0.65rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-denom-section + .pos-cash-tender-denom-section {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--ui-border);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-section-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.4rem;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-section-label i {
    font-size: var(--ui-fs-2xs);
    opacity: 0.7;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn {
    min-height: 42px;
    padding: 0.35rem 0.25rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-xs);
    touch-action: manipulation;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    font-variant-numeric: tabular-nums;
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill,
#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin {
    font-size: var(--ui-fs-sm);
}

#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill:hover,
#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill:active,
#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin:hover,
#posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin:active {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
    color: var(--ui-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px var(--ui-primary-tint);
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill,
body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin {
    background: var(--ui-track);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
    box-shadow: none;
}

body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill:hover,
body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--bill:active,
body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin:hover,
body[data-theme=dark] #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-btn--coin:active {
    background: var(--ui-primary-line);
    border-color: rgba(var(--ui-info-rgb), 0.45);
    color: var(--ui-info);
}

#posCheckoutWizardModal #posWizardPayCash #posCashTenderConfirmBtn:not(:disabled) {
    min-width: 11rem;
}

#pos-checkout .pos-split-payment-btn,
#pos-checkout .pos-exchange-btn {
    min-height: 44px;
    margin-top: 0.75rem;
}

#pos-checkout .pos-cart-footer-actions .pos-exchange-btn,
#pos-checkout .pos-cart-footer-actions .pos-complete-btn {
    margin-top: 0;
}

#pos-checkout .pos-cart-totals-row--exchange {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

#pos-checkout .pos-cart-totals-row--exchange-net {
    font-weight: 500;
    color: var(--ui-text);
}

body[data-theme=dark] #pos-checkout .pos-cart-totals-row--exchange-net {
    color: var(--ui-text);
}

#pos-checkout .pos-exchange-attached-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 1.25rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-primary-line);
    background: var(--ui-primary-soft);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] #pos-checkout .pos-exchange-attached-banner {
    border-color: var(--ui-primary-line);
    background: var(--ui-primary-tint);
    box-shadow: none;
}

#pos-checkout.pos-checkout--register .pos-exchange-attached-banner {
    margin: 0 0.9rem 0.65rem;
    flex-shrink: 0;
}

#pos-checkout .pos-exchange-attached-banner-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

#pos-checkout .pos-exchange-attached-banner-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

body[data-theme=dark] #pos-checkout .pos-exchange-attached-banner-icon {
    background: var(--ui-primary-line);
    color: var(--ui-info-text);
}

#pos-checkout .pos-exchange-attached-banner-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#pos-checkout .pos-exchange-attached-banner-kicker {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ui-primary);
}

body[data-theme=dark] #pos-checkout .pos-exchange-attached-banner-kicker {
    color: var(--ui-info-text);
}

#pos-checkout .pos-exchange-attached-banner-title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-checkout .pos-exchange-attached-banner-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

#pos-checkout .pos-exchange-attached-banner-credit {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-success);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-theme=dark] #pos-checkout .pos-exchange-attached-banner-credit {
    color: var(--ui-success-text);
}

#pos-checkout .pos-exchange-attached-banner-remove {
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    line-height: 1;
    padding: 0;
    touch-action: manipulation;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#pos-checkout .pos-exchange-attached-banner-remove:hover {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

body[data-theme=dark] #pos-checkout .pos-exchange-attached-banner-remove:hover {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-soft);
}

#posExchangeModal .pos-exchange-lookup {
    margin-bottom: 0;
}

#posExchangeModal .pos-exchange-modal-content {
    border: 0;
    overflow: hidden;
}

#posExchangeModal .pos-exchange-modal-header {
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posExchangeModal .pos-exchange-modal-header {
    border-bottom-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-modal-title {
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-text);
}

#posExchangeModal .pos-exchange-modal-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-modal-body {
    padding: 1rem 1.25rem 1.15rem;
}

#posExchangeModal .pos-exchange-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    padding: 0.85rem 0.9rem;
}

body[data-theme=dark] #posExchangeModal .pos-exchange-panel {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-panel + .pos-exchange-panel,
#posExchangeModal .pos-exchange-panel + .pos-exchange-content,
#posExchangeModal .pos-exchange-content {
    margin-top: 0.85rem;
}

#posExchangeModal .pos-exchange-panel-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-lookup-group .form-control {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#posExchangeModal .pos-exchange-lookup-group .btn {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
}

#posExchangeModal .pos-exchange-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 5rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#posExchangeModal .pos-exchange-error {
    margin-top: 0.85rem;
    margin-bottom: 0;
    padding: 0.65rem 0.8rem;
    font-size: var(--ui-fs-sm);
}

#posExchangeModal .pos-exchange-intro {
    margin: 0 0 0.65rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-lines-wrap {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
}

body[data-theme=dark] #posExchangeModal .pos-exchange-lines-wrap {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-lines-table {
    margin-bottom: 0;
}

#posExchangeModal .pos-exchange-lines-table thead th {
    padding: 0.55rem 0.75rem;
    background: rgba(var(--ui-black-rgb), 0.02);
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}

body[data-theme=dark] #posExchangeModal .pos-exchange-lines-table thead th {
    background: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-lines-table tbody td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
}

body[data-theme=dark] #posExchangeModal .pos-exchange-lines-table tbody td {
    border-bottom-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-lines-table tbody tr:last-child td {
    border-bottom: 0;
}

#posExchangeModal .pos-exchange-product-title {
    display: block;
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
}

#posExchangeModal .pos-exchange-product-meta {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-lines-table .pos-exchange-qty {
    width: 4.25rem;
    min-height: 36px;
    margin: 0 auto;
    padding: 0.2rem 0.35rem;
    font-size: var(--ui-fs-base);
    text-align: center;
}

#posExchangeModal .pos-exchange-lines-table .pos-exchange-line-amount {
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
}

#posExchangeModal .pos-exchange-options {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

#posExchangeModal .pos-exchange-options .form-label {
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-options .form-control {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
}

#posExchangeModal .pos-exchange-restock-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-black-rgb), 0.015);
}

body[data-theme=dark] #posExchangeModal .pos-exchange-restock-check {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-restock-check .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

#posExchangeModal .pos-exchange-restock-check .form-check-label {
    margin: 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.35;
}

#posExchangeModal .pos-exchange-credit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-success-tint);
    border: 1px solid var(--ui-success);
}

#posExchangeModal .pos-exchange-credit-label {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.1rem;
}

#posExchangeModal .pos-exchange-credit-caption {
    display: block;
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-credit-value {
    font-size: var(--ui-fs-xl);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-success-text);
    white-space: nowrap;
}

#posExchangeModal .pos-exchange-modal-footer {
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posExchangeModal .pos-exchange-modal-footer {
    border-top-color: var(--ui-border);
}

#posExchangeModal .pos-exchange-footer-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#posExchangeModal .pos-exchange-footer-hint {
    margin: 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

#posExchangeModal .pos-exchange-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

#posExchangeModal .pos-exchange-footer-actions .btn {
    min-height: 44px;
}

#posExchangeModal .js-pos-exchange-attach-btn:not(:disabled) {
    min-width: 9.5rem;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-total-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-total-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    margin-bottom: 0.25rem;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-total-value {
    font-size: var(--ui-fs-kpi);
    font-weight: 500;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remaining {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    margin-bottom: 1rem;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remaining.is-complete {
    color: var(--ui-success);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remaining.is-over {
    color: var(--ui-danger);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-tender-row {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--ui-surface);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-tender-row .form-label {
    color: var(--ui-muted);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-tender-row .form-control,
#posCheckoutWizardModal #posWizardPaySplit .pos-split-tender-row .form-select {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group .input-group-text {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    min-width: 2.25rem;
    padding: 0 0.65rem;
    justify-content: center;
    background: var(--ui-subtle);
    border: 0;
    border-right: 1px solid var(--ui-border-strong);
    color: var(--ui-muted);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group .pos-split-amount-input {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 0;
    box-shadow: none;
    background: var(--ui-surface);
    color: var(--ui-text);
    -moz-appearance: textfield;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group .pos-split-amount-input:focus {
    box-shadow: none;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group .pos-split-amount-input::-webkit-outer-spin-button,
#posCheckoutWizardModal #posWizardPaySplit .pos-split-amount-group .pos-split-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remove-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--ui-border-strong);
    border-radius: 0;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remove-row-btn:hover:not(:disabled),
#posCheckoutWizardModal #posWizardPaySplit .pos-split-remove-row-btn:focus-visible:not(:disabled) {
    background: rgba(var(--ui-danger-rgb), 0.12);
    color: var(--ui-danger);
    outline: none;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remove-row-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-remove-row-btn i {
    font-size: var(--ui-fs-base);
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-add-tender-btn {
    min-height: 44px;
    font-weight: 500;
    border-style: dashed;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-cash-received {
    margin-top: 0.5rem;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-cash-received-input {
    -moz-appearance: textfield;
}

#posCheckoutWizardModal #posWizardPaySplit .pos-split-cash-received-input::-webkit-outer-spin-button,
#posCheckoutWizardModal #posWizardPaySplit .pos-split-cash-received-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#posSaleCompleteModal .pos-complete-split-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--ui-fs-sm);
    padding: 0.15rem 0;
}

#posSaleCompleteModal .pos-complete-split-line + .pos-complete-split-line {
    border-top: 1px dashed var(--ui-border-strong);
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

body[data-theme=dark] #posSaleCompleteModal .pos-complete-split-line + .pos-complete-split-line {
    border-top-color: var(--ui-border-strong);
}

#posCheckoutWizardModal .pos-checkout-wizard-dialog {
    max-width: 560px;
}

#posCheckoutWizardModal .pos-checkout-wizard-header {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--ui-border-strong);
    background: linear-gradient(180deg, var(--ui-row-hover) 0%, transparent 100%);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-header {
    border-bottom-color: var(--ui-border);
    background: linear-gradient(180deg, var(--ui-primary-soft) 0%, transparent 100%);
}

#posCheckoutWizardModal .pos-checkout-wizard-steps {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
}

#posCheckoutWizardModal .pos-checkout-wizard-timeline {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
}

#posCheckoutWizardModal .pos-checkout-wizard-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 0;
    font-weight: 400;
}

#posCheckoutWizardModal .pos-checkout-wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: calc(50% + 1.05rem);
    right: calc(-50% + 1.05rem);
    height: 1px;
    background: var(--ui-track);
    z-index: 0;
    pointer-events: none;
    transition: background-color 0.25s ease;
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(:last-child)::after {
    background: var(--ui-primary);
}

/* No line towards a hidden step (the payment step is d-none until it is used) */
#posCheckoutWizardModal .pos-checkout-wizard-step:has(+ .pos-checkout-wizard-step.d-none)::after {
    display: none;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(:last-child)::after {
    background: rgba(var(--ui-info-rgb), 0.55);
}

#posCheckoutWizardModal .pos-checkout-wizard-step-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1.5px solid var(--ui-border-strong);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step-marker {
    border-color: var(--ui-border-strong);
    color: var(--ui-faint);
}

#posCheckoutWizardModal .pos-checkout-wizard-step-icon {
    font-size: var(--ui-fs-xs);
    line-height: 1;
}

#posCheckoutWizardModal .pos-checkout-wizard-step-index {
    display: none;
}

#posCheckoutWizardModal .pos-checkout-wizard-step-check {
    display: none;
    font-size: var(--ui-fs-xs);
}

#posCheckoutWizardModal .pos-checkout-wizard-step-label {
    font-size: var(--ui-fs-xs);
    line-height: 1.2;
    color: var(--ui-muted);
    font-weight: 500;
    padding: 0 0.2rem;
    letter-spacing: 0.01em;
    transition: color 0.25s ease, font-weight 0.25s ease;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step-label {
    color: var(--ui-faint);
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-active .pos-checkout-wizard-step-marker {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    box-shadow: 0 0 0 4px var(--ui-primary-tint);
    transform: scale(1.04);
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-active .pos-checkout-wizard-step-label {
    color: var(--ui-primary);
    font-weight: 600;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step.is-active .pos-checkout-wizard-step-marker {
    box-shadow: 0 0 0 4px var(--ui-primary-line);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step.is-active .pos-checkout-wizard-step-label {
    color: var(--ui-info-text);
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-marker {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    transform: none;
    box-shadow: none;
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-icon,
#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-index {
    display: none;
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-check {
    display: block;
}

#posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-label {
    color: var(--ui-primary);
    font-weight: 500;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-step.is-done:not(.is-active) .pos-checkout-wizard-step-label {
    color: var(--ui-info-text);
}

#posCheckoutWizardModal .pos-checkout-wizard-hint {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    margin-bottom: 0.65rem;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-hint {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent);
}

#posCheckoutWizardModal .pos-checkout-wizard-body {
    padding: 0.75rem 1rem 0.85rem;
}

#posCheckoutWizardModal #posWizardStepCustomer {
    display: flex;
    flex-direction: column;
}

#posCheckoutWizardModal .pos-customer-step-card {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
    padding: 0.75rem 0.85rem 0.85rem;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-step-card {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posCheckoutWizardModal .pos-customer-step-lead {
    margin: 0 0 0.65rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-step-lead {
    color: color-mix(in srgb, var(--ui-on-primary) 55%, transparent);
}

#posCheckoutWizardModal .pos-customer-form-panel,
#posCheckoutWizardModal .pos-customer-fields {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#posCheckoutWizardModal .pos-customer-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

#posCheckoutWizardModal .pos-customer-optional-details {
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-black-rgb), 0.025);
    overflow: hidden;
    padding: 0 0.65rem;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-optional-details {
    background: var(--ui-subtle);
}

#posCheckoutWizardModal .pos-customer-optional-details[open] {
    padding-bottom: 0.65rem;
}

#posCheckoutWizardModal .pos-customer-optional-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-top: 0;
}

#posCheckoutWizardModal .pos-customer-optional-summary::-webkit-details-marker {
    display: none;
}

#posCheckoutWizardModal .pos-customer-optional-summary::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--ui-fs-xs);
    line-height: 1;
    color: var(--ui-muted);
    transition: transform 0.2s ease;
    margin-left: 0.35rem;
}

#posCheckoutWizardModal .pos-customer-optional-details[open] .pos-customer-optional-summary::after {
    transform: rotate(180deg);
}

#posCheckoutWizardModal .pos-customer-optional-summary:hover .pos-customer-optional-summary-label {
    color: var(--ui-primary);
}

#posCheckoutWizardModal .pos-customer-optional-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0 0.1rem;
}

#posCheckoutWizardModal .pos-customer-optional-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

#posCheckoutWizardModal .pos-customer-input,
#posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-control,
#posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-select {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    padding: 0.45rem 0.7rem;
    color: var(--ui-text);
    background-color: var(--ui-subtle) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#posCheckoutWizardModal .pos-customer-input::placeholder {
    color: var(--ui-silver);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-input::placeholder {
    color: var(--ui-faint);
}

#posCheckoutWizardModal .pos-customer-input:focus,
#posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-control:focus,
#posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-select:focus {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 2px var(--ui-primary-tint) !important;
    outline: 0;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-input,
body[data-theme=dark] #posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-control,
body[data-theme=dark] #posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-select {
    /* the fill is the card's own colour in dark mode: without an edge the fields disappear */
    border-color: var(--ui-field-border) !important;
    color-scheme: dark;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-customer-input:focus,
body[data-theme=dark] #posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-control:focus,
body[data-theme=dark] #posCheckoutWizardModal .pos-customer-fields .pos-customer-input.form-select:focus {
    background-color: var(--ui-track) !important;
    border-color: var(--ui-primary-line) !important;
    box-shadow: 0 0 0 2px var(--ui-primary-line) !important;
}

#posCheckoutWizardModal .pos-customer-input--textarea {
    min-height: 44px;
    max-height: 5.5rem;
    resize: none;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

#posCheckoutWizardModal .pos-customer-input--country:invalid,
#posCheckoutWizardModal .pos-customer-input--country option[value=""] {
    color: var(--ui-silver);
}

#posCheckoutWizardModal .pos-customer-address-grid {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#posCheckoutWizardModal .pos-customer-address-line--street,
#posCheckoutWizardModal .pos-customer-address-line--locality {
    display: grid;
    gap: 0.45rem;
    align-items: end;
}

#posCheckoutWizardModal .pos-customer-address-line--street {
    grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 4.5rem) minmax(3rem, 4rem);
}

#posCheckoutWizardModal .pos-customer-address-line--locality {
    grid-template-columns: minmax(5rem, 6.5rem) minmax(0, 1fr) minmax(7.5rem, 9.5rem);
}

#posCheckoutWizardModal .pos-customer-field {
    min-width: 0;
}

#posCheckoutWizardModal .pos-customer-address-grid .pos-customer-input.form-select {
    font-size: var(--ui-fs-sm);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    text-overflow: ellipsis;
}

#posCheckoutWizardModal .pos-checkout-review-card {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-review-card {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#posCheckoutWizardModal .pos-cart-discount-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-discount-wrap {
    border-bottom-color: var(--ui-border);
}

#posCheckoutWizardModal .pos-cart-discount-label {
    display: block;
    flex: 0 0 auto;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    margin: 0;
    white-space: nowrap;
}

#posCheckoutWizardModal .pos-cart-discount-controls {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: 0 0 auto;
}

#posCheckoutWizardModal .pos-cart-discount-type {
    display: flex;
    flex-shrink: 0;
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-discount-type {
    border-color: var(--ui-border-strong);
}

#posCheckoutWizardModal .pos-cart-discount-type-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-discount-type-btn {
    background: var(--ui-subtle);
}

#posCheckoutWizardModal .pos-cart-discount-type-btn + .pos-cart-discount-type-btn {
    border-left: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-discount-type-btn + .pos-cart-discount-type-btn {
    border-left-color: var(--ui-border-strong);
}

#posCheckoutWizardModal .pos-cart-discount-type-btn.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-discount-type-btn.active {
    background: var(--ui-primary-line);
    color: var(--ui-info);
}

#posCheckoutWizardModal .pos-cart-discount-input {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    flex: 0 0 4.5rem;
    min-height: 2.5rem;
    font-size: var(--ui-fs-lg);
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.35rem;
    -moz-appearance: textfield;
}

#posCheckoutWizardModal .pos-cart-discount-input::-webkit-outer-spin-button,
#posCheckoutWizardModal .pos-cart-discount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#posCheckoutWizardModal .pos-cart-totals-breakdown {
    margin: 0;
    padding: 0.6rem 0.85rem;
}

#posCheckoutWizardModal .pos-cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#posCheckoutWizardModal .pos-cart-totals-row:last-child {
    margin-bottom: 0;
}

#posCheckoutWizardModal .pos-cart-totals-row > span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ui-text);
    text-align: right;
}

#posCheckoutWizardModal .pos-cart-totals-row--discount {
    color: var(--ui-success);
}

#posCheckoutWizardModal .pos-cart-totals-row--discount > span:last-child {
    color: var(--ui-success);
}

#posCheckoutWizardModal .pos-cart-totals-row--total {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-cart-totals-row--total {
    border-top-color: var(--ui-border);
}

#posCheckoutWizardModal .pos-cart-totals-row--exchange-net > span:last-child {
    font-weight: 600;
}

#posCheckoutWizardModal .pos-checkout-review-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--ui-success-tint);
    border-top: 1px solid var(--ui-success-tint);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-review-due {
    border-top-color: var(--ui-success);
}

#posCheckoutWizardModal .pos-checkout-review-due-label {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
}

#posCheckoutWizardModal .pos-checkout-review-due-value {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-success);
    line-height: 1;
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-review-due-value {
    color: var(--ui-success);
}

#posCheckoutWizardModal .pos-checkout-wizard-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
    justify-content: stretch;
    width: 100%;
    padding: 0.65rem 1rem 0.8rem;
    border-top: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-checkout-wizard-footer {
    border-top-color: var(--ui-border);
}

#posCheckoutWizardModal .pos-checkout-wizard-footer .btn {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    font-weight: 500;
}

#pos-checkout.pos-checkout--register .pos-cart-footer--compact {
    padding: 0.65rem 0.9rem 0.75rem;
}

#posCheckoutWizardModal #posWizardStepReview {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

#posCheckoutWizardModal .pos-checkout-review-payment {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#posCheckoutWizardModal .pos-payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

#posCheckoutWizardModal .pos-payment-method-card {
    min-height: 5.75rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.65rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-card {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    box-shadow: none;
}

#posCheckoutWizardModal .pos-payment-method-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-lg);
    line-height: 1;
    flex-shrink: 0;
}

#posCheckoutWizardModal .pos-payment-method-icon--cash {
    background: var(--ui-success-tint);
    color: var(--ui-success);
}

#posCheckoutWizardModal .pos-payment-method-icon--card {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#posCheckoutWizardModal .pos-payment-method-icon--other {
    background: var(--ui-neutral-tint);
}

#posCheckoutWizardModal .pos-payment-method-icon--split {
    background: var(--ui-warning-tint);
    color: var(--ui-bronze);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-icon--cash {
    color: var(--ui-success);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-icon--card {
    background: var(--ui-primary-line);
    color: var(--ui-info);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-icon--other {
    background: var(--ui-track);
    color: color-mix(in srgb, var(--ui-on-primary) 65%, transparent);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-icon--split {
    color: var(--ui-warning);
}

#posCheckoutWizardModal .pos-payment-method-name {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

#posCheckoutWizardModal .pos-payment-method-card:hover:not(:disabled) {
    border-color: var(--ui-primary-line);
    background: var(--ui-row-hover);
    box-shadow: 0 2px 8px var(--ui-primary-soft);
}

body[data-theme=dark] #posCheckoutWizardModal .pos-payment-method-card:hover:not(:disabled) {
    background: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
}

#posCheckoutWizardModal .pos-payment-method-card:active:not(:disabled) {
    transform: scale(0.98);
}

#posCheckoutWizardModal .pos-payment-method-card:focus-visible {
    outline: 0;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px var(--ui-primary-line);
}

#posCheckoutWizardModal .pos-payment-method-card:disabled {
    opacity: 0.55;
    cursor: wait;
}

@media (min-width: 400px) {
    #pos-checkout .pos-customer-address-line--street {
    grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 5.75rem) minmax(3.5rem, 4.75rem);
    }

    #pos-checkout .pos-customer-address-line--locality {
    grid-template-columns: minmax(6.25rem, 8.25rem) minmax(0, 1fr);
    }

    #pos-checkout .pos-customer-field--country {
    grid-column: 1 / -1;
    }
}

@media (min-width: 640px) {
    #pos-checkout .pos-customer-address-line--locality {
    grid-template-columns: minmax(6.25rem, 8.25rem) minmax(0, 1fr) minmax(0, 1.15fr);
    }

    #pos-checkout .pos-customer-field--country {
    grid-column: auto;
    }
}

@media (min-width: 768px) {
    .pos-product-autocomplete-menu .pos-autocomplete-item {
    padding: 0.5rem 0.7rem !important;
    }

    .pos-product-autocomplete-menu .pos-autocomplete-thumb {
    width: 40px;
        height: 40px;
    }

    .pos-product-autocomplete-menu .pos-autocomplete-title {
    font-size: var(--ui-fs-base);
    }

    .pos-product-autocomplete-menu .pos-autocomplete-meta {
    font-size: var(--ui-fs-xs);
    }

    .pos-product-autocomplete-menu .pos-autocomplete-stock {
    flex: 0 0 auto;
        margin-left: auto;
    }

    #pos-checkout .pos-cart-panel {
    max-height: calc(100vh - 8rem);
    }

    #pos-checkout .order-items-list {
    max-height: none;
    }

    #pos-checkout .pos-search-section {
    padding: 1.5rem;
    }

    #pos-checkout .pos-payment-pill {
    min-height: 64px;
        font-size: var(--ui-fs-md);
    }

    #pos-checkout .pos-payment-pill i {
    font-size: var(--ui-fs-xl);
    }

    #pos-checkout .pos-complete-btn {
    min-height: 60px;
    }

    #pos-checkout.pos-checkout--register .pos-register-sidebar {
    width: 18.5rem;
    }

    #pos-checkout.pos-checkout--register .pos-register-session-title,
    #pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit span {
    font-size: var(--ui-fs-md);
    }

    #posExchangeModal .pos-exchange-footer-inner {
    flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    #posExchangeModal .pos-exchange-footer-hint {
    flex: 1 1 auto;
        padding-right: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    #pos-checkout .pos-cart-panel {
    position: static;
        max-height: none;
    }

    /* Phones stack the register sidebar above the cart: the cart grows with its lines instead of
       being squeezed into what is left of the screen (the totals bar covered the first line) */
    #pos-checkout.pos-checkout--register .pos-cart-panel,
    #pos-checkout.pos-checkout--register .pos-register-cart-col .pos-cart-panel {
        height: auto !important;
        flex: 0 0 auto;
    }

    #pos-checkout.pos-checkout--register .pos-cart-panel .card-body,
    #pos-checkout.pos-checkout--register .pos-cart-body {
        flex: 0 0 auto;
        overflow: visible;
    }

    #pos-checkout.pos-checkout--register .pos-checkout-grid > .pos-register-cart-col {
        flex: 0 0 auto;
    }

    /* The register is a fixed-height screen on tablets/desktop; on a phone everything is stacked, so the
       page scrolls normally instead of cutting off the cart and the checkout button */
    :is(.wrapper, .main, #shell-content-root):has(#pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk)),
    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk),
    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) > .container-fluid,
    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) :is(.pos-register-layout, .pos-register-main, .pos-checkout-grid) {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #pos-checkout .pos-cart-footer {
    position: sticky;
        bottom: 0;
        z-index: 5;
    }

    #pos-checkout .pos-payment-pills {
    gap: 0.5rem;
    }

    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-actions {
    width: 100%;
    }

    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-page-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    }

    #posExchangeModal .pos-exchange-footer-actions {
    width: 100%;
    }

    #posExchangeModal .pos-exchange-footer-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    }

    #posExchangeModal .pos-exchange-lookup-group {
    flex-direction: column;
        align-items: stretch;
    }

    #posExchangeModal .pos-exchange-lookup-group .form-control {
    border-radius: var(--ui-radius-xs);
        border-bottom-left-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
    }

    #posExchangeModal .pos-exchange-lookup-group .btn {
    width: 100%;
        border-radius: var(--ui-radius-xs);
        margin-top: 0.5rem;
    }
}

@media (min-width: 992px) {
    #pos-checkout.pos-checkout--register .pos-register-sidebar {
    width: 20rem;
    }
}

@media (max-width: 575.98px) {
    /* phones: the sale comes first; session and recent sales (which load later and grow) sit below it */
    #pos-checkout.pos-checkout--register .pos-register-sidebar {
        order: 2;
    }
}

@media (max-width: 991.98px) {
    #pos-checkout.pos-checkout--register .pos-register-layout {
    flex-direction: column;
        gap: 0.5rem;
    }

    #pos-checkout.pos-checkout--register .pos-register-sidebar {
    width: 100%;
        flex: 0 1 auto;
        max-height: 42%;
        min-height: 0;
        overflow: hidden;
    }

    #pos-checkout.pos-checkout--register:not(.pos-checkout--kiosk) .pos-register-main {
    flex: 1 1 auto;
        min-height: 0;
    }

    #pos-checkout.pos-checkout--register .pos-register-sidebar-card .card-body {
    padding: 0.85rem 1rem 1rem;
        overflow-y: auto;
    }

    #pos-checkout.pos-checkout--register .pos-register-session {
    flex-direction: row;
        flex-wrap: wrap;
    }

    #pos-checkout.pos-checkout--register .pos-register-session-setup {
    flex: 1 1 100%;
    }

    #pos-checkout.pos-checkout--register .pos-register-session-row {
    flex: 1 1 14rem;
    }
}

@media (max-width: 399px) {
    #pos-checkout.pos-checkout--register .pos-register-sidebar-card .card-body {
    padding: 0.75rem 0.85rem 0.85rem;
    }

    #pos-checkout.pos-checkout--register .pos-register-sidebar .pos-register-sidebar-exit span {
    font-size: var(--ui-fs-sm);
    }

    #posCheckoutWizardModal .pos-checkout-wizard-steps {
    max-width: 100%;
    }

    #posCheckoutWizardModal .pos-checkout-wizard-step-label {
    font-size: var(--ui-fs-xs);
    }

    #posCheckoutWizardModal .pos-checkout-wizard-step-marker {
    width: 1.85rem;
        height: 1.85rem;
    }

    #posCheckoutWizardModal .pos-checkout-wizard-step-icon {
    font-size: var(--ui-fs-xs);
    }

    #posCheckoutWizardModal .pos-checkout-wizard-step:not(:last-child)::after {
    top: 0.925rem;
        left: calc(50% + 0.95rem);
        right: calc(-50% + 0.95rem);
    }

    #posCheckoutWizardModal .pos-customer-address-line--street,
    #posCheckoutWizardModal .pos-customer-address-line--locality {
    grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    #pos-checkout.pos-checkout--register .pos-cart-header--with-search {
    gap: 0.45rem;
    }

    #pos-checkout.pos-checkout--register .pos-cart-header--with-search .pos-clear-cart-btn-label {
    position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    #pos-checkout.pos-checkout--register .pos-cart-header--with-search .pos-clear-cart-btn .me-1 {
    margin-right: 0 !important;
    }

    #pos-checkout.pos-checkout--register .pos-cart-header--with-search .pos-clear-cart-btn {
    padding: 0.4rem 0.55rem;
        min-width: 44px;
    }
}

@media (max-width: 575.98px) {
    #pos-checkout .pos-context-chip {
    max-width: 100%;
    }

    #posCheckoutWizardModal #posWizardPayCash .pos-cash-tender-hero-value {
    font-size: var(--ui-fs-kpi);
    }

    #posCheckoutWizardModal #posWizardPayCash .pos-cash-denom-grid {
    grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 420px) {
    #posCheckoutWizardModal .pos-customer-contact-grid,
    #posCheckoutWizardModal .pos-customer-optional-grid {
    grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 360px) {
    #posCheckoutWizardModal .pos-payment-method-grid {
    grid-template-columns: minmax(0, 1fr);
    }

    #posCheckoutWizardModal .pos-payment-method-card {
    min-height: 4.75rem;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.75rem 0.85rem;
        gap: 0.75rem;
    }

    #posCheckoutWizardModal .pos-payment-method-name {
    text-align: left;
    }
}

@keyframes pos-terminal-pulse {
        0% {
            transform: scale(0.96);
            opacity: 0.85;
        }
        70% {
            transform: scale(1.08);
            opacity: 0;
        }
        100% {
            transform: scale(1.08);
            opacity: 0;
        }
    }

/* ---------- Page: crm/index.php (root .ui-page-crm-index) ---------- */
#all_users_table td {
    padding: 12px 15px !important;
    vertical-align: middle;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#all_users_table th {
    padding: 12px 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#all_users_table td:first-child,
#all_users_table th:first-child {
    padding-left: 20px !important;
}

#all_users_table td:last-child,
#all_users_table th:last-child {
    padding-right: 20px !important;
}

#all_users_table td.numeric-column,
#all_users_table th.numeric-column {
    text-align: center !important;
}

#all_users_table td.text-column,
#all_users_table th.text-column {
    min-width: 100px !important;
}

#all_users_table td.crm-setup-cell,
#all_users_table th.crm-setup-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle !important;
}

#all_users_table td.crm-setup-steps-cell {
    min-width: 220px;
}

#all_users_table .as-steps .as-stepper {
    margin: 0;
}

#all_users_table td.crm-user-identity-cell,
#all_users_table th.crm-user-identity-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 160px;
    max-width: 240px;
}

.ui-page-crm-index .crm-user-identity {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.35;
}

.ui-page-crm-index .crm-user-identity__name {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-user-identity__meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-theme=dark] .ui-page-crm-index .crm-user-identity__name {
    color: var(--ui-text);
}

#all_users_table td.crm-fc-cell-column,
#all_users_table th.crm-fc-cell-column {
    white-space: normal !important;
    overflow: visible !important;
    min-width: 96px;
    max-width: 128px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ui-page-crm-index .crm-fc-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0 auto;
}

.ui-page-crm-index .crm-fc-cell__logo {
    display: block;
    max-height: 34px;
    max-width: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ui-page-crm-index .crm-fc-cell--empty {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

#all_users_table td.crm-user-volume-cell,
#all_users_table th.crm-user-volume-cell {
    white-space: normal !important;
    overflow: visible !important;
    min-width: 108px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ui-page-crm-index .crm-user-volume {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.ui-page-crm-index .crm-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.12rem;
    padding: 0.22rem 0.5rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-ink-rgb), 0.05);
    font-size: var(--ui-fs-xs);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-page-crm-index .crm-stat__value {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-stat__value--empty {
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-page-crm-index .crm-stat__unit {
    font-weight: 500;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
}

#all_users_table td.crm-user-account-cell,
#all_users_table th.crm-user-account-cell {
    white-space: normal !important;
    overflow: visible !important;
    min-width: 120px;
    max-width: 168px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#all_users_table td.crm-sales-stage-cell,
#all_users_table th.crm-sales-stage-cell,
#all_users_table td.crm-ads-source-cell,
#all_users_table th.crm-ads-source-cell {
    white-space: normal !important;
    overflow: visible !important;
    min-width: 7.5rem;
    max-width: 12rem;
}

.ui-page-crm-index .crm-sales-stage-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    background: color-mix(in srgb, var(--ui-muted) 12%, transparent);
    color: var(--ui-text);
}

.ui-page-crm-index .crm-sales-stage-pill--beginner {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-index .crm-sales-stage-pill--growing {
    background: rgba(var(--ui-info-rgb), 0.14);
    color: var(--ui-info-text);
}

.ui-page-crm-index .crm-sales-stage-pill--expert {
    background: rgba(var(--ui-success-rgb), 0.14);
    color: var(--ui-series-3);
}

.ui-page-crm-index .crm-sales-stage-pill--no_icp {
    background: rgba(var(--ui-muted-rgb), 0.16);
    color: var(--ui-muted);
}

.ui-page-crm-index .crm-sales-stage-pill--demo_booked {
    background: rgba(var(--ui-warning-rgb), 0.18);
    color: var(--ui-warning-text);
}

.ui-page-crm-index .crm-sales-stage-pill--demo_done {
    background: rgba(var(--ui-purple-rgb), 0.14);
    color: var(--ui-purple);
}

.ui-page-crm-index .crm-sales-stage-pill--follow_up {
    background: rgba(var(--ui-warning-rgb), 0.16);
    color: var(--ui-danger-text);
}

.ui-page-crm-index .crm-ads-source__channel {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-ads-source__utm {
    margin-top: 0.1rem;
    line-height: 1.35;
    word-break: break-word;
}

.ui-page-crm-index .crm-user-account {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.ui-page-crm-index .crm-pill {
    display: inline-block;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    padding: 0.22rem 0.5rem;
    border-radius: var(--ui-radius-xs);
    line-height: 1.25;
    white-space: nowrap;
}

.ui-page-crm-index .crm-pill--type-seller {
    background: rgba(var(--ui-warning-rgb), 0.16); color: var(--ui-warning-text);
}

.ui-page-crm-index .crm-pill--type-sub_seller {
    background: rgba(var(--ui-warning-rgb), 0.22); color: var(--ui-danger-text);
}

.ui-page-crm-index .crm-pill--type-center {
    background: rgba(var(--ui-purple-rgb), 0.14); color: var(--ui-purple);
}

.ui-page-crm-index .crm-pill--type-sub_center {
    background: rgba(var(--ui-purple-rgb), 0.18); color: var(--ui-series-5);
}

.ui-page-crm-index .crm-pill--type-sudo {
    background: rgba(var(--ui-purple-rgb), 0.16); color: var(--ui-purple);
}

.ui-page-crm-index .crm-pill--type-default {
    background: rgba(var(--ui-muted-rgb), 0.12); color: var(--ui-body);
}

.ui-page-crm-index .crm-pill--status-free_user {
    background: rgba(var(--ui-muted-rgb), 0.14); color: var(--ui-body);
}

.ui-page-crm-index .crm-pill--status-sub {
    background: rgba(var(--ui-danger-rgb), 0.16); color: var(--ui-warning-text);
}

.ui-page-crm-index .crm-pill--status-freemium {
    background: rgba(var(--ui-success-rgb), 0.14); color: var(--ui-success-text);
}

.ui-page-crm-index .crm-pill--status-active_trial {
    background: rgba(var(--ui-warning-rgb), 0.16); color: var(--ui-warning-text);
}

.ui-page-crm-index .crm-pill--status-expired_trial,
.ui-page-crm-index .crm-pill--status-expired_subscription,
.ui-page-crm-index .crm-pill--status-expired_freemium,
.ui-page-crm-index .crm-pill--status-expired_yearly_subscription {
    background: rgba(var(--ui-danger-rgb), 0.14); color: var(--ui-danger-text);
}

.ui-page-crm-index .crm-pill--status-active_subscription,
.ui-page-crm-index .crm-pill--status-yearly_subscription {
    background: rgba(var(--ui-success-rgb), 0.14); color: var(--ui-success-text);
}

.ui-page-crm-index .crm-pill--status-cancelled_subscription {
    background: rgba(var(--ui-purple-rgb), 0.12); color: var(--ui-purple);
}

.ui-page-crm-index .crm-pill--status-default {
    background: rgba(var(--ui-ink-rgb), 0.06); color: var(--ui-body);
}

body[data-theme=dark] .ui-page-crm-index .crm-stat {
    background: rgba(var(--ui-white-rgb), 0.06);
}

body[data-theme=dark] .ui-page-crm-index .crm-stat__value {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-seller {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-sub_seller {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-center {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-sub_center {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-sudo {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-free_user {
    color: var(--ui-body);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-sub {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-freemium,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-active_subscription,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-yearly_subscription {
    color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-active_trial {
    color: var(--ui-warning-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-expired_trial,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-expired_subscription,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-expired_freemium,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-expired_yearly_subscription {
    color: var(--ui-danger-text);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--status-cancelled_subscription {
    color: var(--ui-series-5);
}

body[data-theme=dark] .ui-page-crm-index .crm-pill--type-default,
body[data-theme=dark] .ui-page-crm-index .crm-pill--status-default {
    color: var(--ui-text);
}

.ui-page-crm-index .crm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.7rem 1rem;
}

.ui-page-crm-index .crm-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 150px;
}

.ui-page-crm-index .crm-filter-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.ui-page-crm-index .crm-filter-label i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-index .crm-filter-item .form-control,
.ui-page-crm-index .crm-filter-item .select2-container .select2-selection--multiple {
    border-radius: var(--ui-radius-xs);
    min-height: 36px;
    font-size: var(--ui-fs-sm);
    padding: 0.2rem 0.5rem;
}

.ui-page-crm-index .crm-filter-item .form-control:focus,
.ui-page-crm-index .crm-filter-item .select2-container--focus .select2-selection--multiple {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.12);
}

.ui-page-crm-index .crm-filter-item .select2-selection__choice {
    background: var(--ui-primary) !important;
    border: none !important;
    border-radius: var(--ui-radius-xs)!important;
    color: var(--ui-on-primary) !important;
    font-size: var(--ui-fs-sm)!important;
    padding: 3px 8px 3px 12px !important;
    margin: 4px 5px 4px 0 !important;
    font-weight: 500;
    display: inline-flex !important;
    align-items: center;
}

.ui-page-crm-index .crm-filter-item .select2-selection__choice__remove {
    color: rgba(var(--ui-white-rgb), 0.65) !important;
    margin: 0 4px 0 0 !important;
    font-size: var(--ui-fs-base);
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    order: 1;
}

.ui-page-crm-index .crm-filter-item .select2-selection__choice__remove:hover {
    color: var(--ui-on-primary) !important;
}

.ui-page-crm-index .crm-filter-item .select2-selection__placeholder {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-index .daterangepicker {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 4px 16px rgba(var(--ui-ink-rgb), 0.12);
    overflow: hidden;
    z-index: 1060;
}

.ui-page-crm-index .daterangepicker .ranges ul {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}

.ui-page-crm-index .daterangepicker .ranges ul li {
    font-size: var(--ui-fs-sm);
    padding: 0.45rem 0.85rem;
    border-radius: 0;
    color: var(--ui-text);
    cursor: pointer;
    transition: all 0.12s ease;
    margin: 0;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-index .daterangepicker .ranges ul li:hover {
    background: rgba(var(--ui-primary-rgb), 0.06);
    color: var(--ui-primary);
}

.ui-page-crm-index .daterangepicker .ranges ul li.active {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-weight: 500;
}

.ui-page-crm-index .daterangepicker .ranges ul li.active:hover {
    background: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

.ui-page-crm-index .daterangepicker th {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0;
}

.ui-page-crm-index .daterangepicker td {
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
    width: 34px;
    height: 30px;
}

.ui-page-crm-index .daterangepicker td.start-date,
.ui-page-crm-index .daterangepicker td.end-date {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-weight: 500;
}

.ui-page-crm-index .daterangepicker td.in-range {
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    border-radius: 0;
}

.ui-page-crm-index .daterangepicker td.start-date.in-range,
.ui-page-crm-index .daterangepicker td.end-date.in-range {
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-index .daterangepicker td.off.start-date,
.ui-page-crm-index .daterangepicker td.off.end-date {
    background: transparent;
}

.ui-page-crm-index .daterangepicker td.off {
    color: var(--ui-muted);
    opacity: 0.5;
}

.ui-page-crm-index .daterangepicker td:hover {
    background: rgba(var(--ui-primary-rgb), 0.08);
}

.ui-page-crm-index .daterangepicker .apply-btn,
.ui-page-crm-index .daterangepicker .btn-primary {
    background: var(--ui-primary) !important;
    border: none !important;
    border-radius: var(--ui-radius-xs)!important;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.35rem 0.8rem !important;
}

.ui-page-crm-index .daterangepicker .apply-btn:hover,
.ui-page-crm-index .daterangepicker .btn-primary:hover {
    background: var(--ui-primary-hover) !important;
}

.ui-page-crm-index .daterangepicker .btn-success {
    background: transparent !important;
    border: none !important;
    color: var(--ui-muted) !important;
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-index .daterangepicker .btn-success:hover {
    color: var(--ui-text) !important;
}

.ui-page-crm-index .daterangepicker .prev,
.ui-page-crm-index .daterangepicker .next {
    font-size: var(--ui-fs-md);
    padding: 6px 8px;
    line-height: 1;
}

.ui-page-crm-index .daterangepicker .prev::before,
.ui-page-crm-index .daterangepicker .next::before {
    border-color: var(--ui-text);
}

.ui-page-crm-index .daterangepicker .next::before {
    border-left-color: var(--ui-text);
}

.ui-page-crm-index .daterangepicker .prev::before {
    border-right-color: var(--ui-text);
}

.ui-page-crm-index .daterangepicker .month {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-crm-index .daterangepicker select.monthselect,
.ui-page-crm-index .daterangepicker select.yearselect {
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    padding: 0.2rem 0.4rem;
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker {
    background: var(--ui-surface);
    border-color: rgba(var(--ui-white-rgb), 0.15);
    box-shadow: 0 4px 16px rgba(var(--ui-black-rgb), 0.4);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker td.off {
    color: rgba(var(--ui-white-rgb), 0.3);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker td:hover {
    background: rgba(var(--ui-primary-rgb), 0.15);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker .prev::before,
body[data-theme=dark] .ui-page-crm-index .daterangepicker .next::before {
    border-color: rgba(var(--ui-white-rgb), 0.5);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker .ranges ul li {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker .ranges ul li:hover {
    background: rgba(var(--ui-primary-rgb), 0.15);
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker .btn-success {
    color: rgba(var(--ui-white-rgb), 0.5) !important;
}

body[data-theme=dark] .ui-page-crm-index .daterangepicker .btn-success:hover {
    color: rgba(var(--ui-white-rgb), 0.8) !important;
}

.ui-page-crm-index .crm-user-modal-dialog {
    max-width: 1320px;
}

.ui-page-crm-index .crm-user-modal-panel {
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 0.5rem * 2);
    min-height: 0;
}

.ui-page-crm-index .crm-user-modal-dialog.modal-fullscreen-md-down .crm-user-modal-panel {
    max-height: 100vh;
    border-radius: 0;
}

.ui-page-crm-index .crm-user-modal-body {
    padding: 1.15rem 1.35rem 1.35rem;
    background: var(--ui-page);
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

body[data-theme=dark] .ui-page-crm-index .crm-user-modal-body {
    background: var(--ui-surface);
}

.ui-page-crm-index .crm-user-modal-body .card {
    border: 0;
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.05);
}

.ui-page-crm-index .crm-combined-card {
    border: 0;
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.05);
    overflow: hidden;
}

.ui-page-crm-index .crm-combined-row {
    display: flex;
    align-items: stretch;
}

.ui-page-crm-index .crm-combined-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-page-crm-index .crm-combined-col--setup {
    flex: 0 0 38%;
    max-width: 38%;
    min-width: 280px;
}

.ui-page-crm-index .crm-combined-col--revenue {
    flex: 1;
    border-left: 1px solid var(--ui-border);
}

.ui-page-crm-index .crm-combined-section-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(var(--ui-black-rgb), 0.015);
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}

.ui-page-crm-index .crm-combined-section-head i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

body[data-theme=dark] .ui-page-crm-index .crm-combined-section-head {
    background: rgba(var(--ui-white-rgb), 0.02);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
}

.ui-page-crm-index .crm-combined-section-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: none;
}

.ui-page-crm-index .crm-combined-section-body--charts {
    padding: 0;
    overflow: hidden;
}

.ui-page-crm-index .crm-combined-col--setup .crm-combined-section-body {
    padding: 0;
    display: flex;
}

.ui-page-crm-index .crm-combined-col--setup .crm-setup-panel {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ui-page-crm-index .crm-combined-col--setup .crm-setup-panel__toolbar {
    padding: 0.55rem 0.85rem;
    background: transparent;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}

.ui-page-crm-index .crm-combined-col--setup .crm-setup-panel__title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-crm-index .crm-combined-col--setup .crm-setup-panel__body {
    padding: 0.6rem 0.85rem 0.7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ui-page-crm-index .crm-combined-col--setup .crm-setup-empty {
    padding: 0.85rem 0.85rem;
}

.ui-page-crm-index .crm-combined-col--revenue .crm-chart-box {
    position: relative;
    height: 140px;
    max-height: 140px;
}

.ui-page-crm-index .crm-combined-col--revenue .crm-chart-box canvas {
    max-height: 140px;
}

.ui-page-crm-index .crm-revenue-bar {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem 0.5rem;
    display: flex;
    align-items: stretch;
}

.ui-page-crm-index .crm-revenue-bar .crm-chart-box {
    width: 100%;
    height: 100%;
}

.ui-page-crm-index .crm-revenue-select {
    width: auto;
    min-width: 130px;
    font-size: var(--ui-fs-xs);
    border-radius: var(--ui-radius-xs);
    border-color: var(--ui-border);
    padding: 0.2rem 0.5rem;
    height: auto;
}

.ui-page-crm-index .crm-subaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(var(--ui-black-rgb), 0.06);
    border-radius: var(--ui-radius-sm);
    margin-bottom: .5rem;
    background: rgba(var(--ui-black-rgb), 0.015);
}

body[data-theme=dark] .ui-page-crm-index .crm-subaction-item {
    border-color: rgba(var(--ui-white-rgb), 0.08);
    background: rgba(var(--ui-white-rgb), 0.03);
}

.ui-page-crm-index .crm-subaction-item:last-child {
    margin-bottom: 0;
}

.ui-page-crm-index .crm-subaction-item .crm-subaction-meta {
    min-width: 0;
}

.ui-page-crm-index .crm-subaction-item .crm-subaction-value {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-subaction-item .crm-subaction-date {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-index .crm-subaction-empty {
    padding: .85rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    border: 1px dashed rgba(var(--ui-black-rgb), 0.12);
    border-radius: var(--ui-radius-sm);
}

body[data-theme=dark] .ui-page-crm-index .crm-subaction-empty {
    border-color: rgba(var(--ui-white-rgb), 0.12);
}

.ui-page-crm-index .crm-admin-action-item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: .85rem 1rem;
    background: var(--ui-surface);
}

.ui-page-crm-index .crm-admin-action-item + .crm-admin-action-item {
    margin-top: .75rem;
}

.ui-page-crm-index .crm-admin-action-item__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ui-page-crm-index .crm-admin-action-item__text h6 {
    color: var(--ui-text);
}

.ui-page-crm-index .crm-admin-actions-empty {
    padding: .85rem;
    text-align: center;
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.ui-page-crm-index .crm-user-modal-body .crm-section-card {
    overflow: hidden;
}

.ui-page-crm-index .crm-section-head {
    display: flex;
    align-items: center;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-muted);
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.06);
}

body[data-theme=dark] .ui-page-crm-index .crm-section-head {
    color: rgba(var(--ui-white-rgb), 0.6);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-crm-index .crm-section-head-action {
    text-transform: none;
    letter-spacing: 0;
    padding: .15rem .55rem;
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-index .crm-section-body {
    padding: 1rem 1.1rem;
}

.ui-page-crm-index .crm-hero-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ui-fs-md);
    color: var(--ui-on-primary);
    background: linear-gradient(135deg, var(--ui-series-5), var(--ui-primary));
    margin-right: .15rem;
}

.ui-page-crm-index .crm-section-body>*:last-child {
    margin-bottom: 0 !important;
}

.ui-page-crm-index .crm-overview {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ui-page-crm-index .crm-overview__company {
    font-weight: 600;
    font-size: var(--ui-fs-lg);
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-crm-index .crm-overview__company img {
    max-width: 160px;
    max-height: 56px;
    width: auto;
}

.ui-page-crm-index .crm-overview__phone {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-primary);
    text-decoration: none;
    margin-top: -.35rem;
}

.ui-page-crm-index .crm-overview__phone:hover {
    text-decoration: underline;
}

.ui-page-crm-index .crm-overview__phone i {
    font-size: var(--ui-fs-xs);
    opacity: .85;
}

.ui-page-crm-index .crm-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.ui-page-crm-index .crm-overview__stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .6rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-black-rgb), 0.025);
}

body[data-theme=dark] .ui-page-crm-index .crm-overview__stat {
    background: rgba(var(--ui-white-rgb), 0.04);
}

.ui-page-crm-index .crm-overview__stat-value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.1;
}

.ui-page-crm-index .crm-overview__stat-label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-silver);
    line-height: 1.2;
}

.ui-page-crm-index .crm-overview__billing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .5rem;
    padding-top: .15rem;
    border-top: 1px solid rgba(var(--ui-black-rgb), 0.05);
}

body[data-theme=dark] .ui-page-crm-index .crm-overview__billing {
    border-top-color: rgba(var(--ui-white-rgb), 0.07);
}

.ui-page-crm-index .crm-overview__fee {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-overview__fee-detail {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    line-height: 1.4;
}

.ui-page-crm-index .crm-overview__modules {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.ui-page-crm-index .crm-overview__module {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
}

.ui-page-crm-index .crm-overview__module.is-on {
    color: var(--ui-text);
}

.ui-page-crm-index .crm-overview__module-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-border-strong);
    flex-shrink: 0;
}

.ui-page-crm-index .crm-overview__module.is-on .crm-overview__module-dot {
    background: var(--ui-series-3);
}

.ui-page-crm-index .crm-overview__module-hint {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-silver);
}

.ui-page-crm-index .crm-overview__utm {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    line-height: 1.4;
}

.ui-page-crm-index .crm-overview__field {
    padding-top: .15rem;
}

.ui-page-crm-index .crm-overview__field-label {
    display: block;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ui-silver);
    margin-bottom: .35rem;
}

.ui-page-crm-index .crm-note {
    padding: .65rem .75rem;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-black-rgb), 0.025);
    border: 1px solid rgba(var(--ui-black-rgb), 0.05);
    margin-bottom: .6rem;
}

body[data-theme=dark] .ui-page-crm-index .crm-note {
    background: rgba(var(--ui-white-rgb), 0.03);
    border-color: rgba(var(--ui-white-rgb), 0.07);
}

.ui-page-crm-index .crm-note-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .4rem;
}

.ui-page-crm-index .crm-note-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-on-primary);
    background: linear-gradient(135deg, var(--ui-series-5), var(--ui-primary));
}

.ui-page-crm-index .crm-note-author {
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
}

.ui-page-crm-index .crm-note-time {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
}

.ui-page-crm-index .crm-note-delete {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--ui-danger);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-index .crm-note-delete:hover {
    background: rgba(var(--ui-danger-rgb), 0.12);
}

.ui-page-crm-index .crm-note-body {
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.ui-page-crm-index .crm-note--dialer {
    border-left: 3px solid var(--ui-silver);
}

.ui-page-crm-index .crm-note--dialer.is-no-pickup {
    border-left-color: var(--ui-danger);
    background: rgba(var(--ui-danger-rgb), 0.04);
}

.ui-page-crm-index .crm-note--dialer.is-picked-up {
    border-left-color: var(--ui-series-3);
    background: rgba(var(--ui-success-rgb), 0.05);
}

.ui-page-crm-index .crm-note-avatar--dialer {
    background: var(--ui-series-6);
    font-size: var(--ui-fs-2xs);
}

.ui-page-crm-index .crm-note--dialer.is-no-pickup .crm-note-avatar--dialer {
    background: var(--ui-danger);
}

.ui-page-crm-index .crm-note--dialer.is-picked-up .crm-note-avatar--dialer {
    background: var(--ui-series-3);
}

.ui-page-crm-index .crm-note-dialer-pill {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ui-series-6);
    background: rgba(var(--ui-muted-rgb), 0.12);
    border-radius: var(--ui-radius-pill);
    padding: .1rem .45rem;
    white-space: nowrap;
}

.ui-page-crm-index .crm-note-dialer-outcome {
    font-weight: 600;
    margin-bottom: .2rem;
}

.ui-page-crm-index .crm-note--dialer.is-no-pickup .crm-note-dialer-outcome {
    color: var(--ui-danger);
}

.ui-page-crm-index .crm-note--dialer.is-picked-up .crm-note-dialer-outcome {
    color: var(--ui-series-3);
}

body[data-theme=dark] .ui-page-crm-index .crm-note--dialer.is-no-pickup {
    background: rgba(var(--ui-warning-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-index .crm-note--dialer.is-picked-up {
    background: rgba(var(--ui-success-rgb), 0.08);
}

.ui-page-crm-index .crm-notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.2rem;
    color: var(--ui-silver);
    font-size: var(--ui-fs-base);
}

.ui-page-crm-index .crm-notes-empty i {
    font-size: var(--ui-fs-kpi);
}

.ui-page-crm-index .crm-notes-show-more {
    margin-top: .25rem;
    min-height: 44px;
}

.ui-page-crm-index .crm-activity-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: .35rem .85rem .6rem;
}

.ui-page-crm-index .crm-activity-feed {
    display: flex;
    flex-direction: column;
}

.ui-page-crm-index .crm-activity-date {
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-silver);
    margin: .75rem .15rem .25rem;
}

.ui-page-crm-index .crm-activity-feed>.crm-activity-date:first-child {
    margin-top: .25rem;
}

.ui-page-crm-index .crm-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .55rem .15rem;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] .ui-page-crm-index .crm-activity-item {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
}

.ui-page-crm-index .crm-activity-item:last-child {
    border-bottom: 0;
}

.ui-page-crm-index .crm-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-index .crm-activity-icon.is-blue {
    color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), 0.12);
}

.ui-page-crm-index .crm-activity-icon.is-green {
    color: var(--ui-series-3); background: rgba(var(--ui-success-rgb), 0.14);
}

.ui-page-crm-index .crm-activity-icon.is-purple {
    color: var(--ui-series-5); background: rgba(var(--ui-purple-rgb), 0.14);
}

.ui-page-crm-index .crm-activity-icon.is-amber {
    color: var(--ui-series-4); background: rgba(var(--ui-warning-rgb), 0.14);
}

.ui-page-crm-index .crm-activity-icon.is-red {
    color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), 0.14);
}

.ui-page-crm-index .crm-activity-icon.is-teal {
    color: var(--ui-series-3); background: rgba(var(--ui-success-rgb), 0.14);
}

.ui-page-crm-index .crm-activity-icon.is-slate {
    color: var(--ui-series-6); background: rgba(var(--ui-muted-rgb), 0.12);
}

.ui-page-crm-index .crm-activity-main {
    flex: 1;
    min-width: 0;
}

.ui-page-crm-index .crm-activity-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ui-page-crm-index .crm-activity-actor {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ui-series-4);
    background: rgba(var(--ui-warning-rgb), 0.12);
    padding: .1rem .4rem;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-index .crm-activity-sub {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    word-break: break-word;
    margin-top: .1rem;
}

.ui-page-crm-index .crm-activity-time {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: .15rem;
}

.ui-page-crm-index .crm-activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem;
    color: var(--ui-silver);
    font-size: var(--ui-fs-base);
}

.ui-page-crm-index .crm-activity-empty i {
    font-size: var(--ui-fs-kpi);
}

.ui-page-crm-index .crm-feed-card {
    flex: 1;
    min-height: 28rem;
}

.ui-page-crm-index .crm-feed-tabs {
    gap: 0.15rem;
    padding: 0.2rem 0.65rem 0;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.06);
}

body[data-theme=dark] .ui-page-crm-index .crm-feed-tabs {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-crm-index .crm-feed-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    font-weight: 600;
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0.55rem 0.7rem 0.5rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    min-height: 44px;
}

body[data-theme=dark] .ui-page-crm-index .crm-feed-tab {
    color: rgba(var(--ui-white-rgb), 0.55);
}

.ui-page-crm-index .crm-feed-tab:hover {
    color: var(--ui-text);
}

.ui-page-crm-index .crm-feed-tab.is-active {
    color: var(--ui-text);
    border-bottom-color: var(--ui-primary);
}

.ui-page-crm-index .crm-feed-tab:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

.ui-page-crm-index .crm-feed-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.ui-page-crm-index .crm-feed-panel.is-active {
    display: flex;
}

.ui-page-crm-index .crm-feed-panel .crm-activity-scroll {
    flex: 1;
    min-height: 0;
}

.ui-page-crm-index .crm-feed-panel .crm-onboarding-emails__history {
    max-height: none;
}

#onboardingEmailPreviewModal {
    z-index: 1070;
}

.ui-page-crm-index .crm-email-preview-frame {
    width: 100%;
    height: min(70vh, 720px);
    border: 0;
    background: var(--ui-subtle);
    display: block;
}

.ui-page-crm-index .crm-email-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 12rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

.ui-page-crm-index .crm-payments-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.ui-page-crm-index .crm-payments-feed {
    display: flex;
    flex-direction: column;
}

.ui-page-crm-index .crm-payments-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .55rem .15rem;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] .ui-page-crm-index .crm-payments-item {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
}

.ui-page-crm-index .crm-payments-item:last-child {
    border-bottom: 0;
}

.ui-page-crm-index .crm-payments-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-index .crm-payments-icon.is-green {
    color: var(--ui-series-3); background: rgba(var(--ui-success-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-icon.is-red {
    color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-icon.is-amber {
    color: var(--ui-series-4); background: rgba(var(--ui-warning-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-icon.is-slate {
    color: var(--ui-series-6); background: rgba(var(--ui-muted-rgb), 0.12);
}

.ui-page-crm-index .crm-payments-icon.is-blue {
    color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), 0.12);
}

.ui-page-crm-index .crm-payments-main {
    flex: 1;
    min-width: 0;
}

.ui-page-crm-index .crm-payments-title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ui-page-crm-index .crm-payments-badge {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .1rem .4rem;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-index .crm-payments-badge.is-paid {
    color: var(--ui-series-3); background: rgba(var(--ui-success-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-badge.is-failed {
    color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-badge.is-pending {
    color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-badge.is-cancelled {
    color: var(--ui-series-4); background: rgba(var(--ui-warning-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-badge.is-charged {
    color: var(--ui-danger); background: rgba(var(--ui-danger-rgb), 0.14);
}

.ui-page-crm-index .crm-payments-sub {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    word-break: break-word;
    margin-top: .1rem;
}

.ui-page-crm-index .crm-payments-amount {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: .1rem;
}

.ui-page-crm-index .crm-payments-date {
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-silver);
    margin: .75rem .15rem .25rem;
}

.ui-page-crm-index .crm-payments-feed > .crm-payments-date:first-child {
    margin-top: .25rem;
}

.ui-page-crm-index .crm-payments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.ui-page-crm-index .crm-payments-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-muted-rgb), 0.08);
    color: var(--ui-silver);
    font-size: var(--ui-fs-xl);
}

body[data-theme=dark] .ui-page-crm-index .crm-payments-empty-icon {
    background: rgba(var(--ui-white-rgb), 0.06);
}

.ui-page-crm-index .crm-payments-empty-title {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    opacity: .55;
}

.ui-page-crm-index .crm-payments-empty-sub {
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    max-width: 220px;
}

.ui-page-crm-index .crm-payments-empty i {
    font-size: var(--ui-fs-kpi);
}

.ui-page-crm-index .crm-setup-card {
    border: 0;
    box-shadow: 0 0 .875rem 0 rgba(var(--ui-black-rgb), 0.05);
    overflow: hidden;
}

.ui-page-crm-index .crm-setup-card .crm-setup-empty {
    padding: 1.25rem;
}

.ui-page-crm-index .crm-setup-panel {
    display: flex;
    flex-direction: column;
}

.ui-page-crm-index .crm-setup-panel--stalled {
    box-shadow: inset 3px 0 0 rgb(var(--ui-warning-rgb));
}

.ui-page-crm-index .crm-setup-panel--complete {
    box-shadow: inset 3px 0 0 rgb(var(--ui-success-rgb));
}

.ui-page-crm-index .crm-setup-panel__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.05);
    background: rgba(var(--ui-black-rgb), 0.015);
}

body[data-theme=dark] .ui-page-crm-index .crm-setup-panel__toolbar {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
    background: rgba(var(--ui-white-rgb), 0.02);
}

.ui-page-crm-index .crm-setup-panel__toolbar-start,
.ui-page-crm-index .crm-setup-panel__toolbar-end {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.ui-page-crm-index .crm-setup-panel__toolbar-end {
    flex-shrink: 0;
}

.ui-page-crm-index .crm-setup-panel__title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-muted);
    white-space: nowrap;
}

body[data-theme=dark] .ui-page-crm-index .crm-setup-panel__title {
    color: rgba(var(--ui-white-rgb), 0.55);
}

.ui-page-crm-index .crm-setup-panel__title i {
    font-size: var(--ui-fs-xs);
    opacity: .8;
}

.ui-page-crm-index .crm-setup-panel__path {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-silver);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: .45rem;
    border-left: 1px solid rgba(var(--ui-black-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-index .crm-setup-panel__path {
    border-left-color: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-index .crm-setup-panel__demo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem .75rem;
    margin: 0 0 .7rem;
    padding: .45rem .6rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.08);
}

.ui-page-crm-index .crm-setup-panel__demo-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-muted);
}

.ui-page-crm-index .crm-setup-panel__demo-value {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-index .crm-setup-panel__demo.is-booked {
    background: rgba(var(--ui-success-rgb), 0.12);
}

.ui-page-crm-index .crm-setup-panel__demo.is-booked .crm-setup-panel__demo-value {
    color: var(--ui-series-3);
}

.ui-page-crm-index .crm-setup-panel__stuck {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-warning-rgb), 0.15);
    color: var(--ui-series-2);
}

.ui-page-crm-index .crm-setup-panel__body {
    padding: .7rem 1rem .65rem;
}

.ui-page-crm-index .crm-setup-panel__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: .55rem;
}

.ui-page-crm-index .crm-setup-panel__step-name {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.35;
    min-width: 0;
}

.ui-page-crm-index .crm-setup-panel__stepper {
    flex-shrink: 0;
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper {
    width: auto;
    min-width: 9.5rem;
    max-width: 14rem;
    gap: 0;
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__track {
    justify-content: flex-end;
    padding: 0;
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__line {
    flex: 0 0 0.65rem;
    min-width: 0;
    max-width: 0.65rem;
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__node {
    width: 1.35rem;
    height: 1.35rem;
    font-size: var(--ui-fs-2xs);
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__line {
    flex: 0 0 .65rem;
    min-width: .65rem;
    max-width: .65rem;
}

.ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__summary {
    display: none;
}

.ui-page-crm-index .crm-setup-panel__progress {
    height: 4px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-black-rgb), 0.06);
    overflow: hidden;
}

body[data-theme=dark] .ui-page-crm-index .crm-setup-panel__progress {
    background: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-index .crm-setup-panel__progress-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .4s ease;
}

.ui-page-crm-index .crm-setup-panel__progress-fill.as-score--high {
    background: var(--ui-series-3);
}

.ui-page-crm-index .crm-setup-panel__progress-fill.as-score--mid {
    background: var(--ui-primary);
}

.ui-page-crm-index .crm-setup-panel__progress-fill.as-score--low {
    background: var(--ui-series-4);
}

.ui-page-crm-index .crm-setup-panel__meta-end {
    margin-top: .45rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-silver);
    text-align: right;
}

.ui-page-crm-index .crm-setup-panel__actions {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
}

.ui-page-crm-index .crm-setup-panel__actions-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
    max-width: 36rem;
}

.ui-page-crm-index .crm-setup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    color: var(--ui-silver);
    font-size: var(--ui-fs-base);
    text-align: center;
}

.ui-page-crm-index .crm-setup-empty i {
    font-size: var(--ui-fs-kpi);
    opacity: .7;
}

@media (max-width: 991px) {
    .ui-page-crm-index .crm-filter-bar {
    flex-direction: column;
        align-items: stretch;
    }

    .ui-page-crm-index .crm-filter-item {
    min-width: 100%;
    }

    .ui-page-crm-index .crm-combined-row {
    flex-direction: column;
    }

    .ui-page-crm-index .crm-combined-col--setup {
    flex: none;
        max-width: 100%;
    }

    .ui-page-crm-index .crm-combined-col--revenue {
    border-left: 0;
        border-top: 1px solid var(--ui-border);
    }
}

@media (max-width: 1199px) {
    .ui-page-crm-index .crm-combined-col--setup {
    flex: 0 0 46%;
        max-width: 46%;
    }
}

@media (max-width: 575.98px) {
    .ui-page-crm-index .crm-overview__stats {
    grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ui-page-crm-index .crm-setup-panel__toolbar {
    flex-wrap: wrap;
    }

    .ui-page-crm-index .crm-setup-panel__toolbar-start {
    flex: 1 1 100%;
    }

    .ui-page-crm-index .crm-setup-panel__path {
    border-left: 0;
        padding-left: 0;
        margin-left: .15rem;
    }

    .ui-page-crm-index .crm-setup-panel__main {
    grid-template-columns: 1fr;
        gap: .5rem;
    }

    .ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper {
    width: 100%;
        max-width: 100%;
    }

    .ui-page-crm-index .crm-user-modal-body .crm-setup-panel .as-stepper__track {
    justify-content: center;
    }

    .ui-page-crm-index .crm-setup-panel__meta-end {
    text-align: left;
    }
}

/* ---------- Page: crm/dialer.php (root .ui-page-crm-dialer) ---------- */
.ui-page-crm-dialer .sales-dialer-campaigns {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 1rem;
    padding: 0.28rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-crm-dialer .sales-dialer-campaigns__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ui-primary);
    font-weight: 600;
    font-size: var(--ui-fs-base);
    line-height: 1.2;
    min-height: 2.25rem;
    padding: 0.45rem 1rem;
    border-radius: var(--ui-radius-pill);
    cursor: pointer;
}

.ui-page-crm-dialer .sales-dialer-campaigns__tab.is-active {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-page-crm-dialer .sales-dialer-campaigns__tab:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

.ui-page-crm-dialer .sales-dialer-campaign-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.ui-page-crm-dialer .sales-dialer-filter-summary {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-crm-dialer .sales-dialer-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ui-page-crm-dialer .sales-dialer-toolbar__actions .btn {
    min-height: 2.5rem;
    padding-inline: 1.1rem;
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
}

.ui-page-crm-dialer .sales-dialer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--ui-muted) 10%, transparent);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.ui-page-crm-dialer.sales-dialer-page.is-running .sales-dialer-status {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer.sales-dialer-page.is-running .sales-dialer-status__dot {
    background: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.2);
    animation: sales-dialer-pulse 1.6s ease-in-out infinite;
}

.ui-page-crm-dialer .sales-dialer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ui-page-crm-dialer .sales-dialer-stat {
    min-width: 7.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-muted) 4%, transparent);
}

.ui-page-crm-dialer .sales-dialer-stat__label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.15rem;
}

.ui-page-crm-dialer .sales-dialer-stat__value {
    font-size: var(--ui-fs-kpi);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-page-crm-dialer .sales-dialer-stat__value.is-timer {
    color: var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.ui-page-crm-dialer .sales-dialer-main,
.ui-page-crm-dialer .sales-dialer-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.ui-page-crm-dialer .sales-dialer-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
    overflow: hidden;
}

#salesDialerLead {
    overflow-y: auto;
}

.ui-page-crm-dialer .sales-dialer-card__header {
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
}

.ui-page-crm-dialer .sales-dialer-card__title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-crm-dialer .sales-dialer-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-card__body {
    padding: 1.25rem;
}

.ui-page-crm-dialer .sales-dialer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 18rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
}

.ui-page-crm-dialer .sales-dialer-empty__title {
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-dialer .sales-dialer-empty__text {
    margin: 0;
    max-width: 22rem;
    font-size: var(--ui-fs-base);
    line-height: 1.5;
}

.ui-page-crm-dialer .sales-dialer-lead-hero {
    margin-bottom: 1rem;
}

.ui-page-crm-dialer .sales-dialer-company {
    margin: 0 0 0.45rem;
    font-size: var(--ui-fs-kpi);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ui-text);
}

.ui-page-crm-dialer .sales-dialer-company-link {
    color: inherit;
    text-decoration: none;
}

.ui-page-crm-dialer .sales-dialer-company-link:hover {
    color: var(--ui-primary);
    text-decoration: underline;
}

.ui-page-crm-dialer .sales-dialer-company-link__icon {
    margin-left: 0.4rem;
    font-size: 0.7em;
    color: var(--ui-muted);
    vertical-align: middle;
}

.ui-page-crm-dialer .sales-dialer-company-link:hover .sales-dialer-company-link__icon {
    color: var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-profile {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--ui-muted) 3%, transparent);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__company {
    font-weight: 600;
    font-size: var(--ui-fs-lg);
    line-height: 1.3;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-primary);
    text-decoration: none;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-muted) 8%, transparent);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__stat-value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    line-height: 1.1;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__stat-label,
.ui-page-crm-dialer .sales-dialer-profile .crm-overview__fee-detail,
.ui-page-crm-dialer .sales-dialer-profile .crm-overview__utm,
.ui-page-crm-dialer .sales-dialer-profile .crm-overview__module-hint {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__billing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    padding-top: 0.15rem;
    border-top: 1px solid var(--ui-border);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__fee {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__modules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__module {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__module.is-on {
    color: var(--ui-text);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__module-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-muted) 40%, transparent);
}

.ui-page-crm-dialer .sales-dialer-profile .crm-overview__module.is-on .crm-overview__module-dot {
    background: var(--ui-success);
}

.ui-page-crm-dialer .sales-dialer-setup {
    margin: 0 0 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-surface);
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__toolbar-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    white-space: nowrap;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__path {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    text-transform: none;
    letter-spacing: 0;
    padding-left: 0.5rem;
    border-left: 1px solid var(--ui-border);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__body {
    padding: 0.75rem 0.9rem 0.9rem;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__step-name {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__toolbar-end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__demo,
.ui-page-crm-dialer .sales-dialer-setup .as-stepper,
.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__stepper {
    display: none;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__progress {
    height: 4px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-muted) 14%, transparent);
    overflow: hidden;
    margin-top: 0.65rem;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__progress-fill {
    height: 100%;
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__progress-fill.as-score--high {
    background: var(--ui-series-3);
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__progress-fill.as-score--mid {
    background: var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__progress-fill.as-score--low {
    background: var(--ui-series-4);
}

.ui-page-crm-dialer .sales-dialer-setup .crm-setup-panel__meta-end {
    margin-top: 0.45rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    text-align: right;
}

.ui-page-crm-dialer .sales-dialer-setup .as-stepper__summary {
    display: none;
}

.ui-page-crm-dialer .sales-dialer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ui-page-crm-dialer .sales-dialer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-muted) 10%, transparent);
    color: var(--ui-text);
}

.ui-page-crm-dialer .sales-dialer-badge--stage {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-phone-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ui-radius-pill);
}

.ui-page-crm-dialer .sales-dialer-phone-count i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-crm-dialer .sales-dialer-phone-count.is-no-pickup {
    background: rgba(var(--ui-danger-rgb), 0.12);
    color: var(--ui-danger);
}

.ui-page-crm-dialer .sales-dialer-phone-count.is-picked-up {
    background: rgba(var(--ui-success-rgb), 0.14);
    color: var(--ui-series-3);
}

body[data-theme=dark] .ui-page-crm-dialer .sales-dialer-phone-count.is-no-pickup,
html[data-bs-theme="dark"] .ui-page-crm-dialer .sales-dialer-phone-count.is-no-pickup {
    background: rgba(var(--ui-warning-rgb), 0.18);
    color: var(--ui-danger-soft);
}

body[data-theme=dark] .ui-page-crm-dialer .sales-dialer-phone-count.is-picked-up,
html[data-bs-theme="dark"] .ui-page-crm-dialer .sales-dialer-phone-count.is-picked-up {
    background: rgba(var(--ui-success-rgb), 0.18);
    color: var(--ui-success);
}

.ui-page-crm-dialer .sales-dialer-badge--country {
    position: relative;
    padding-right: 0.85rem;
    cursor: pointer;
}

.ui-page-crm-dialer .sales-dialer-badge--country .sales-dialer-country-caret {
    font-size: var(--ui-fs-2xs);
    opacity: 0.7;
}

.ui-page-crm-dialer .sales-dialer-country-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    font-size: var(--ui-fs-lg);
}

.ui-page-crm-dialer .sales-dialer-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0 0 1.1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-border);
}

.ui-page-crm-dialer .sales-dialer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 0;
    background: var(--ui-surface);
    border-radius: 0;
}

.ui-page-crm-dialer .sales-dialer-contact-item > span:last-child {
    min-width: 0;
    flex: 1;
}

.ui-page-crm-dialer .sales-dialer-contact-item__icon {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-dialer .sales-dialer-contact-item__label {
    display: block;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-contact-item__value {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-crm-dialer .sales-dialer-contact-item--phone .sales-dialer-contact-item__value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ui-page-crm-dialer .sales-dialer-contact-item--wrap .sales-dialer-contact-item__value {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

.ui-page-crm-dialer .sales-dialer-contact-item--demo.is-booked .sales-dialer-contact-item__value {
    color: var(--ui-series-3);
}

.ui-page-crm-dialer .sales-dialer-contact-item__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    word-break: break-word;
}

.ui-page-crm-dialer .sales-dialer-call-zone {
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--ui-radius);
    border: 1px solid color-mix(in srgb, var(--ui-success) 25%, var(--ui-border));
    background: linear-gradient(135deg, rgba(var(--ui-success-rgb), 0.08), rgba(var(--ui-primary-rgb), 0.05));
}

.ui-page-crm-dialer .sales-dialer-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ui-page-crm-dialer .sales-dialer-call-actions .btn {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
}

.ui-page-crm-dialer .sales-dialer-call-actions .btn-call {
    flex: 1 1 10rem;
    background: var(--ui-success);
    border-color: var(--ui-success);
    color: var(--ui-on-primary);
    box-shadow: 0 4px 14px rgba(var(--ui-success-rgb), 0.28);
}

.ui-page-crm-dialer .sales-dialer-call-actions .btn-call:hover,
.ui-page-crm-dialer .sales-dialer-call-actions .btn-call:focus {
    background: color-mix(in srgb, var(--ui-success) 88%, rgb(var(--ui-black-rgb)));
    border-color: color-mix(in srgb, var(--ui-success) 88%, rgb(var(--ui-black-rgb)));
    color: var(--ui-on-primary);
}

.ui-page-crm-dialer .sales-dialer-call-status {
    margin-top: 0.6rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-call-status:empty {
    display: none;
    margin: 0;
}

.ui-page-crm-dialer .sales-dialer-call-status.is-success {
    color: var(--ui-success); font-weight: 600;
}

.ui-page-crm-dialer .sales-dialer-call-status.is-error {
    color: var(--ui-danger); font-weight: 600;
}

.ui-page-crm-dialer .sales-dialer-actions .sales-dialer-card__body {
    padding-bottom: 1.75rem;
}

.ui-page-crm-dialer .sales-dialer-form-section {
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
}

.ui-page-crm-dialer .sales-dialer-form-section .form-label {
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-form-section .form-select,
.ui-page-crm-dialer .sales-dialer-form-section .form-control {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border);
}

.ui-page-crm-dialer .sales-dialer-form-section .form-select {
    font-size: var(--ui-fs-base);
    min-height: 2.6rem;
}

.ui-page-crm-dialer .sales-dialer-outcome-hint {
    margin: -0.5rem 0 0.9rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-callback {
    margin: 0 0 0.9rem;
}

.ui-page-crm-dialer .sales-dialer-callback .form-label {
    margin-bottom: 0.35rem;
}

.ui-page-crm-dialer .sales-dialer-callback-date {
    min-height: 2.6rem !important;
}

.ui-page-crm-dialer .sales-dialer-callback-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.ui-page-crm-dialer .sales-dialer-form-section .form-control {
    min-height: 6.5rem;
    resize: vertical;
}

.ui-page-crm-dialer .sales-dialer-notes {
    margin-bottom: 1.25rem;
}

.ui-page-crm-dialer .sales-dialer-save-btn {
    min-height: 2.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
    font-weight: 700;
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 4px 14px rgba(var(--ui-primary-rgb), 0.22);
}

.ui-page-crm-dialer .sales-dialer-context {
    max-height: 36rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.ui-page-crm-dialer .sales-dialer-actions .sales-dialer-profile {
    margin-bottom: 1rem;
}

.ui-page-crm-dialer .sales-dialer-actions .sales-dialer-call-zone {
    margin-bottom: 1rem;
}

.ui-page-crm-dialer .sales-dialer-context-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 10rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

.ui-page-crm-dialer .sales-dialer-context-empty .sales-dialer-empty__icon {
    font-size: var(--ui-fs-xl);
    opacity: 1;
}

.ui-page-crm-dialer .sales-dialer-context-empty i {
    font-size: inherit;
    opacity: 1;
}

.ui-page-crm-dialer .sales-dialer-timeline-item {
    position: relative;
    padding: 0 0 1rem 1.35rem;
    border-left: 2px solid color-mix(in srgb, var(--ui-border) 90%, transparent);
    margin-left: 0.45rem;
}

.ui-page-crm-dialer .sales-dialer-timeline-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.ui-page-crm-dialer .sales-dialer-timeline-item::before {
    content: '';
    position: absolute;
    left: -0.42rem;
    top: 0.2rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 2px solid var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-timeline-item--note::before {
    border-color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-timeline-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.ui-page-crm-dialer .sales-dialer-timeline-item__badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer .sales-dialer-timeline-item__date {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-crm-dialer .sales-dialer-timeline-item__body {
    font-size: var(--ui-fs-base);
    line-height: 1.45;
    color: var(--ui-text);
    word-break: break-word;
}

body[data-theme=dark] .ui-page-crm-dialer .sales-dialer-card,
body[data-theme=dark] .ui-page-crm-dialer .sales-dialer-toolbar {
    box-shadow: none;
}

body[data-theme=dark] .ui-page-crm-dialer .sales-dialer-call-zone {
    background: linear-gradient(135deg, rgba(var(--ui-success-rgb), 0.1), rgba(var(--ui-primary-rgb), 0.08));
}

#salesDialerFiltersModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--ui-black-rgb), 0.18);
    background: var(--ui-surface);
}

#salesDialerFiltersModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
}

#salesDialerFiltersModal .modal-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0;
}

#salesDialerFiltersModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
}

#salesDialerFiltersModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
}

#salesDialerFiltersModal .modal-footer {
    border-top: 0 !important;
    padding: 0.5rem 1.35rem 1.2rem;
}

#salesDialerFiltersModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
}

#salesDialerFiltersModal .form-control,
#salesDialerFiltersModal .form-select {
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: var(--ui-text);
}

#salesDialerFiltersModal .select2-container {
    width: 100% !important;
}

#salesDialerFiltersModal .select2-container .select2-selection--multiple {
    min-height: 42px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.12);
    padding: 0.25rem 0.45rem;
}

#salesDialerFiltersModal .select2-container--focus .select2-selection--multiple,
#salesDialerFiltersModal .select2-container--open .select2-selection--multiple {
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.16);
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#salesDialerFiltersModal .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.15rem 0;
}

#salesDialerFiltersModal .select2-container .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    color: var(--ui-text);
    padding: 0.15rem 0.45rem 0.15rem 0.2rem;
    font-size: var(--ui-fs-sm);
}

#salesDialerFiltersModal .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0.2rem;
    min-width: 8rem;
}

#salesDialerFiltersModal .select2-dropdown {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    overflow: hidden;
}

#salesDialerFiltersModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#salesDialerFiltersModal .pricing-section {
    padding: 1rem 0;
}

#salesDialerFiltersModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

#salesDialerFiltersModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

@media (min-width: 992px) {
    .ui-page-crm-dialer .sales-dialer-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.95fr);
    }

    .ui-page-crm-dialer .sales-dialer-side {
    position: sticky;
        top: 1rem;
        padding-bottom: 0.25rem;
    }

    #salesDialerLead {
    max-height: calc(100vh - 2rem);
    }
}

@media (min-width: 576px) {
    .ui-page-crm-dialer .sales-dialer-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #salesDialerFiltersModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

@keyframes sales-dialer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ---------- Page: crm/management/index.php (root .ui-page-crm-management-index) ---------- */
.ui-page-crm-management-index.md-dash.content {
    position: relative;
    color-scheme: dark;
    isolation: isolate;
    margin: 0;
    padding: 0 0 3rem;
    min-height: calc(100vh - 70px);
    color: var(--ui-on-primary);
    background:
    radial-gradient(ellipse 55% 32% at 50% 0%, rgba(var(--ui-success-rgb), 0.28), transparent 72%),
    rgb(var(--ui-ink-rgb));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ui-page-crm-management-index.md-dash .md-wrap {
    position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 2.5rem 1.25rem 0;
}

.ui-page-crm-management-index.md-dash .md-hero {
    text-align: center; padding: 1.5rem 0 1.25rem;
}

.ui-page-crm-management-index.md-dash .md-kicker {
    margin: 0 0 0.85rem; color: var(--ui-success); font-size: var(--ui-fs-sm); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}

.ui-page-crm-management-index.md-dash .md-hero h1 {
    margin: 0; color: var(--ui-success-tint); font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1.02;
}

.ui-page-crm-management-index.md-dash .md-lead {
    max-width: 38rem; margin: 1rem auto 0; color: var(--ui-faint); font-size: var(--ui-fs-lg); line-height: 1.5;
}

.ui-page-crm-management-index.md-dash .md-tabs {
    display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 1rem;
}

.ui-page-crm-management-index.md-dash .md-tab {
    border: 1px solid transparent; background: transparent; color: var(--ui-faint); border-radius: var(--ui-radius-pill); padding: 0.45rem 0.95rem; min-height: 44px; white-space: nowrap; font-weight: 550;
}

.ui-page-crm-management-index.md-dash .md-tab:hover {
    background: rgba(var(--ui-success-rgb), 0.12); color: var(--ui-success-tint);
}

.ui-page-crm-management-index.md-dash .md-tab.is-active {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-crm-management-index.md-dash .md-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; justify-content: center; margin: 0 auto 1.4rem; padding: 0.85rem; border: 1px solid rgba(var(--ui-success-rgb), 0.22); border-radius: var(--ui-radius); background: rgba(var(--ui-ink-rgb), 0.88); backdrop-filter: blur(16px);
}

.ui-page-crm-management-index.md-dash .md-field {
    min-width: 8.5rem;
}

.ui-page-crm-management-index.md-dash .md-field-range {
    min-width: 18rem; flex: 1 1 18rem; max-width: 22rem;
}

.ui-page-crm-management-index.md-dash .md-range-input {
    position: relative;
}

.ui-page-crm-management-index.md-dash .md-range-input i {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--ui-success); pointer-events: none;
}

.ui-page-crm-management-index.md-dash .md-toolbar .md-range-input .form-control {
    width: 100%; padding-left: 2.6rem; cursor: pointer;
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker {
    width: auto; margin-top: 8px; padding: 0.35rem; border: 1px solid rgba(var(--ui-success-rgb), 0.22); border-radius: var(--ui-radius); background: rgb(var(--ui-ink-rgb)); color: var(--ui-on-primary); box-shadow: 0 18px 48px rgba(var(--ui-black-rgb), 0.45); font-family: inherit;
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker:before {
    border-bottom-color: rgba(var(--ui-success-rgb), 0.22);
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker:after {
    border-bottom-color: rgb(var(--ui-ink-rgb));
}

body .ui-page-crm-management-index .md-range-pop .ranges ul {
    width: 148px;
}

body .ui-page-crm-management-index .md-range-pop .ranges li {
    margin: 2px 6px; border-radius: var(--ui-radius-pill); color: var(--ui-faint);
}

body .ui-page-crm-management-index .md-range-pop .ranges li:hover {
    background: rgba(var(--ui-success-rgb), 0.12); color: var(--ui-on-primary);
}

body .ui-page-crm-management-index .md-range-pop .ranges li.active {
    background: var(--ui-success); color: var(--ui-success-text);
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker .calendar-table,
body .ui-page-crm-management-index .md-range-pop.daterangepicker .calendar-table table {
    background: transparent; border-color: transparent;
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker .calendar-table td,
body .ui-page-crm-management-index .md-range-pop.daterangepicker .calendar-table th {
    color: var(--ui-on-primary);
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker td.off,
body .ui-page-crm-management-index .md-range-pop.daterangepicker td.off.in-range,
body .ui-page-crm-management-index .md-range-pop.daterangepicker td.off.start-date,
body .ui-page-crm-management-index .md-range-pop.daterangepicker td.off.end-date {
    background-color: transparent; color: var(--ui-success);
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker td.in-range {
    background-color: rgba(var(--ui-success-rgb), 0.28); color: var(--ui-on-primary);
}

body .ui-page-crm-management-index .md-range-pop.daterangepicker td.active,
body .ui-page-crm-management-index .md-range-pop.daterangepicker td.active:hover,
body .ui-page-crm-management-index .md-range-pop.daterangepicker td.available:hover,
body .ui-page-crm-management-index .md-range-pop.daterangepicker th.available:hover {
    background-color: var(--ui-success); color: var(--ui-success-text);
}

body .ui-page-crm-management-index .md-range-pop .calendar-table .next span,
body .ui-page-crm-management-index .md-range-pop .calendar-table .prev span {
    border-color: var(--ui-success);
}

body .ui-page-crm-management-index .md-range-pop.show-ranges .drp-calendar.left {
    border-left-color: rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-crm-management-index.md-dash .md-field label,
.ui-page-crm-management-index.md-dash .md-switch {
    display: block; margin-bottom: 0.25rem; color: var(--ui-faint); font-size: var(--ui-fs-2xs); letter-spacing: 0.08em; text-transform: uppercase;
}

.ui-page-crm-management-index.md-dash .md-toolbar .form-control,
.ui-page-crm-management-index.md-dash .md-toolbar .form-select {
    min-height: 44px; font-size: var(--ui-fs-lg); color: var(--ui-success-tint); background: rgba(var(--ui-white-rgb), 0.05); border: 1px solid rgba(var(--ui-success-rgb), 0.2); border-radius: var(--ui-radius-pill); padding-left: 0.9rem;
}

.ui-page-crm-management-index.md-dash .md-toolbar .form-control:focus,
.ui-page-crm-management-index.md-dash .md-toolbar .form-select:focus {
    border-color: var(--ui-success); box-shadow: 0 0 0 3px rgba(var(--ui-success-rgb), 0.28); background: rgba(var(--ui-white-rgb), 0.08); color: var(--ui-success-tint);
}

.ui-page-crm-management-index.md-dash .md-switch {
    display: flex; align-items: center; gap: 0.45rem; min-height: 44px; margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--ui-fs-base); color: var(--ui-faint);
}

.ui-page-crm-management-index.md-dash .md-btn {
    border: 0; border-radius: var(--ui-radius-pill); min-height: 44px; padding: 0 1.1rem; font-weight: 650;
}

.ui-page-crm-management-index.md-dash .md-btn-primary {
    background: var(--ui-success); color: var(--ui-success-text);
}

.ui-page-crm-management-index.md-dash .md-btn-primary:hover {
    background: var(--ui-success); color: var(--ui-success-text);
}

.ui-page-crm-management-index.md-dash .md-btn-ghost {
    background: var(--ui-success-tint); color: var(--ui-success-text);
}

.ui-page-crm-management-index.md-dash .md-btn-ghost:hover {
    background: var(--ui-surface); color: var(--ui-success-text);
}

.ui-page-crm-management-index.md-dash .md-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.85rem;
}

.ui-page-crm-management-index.md-dash .md-section {
    grid-column: 1 / -1; margin: 0.85rem 0 0; color: var(--ui-success); font-size: var(--ui-fs-sm); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
}

.ui-page-crm-management-index.md-dash .md-card {
    display: flex; flex-direction: column; background: rgb(var(--ui-ink-rgb)); border: 1px solid rgba(var(--ui-success-rgb), 0.16); border-radius: var(--ui-radius); padding: 1.05rem 1.1rem 0.9rem; min-height: 8.2rem; box-shadow: inset 0 1px 0 rgba(var(--ui-success-rgb), 0.08);
}

.ui-page-crm-management-index.md-dash .md-skel {
    display: flex; flex-direction: column; gap: 0.75rem;
}

.ui-page-crm-management-index.md-dash .md-skel-line {
    display: block; border-radius: var(--ui-radius-pill); background: linear-gradient(100deg, rgba(var(--ui-white-rgb), 0.05) 20%, rgba(var(--ui-info-rgb), 0.38) 45%, rgba(var(--ui-white-rgb), 0.05) 70%); background-size: 220% 100%; animation: md-shimmer 1.25s ease-in-out infinite;
}

.ui-page-crm-management-index.md-dash .md-skel-line--label {
    width: 42%; height: 0.7rem;
}

.ui-page-crm-management-index.md-dash .md-skel-line--value {
    width: 58%; height: 2rem; border-radius: var(--ui-radius); margin-top: 0.35rem;
}

.ui-page-crm-management-index.md-dash .md-skel-line--spark {
    width: 100%; height: 2.4rem; border-radius: var(--ui-radius); margin-top: 0.8rem;
}

.ui-page-crm-management-index.md-dash .md-skel-line--chart {
    width: 100%; height: 220px; border-radius: var(--ui-radius);
}

.ui-page-crm-management-index.md-dash .md-skel-line--chart.is-tall {
    height: 380px;
}

.ui-page-crm-management-index.md-dash .md-card.md-wide {
    grid-column: 1 / -1;
}

.ui-page-crm-management-index.md-dash .md-label {
    display: flex; align-items: center; gap: 0.35rem; color: var(--ui-silver); font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

.ui-page-crm-management-index.md-dash .md-tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: var(--ui-radius-pill); background: transparent; color: var(--ui-success); cursor: help;
}

.ui-page-crm-management-index.md-dash .md-tip:hover,
.ui-page-crm-management-index.md-dash .md-tip:focus-visible {
    color: var(--ui-on-primary); outline: none;
}

.ui-page-crm-management-index.md-dash .md-tip-bubble {
    display: none; position: absolute; z-index: 8; left: 0; top: calc(100% + 8px); width: min(320px, 72vw); padding: 0.75rem 0.85rem; border: 1px solid rgba(var(--ui-success-rgb), 0.22); border-radius: var(--ui-radius); background: rgb(var(--ui-ink-rgb)); color: var(--ui-on-primary); font-size: var(--ui-fs-sm); font-weight: 450; letter-spacing: 0; line-height: 1.45; text-align: left; text-transform: none; box-shadow: 0 16px 40px rgba(var(--ui-black-rgb), 0.4);
}

.ui-page-crm-management-index.md-dash .md-tip:hover .md-tip-bubble,
.ui-page-crm-management-index.md-dash .md-tip:focus-visible .md-tip-bubble {
    display: block;
}

.ui-page-crm-management-index.md-dash .md-tip-line {
    display: block;
}

.ui-page-crm-management-index.md-dash .md-tip-line + .md-tip-band,
.ui-page-crm-management-index.md-dash .md-tip-band + .md-tip-line {
    margin-top: 0.45rem;
}

.ui-page-crm-management-index.md-dash .md-tip-band {
    display: flex; align-items: center; gap: 0.45rem; margin-top: 0.18rem;
}

.ui-page-crm-management-index.md-dash .md-tip-dot {
    width: 0.45rem; height: 0.45rem; border-radius: var(--ui-radius-pill); flex: none; background: var(--ui-success);
}

.ui-page-crm-management-index.md-dash .md-tip-band--excellent .md-tip-dot,
.ui-page-crm-management-index.md-dash .md-tip-band--good .md-tip-dot {
    background: var(--ui-success);
}

.ui-page-crm-management-index.md-dash .md-tip-band--average .md-tip-dot {
    background: var(--ui-warning);
}

.ui-page-crm-management-index.md-dash .md-tip-band--bad .md-tip-dot {
    background: var(--ui-danger-soft);
}

.ui-page-crm-management-index.md-dash .md-value {
    color: var(--ui-on-primary); font-size: 2rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1.15; margin-top: 0.35rem;
}

.ui-page-crm-management-index.md-dash .md-delta {
    font-size: var(--ui-fs-base); font-weight: 650;
}

.ui-page-crm-management-index.md-dash .md-delta.up {
    color: var(--ui-success);
}

.ui-page-crm-management-index.md-dash .md-delta.down {
    color: var(--ui-danger-soft);
}

.ui-page-crm-management-index.md-dash .md-badge {
    margin-top: 0.35rem; color: var(--ui-silver); font-size: var(--ui-fs-xs);
}

.ui-page-crm-management-index.md-dash .md-chart {
    height: 280px; margin-top: 0.6rem; position: relative;
}

.ui-page-crm-management-index.md-dash .md-map {
    height: 440px; margin-top: 0.4rem;
}

.ui-page-crm-management-index.md-dash .jvectormap-container {
    background: transparent !important;
}

.ui-page-crm-management-index .jvectormap-tip {
    background: rgb(var(--ui-ink-rgb)); border: 1px solid rgba(var(--ui-white-rgb), 0.12); border-radius: var(--ui-radius-md); padding: 0.4rem 0.6rem; font-size: var(--ui-fs-sm); box-shadow: 0 12px 32px rgba(var(--ui-black-rgb), 0.4);
}

.ui-page-crm-management-index.md-dash .md-card {
    overflow: visible;
}

.ui-page-crm-management-index.md-dash .md-spark {
    position: relative; margin-top: auto; padding-top: 0.75rem;
}

.ui-page-crm-management-index.md-dash .md-spark canvas {
    display: block; width: 100%; max-height: 72px;
}

.ui-page-crm-management-index.md-dash .md-chart-tip {
    position: absolute; z-index: 6; left: 0; top: 0; transform: translate(-50%, calc(-100% - 6px)); display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid rgba(var(--ui-success-rgb), 0.22); border-radius: var(--ui-radius-md); background: rgb(var(--ui-ink-rgb)); color: var(--ui-on-primary); font-size: var(--ui-fs-xs); font-weight: 450; letter-spacing: 0; line-height: 1.35; text-transform: none; white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: 0 12px 32px rgba(var(--ui-black-rgb), 0.4);
}

.ui-page-crm-management-index.md-dash .md-chart-tip-title {
    color: var(--ui-silver);
}

.ui-page-crm-management-index.md-dash .md-chart-tip-row {
    display: flex; align-items: center; gap: 0.35rem;
}

.ui-page-crm-management-index.md-dash b,
.ui-page-crm-management-index.md-dash strong {
    color: inherit;
}

.ui-page-crm-management-index.md-dash .md-chart-tip-row strong {
    color: var(--ui-on-primary); font-weight: 650;
}

.ui-page-crm-management-index.md-dash .md-chart-tip-swatch {
    width: 0.45rem; height: 0.45rem; border-radius: var(--ui-radius-xs); flex: none;
}

.ui-page-crm-management-index.md-dash .md-chart canvas {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none;
}

.ui-page-crm-management-index.md-dash .md-comp {
    display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem;
}

.ui-page-crm-management-index.md-dash .md-comp-row {
    display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr auto; gap: 0.8rem; align-items: center;
}

.ui-page-crm-management-index.md-dash .md-comp-name {
    color: var(--ui-faint); font-size: var(--ui-fs-md);
}

.ui-page-crm-management-index.md-dash .md-comp-track {
    height: 8px; border-radius: var(--ui-radius-pill); background: rgba(var(--ui-white-rgb), 0.06); overflow: hidden;
}

.ui-page-crm-management-index.md-dash .md-comp-fill {
    display: block; height: 100%; border-radius: var(--ui-radius-pill);
}

.ui-page-crm-management-index.md-dash .md-comp-val {
    color: var(--ui-on-primary); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}

.ui-page-crm-management-index.md-dash .md-comp-row.is-net {
    margin-top: 0.2rem; padding-top: 0.7rem; border-top: 1px solid rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-crm-management-index.md-dash .table {
    --bs-table-bg: transparent; --bs-table-color: var(--ui-on-primary); --bs-table-border-color: rgba(var(--ui-white-rgb), 0.08); color: var(--ui-on-primary); margin-bottom: 0;
}

.ui-page-crm-management-index.md-dash .table td {
    border-color: rgba(var(--ui-white-rgb), 0.08); padding-top: 0.55rem; padding-bottom: 0.55rem;
}

.ui-page-crm-management-index .md-modal .modal-content {
    background: rgb(var(--ui-ink-rgb)); color: var(--ui-on-primary); border: 1px solid rgba(var(--ui-white-rgb), 0.08); border-radius: var(--ui-radius);
}

.ui-page-crm-management-index .md-modal .modal-header,
.ui-page-crm-management-index .md-modal .modal-footer {
    border-color: rgba(var(--ui-white-rgb), 0.08);
}

.ui-page-crm-management-index .md-modal .form-control,
.ui-page-crm-management-index .md-modal .form-select {
    min-height: 44px; font-size: var(--ui-fs-lg); color: var(--ui-on-primary); background: rgba(var(--ui-white-rgb), 0.04); border: 1px solid rgba(var(--ui-white-rgb), 0.1); border-radius: var(--ui-radius);
}

.ui-page-crm-management-index .md-modal .btn-close {
    filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-crm-management-index.md-dash .md-skel-line {
    animation: none; background: rgba(var(--ui-white-rgb), 0.06);
    }
}

@media (max-width: 720px) {
    .ui-page-crm-management-index.md-dash .md-hero h1 {
    font-size: 2.15rem;
    }

    .ui-page-crm-management-index.md-dash .md-toolbar {
    border-radius: var(--ui-radius);
    }
}

@keyframes md-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -80% 0; } }

/* ---------- Page: crm/user_analytics_ai_chat.php (root .ui-page-crm-user-analytics-ai-chat) ---------- */
.ui-page-crm-user-analytics-ai-chat .ua-ai-chat-transcript {
    max-height: min(70vh, 720px);
    overflow-y: auto;
}

#ua-ai-chat-modal .ua-ai-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.15rem 0;
}

#ua-ai-chat-modal .ua-ai-chat-thread-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#ua-ai-chat-modal .ua-ai-chat-msg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    padding: 0 0.25rem;
}

#ua-ai-chat-modal .chat-msg-row {
    display: flex;
    gap: 0.75rem;
    max-width: 100%;
}

#ua-ai-chat-modal .chat-msg-row.user {
    flex-direction: row-reverse;
}

#ua-ai-chat-modal .chat-msg-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

#ua-ai-chat-modal .chat-msg-row.user .chat-msg-avatar {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

#ua-ai-chat-modal .chat-msg-row.assistant .chat-msg-avatar {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

#ua-ai-chat-modal .chat-msg {
    min-width: 0;
    max-width: min(42rem, calc(100% - 44px));
}

#ua-ai-chat-modal .chat-msg.user {
    margin-left: auto;
}

#ua-ai-chat-modal .chat-msg .bubble {
    padding: 0.75rem 1rem;
    border-radius: var(--ui-radius-sm);
    text-align: left;
    line-height: 1.55;
    font-size: var(--ui-fs-sm);
    word-break: break-word;
}

#ua-ai-chat-modal .chat-msg.user .bubble {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    border-bottom-right-radius: 0.15rem;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: 0 1px 4px rgba(var(--ui-black-rgb), 0.04);
    border-bottom-left-radius: 0.15rem;
    color: var(--ui-text);
}

body[data-theme=dark] #ua-ai-chat-modal .chat-msg.assistant .bubble {
    background: rgba(var(--ui-ink-rgb), 0.95);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-rich > *:last-child {
    margin-bottom: 0;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-lead {
    margin: 0 0 0.85rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.6;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-lead .ai-chat-p {
    margin: 0 0 0.35rem;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-lead .ai-chat-p:last-child {
    margin-bottom: 0;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-section {
    margin: 0 0 1rem;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 3px solid rgba(var(--ui-primary-rgb), 0.35);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h1,
#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h2,
#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h3 {
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h1 {
    font-size: var(--ui-fs-lg);
    font-weight: 650;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h2 {
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-h3 {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-md-icon {
    color: var(--ui-primary);
    margin-right: 0.2rem;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-img {
    max-width: min(100%, 16rem);
    border-radius: var(--ui-radius-sm);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-p {
    margin: 0 0 0.4rem;
    font-size: inherit;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-p:last-child {
    margin-bottom: 0;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-list {
    margin: 0.45rem 0 0.65rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-list li {
    position: relative;
    margin: 0;
    padding: 0 0 0 1rem;
    line-height: 1.5;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble ul.ai-chat-list > li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ui-primary);
    opacity: 0.5;
    transform: translateY(-50%);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble ul.ai-chat-list > li:has(.ai-chat-item-inner)::before {
    display: none;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble ul.ai-chat-list > li:has(.ai-chat-item-inner) {
    padding-left: 0;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-item-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-term {
    font-weight: 500;
    color: var(--ui-text);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-foot {
    margin-top: 0.5rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble a.ai-chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    color: var(--ui-primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.35);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble a.ai-chat-link:hover {
    color: var(--ui-primary-hover);
    border-bottom-color: var(--ui-primary-hover);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble a.ai-chat-link .ai-chat-link-icon {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
}

#ua-ai-chat-modal .chat-msg.user .bubble a.ai-chat-link {
    color: var(--ui-on-primary);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.55);
}

#ua-ai-chat-modal .chat-msg.assistant .bubble .ai-chat-table-wrap {
    margin: 0.5rem 0 0.75rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-chat-view-btn {
    min-height: 44px;
    min-width: 44px;
}

.ui-page-crm-user-analytics-ai-chat tr.ua-ai-chat-row-clickable {
    cursor: pointer;
}

.ui-page-crm-user-analytics-ai-chat tr.ua-ai-chat-row-clickable:hover td {
    background: rgba(var(--ui-primary-rgb), 0.04);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-purple-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__icon i {
    font-size: var(--ui-fs-kpi);
    color: rgba(var(--ui-purple-rgb), 0.6);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-series-6);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__desc {
    font-size: var(--ui-fs-sm);
    color: var(--ui-series-6);
    max-width: 420px;
    line-height: 1.6;
}

body[data-theme="dark"] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__icon {
    background: rgba(var(--ui-purple-rgb), 0.12);
}

body[data-theme="dark"] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__icon i {
    color: rgba(var(--ui-purple-rgb), 0.5);
}

body[data-theme="dark"] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__title {
    color: var(--ui-text);
}

body[data-theme="dark"] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-empty__desc {
    color: var(--ui-muted);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    color: var(--ui-text);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report > .row:first-child {
    margin-bottom: 0.5rem !important;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card {
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04) !important;
    overflow: hidden;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card.mb-3 {
    margin-bottom: 1.25rem !important;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.07);
    padding: 0.9rem 1.15rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-title i {
    color: var(--ui-primary);
    font-size: 0.9em;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-body {
    padding: 1.15rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.65;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-body > :last-child {
    margin-bottom: 0 !important;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card.bg-light {
    background: var(--ui-surface) !important;
    border: 1px solid rgba(var(--ui-ink-rgb), 0.07) !important;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat:hover,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card.bg-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.1rem rgba(var(--ui-ink-rgb), 0.07) !important;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat .card-body {
    padding: 1.1rem 0.85rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat-value {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ui-primary);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .alert {
    border: 0;
    border-radius: var(--ui-radius);
    padding: 1rem 1.15rem;
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .alert-info {
    background: rgba(var(--ui-primary-rgb), 0.06);
    color: var(--ui-text);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .alert-light {
    background: var(--ui-subtle);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-body h3,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-body h4,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-body h5 {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report ul,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report ol {
    padding-left: 1.15rem;
    margin-bottom: 0.5rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report li {
    margin-bottom: 0.3rem;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .list-group {
    border-radius: var(--ui-radius-md);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .list-group-item {
    font-size: var(--ui-fs-sm);
    line-height: 1.6;
    padding: 0.75rem 0.95rem;
    border-color: rgba(var(--ui-ink-rgb), 0.07);
    background: transparent;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table > thead th {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-muted);
    background: var(--ui-subtle);
    border-bottom: 1px solid rgba(var(--ui-ink-rgb), 0.08);
    white-space: nowrap;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table > tbody td {
    vertical-align: middle;
    border-color: rgba(var(--ui-ink-rgb), 0.05);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--ui-subtle);
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .badge {
    font-weight: 500;
    font-size: var(--ui-fs-xs);
    padding: 0.35em 0.6em;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report blockquote,
.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .blockquote {
    border-left: 3px solid var(--ui-primary);
    padding: 0.5rem 0 0.5rem 0.9rem;
    margin: 0.75rem 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-style: italic;
}

.ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .blockquote-footer {
    font-style: normal;
    margin-top: 0.25rem;
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card {
    border-color: rgba(var(--ui-white-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card-header {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .air-stat,
body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .card.bg-light {
    background: rgba(var(--ui-white-rgb), 0.03) !important;
    border-color: rgba(var(--ui-white-rgb), 0.08) !important;
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .alert-info {
    background: rgba(var(--ui-primary-rgb), 0.12);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .alert-light {
    background: rgba(var(--ui-white-rgb), 0.04);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table > thead th {
    background: rgba(var(--ui-white-rgb), 0.04);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table > tbody td {
    border-color: rgba(var(--ui-white-rgb), 0.06);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(var(--ui-white-rgb), 0.03);
}

body[data-theme=dark] .ui-page-crm-user-analytics-ai-chat .ua-ai-insights-report .list-group-item {
    border-color: rgba(var(--ui-white-rgb), 0.08);
    color: var(--ui-text);
}

#ua-ai-chat-modal .ua-ai-msg-feedback {
    margin-top: 0.45rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#ua-ai-chat-modal .ua-ai-msg-feedback .badge {
    font-weight: 500;
}

#ua-ai-chat-modal .ua-ai-turn-debug {
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.04);
    font-size: var(--ui-fs-xs);
}

#ua-ai-chat-modal .ua-ai-turn-debug__meta {
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

#ua-ai-chat-modal .ua-ai-turn-debug__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#ua-ai-chat-modal .ua-ai-turn-debug__steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

#ua-ai-chat-modal .ua-ai-turn-debug__steps li.is-current {
    color: var(--ui-primary);
    font-weight: 500;
}

body[data-theme=dark] #ua-ai-chat-modal .ua-ai-turn-debug {
    background: rgba(var(--ui-white-rgb), 0.04);
    border-color: rgba(var(--ui-white-rgb), 0.1);
}

/* ---------- Page: seller/fivex.php (root .ui-page-seller-fivex) ---------- */
.ui-page-seller-fivex.fivex-page {
    padding-bottom: 2rem;
}

.ui-page-seller-fivex.fivex-page .card {
    transition: box-shadow 0.2s ease;
}

.ui-page-seller-fivex .fivex-connected-card {
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-connected-card {
    border-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-connected-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.ui-page-seller-fivex .fivex-connected-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ui-page-seller-fivex .fivex-connected-logo {
    height: 24px;
    width: auto;
}

.ui-page-seller-fivex .fivex-connected-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: rgba(var(--ui-success-rgb), 0.1);
    color: var(--ui-success-text);
    border: 1px solid rgba(var(--ui-success-rgb), 0.22);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-connected-badge {
    background: rgba(var(--ui-success-rgb), 0.14);
    border-color: rgba(var(--ui-success-rgb), 0.28);
}

.ui-page-seller-fivex .fivex-connected-badge__dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--ui-success);
    flex-shrink: 0;
}

.ui-page-seller-fivex .fivex-connected-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ui-page-seller-fivex .fivex-disconnect-btn {
    border: 1px solid rgba(var(--ui-danger-rgb), 0.28);
    color: var(--ui-danger);
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-fivex .fivex-disconnect-btn:hover {
    background: rgba(var(--ui-danger-rgb), 0.05);
    border-color: rgba(var(--ui-danger-rgb), 0.45);
    color: var(--ui-danger);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-disconnect-btn {
    border-color: rgba(var(--ui-danger-rgb), 0.32);
    color: var(--ui-danger-soft);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-disconnect-btn:hover {
    background: rgba(var(--ui-danger-rgb), 0.1);
    color: var(--ui-danger-soft);
}

.ui-page-seller-fivex .fivex-info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-info-strip {
    border-top-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.ui-page-seller-fivex .fivex-info-item + .fivex-info-item {
    border-left: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-info-item + .fivex-info-item {
    border-left-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-info-item--link:hover {
    background: var(--ui-row-hover);
    color: inherit;
    text-decoration: none;
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-info-item--link:hover {
    background: var(--ui-primary-soft);
}

.ui-page-seller-fivex .fivex-info-item__icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
    margin-top: 0.05rem;
}

.ui-page-seller-fivex .fivex-info-item__icon--blue {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-info-item__icon--blue {
    background: var(--ui-primary-line);
    color: var(--ui-info-text);
}

.ui-page-seller-fivex .fivex-info-item__icon--green {
    background: rgba(var(--ui-success-rgb), 0.12);
    color: var(--ui-success-text);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-info-item__icon--green {
    background: rgba(var(--ui-success-rgb), 0.15);
}

.ui-page-seller-fivex .fivex-info-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ui-page-seller-fivex .fivex-info-item__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-seller-fivex .fivex-info-item__text {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.5;
}

.ui-page-seller-fivex .fivex-info-item__external {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-faint);
    flex-shrink: 0;
    margin-top: 0.25rem;
    transition: color 0.15s ease;
}

.ui-page-seller-fivex .fivex-info-item--link:hover .fivex-info-item__external {
    color: var(--ui-primary);
}

.ui-page-seller-fivex .fivex-sync-card {
    border: 1px solid var(--ui-border);
    overflow: hidden;
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-card {
    border-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-sync-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-head {
    border-bottom-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-sync-head__intro {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ui-page-seller-fivex .fivex-sync-head__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-md);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-head__icon {
    background: var(--ui-primary-line);
    color: var(--ui-info-text);
}

.ui-page-seller-fivex .fivex-sync-head__title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-seller-fivex .fivex-sync-head__subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-seller-fivex .fivex-sync-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.ui-page-seller-fivex .fivex-sync-table thead tr {
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-table thead tr {
    border-bottom-color: var(--ui-border);
}

.ui-page-seller-fivex .fivex-sync-table thead th {
    padding: 0.7rem 1.25rem;
    background: var(--ui-page);
    white-space: nowrap;
    border: none;
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-table thead th {
    background: var(--ui-subtle);
}

.ui-page-seller-fivex .fivex-sync-table thead th:first-child {
    min-width: 210px;
}

.ui-page-seller-fivex .fivex-sync-table thead th:not(:first-child) {
    text-align: center;
    width: 130px;
}

.ui-page-seller-fivex .fivex-sync-table tbody tr {
    border-bottom: 1px solid var(--ui-border);
    transition: background-color 0.15s ease;
}

.ui-page-seller-fivex .fivex-sync-table tbody tr:last-child {
    border-bottom: none;
}

.ui-page-seller-fivex .fivex-sync-table tbody tr:hover {
    background-color: var(--ui-row-hover);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-sync-table tbody tr:hover {
    background-color: var(--ui-primary-soft);
}

.ui-page-seller-fivex .fivex-sync-table tbody td {
    padding: 0.85rem 1.25rem;
    vertical-align: middle;
    border: none;
}

.ui-page-seller-fivex .fivex-sync-table tbody td:not(:first-child) {
    text-align: center;
}

.ui-page-seller-fivex .fivex-channel-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ui-page-seller-fivex .fivex-channel-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    padding: 2px;
    flex-shrink: 0;
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-channel-logo {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

.ui-page-seller-fivex .fivex-channel-logo-fallback {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-sm);
    flex-shrink: 0;
}

.ui-page-seller-fivex .fivex-channel-name {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-channel-name {
    color: var(--ui-text);
}

.ui-page-seller-fivex .fivex-th-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.25;
}

.ui-page-seller-fivex .fivex-th-col i {
    font-size: var(--ui-fs-md);
    color: var(--ui-primary);
    opacity: 0.7;
}

body[data-theme=dark] .ui-page-seller-fivex .fivex-th-col i {
    color: var(--ui-info-text);
}

.ui-page-seller-fivex .fivex-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.ui-page-seller-fivex .fivex-empty-state__icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius);
    background: var(--ui-primary-soft);
    color: var(--ui-faint);
    font-size: var(--ui-fs-xl);
    margin-bottom: 0.85rem;
}

.ui-page-seller-fivex .fivex-empty-state__title {
    margin: 0 0 0.35rem;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-seller-fivex .fivex-empty-state__text {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    max-width: 28rem;
}

#addFiveXModal .modal-content {
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
}

#addFiveXModal .modal-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 1.25rem 1.5rem;
}

#addFiveXModal .form-label {
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.5rem;
    font-size: var(--ui-fs-base);
}

body[data-theme=dark] #addFiveXModal .form-label {
    color: var(--ui-text);
}

.ui-page-seller-fivex.fivex-page .input-group-text {
    border-right: none;
}

.ui-page-seller-fivex.fivex-page .input-group .form-control {
    border-left: none;
    padding-left: 0;
}

.ui-page-seller-fivex.fivex-page .input-group:focus-within .input-group-text {
    border-color: var(--ui-primary);
}

.ui-page-seller-fivex.fivex-page .card-body.p-5 {
    background: linear-gradient(135deg, var(--ui-row-hover) 0%, rgba(var(--ui-success-rgb), 0.03) 100%);
    border-radius: var(--ui-radius-sm);
}

body[data-theme=dark] .ui-page-seller-fivex.fivex-page .card-body.p-5 {
    background: linear-gradient(135deg, var(--ui-primary-tint) 0%, var(--ui-success-tint) 100%);
}

.ui-page-seller-fivex .feature-item {
    background-color: var(--ui-subtle);
    border-radius: var(--ui-radius-sm);
    padding: 1rem;
    border: 1px solid var(--ui-border);
    transition: all 0.2s ease;
    height: 100%;
}

body[data-theme=dark] .ui-page-seller-fivex .feature-item {
    border-color: var(--ui-border-strong);
}

.ui-page-seller-fivex .feature-item:hover {
    box-shadow: var(--ui-shadow-hover);
    border-color: var(--ui-primary);
}

body[data-theme=dark] .ui-page-seller-fivex .feature-item:hover {
    box-shadow: var(--ui-shadow-pop);
}

.ui-page-seller-fivex .feature-item i {
    font-size: var(--ui-fs-xl);
    position: absolute;
    right: 10px;
    top: 10px;
}

.ui-page-seller-fivex .feature-item strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--ui-fs-md);
}

body[data-theme=dark] .ui-page-seller-fivex .feature-item strong {
    color: var(--ui-text);
}

.ui-page-seller-fivex .feature-item .text-muted {
    font-size: var(--ui-fs-base);
    line-height: 1.5;
    display: block;
}

.ui-page-seller-fivex.fivex-page .list-unstyled li {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-seller-fivex.fivex-page .list-unstyled li {
    color: var(--ui-text);
}

@media (max-width: 640px) {
    .ui-page-seller-fivex .fivex-info-strip {
    grid-template-columns: 1fr;
    }

    .ui-page-seller-fivex .fivex-info-item + .fivex-info-item {
    border-left: none;
        border-top: 1px solid var(--ui-border);
    }
}

@media (max-width: 620px) {
    .ui-page-seller-fivex .fivex-sync-table,
    .ui-page-seller-fivex .fivex-sync-table thead,
    .ui-page-seller-fivex .fivex-sync-table tbody,
    .ui-page-seller-fivex .fivex-sync-table th,
    .ui-page-seller-fivex .fivex-sync-table td,
    .ui-page-seller-fivex .fivex-sync-table tr {
    display: block;
    }

    .ui-page-seller-fivex .fivex-sync-table thead {
    display: none;
    }

    .ui-page-seller-fivex .fivex-sync-table tbody tr {
    padding: 0.85rem 1.1rem;
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-page-seller-fivex .fivex-sync-table tbody tr:not(:last-child) td {
    border-bottom: none;
    }

    .ui-page-seller-fivex .fivex-sync-table tbody td {
    display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem 0;
        text-align: left;
    }

    .ui-page-seller-fivex .fivex-sync-table tbody td:first-child {
    margin-bottom: 0.4rem;
    }

    .ui-page-seller-fivex .fivex-sync-table tbody td:not(:first-child)::before {
    content: attr(data-label);
        font-size: var(--ui-fs-sm);
        color: var(--ui-muted);
        font-weight: 500;
    }
}

@media (max-width: 768px) {
    .ui-page-seller-fivex .fivex-page-header h1 {
    font-size: var(--ui-fs-kpi);
    }

    .ui-page-seller-fivex .sync-setting-card {
    margin-bottom: 0.75rem;
    }
}

.ui-page-seller-mapping .mapping-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
    padding: 12px 16px;
    background: var(--ui-row-hover);
    border: 1px solid var(--ui-primary-tint);
    border-radius: var(--ui-radius);
    color: var(--ui-body);
    font-size: var(--ui-fs-base);
    line-height: 1.5;
}

.ui-page-seller-mapping .mapping-hint__icon {
    color: var(--ui-primary);
    font-size: var(--ui-fs-md);
    margin-top: 2px;
}

.ui-page-seller-mapping .mapping-hint__body {
    flex: 1;
}

.ui-page-seller-mapping .mapping-hint__title {
    display: block;
    color: var(--ui-text);
    font-weight: 700;
}

.ui-page-seller-mapping .mapping-hint__close {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    border-radius: var(--ui-radius);
    line-height: 1;
    transition: color 120ms ease, background 120ms ease;
}

.ui-page-seller-mapping .mapping-hint__close:hover {
    color: var(--ui-text);
    background: var(--ui-primary-tint);
}

.ui-page-seller-mapping .mapping-card {
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 4px rgba(var(--ui-black-rgb), 0.08);
    overflow: hidden;
}

.ui-page-seller-mapping .mapping-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-seller-mapping .mapping-card__actions {
    padding: 8px 0;
}

.ui-page-seller-mapping .mapping-tabs {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ui-page-seller-mapping .mapping-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    transition: color 150ms ease, border-color 150ms ease;
}

.ui-page-seller-mapping .mapping-tabs .nav-link:hover {
    color: var(--ui-text);
}

.ui-page-seller-mapping .mapping-tabs .nav-link.active {
    border-bottom-color: var(--ui-primary);
}

.ui-page-seller-mapping .mapping-tabs__count {
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.ui-page-seller-mapping .mapping-tabs .nav-link.active .mapping-tabs__count {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-page-seller-mapping.mapping-page .tab-content {
    padding: 16px;
}

.ui-page-seller-mapping.mapping-page .mapping-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ui-page-seller-mapping.mapping-page .mapping-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_length,
.ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_filter,
.ui-page-seller-mapping.mapping-page .mapping-toolbar .dt-buttons {
    float: none;
    margin: 0;
    padding: 0;
}

.ui-page-seller-mapping.mapping-page .mapping-toolbar .dt-buttons .btn {
    margin: 0 !important;
}

.ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_filter input {
    min-width: 220px;
    margin-left: 0;
}

.ui-page-seller-mapping .mapping-status {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ui-border);
    border-radius: var(--ui-radius);
}

/* Phones: the three filters ("Niet gekoppeld 31") ran past the card edge; they scroll sideways */
@media (max-width: 575.98px) {
    .ui-page-seller-mapping .mapping-status {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ui-page-seller-mapping .mapping-status__option {
        flex-shrink: 0;
        padding-inline: 10px;
    }

    .ui-page-seller-mapping .mapping-card__actions {
        min-width: 0;
        max-width: 100%;
    }
}

.ui-page-seller-mapping .mapping-status__option {
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.ui-page-seller-mapping .mapping-status__option:hover {
    color: var(--ui-text);
}

.ui-page-seller-mapping .mapping-status__count {
    color: var(--ui-muted);
    font-weight: 500;
}

.ui-page-seller-mapping .mapping-status__option.active .mapping-status__count {
    color: inherit;
    opacity: .7;
}

.ui-page-seller-mapping.mapping-page table.dataTable {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

.ui-page-seller-mapping.mapping-page table.dataTable thead th {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    background: var(--ui-surface);
    vertical-align: bottom;
}

.ui-page-seller-mapping.mapping-page .dataTables_scrollBody table.dataTable thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.ui-page-seller-mapping.mapping-page table.dataTable thead th.mapping-col-main {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ui-page-seller-mapping.mapping-page table.dataTable tbody td {
    padding: 8px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
    vertical-align: middle;
}

.ui-page-seller-mapping.mapping-page table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

.ui-page-seller-mapping.mapping-page table.dataTable.table-hover tbody tr:hover td {
    background: var(--ui-row-hover);
}

.ui-page-seller-mapping.mapping-page .mapping-col-main {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 260px;
    max-width: 320px;
    box-shadow: inset -1px 0 0 var(--ui-border);
}

.ui-page-seller-mapping.mapping-page table.dataTable.table-hover tbody tr:hover td.mapping-col-main {
    background: linear-gradient(var(--ui-row-hover), var(--ui-row-hover)), var(--ui-surface);
}

.ui-page-seller-mapping.mapping-page .mapping-col-mp {
    min-width: 230px;
}

.ui-page-seller-mapping .mapping-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ui-page-seller-mapping .mapping-main__title {
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.ui-page-seller-mapping .mapping-main__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.ui-page-seller-mapping .mapping-main__status i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-mapping .mapping-main__status.is-empty {
    background: var(--ui-border);
    color: var(--ui-muted);
}

.ui-page-seller-mapping .mapping-main__status.is-partial {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-page-seller-mapping .mapping-main__status.is-complete {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-seller-mapping .mapping-mp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 200px;
    text-align: center;
}

.ui-page-seller-mapping .mapping-mp-head__logo {
    height: 34px;
    max-width: 130px;
    object-fit: contain;
}

body[data-theme=dark] .ui-page-seller-mapping .mapping-mp-head__logo {
    box-sizing: border-box;
    padding: 5px 10px;
}

.ui-page-seller-mapping .mapping-mp-head__country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
}

.ui-page-seller-mapping .mapping-mp-head__country .fi {
    width: 14px;
    line-height: 10px;
    border-radius: var(--ui-radius-xs);
}

.ui-page-seller-mapping .mapping-mp-head__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-body);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: color 140ms ease, border-color 140ms ease;
}

.ui-page-seller-mapping .mapping-mp-head__action:hover {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.ui-page-seller-mapping .mapping-mp-head__action i {
    font-size: var(--ui-fs-xs);
}

.ui-page-seller-mapping .mapping-cell {
    position: relative;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single,
.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    /* Global select2 styles set the multi-select border with !important */
    border: 1px dashed var(--ui-neutral) !important;
    border-radius: var(--ui-radius)!important;
    transition: border-color 150ms ease, background 150ms ease;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
    padding-right: 48px;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ui-muted);
    font-weight: 500;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 6px;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 28px;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    transform: translateY(-50%);
    color: var(--ui-faint);
    font-size: var(--ui-fs-lg);
    line-height: 1;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__clear:empty::before {
    content: "\00d7";
}

.ui-page-seller-mapping.mapping-page .mapping-cell:hover .select2-selection__clear,
.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--focus .select2-selection__clear {
    opacity: 1 !important;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: var(--ui-danger-tint);
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--ui-danger);
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--ui-muted);
}

.ui-page-seller-mapping.mapping-page .mapping-cell:hover .select2-selection,
.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--focus .select2-selection,
.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--open .select2-selection {
    border-color: var(--ui-primary) !important;
    border-style: solid !important;
}

.ui-page-seller-mapping.mapping-page .mapping-cell.is-mapped .select2-selection {
    border-style: solid !important;
    border-color: var(--ui-primary-line) !important;
    background: var(--ui-primary-soft);
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0;
    color: var(--ui-primary);
    opacity: .6;
    transition: opacity 120ms ease;
}

.ui-page-seller-mapping.mapping-page .mapping-cell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--ui-danger);
    opacity: 1;
}

.ui-page-seller-mapping .mapping-cell__state {
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    width: 10px;
    font-size: var(--ui-fs-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.ui-page-seller-mapping .mapping-cell.is-saving .mapping-cell__state,
.ui-page-seller-mapping .mapping-cell.is-saved .mapping-cell__state {
    opacity: 1;
}

.ui-page-seller-mapping .mapping-cell.is-saving .mapping-cell__state {
    color: var(--ui-faint);
}

.ui-page-seller-mapping .mapping-cell.is-saved .mapping-cell__state {
    color: var(--ui-success-text);
}

.ui-page-seller-mapping .mapping-cell.is-prefilled .select2-selection {
    animation: mapping-prefilled 1.6s ease;
}

.ui-page-seller-mapping .mapping-option {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ui-page-seller-mapping .mapping-option__ref {
    font-size: var(--ui-fs-xs);
    opacity: .65;
}

.ui-page-seller-mapping.mapping-page .mapping-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.ui-page-seller-mapping.mapping-page .mapping-footer .dataTables_info,
.ui-page-seller-mapping.mapping-page .mapping-footer .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 0 !important;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-page-seller-mapping.mapping-page .dataTables_scrollBody {
    border-bottom: 0 !important;
}

.ui-page-seller-mapping.mapping-page .dataTables_empty {
    padding: 32px 12px !important;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

@media (max-width: 767.98px) {
    .ui-page-seller-mapping.mapping-page .tab-content {
    padding: 12px;
    }

    .ui-page-seller-mapping.mapping-page .mapping-col-main {
    min-width: 170px;
        max-width: 190px;
    }

    .ui-page-seller-mapping .mapping-main {
    flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_length,
    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dt-buttons,
    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dt-buttons .btn {
    width: auto;
        text-align: left;
    }

    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_filter,
    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_filter label,
    .ui-page-seller-mapping.mapping-page .mapping-toolbar .dataTables_filter input {
    width: 100%;
        min-width: 0;
    }
}

@keyframes mapping-prefilled {
		0%, 40% {
			box-shadow: 0 0 0 3px var(--ui-primary-tint);
		}

		100% {
			box-shadow: 0 0 0 0 transparent;
		}
	}

/* ---------- Page: home/support.php (root .ui-page-home-support) ---------- */
#support-page .support-contact-section {
    margin-bottom: 1.5rem;
}

#support-page .support-contact-layout > * {
    display: flex;
}

#support-page .support-ai-hero {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

#support-page .support-ai-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.5rem var(--ui-primary-tint);
}

body[data-theme=dark] #support-page .support-ai-hero:hover {
    box-shadow: var(--ui-shadow-pop);
}

#support-page .support-ai-hero::before {
    content: '';
    position: absolute;
    inset: -25%;
    background:
    radial-gradient(circle at 22% 28%, rgba(var(--ui-purple-rgb), 0.16) 0%, transparent 38%),
    radial-gradient(circle at 78% 22%, rgba(var(--ui-info-rgb), 0.16) 0%, transparent 42%),
    radial-gradient(circle at 58% 82%, var(--ui-primary-tint) 0%, transparent 44%);
    animation: aiMeshDrift 14s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

body[data-theme=dark] #support-page .support-ai-hero::before {
    background: radial-gradient(circle at 22% 28%, rgba(var(--ui-purple-rgb), 0.3) 0%, transparent 38%),
    radial-gradient(circle at 78% 22%, rgba(var(--ui-info-rgb), 0.28) 0%, transparent 42%),
    radial-gradient(circle at 58% 82%, var(--ui-primary-line) 0%, transparent 44%);
}

#support-page .support-ai-hero .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    padding: 2rem 1.75rem;
}

#support-page .support-ai-hero__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
    padding: 0.28rem 0.7rem;
    border-radius: var(--ui-radius-pill);
    background: linear-gradient(120deg,
    var(--ui-primary-tint) 0%,
    rgba(var(--ui-purple-rgb), 0.16) 35%,
    rgba(var(--ui-info-rgb), 0.14) 70%,
    var(--ui-primary-tint) 100%);
    background-size: 220% 100%;
    color: var(--ui-info-text);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--ui-primary-line);
    animation: aiBadgeShimmer 5s ease-in-out infinite;
}

#support-page .support-ai-hero__badge::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--ui-success);
    animation: aiBadgePulse 1.8s ease-out infinite;
}

#support-page .support-ai-hero__icon-wrap {
    position: relative;
    margin-bottom: 1.15rem;
    width: 3.5rem;
    height: 3.5rem;
}

#support-page .support-ai-hero__icon {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--ui-primary-line) 0%, rgba(var(--ui-purple-rgb), 0.18) 100%);
    border: 1px solid var(--ui-primary-line);
    color: var(--ui-primary);
    font-size: var(--ui-fs-kpi);
    box-shadow: 0 0.65rem 1.5rem var(--ui-primary-line);
    animation: aiIconFloat 5s ease-in-out infinite;
}

body[data-theme=dark] #support-page .support-ai-hero__icon {
    color: var(--ui-info-text);
    box-shadow: var(--ui-shadow-pop);
}

#support-page .support-ai-hero__icon-wrap::after {
    content: '';
    position: absolute;
    inset: -0.6rem;
    border-radius: var(--ui-radius);
    background: radial-gradient(circle, var(--ui-primary-line) 0%, transparent 70%);
    z-index: 1;
    animation: aiIconGlow 3.5s ease-in-out infinite;
    pointer-events: none;
}

#support-page .support-ai-hero__sparkle {
    position: absolute;
    color: var(--ui-primary);
    opacity: 0;
    animation: aiSparkle 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

#support-page .support-ai-hero__sparkle--1 {
    top: -0.4rem;  right: -0.6rem; animation-delay: 0s;   font-size: var(--ui-fs-xs);
}

#support-page .support-ai-hero__sparkle--2 {
    bottom: 0.1rem; right: -0.9rem; animation-delay: 1.5s; font-size: var(--ui-fs-2xs); color: var(--ui-series-5);
}

#support-page .support-ai-hero__sparkle--3 {
    top: 1.2rem;   left: -0.85rem; animation-delay: 3s;   font-size: var(--ui-fs-2xs);  color: var(--ui-info);
}

#support-page .support-ai-hero__title {
    margin: 0 0 0.5rem;
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    letter-spacing: -0.01em;
    background: linear-gradient(120deg, var(--ui-info-text) 0%, var(--ui-series-5) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ui-info-text);
}

body[data-theme=dark] #support-page .support-ai-hero__title {
    background: linear-gradient(120deg, var(--ui-info) 0%, var(--ui-body) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#support-page .support-ai-hero__text {
    margin: 0 0 1.1rem;
    max-width: 24rem;
    font-size: var(--ui-fs-md);
    line-height: 1.6;
    color: var(--ui-body);
}

body[data-theme=dark] #support-page .support-ai-hero__text {
    color: var(--ui-muted);
}

#support-page .support-ai-hero__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.35rem;
}

#support-page .support-ai-hero__chip {
    color: var(--ui-body);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
    border: 1px solid var(--ui-primary-line);
    backdrop-filter: blur(4px);
    font-size: var(--ui-fs-xs);
    animation: aiChipFloat 6s ease-in-out infinite;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#support-page .support-ai-hero__chip i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
}

#support-page .support-ai-hero__chip:nth-child(2) {
    animation-delay: 0.8s;
}

#support-page .support-ai-hero__chip:nth-child(3) {
    animation-delay: 1.6s;
}

body[data-theme=dark] #support-page .support-ai-hero__chip {
    background: var(--ui-subtle);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #support-page .support-ai-hero__chip i {
    color: var(--ui-info-text);
}

#support-page .support-ai-hero:hover .support-ai-hero__chip {
    border-color: var(--ui-primary-line);
}

#support-page .support-ai-hero .btn-primary {
    position: relative;
    overflow: hidden;
    padding: 0.55rem 1.15rem;
    background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-series-5) 100%);
    border: none;
    font-weight: 500;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

#support-page .support-ai-hero .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(var(--ui-white-rgb), 0.35) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 100% 0;
    opacity: 0;
    transition: opacity 0.25s ease, background-position 0.7s ease;
    pointer-events: none;
}

#support-page .support-ai-hero .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.75rem 1.6rem var(--ui-primary-line);
    filter: brightness(1.04);
}

#support-page .support-ai-hero .btn-primary:hover::after {
    opacity: 1;
    background-position: -20% 0;
}

#support-page .support-ai-hero .btn-primary i {
    transition: transform 0.25s ease;
}

#support-page .support-ai-hero .btn-primary:hover i {
    transform: translateX(4px);
}

#support-page .support-channels {
    flex: 1;
    width: 100%;
    border: 1px solid var(--ui-border);
    overflow: hidden;
}

#support-page .support-channel-row {
    display: block;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s ease;
}

#support-page .support-channel-row:last-child {
    border-bottom: 0;
}

#support-page a.support-channel-row:hover,
#support-page a.support-channel-row:focus {
    background: var(--ui-row-hover);
    color: inherit;
    text-decoration: none;
}

body[data-theme=dark] #support-page a.support-channel-row:hover,
body[data-theme=dark] #support-page a.support-channel-row:focus {
    background: var(--ui-primary-soft);
}

#support-page .support-channel-row__main {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

#support-page .support-channel-row__icon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-lg);
}

#support-page .support-channel-row__icon--phone {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

body[data-theme=dark] #support-page .support-channel-row__icon--phone {
    color: var(--ui-info-text);
}

#support-page .support-channel-row__icon--help {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

#support-page .support-channel-row__content {
    flex: 1;
    min-width: 0;
}

#support-page .support-channel-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

#support-page .support-channel-row__title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

#support-page .support-channel-row__chevron {
    color: var(--ui-faint);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.18s ease;
}

#support-page a.support-channel-row:hover .support-channel-row__chevron {
    color: var(--ui-primary);
    transform: translateX(2px);
}

#support-page .support-channel-row__text {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
    color: var(--ui-muted);
}

#support-page .support-channel-row__extra {
    margin-top: 0.85rem;
    padding-left: 3.55rem;
}

#support-page .support-phone-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 18rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-primary-soft);
    color: var(--ui-info-text);
    font-size: var(--ui-fs-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#support-page .support-phone-number i {
    color: var(--ui-primary);
}

body[data-theme=dark] #support-page .support-phone-number {
    background: var(--ui-primary-tint);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #support-page .support-phone-number i {
    color: var(--ui-info-text);
}

#support-page .support-phone-number:hover {
    border-color: var(--ui-primary-line);
    background: var(--ui-primary-tint);
    box-shadow: 0 0.25rem 0.75rem var(--ui-primary-tint);
}

#support-page .support-phone-number--masked {
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
}

#support-page .support-phone-number__value {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    letter-spacing: 0.02em;
}

#support-page .support-phone-number__blurred {
    filter: blur(5px);
    opacity: 0.65;
    user-select: none;
    pointer-events: none;
}

body[data-theme=dark] #support-page .support-phone-number__blurred {
    opacity: 0.55;
}

#support-page .support-phone-number__hint {
    flex: 1 0 100%;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
}

#support-page .support-phone-number--masked:hover .support-phone-number__hint,
#support-page .support-phone-number--masked:focus-visible .support-phone-number__hint {
    color: var(--ui-info-text);
}

body[data-theme=dark] #support-page .support-phone-number--masked:hover .support-phone-number__hint,
body[data-theme=dark] #support-page .support-phone-number--masked:focus-visible .support-phone-number__hint {
    color: var(--ui-info-text);
}

@media (prefers-reduced-motion: reduce) {
    #support-page .support-ai-hero,
    #support-page .support-ai-hero::before,
    #support-page .support-ai-hero__badge,
    #support-page .support-ai-hero__badge::before,
    #support-page .support-ai-hero__icon,
    #support-page .support-ai-hero__icon-wrap::after,
    #support-page .support-ai-hero__sparkle,
    #support-page .support-ai-hero__chip,
    #support-page .support-ai-hero .btn-primary,
    #support-page .support-ai-hero .btn-primary::after,
    #support-page .support-ai-hero .btn-primary i {
    animation: none !important;
        transition: none !important;
    }

    #support-page .support-ai-hero__sparkle {
    opacity: 0.6;
    }
}

@media (max-width: 768px) {
    #support-page .support-ai-hero .card-body {
    padding: 1.35rem 1.15rem;
    }

    #support-page .support-channel-row__extra {
    padding-left: 0;
    }
}

@keyframes aiMeshDrift {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
        33%      { transform: translate3d(-3%, 2%, 0) rotate(6deg) scale(1.04); }
        66%      { transform: translate3d(3%, -2%, 0) rotate(-4deg) scale(1.02); }
    }

@keyframes aiBadgeShimmer {
        0%, 100% { background-position: 0% 50%; }
        50%      { background-position: 100% 50%; }
    }

@keyframes aiBadgePulse {
        0%   { box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), 0.6); }
        80%  { box-shadow: 0 0 0 0.45rem transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }

@keyframes aiIconFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-5px) rotate(-2deg); }
    }

@keyframes aiIconGlow {
        0%, 100% { opacity: 0.55; transform: scale(1); }
        50%      { opacity: 1;    transform: scale(1.18); }
    }

@keyframes aiSparkle {
        0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
        15%, 45% { opacity: 1; transform: scale(1) rotate(180deg); }
        60%      { opacity: 0; transform: scale(0.4) rotate(360deg); }
    }

@keyframes aiChipFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-3px); }
    }

/* ---------- Page: crm/user_analytics_pos_usage.php (root .ui-page-crm-user-analytics-pos-usage) ---------- */
.ui-page-crm-user-analytics-pos-usage .pos-filter {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
}

.ui-page-crm-user-analytics-pos-usage .pos-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.ui-page-crm-user-analytics-pos-usage .pos-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.75rem;
    text-align: center;
    position: relative;
    transition: background 0.15s ease;
}

.ui-page-crm-user-analytics-pos-usage .pos-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--ui-border);
}

.ui-page-crm-user-analytics-pos-usage .pos-stat:hover {
    background: rgba(var(--ui-primary-rgb), 0.025);
}

.ui-page-crm-user-analytics-pos-usage .pos-stat--primary .pos-stat__value {
    font-size: var(--ui-fs-xl);
    color: var(--ui-primary);
}

.ui-page-crm-user-analytics-pos-usage .pos-stat__value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-page-crm-user-analytics-pos-usage .pos-stat__label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    line-height: 1.35;
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.ui-page-crm-user-analytics-pos-usage .pos-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
    overflow: hidden;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-user-analytics-pos-usage .pos-chart-panel__meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 400;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart-body {
    padding: 0.75rem 1rem 1rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart-body canvas {
    width: 100% !important;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart--daily {
    height: 300px;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart--daily canvas {
    height: 100% !important;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart--donut {
    height: 260px;
    max-width: 300px;
    margin: 0 auto;
}

.ui-page-crm-user-analytics-pos-usage .pos-chart--donut canvas {
    height: 100% !important;
}

.ui-page-crm-user-analytics-pos-usage .pos-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04);
    overflow: hidden;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel--wide {
    grid-column: 1 / -1;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-panel {
    margin-bottom: 1rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-user-analytics-pos-usage .pos-panel__meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 400;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-list {
    display: flex;
    flex-direction: column;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(440px, 2fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    transition: background 0.15s ease;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-row:hover {
    background: rgba(var(--ui-primary-rgb), 0.03);
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-row:last-child {
    border-bottom: 0;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller__name {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.15rem;
    line-height: 1.3;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller__id {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-crm-user-analytics-pos-usage .pos-seller__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-metric {
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-surface) 0%, transparent);
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-metric__value {
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-metric__label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-2xs);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.05rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-seller-metric--primary .pos-seller-metric__value {
    color: var(--ui-primary);
}

.ui-page-crm-user-analytics-pos-usage .pos-panel .table {
    margin-bottom: 0;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel .table th {
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    border-bottom-width: 1px;
    padding: 0.75rem 1rem;
    background: transparent;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel .table td {
    padding: 0.65rem 1rem;
    vertical-align: middle;
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-user-analytics-pos-usage .pos-panel .table-scroll {
    max-height: 420px;
    overflow: auto;
}

.ui-page-crm-user-analytics-pos-usage .pos-panel .table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ui-surface);
}

.ui-page-crm-user-analytics-pos-usage .pos-health {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-health__item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--ui-surface) 75%, transparent);
    transition: border-color 0.15s ease;
}

.ui-page-crm-user-analytics-pos-usage .pos-health__item:hover {
    border-color: rgba(var(--ui-warning-rgb), 0.3);
}

.ui-page-crm-user-analytics-pos-usage .pos-health__type {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.25rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-health__type i {
    color: var(--ui-warning);
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-user-analytics-pos-usage .pos-health__seller {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    margin-bottom: 0.15rem;
}

.ui-page-crm-user-analytics-pos-usage .pos-health__detail {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
}

.ui-page-crm-user-analytics-pos-usage .pos-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

@media (max-width: 1199.98px) {
    .ui-page-crm-user-analytics-pos-usage .pos-stats {
    flex-wrap: wrap;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-stat {
    flex: 1 1 33.333%;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-seller-row {
    grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-seller__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-page-crm-user-analytics-pos-usage .pos-charts-grid {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-chart--donut {
    max-width: 260px;
    }
}

@media (max-width: 991.98px) {
    .ui-page-crm-user-analytics-pos-usage .pos-stat {
    flex: 1 1 25%;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-detail-grid {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-seller__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ui-page-crm-user-analytics-pos-usage .pos-stat {
    flex: 1 1 33.333%;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-seller-row {
    padding: 0.85rem 1rem;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-seller__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-crm-user-analytics-pos-usage .pos-panel .table td,
    .ui-page-crm-user-analytics-pos-usage .pos-panel .table th {
    padding: 0.5rem 0.65rem;
        font-size: var(--ui-fs-xs);
    }
}

@media (max-width: 575.98px) {
    .ui-page-crm-user-analytics-pos-usage .pos-stats {
    border-radius: var(--ui-radius-md);
    }

    .ui-page-crm-user-analytics-pos-usage .pos-stat {
    flex: 1 1 50%;
        padding: 0.85rem 0.5rem;
    }

    .ui-page-crm-user-analytics-pos-usage .pos-stat__value {
    font-size: var(--ui-fs-md);
    }

    .ui-page-crm-user-analytics-pos-usage .pos-stat__label {
    font-size: var(--ui-fs-2xs);
    }

    .ui-page-crm-user-analytics-pos-usage .pos-stat:not(:last-child)::after {
    display: none;
    }
}

.ui-page-crm-stock-queue-analytics.sq-page .page-header {
    margin-bottom: 1.25rem;
}

.ui-page-crm-stock-queue-analytics .sq-hero {
    display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem;
}

.ui-page-crm-stock-queue-analytics .sq-hero h1 {
    margin-bottom:.35rem; letter-spacing:-.02em; color:var(--ui-text);
}

.ui-page-crm-stock-queue-analytics .sq-hero .subtitle {
    max-width:720px; margin:0; color:var(--ui-series-6); line-height:1.5;
}

.ui-page-crm-stock-queue-analytics .sq-toolbar {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:var(--ui-surface); border:1px solid rgba(var(--ui-muted-rgb), 0.2); border-radius:var(--ui-radius); box-shadow:0 4px 16px rgba(var(--ui-ink-rgb), 0.04);
}

.ui-page-crm-stock-queue-analytics .sq-toolbar-label {
    color:var(--ui-series-6); font-size:var(--ui-fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}

.ui-page-crm-stock-queue-analytics .sq-refresh-btn {
    min-height:38px; border-radius:var(--ui-radius-sm);
}

.ui-page-crm-stock-queue-analytics .sq-stat-card {
    position:relative; overflow:hidden; border:1px solid rgba(var(--ui-muted-rgb), 0.2); border-radius:var(--ui-radius); box-shadow:0 4px 16px rgba(var(--ui-ink-rgb), 0.045); transition:transform .15s ease, box-shadow .15s ease;
}

.ui-page-crm-stock-queue-analytics .sq-stat-card:hover {
    transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--ui-ink-rgb), 0.09);
}

.ui-page-crm-stock-queue-analytics .sq-stat-card:before {
    content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--ui-primary);
}

.ui-page-crm-stock-queue-analytics .sq-stat-card .card-body {
    padding:1.1rem 1.1rem 1rem 1.3rem;
}

.ui-page-crm-stock-queue-analytics .sq-stat-top {
    display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--ui-series-6); font-size:var(--ui-fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}

.ui-page-crm-stock-queue-analytics .sq-stat-icon {
    display:grid; place-items:center; width:30px; height:30px; color:var(--ui-primary); background:color-mix(in srgb, var(--ui-primary) 12%, transparent); border-radius:var(--ui-radius-sm);
}

.ui-page-crm-stock-queue-analytics .sq-stat-number {
    margin-top:.55rem; font-size:2rem; font-weight:700; line-height:1.1; color:var(--ui-text);
}

.ui-page-crm-stock-queue-analytics .sq-stat-subtitle {
    margin-top:.35rem; color:var(--ui-series-6); font-size:var(--ui-fs-sm);
}

.ui-page-crm-stock-queue-analytics .sq-panel {
    overflow:hidden; border:1px solid rgba(var(--ui-muted-rgb), 0.2); border-radius:var(--ui-radius); box-shadow:0 4px 16px rgba(var(--ui-ink-rgb), 0.045); background:var(--ui-surface);
}

.ui-page-crm-stock-queue-analytics .sq-panel-header {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid rgba(var(--ui-muted-rgb), 0.2);
}

.ui-page-crm-stock-queue-analytics .sq-panel-title {
    display:flex; align-items:center; gap:.55rem; color:var(--ui-text); font-size:var(--ui-fs-base); font-weight:650;
}

.ui-page-crm-stock-queue-analytics .sq-panel-title i {
    color:var(--ui-series-6);
}

.ui-page-crm-stock-queue-analytics .sq-panel-hint {
    color:var(--ui-series-6); font-size:var(--ui-fs-xs);
}

.ui-page-crm-stock-queue-analytics .sq-chart-panel {
    height:320px; padding:1rem 1rem .75rem;
}

.ui-page-crm-stock-queue-analytics .sq-chart-panel canvas {
    max-height:265px;
}

.ui-page-crm-stock-queue-analytics .sq-panel .table {
    color:var(--ui-text);
}

.ui-page-crm-stock-queue-analytics .sq-panel .table thead th {
    padding:.7rem 1rem; border-bottom:1px solid rgba(var(--ui-muted-rgb), 0.2); color:var(--ui-series-6); font-size:var(--ui-fs-2xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}

.ui-page-crm-stock-queue-analytics .sq-panel .table tbody td {
    padding:.75rem 1rem; border-color:rgba(var(--ui-muted-rgb), 0.12); font-size:var(--ui-fs-sm); vertical-align:middle;
}

.ui-page-crm-stock-queue-analytics .sq-panel .table tbody tr:hover {
    background:var(--ui-page);
}

.ui-page-crm-stock-queue-analytics .sq-badge {
    display:inline-flex; align-items:center; justify-content:center; min-width:25px; padding:.25em .55em; border-radius:var(--ui-radius-xs); font-size:var(--ui-fs-xs); font-weight:700;
}

.ui-page-crm-stock-queue-analytics .sq-badge.pending {
    background:rgba(var(--ui-primary-rgb), 0.1); color:var(--ui-primary);
}

.ui-page-crm-stock-queue-analytics .sq-badge.processing {
    background:rgba(var(--ui-warning-rgb), 0.12); color:var(--ui-warning-text);
}

.ui-page-crm-stock-queue-analytics .sq-badge.processed {
    background:rgba(var(--ui-success-rgb), 0.12); color:var(--ui-success-text);
}

.ui-page-crm-stock-queue-analytics .sq-badge.failed {
    background:rgba(var(--ui-danger-rgb), 0.12); color:var(--ui-danger);
}

.ui-page-crm-stock-queue-analytics .sq-channel-cell {
    display:flex; align-items:center; gap:.55rem; font-weight:600;
}

.ui-page-crm-stock-queue-analytics .sq-channel-icon {
    display:grid; place-items:center; width:27px; height:27px; border-radius:var(--ui-radius-sm); color:var(--ui-primary); background:rgba(var(--ui-primary-rgb), 0.1);
}

.ui-page-crm-stock-queue-analytics .sq-distribution {
    display:flex; height:7px; min-width:100px; overflow:hidden; border-radius:var(--ui-radius-pill); background:var(--ui-track);
}

.ui-page-crm-stock-queue-analytics .sq-distribution div {
    transition:width .3s ease;
}

.ui-page-crm-stock-queue-analytics .sq-error-msg {
    display:block; max-width:350px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-danger);
}

.ui-page-crm-stock-queue-analytics .sq-error-msg:hover {
    white-space:normal; overflow:visible;
}

.ui-page-crm-stock-queue-analytics .sq-age-old {
    color:var(--ui-danger); font-weight:700;
}

.ui-page-crm-stock-queue-analytics .sq-age-medium {
    color:var(--ui-warning-text); font-weight:600;
}

.ui-page-crm-stock-queue-analytics .sq-eta {
    margin-top:.2rem; color:var(--ui-series-6); font-size:var(--ui-fs-2xs); font-weight:600; line-height:1.2;
}

.ui-page-crm-stock-queue-analytics .sq-empty {
    padding:1.7rem 1rem!important; color:var(--ui-series-6); text-align:center;
}

.ui-page-crm-stock-queue-analytics .sq-empty i {
    display:block; margin-bottom:.45rem; color:var(--ui-faint); font-size:var(--ui-fs-xl);
}

@media (max-width:767px) {
    .ui-page-crm-stock-queue-analytics .sq-hero,
    .ui-page-crm-stock-queue-analytics .sq-toolbar {
    align-items:flex-start; flex-direction:column;
    }

    .ui-page-crm-stock-queue-analytics .sq-toolbar {
    width:100%;
    }

    .ui-page-crm-stock-queue-analytics .sq-chart-panel {
    height:280px;
    }
}

/* ---------- Page: crm/dialer_settings.php (root .ui-page-crm-dialer-settings) ---------- */
.ui-page-crm-dialer-settings .sd-settings-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.ui-page-crm-dialer-settings .sd-settings-card .card-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.ui-page-crm-dialer-settings .sd-settings-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ui-page-crm-dialer-settings .sd-settings-head h2 {
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-crm-dialer-settings .sd-settings-head p {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer-settings .sd-settings-form {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--ui-muted) 6%, transparent);
}

.ui-page-crm-dialer-settings .sd-settings-table {
    margin: 0;
}

.ui-page-crm-dialer-settings .sd-settings-table thead th {
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    border-bottom-width: 1px;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    background: transparent;
}

.ui-page-crm-dialer-settings .sd-settings-table tbody td {
    vertical-align: middle;
    padding: 0.85rem 1rem;
    color: var(--ui-text);
}

.ui-page-crm-dialer-settings .sd-settings-name {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-dialer-settings .sd-settings-meta {
    display: block;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.12rem;
}

.ui-page-crm-dialer-settings .sd-settings-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-muted) 12%, transparent);
    color: var(--ui-text);
    white-space: nowrap;
}

.ui-page-crm-dialer-settings .sd-settings-badge--accent {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer-settings .sd-settings-badge--success {
    background: rgba(var(--ui-success-rgb), 0.14);
    color: var(--ui-success);
}

.ui-page-crm-dialer-settings .sd-settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ui-muted);
}

.ui-page-crm-dialer-settings .sd-settings-table tbody tr:hover td {
    background: color-mix(in srgb, var(--ui-muted) 6%, transparent);
}

#salesDialerCampaignModal .modal-content,
#salesDialerFiltersModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--ui-black-rgb), 0.18);
    background: var(--ui-surface);
}

#salesDialerCampaignModal .modal-header,
#salesDialerFiltersModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
}

#salesDialerCampaignModal .modal-title,
#salesDialerFiltersModal .modal-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    margin: 0;
}

#salesDialerCampaignModal .btn-close,
#salesDialerFiltersModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
}

#salesDialerCampaignModal .modal-body,
#salesDialerFiltersModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
}

#salesDialerCampaignModal .modal-footer,
#salesDialerFiltersModal .modal-footer {
    border-top: 0 !important;
    padding: 0.5rem 1.35rem 1.2rem;
}

#salesDialerCampaignModal .modal-footer .btn,
#salesDialerFiltersModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
}

#salesDialerCampaignModal .form-control,
#salesDialerCampaignModal .form-select,
#salesDialerFiltersModal .form-control,
#salesDialerFiltersModal .form-select {
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: var(--ui-text);
}

#salesDialerFiltersModal .select2-container {
    width: 100% !important;
}

#salesDialerFiltersModal .select2-container .select2-selection--multiple {
    min-height: 42px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.12);
    padding: 0.25rem 0.45rem;
}

#salesDialerFiltersModal .select2-container--focus .select2-selection--multiple,
#salesDialerFiltersModal .select2-container--open .select2-selection--multiple {
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.16);
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#salesDialerFiltersModal .select2-container .select2-selection--multiple .select2-selection__choice {
    margin: 0.15rem 0.25rem 0.15rem 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

#salesDialerCampaignModal .pricing-sections-card,
#salesDialerFiltersModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#salesDialerCampaignModal .pricing-section,
#salesDialerFiltersModal .pricing-section {
    padding: 1rem 0;
}

#salesDialerCampaignModal .pricing-section + .pricing-section,
#salesDialerFiltersModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #salesDialerCampaignModal .pricing-section + .pricing-section,
body[data-theme=dark] #salesDialerFiltersModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#salesDialerCampaignModal .pricing-section-label,
#salesDialerFiltersModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

@media (max-width: 767.98px) {
    #salesDialerCampaignModal .modal-content,
    #salesDialerFiltersModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

/* ---------- Page: home/changelog.php (root .ui-page-home-changelog) ---------- */
#changelog-page {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

#changelog-page .changelog-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    padding: 2rem 2rem 1.7rem;
    margin-bottom: 1.5rem;
}

#changelog-page .changelog-hero::before,
#changelog-page .changelog-hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

#changelog-page .changelog-hero::before {
    top: -7rem;
    right: -3rem;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, var(--ui-primary-tint) 0%, transparent 68%);
}

#changelog-page .changelog-hero::after {
    top: -2rem;
    right: 8rem;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, rgba(var(--ui-purple-rgb), 0.1) 0%, transparent 70%);
}

#changelog-page .changelog-hero__inner {
    position: relative;
    z-index: 1;
}

#changelog-page .changelog-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-series-1);
    margin-bottom: 0.5rem;
}

#changelog-page .changelog-hero h1 {
    margin: 0 0 0.45rem;
}

#changelog-page .changelog-hero__lead {
    margin: 0;
    color: var(--ui-muted);
    max-width: 42rem;
    font-size: var(--ui-fs-lg);
    line-height: 1.55;
}

#changelog-page .changelog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1.25rem;
    margin-bottom: 1.75rem;
}

#changelog-page .changelog-lang-note {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.3;
}

#changelog-page .changelog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#changelog-page .changelog-filter {
    color: inherit;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    padding: 0.38rem 0.95rem;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body[data-theme=dark] #changelog-page .changelog-filter {
    border-color: var(--ui-border-strong);
}

#changelog-page .changelog-filter:hover {
    border-color: var(--ui-neutral);
    transform: translateY(-1px);
}

#changelog-page .changelog-filter.is-active {
    color: var(--ui-on-primary);
    background: var(--ui-series-1);
    border-color: var(--ui-series-1);
}

body[data-theme=dark] #changelog-page .changelog-filter.is-active {
    background: var(--ui-text);
    color: var(--ui-surface);
    /* inverted chip: light fill, dark label */
    border-color: var(--ui-border);
}

#changelog-page .changelog-month {
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin: 0 0 0.35rem 0.15rem;
}

#changelog-page .changelog-timeline {
    position: relative;
    margin: 0;
    width: 100%;
    min-width: 0;
}

#changelog-page .changelog-timeline::before {
    content: '';
    position: absolute;
    top: 1.15rem;
    bottom: 1.4rem;
    left: calc(9.75rem + 0.95rem);
    width: 2px;
    background: linear-gradient(180deg, var(--ui-series-1) 0%, var(--ui-border-strong) 18%, var(--ui-border-strong) 100%);
    border-radius: var(--ui-radius-pill);
}

#changelog-page .changelog-day {
    display: grid;
    grid-template-columns: 9.75rem 1.9rem minmax(0, 1fr);
    column-gap: 0;
    margin-bottom: 0.35rem;
    position: relative;
    width: 100%;
    min-width: 0;
}

#changelog-page .changelog-day__date {
    font-weight: 700;
    padding-top: 1.05rem;
    padding-right: 0.75rem;
    color: var(--ui-body);
    font-size: var(--ui-fs-md);
    text-align: right;
    line-height: 1.3;
    min-width: 0;
}

body[data-theme=dark] #changelog-page .changelog-day__date {
    color: var(--ui-faint);
}

#changelog-page .changelog-day__rail {
    position: relative;
    min-height: 100%;
}

#changelog-page .changelog-day__dot {
    position: absolute;
    top: 1.15rem;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 2px solid var(--ui-series-1);
    box-shadow: 0 0 0 3px rgba(var(--ui-info-rgb), 0.12);
    z-index: 1;
}

body[data-theme=dark] #changelog-page .changelog-day__dot {
    background: var(--ui-primary-tint);
}

#changelog-page .changelog-day__items {
    padding: 0.35rem 0 1.15rem 1.35rem;
    min-width: 0;
}

#changelog-page .changelog-item {
    position: relative;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    padding: 1.15rem 1.25rem;
    margin-bottom: 0.7rem;
    overflow: hidden;
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#changelog-page .changelog-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--ui-ink-rgb), 0.08);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #changelog-page .changelog-item:hover {
    box-shadow: var(--ui-shadow-pop);
    border-color: var(--ui-border-strong);
}

#changelog-page .changelog-item:last-child {
    margin-bottom: 0;
}

#changelog-page .changelog-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

#changelog-page .changelog-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ui-radius-pill);
    padding: 0.14rem 0.6rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#changelog-page .changelog-pill--new {
    background: rgba(var(--ui-success-rgb), 0.12);
    border: 1px solid transparent;
    color: var(--ui-success-text);
    font-weight: 700;
}

#changelog-page .changelog-pill--improved {
    background: rgba(var(--ui-info-rgb), 0.12);
    border: 1px solid transparent;
    color: var(--ui-info-text);
    font-weight: 700;
}

#changelog-page .changelog-pill--fix {
    background: rgba(var(--ui-warning-rgb), 0.14);
    border: 1px solid transparent;
    color: var(--ui-warning-text);
    font-weight: 700;
}

body[data-theme=dark] #changelog-page .changelog-pill--new {
    background: rgba(var(--ui-success-rgb), 0.18);
}

body[data-theme=dark] #changelog-page .changelog-pill--improved {
    background: rgba(var(--ui-info-rgb), 0.2);
}

body[data-theme=dark] #changelog-page .changelog-pill--fix {
    background: rgba(var(--ui-warning-rgb), 0.18);
}

#changelog-page .changelog-pill--audience {
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-series-6);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: var(--ui-fs-xs);
}

body[data-theme=dark] #changelog-page .changelog-pill--audience {
    color: var(--ui-faint);
}

#changelog-page .changelog-item h2 {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

#changelog-page .changelog-item p {
    margin: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
    line-height: 1.55;
    max-width: 52rem;
    overflow-wrap: anywhere;
}

#changelog-page .changelog-empty {
    display: none;
    text-align: center;
    color: var(--ui-muted);
    padding: 2rem 1rem;
}

#changelog-page[data-filter="new"] .changelog-item:not([data-type="new"]),
#changelog-page[data-filter="improved"] .changelog-item:not([data-type="improved"]),
#changelog-page[data-filter="fix"] .changelog-item:not([data-type="fix"]) {
    display: none;
}

#changelog-page[data-filter="new"] .changelog-day:not(:has(.changelog-item[data-type="new"])),
#changelog-page[data-filter="improved"] .changelog-day:not(:has(.changelog-item[data-type="improved"])),
#changelog-page[data-filter="fix"] .changelog-day:not(:has(.changelog-item[data-type="fix"])) {
    display: none;
}

.ui-page-home-changelog:has(#changelog-page) {
    scrollbar-gutter: stable;
}

@media (max-width: 800px) {
    #changelog-page .changelog-hero {
    padding: 1.4rem 1.2rem 1.25rem;
    }

    #changelog-page .changelog-timeline::before {
    left: 0.7rem;
    }

    #changelog-page .changelog-day {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    }

    #changelog-page .changelog-day__date {
    grid-column: 2;
        text-align: left;
        padding: 0 0 0.15rem 1.15rem;
        font-size: var(--ui-fs-base);
    }

    #changelog-page .changelog-day__rail {
    grid-row: 1 / span 2;
    }

    #changelog-page .changelog-day__dot {
    top: 0.2rem;
    }

    #changelog-page .changelog-day__items {
    padding: 0.2rem 0 1.1rem 1.15rem;
    }
}

/* ---------- Page: shared/mcp_settings.php (root .ui-page-shared-mcp-settings) ---------- */
.ui-page-shared-mcp-settings .mcp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--ui-success-rgb), 0.12);
    border: 1px solid rgba(var(--ui-success-rgb), 0.28);
    border-radius: var(--ui-radius-pill);
    padding: 5px 14px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-success-text);
    white-space: nowrap;
}

.ui-page-shared-mcp-settings .mcp-status-pill i {
    font-size: var(--ui-fs-2xs);
}

html[data-bs-theme="dark"] .ui-page-shared-mcp-settings .mcp-status-pill {
    color: var(--ui-success-text);
}

.ui-page-shared-mcp-settings .mcp-card {
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    background: var(--ui-surface);
    height: 100%;
}

.ui-page-shared-mcp-settings .mcp-section-title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-faint);
    margin-bottom: 12px;
}

.ui-page-shared-mcp-settings .mcp-quickstart {
    background: linear-gradient(135deg, rgba(var(--ui-success-rgb), 0.12) 0%, rgba(var(--ui-success-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--ui-success-rgb), 0.25);
    border-radius: var(--ui-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.ui-page-shared-mcp-settings .mcp-quickstart-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    margin-bottom: 5px;
}

.ui-page-shared-mcp-settings .mcp-quickstart-title i {
    color: var(--ui-success-text);
}

.ui-page-shared-mcp-settings .mcp-quickstart-subtitle {
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
    color: var(--ui-body);
    margin-bottom: 14px;
}

.ui-page-shared-mcp-settings .mcp-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--ui-border-strong);
}

.ui-page-shared-mcp-settings .mcp-step:last-child {
    border-bottom: none; padding-bottom: 0;
}

.ui-page-shared-mcp-settings .mcp-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ui-page-shared-mcp-settings .mcp-step-title {
    font-size: var(--ui-fs-base); font-weight: 600; margin-bottom: 4px;
}

.ui-page-shared-mcp-settings .mcp-step-desc {
    font-size: var(--ui-fs-sm); color: var(--ui-muted); line-height: 1.55; margin: 0;
}

.ui-page-shared-mcp-settings .mcp-code {
    background: rgb(var(--ui-ink-rgb));
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius-md);
    padding: 12px 48px 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--ui-fs-sm);
    position: relative;
    margin-top: 8px;
    word-break: break-all;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* The JSON config keeps its indentation and scrolls sideways on phones instead of breaking keys mid-word */
.ui-page-shared-mcp-settings #mcpJsonSnippet.mcp-code {
    white-space: pre;
    word-break: normal;
    overflow-x: auto;
}

.ui-page-shared-mcp-settings .mcp-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(var(--ui-white-rgb), 0.12);
    border: none;
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius-xs);
    padding: 3px 10px;
    font-size: var(--ui-fs-xs);
    cursor: pointer;
}

.ui-page-shared-mcp-settings .mcp-copy-btn:hover {
    background: rgba(var(--ui-white-rgb), 0.22);
}

.ui-page-shared-mcp-settings .mcp-note {
    background: rgba(var(--ui-primary-rgb), .07);
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius-md);
    padding: 10px 14px;
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
    margin-top: 12px;
}

.ui-page-shared-mcp-settings .mcp-file-path {
    font-size: var(--ui-fs-sm); color: var(--ui-muted); margin-bottom: 4px;
}

.ui-page-shared-mcp-settings .mcp-accordion .accordion-item {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md)!important;
    margin-bottom: 8px;
    overflow: hidden;
}

.ui-page-shared-mcp-settings .mcp-accordion .accordion-button {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    padding: 12px 16px;
}

.ui-page-shared-mcp-settings .mcp-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.ui-page-shared-mcp-settings .mcp-accordion .accordion-button:focus {
    box-shadow: none;
}

html[data-bs-theme="dark"] .ui-page-shared-mcp-settings .mcp-quickstart {
    background: linear-gradient(135deg, rgba(var(--ui-success-rgb), 0.16) 0%, rgba(var(--ui-success-rgb), 0.06) 100%);
    border-color: rgba(var(--ui-success-rgb), 0.3);
}

html[data-bs-theme="dark"] .ui-page-shared-mcp-settings .mcp-code {
    background: var(--ui-page);
}

/* ---------- Page: seller/packing_slip_settings.php (root .ui-page-seller-packing-slip-settings) ---------- */
.ui-page-seller-packing-slip-settings .theme_settings_page {
    display: none;
}

.ui-page-seller-packing-slip-settings .roboto {
    font-family: "Roboto", sans-serif;
}

.ui-page-seller-packing-slip-settings .lora {
    font-family: "Lora", serif;
}

.ui-page-seller-packing-slip-settings .quicksand {
    font-family: "Quicksand", sans-serif;
}

#packing-slip-settings-page .ps-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#packing-slip-settings-page .ps-card-body {
    padding: 1.1rem 1.2rem 1.2rem;
}

#packing-slip-settings-page .ps-theme-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

#packing-slip-settings-page .ps-theme-option {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#packing-slip-settings-page .ps-theme-option:hover {
    border-color: color-mix(in srgb, var(--ui-text) 18%, var(--ui-border-strong));
}

#packing-slip-settings-page .ps-theme-option.is-selected {
    border-color: var(--ui-text);
}

#packing-slip-settings-page .ps-theme-option__sketch {
    height: 4.25rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border-strong);
    background: color-mix(in srgb, var(--ui-muted) 5%, var(--ui-surface));
    padding: 0.45rem;
    overflow: hidden;
}

#packing-slip-settings-page .ps-theme-option__sketch-line {
    display: block;
    height: 0.28rem;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-text) 18%, transparent);
    margin-bottom: 0.28rem;
}

#packing-slip-settings-page .ps-theme-option__sketch-line--short {
    width: 42%;
}

#packing-slip-settings-page .ps-theme-option__sketch-line--mid {
    width: 68%;
}

#packing-slip-settings-page .ps-theme-option__sketch-line--full {
    width: 100%;
}

#packing-slip-settings-page .ps-theme-option__sketch--compact {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0.35rem;
}

#packing-slip-settings-page .ps-theme-option__sketch-box {
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-text) 10%, transparent);
    min-height: 100%;
}

#packing-slip-settings-page .ps-theme-option__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

#packing-slip-settings-page .ps-theme-option__label {
    font-size: var(--ui-fs-base);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.3;
}

#packing-slip-settings-page .ps-theme-option__hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

#packing-slip-settings-page .ps-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

#packing-slip-settings-page .ps-toggle-grid .settings-toggle-row {
    padding: 0.75rem 0.85rem;
    height: 100%;
}

#packing-slip-settings-page .ps-toggle-grid .settings-toggle-row__title {
    font-size: var(--ui-fs-sm);
}

#packing-slip-settings-page .ps-logo-panel {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    padding: 0.9rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-muted) 4%, var(--ui-surface));
}

#packing-slip-settings-page .ps-logo-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    flex: 0 0 6rem;
    padding: 0.55rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    overflow: hidden;
}

#packing-slip-settings-page .ps-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#packing-slip-settings-page .ps-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
}

#packing-slip-settings-page .ps-logo-empty i {
    font-size: var(--ui-fs-kpi);
    opacity: 0.4;
}

#packing-slip-settings-page .ps-logo-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1;
}

#packing-slip-settings-page .ps-logo-actions__title {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 700;
}

#packing-slip-settings-page .ps-logo-actions__help {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.4;
}

#packing-slip-settings-page .ps-logo-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#packing-slip-settings-page .ps-field-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#packing-slip-settings-page .ps-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 42%);
    gap: 0.75rem;
    align-items: center;
}

#packing-slip-settings-page .ps-field__label {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

#packing-slip-settings-page .ps-field__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

#packing-slip-settings-page .ps-font-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}

#packing-slip-settings-page .ps-font-chip {
    margin: 0;
    padding: 0.55rem 0.4rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#packing-slip-settings-page .ps-font-chip.is-selected {
    border-color: var(--ui-text);
}

#packing-slip-settings-page .ps-font-chip--roboto {
    font-family: "Roboto", sans-serif;
}

#packing-slip-settings-page .ps-font-chip--quicksand {
    font-family: "Quicksand", sans-serif;
}

#packing-slip-settings-page .ps-font-chip--lora {
    font-family: "Lora", serif;
}

#packing-slip-settings-page .ps-variables {
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-muted) 4%, var(--ui-surface));
}

#packing-slip-settings-page .ps-variables__title {
    margin: 0 0 0.55rem;
    font-size: var(--ui-fs-sm);
    font-weight: 700;
}

#packing-slip-settings-page .ps-variables__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.75rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#packing-slip-settings-page .ps-variables__list code {
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
}

#packing-slip-settings-page .ps-preview-wrap {
    position: sticky;
    top: 1rem;
}

#packing-slip-settings-page .ps-preview-sheet {
    width: 100%;
    aspect-ratio: 210 / 297;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    /* A sheet of paper: stays light in dark mode, like the printed slip */
    background: rgb(var(--ui-white-rgb));
    color: rgb(var(--ui-ink-rgb));
    color-scheme: light;
    box-shadow:
    0 1px 0 rgba(var(--ui-black-rgb), 0.03),
    0 12px 28px rgba(var(--ui-black-rgb), 0.05);
}

#packing-slip-settings-page .ps-preview-sheet #packingSlipExample {
    min-height: 0;
}

@media (max-width: 991.98px) {
    #packing-slip-settings-page .ps-preview-wrap {
    position: static;
    }
}

@media (max-width: 767.98px) {
    #packing-slip-settings-page .ps-theme-picker,
    #packing-slip-settings-page .ps-toggle-grid,
    #packing-slip-settings-page .ps-font-chips,
    #packing-slip-settings-page .ps-variables__list {
    grid-template-columns: 1fr;
    }

    #packing-slip-settings-page .ps-field {
    grid-template-columns: 1fr;
    }

    #packing-slip-settings-page .ps-logo-panel {
    flex-direction: column;
        align-items: stretch;
    }

    #packing-slip-settings-page .ps-logo-preview {
    width: 100%;
        height: 5.5rem;
        flex-basis: auto;
    }
}

/* ---------- Page: crm/user_analytics_b2b_portal.php (root .ui-page-crm-user-analytics-b2b-portal) ---------- */
.ui-page-crm-user-analytics-b2b-portal .b2b-usage-filter {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    padding: 1rem;
    margin-bottom: 1rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.75rem;
    text-align: center;
    position: relative;
    transition: background 0.15s ease;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--ui-border);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat:hover {
    background: rgba(var(--ui-primary-rgb), 0.025);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat--primary .b2b-stat__value {
    font-size: var(--ui-fs-xl);
    color: var(--ui-primary);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat__value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat__label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    line-height: 1.35;
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-stat__sub {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart {
    padding: 0.75rem 1rem 1rem;
    position: relative;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart canvas {
    width: 100% !important;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart-daily {
    height: 320px;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart-daily canvas {
    height: 100% !important;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart-doughnut {
    height: 320px;
    max-width: 320px;
    margin: 0 auto;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-chart-doughnut canvas {
    height: 100% !important;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-weight: 500;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-panel__meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 400;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-panel--wide {
    grid-column: 1 / -1;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-list {
    display: grid;
    gap: 0;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(520px, 2fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    transition: background 0.15s ease;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-row:hover {
    background: rgba(var(--ui-primary-rgb), 0.03);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-row:last-child {
    border-bottom: 0;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-main {
    min-width: 0;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-name {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.2rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    align-items: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-meta-dot {
    opacity: 0.4;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric {
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--ui-radius-xs);
    background: color-mix(in srgb, var(--ui-surface) 0%, transparent);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric__value {
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric__label,
.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric__sub {
    color: var(--ui-muted);
    font-size: var(--ui-fs-2xs);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric__sub {
    margin-top: 0.15rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-seller-metric--primary .b2b-seller-metric__value {
    color: var(--ui-primary);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-health {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-health__item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    padding: 0.8rem;
    background: color-mix(in srgb, var(--ui-surface) 75%, transparent);
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-health__type {
    color: var(--ui-text);
    font-weight: 500;
}

.ui-page-crm-user-analytics-b2b-portal .b2b-usage-health__detail {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

@media (max-width: 1199.98px) {
    .ui-page-crm-user-analytics-b2b-portal .b2b-charts-grid {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stats {
    flex-wrap: wrap;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stat {
    flex: 1 1 25%;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-seller-row {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-seller-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ui-page-crm-user-analytics-b2b-portal .b2b-stat {
    flex: 1 1 25%;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-usage-grid {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-seller-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ui-page-crm-user-analytics-b2b-portal .b2b-stat {
    flex: 1 1 33.333%;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-seller-row {
    padding: 0.85rem;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-seller-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ui-page-crm-user-analytics-b2b-portal .b2b-stats {
    border-radius: var(--ui-radius-md);
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stat {
    flex: 1 1 50%;
        padding: 0.85rem 0.5rem;
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stat__value {
    font-size: var(--ui-fs-md);
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stat__label {
    font-size: var(--ui-fs-2xs);
    }

    .ui-page-crm-user-analytics-b2b-portal .b2b-stat:not(:last-child)::after {
    display: none;
    }
}

/* ---------- Page: seller/channels.php (root .ui-page-seller-channels) ---------- */
#sales-channels-table_filter {
    margin-bottom: 10px;
}

.ui-page-seller-channels .channel-img {
    max-height: 40px;
    max-width: 80px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 4px;
    transition: all 0.2s ease;
}

.ui-page-seller-channels .channel-img:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

#salesApisTable .btn-group .dropdown-toggle {
    min-width: 40px;
}

#salesApisTable .dropdown-menu {
    min-width: 180px;
}

#salesApisTable .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: var(--ui-fs-base);
}

#salesApisTable .dropdown-item i {
    width: 16px;
    text-align: center;
}

#salesApisTable .dropdown-item.text-danger:hover {
    background-color: var(--ui-danger);
    color: var(--ui-on-primary) !important;
}

#salesApisTable .sales-api-logo-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
}

#salesApisTable .sales-api-logo-tile img {
    max-width: 64px;
    max-height: 32px;
    object-fit: contain;
}

#salesApisTable .sales-api-store-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

#salesApisTable .sales-api-store-cell .sales-api-error-indicator {
    flex: 0 0 auto;
    margin-left: auto;
}

#salesApisTable .sales-api-store-cell .sales-api-error-indicator-slot {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 1.65rem;
    /* Reserve the same vertical space as the indicator so the row layout
    doesn't shift when the async badge arrives. */
    display: inline-flex;
    align-items: center;
}

.ui-page-seller-channels .sales-api-error-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.65rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ui-page-seller-channels .sales-api-error-indicator:hover,
.ui-page-seller-channels .sales-api-error-indicator:focus-visible {
    background: var(--ui-danger-tint);
    outline: none;
    transform: translateY(-1px);
}

.ui-page-seller-channels .sales-api-error-indicator i {
    font-size: var(--ui-fs-2xs);
}

.ui-page-seller-channels .sales-api-error-indicator__label {
    white-space: nowrap;
}

body[data-theme=dark] .ui-page-seller-channels .sales-api-error-indicator {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-soft);
}

body[data-theme=dark] .ui-page-seller-channels .sales-api-error-indicator:hover,
body[data-theme=dark] .ui-page-seller-channels .sales-api-error-indicator:focus-visible {
    background: var(--ui-danger-tint);
}

#salesApisTable_wrapper .dataTables_empty {
    padding: 3rem 1.5rem !important;
}

.ui-page-seller-channels .sales-apis-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    min-height: 300px;
}

.ui-page-seller-channels .sales-apis-empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--ui-primary);
}

.ui-page-seller-channels .sales-apis-empty-state-icon i {
    font-size: 2rem;
}

.ui-page-seller-channels .sales-apis-empty-state-title {
    font-size: var(--ui-fs-xl);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.75rem;
}

.ui-page-seller-channels .sales-apis-empty-state-message {
    font-size: var(--ui-fs-md);
    color: var(--ui-muted);
    margin-bottom: 1.5rem;
    max-width: 450px;
    line-height: 1.6;
}

.ui-page-seller-channels .sales-apis-empty-state-button {
    margin-top: 0.5rem;
}

body[data-theme=dark] .ui-page-seller-channels .sales-apis-empty-state-icon {
    background: linear-gradient(135deg, var(--ui-primary-line) 0%, var(--ui-primary-tint) 100%);
    color: var(--ui-primary);
}

body[data-theme=dark] .ui-page-seller-channels .sales-apis-empty-state-title {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-seller-channels .sales-apis-empty-state-message {
    color: var(--ui-muted);
}

#channelSettingsModal .form-label {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.5rem;
}

body[data-theme=dark] #channelSettingsModal .form-label {
    color: var(--ui-text);
}

#channelSettingsModal #channelSettingsBody {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ui-border);
}

#channelSettingsModal #channelSettingsBody .form-group,
#channelSettingsModal #channelSettingsBody .mb-3,
#channelSettingsModal #channelSettingsBody .mb-4 {
    margin-bottom: 1.25rem !important;
}

#channelSettingsModal #channelSettingsBody .form-group:last-child,
#channelSettingsModal #channelSettingsBody .mb-3:last-child,
#channelSettingsModal #channelSettingsBody .mb-4:last-child {
    margin-bottom: 0 !important;
}

#channelSettingsModal .mb-3 i,
#channelSettingsModal .d-flex i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-base)!important;
    margin-top: 0 !important;
}

body[data-theme=dark] #channelSettingsModal .mb-3 i,
body[data-theme=dark] #channelSettingsModal .d-flex i {
    background: var(--ui-primary-line);
    color: var(--ui-primary);
}

#channelSettingsModal .d-flex.justify-content-between {
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: nowrap; /* Prevent wrapping that could push switch off */
}

#channelSettingsModal .d-flex.justify-content-between > .flex-grow-1 {
    min-width: 0; /* Allow text to wrap */
    flex: 1 1 auto; /* Grow and shrink, but allow wrapping */
    max-width: calc(100% - 100px); /* Reserve space for icon + switch */
}

/* The kit's 40px switch (its knob travels 18px); a 60px track left the "on" knob halfway */
#channelSettingsModal .d-flex.justify-content-between label.switch {
    flex-shrink: 0 !important; /* Prevent checkbox from shrinking */
    flex-grow: 0 !important; /* Prevent checkbox from growing */
    width: 40px !important;
    min-width: 40px !important;
    margin-top: 2px; /* level with the first line of the title */
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

/* Long words wrap without hyphenation ("WooCom-merce") */
#channelSettingsModal .form-label,
#channelSettingsModal small.text-muted {
    overflow-wrap: break-word;
}

#cronLogModal .table {
    font-size: var(--ui-fs-base);
}

#cronLogModal code {
    font-size: var(--ui-fs-sm);
    word-break: break-word;
    white-space: pre-wrap;
    display: inline-block;
    max-width: 100%;
    background: transparent;
    padding: 0;
}

@media (max-width: 767.98px) {
    .ui-page-seller-channels .sales-apis-empty-state {
    padding: 2rem 1rem;
        min-height: 250px;
    }

    .ui-page-seller-channels .sales-apis-empty-state-icon {
    width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }

    .ui-page-seller-channels .sales-apis-empty-state-icon i {
    font-size: var(--ui-fs-kpi);
    }

    .ui-page-seller-channels .sales-apis-empty-state-title {
    font-size: var(--ui-fs-lg);
    }

    .ui-page-seller-channels .sales-apis-empty-state-message {
    font-size: var(--ui-fs-base);
    }
}

@media (max-width: 576px) {
    #channelSettingsModal .d-flex.justify-content-between > .flex-grow-1 {
    max-width: calc(100% - 110px); /* Account for icon (36px) + gap + switch (60px) */
    }
}

/* ---------- Page: center/administration.php (root .ui-page-center-administration) ---------- */
.ui-page-center-administration .admin-invoicing-promo {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    margin-bottom: 1.5rem;
    padding: 1.15rem 3rem 1.15rem 1.25rem;
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--ui-surface); /* a regular card, like the invoicing paywall */
    box-shadow: var(--ui-shadow);
}

.ui-page-center-administration .admin-invoicing-promo[hidden] {
    display: none !important;
}

.ui-page-center-administration .admin-invoicing-promo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
}

.ui-page-center-administration .admin-invoicing-promo__copy {
    min-width: 0;
    flex: 1;
}

.ui-page-center-administration .admin-invoicing-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-primary);
}

.ui-page-center-administration .admin-invoicing-promo__title {
    margin: 0 0 0.35rem;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-text);
}

.ui-page-center-administration .admin-invoicing-promo__text {
    margin: 0 0 0.75rem;
    max-width: 42rem;
    font-size: var(--ui-fs-base);
    line-height: 1.55;
    color: var(--ui-muted);
}

.ui-page-center-administration .admin-invoicing-promo__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-page-center-administration .admin-invoicing-promo__perks li {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    background: rgba(var(--ui-primary-rgb), 0.08);
}

.ui-page-center-administration .admin-invoicing-promo__actions {
    display: flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
}

.ui-page-center-administration .admin-invoicing-promo__cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ui-page-center-administration .admin-invoicing-promo__dismiss {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
}

#seller_dialog .modal-content {
    border: none;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-hover);
    overflow: hidden;
}

#seller_dialog .modal-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#seller_dialog .modal-title {
    font-weight: 600;
    color: var(--ui-text);
    letter-spacing: -0.01em;
}

#seller_dialog .modal-body {
    padding: 0;
    background: var(--ui-surface);
}

#seller_dialog .seller-tab-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

#seller_dialog .seller-tab-btn {
    padding: 8px 16px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    background: transparent;
    border: none;
    border-radius: var(--ui-radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

#seller_dialog .seller-tab-btn:hover {
    background: rgba(var(--ui-black-rgb), 0.04);
    color: var(--ui-text);
}

body[data-theme=dark] #seller_dialog .seller-tab-btn:hover {
    background: var(--ui-track);
    color: var(--ui-text);
}

#seller_dialog .seller-tab-btn.active {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font-weight: 600;
}

#seller_dialog .btn-close {
    margin-left: 12px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

#seller_dialog .btn-close:hover {
    opacity: 1;
}

#seller_dialog .table-container {
    padding: 24px 28px;
    background: var(--ui-surface);
    min-height: 400px;
}

#seller_dialog #sellerOrderTableLoadingDiv {
    padding: 80px 28px;
    background: var(--ui-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-height: 400px;
    text-align: center;
}

#seller_dialog .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--ui-primary-rgb), 0.1);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#seller_dialog #loadingTableTitle {
    margin-top: 20px;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-muted);
    letter-spacing: -0.01em;
}

#seller_dialog .channeldock-table-style {
    background: var(--ui-surface);
}

body[data-theme=dark] #adminExportsTable,
body[data-theme=dark] #orderHistoryExportsTable,
body[data-theme=dark] #returnHistoryExportsTable,
body[data-theme=dark] #surchargesExportsTable {
    border-color: var(--ui-border);
}

body[data-theme=dark] #dateRangeSelector,
body[data-theme=dark] .ui-page-center-administration .bg-white {
    color: var(--ui-text) !important;
}

.ui-page-center-administration .dataTables_wrapper thead th {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ui-page-center-administration .admin-invoicing-promo {
    flex-wrap: wrap;
        padding: 1rem 2.75rem 1rem 1rem;
    }

    .ui-page-center-administration .admin-invoicing-promo__actions {
    width: 100%;
        align-self: stretch;
    }

    .ui-page-center-administration .admin-invoicing-promo__cta {
    width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    #seller_dialog .seller-tab-buttons {
    flex-direction: column;
        width: 100%;
    }

    #seller_dialog .seller-tab-btn {
    width: 100%;
        text-align: left;
    }

    #seller_dialog .modal-header {
    flex-direction: column;
        gap: 16px;
    }

    #seller_dialog .modal-title {
    width: 100%;
    }
}

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

/* ---------- Page: seller/listingpublic.php (root .ui-page-seller-listingpublic) ---------- */

.ui-page-seller-listingpublic main {
    position: relative;
    padding-bottom: 70px;
    background: linear-gradient(to bottom, var(--ui-subtle) 0%, var(--ui-surface) 100%);
    min-height: 100vh;
}

.ui-page-seller-listingpublic .center-image {
    background-color: var(--ui-subtle);
    width: 100%;
    height: 220px;
    background-image: url("/portal/public/images/cd_logo/no_product_image.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-page-seller-listingpublic .center-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--ui-black-rgb), 0.12);
}

.ui-page-seller-listingpublic .card {
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ui-page-seller-listingpublic .card:hover {
    box-shadow: 0 4px 16px rgba(var(--ui-black-rgb), 0.12);
    transform: translateY(-2px);
}

.ui-page-seller-listingpublic .card-header {
    border-bottom: 2px solid var(--ui-border);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--ui-series-6);
}

.ui-page-seller-listingpublic .card-body {
    padding: 1.5rem;
}

.ui-page-seller-listingpublic .premium-badge {
    background: linear-gradient(314deg, var(--ui-warning), var(--ui-warning-tint), var(--ui-warning));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--ui-radius-pill);
    font-weight: 600;
    font-size: var(--ui-fs-base);
    display: inline-block;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(var(--ui-warning-rgb), 0.3);
}

.ui-page-seller-listingpublic .info-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ui-neutral-tint);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-page-seller-listingpublic .info-item:last-child {
    border-bottom: none;
}

.ui-page-seller-listingpublic .info-item:hover {
    background: var(--ui-subtle);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--ui-radius-sm);
}

.ui-page-seller-listingpublic .info-item i,
.ui-page-seller-listingpublic .info-item svg {
    color: var(--ui-info);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.ui-page-seller-listingpublic .info-item a {
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-page-seller-listingpublic .info-item a:hover {
    color: var(--ui-info);
}

.ui-page-seller-listingpublic .speciality-card {
    background: var(--ui-surface);
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid var(--ui-series-3);
    display: flex;
    align-items: center;
    height: 100%;
}

.ui-page-seller-listingpublic .speciality-card:hover {
    box-shadow: 0 4px 16px rgba(var(--ui-black-rgb), 0.12);
    transform: translateX(4px);
    border-left-width: 6px;
}

.ui-page-seller-listingpublic .speciality-card svg {
    margin-right: 1rem;
    flex-shrink: 0;
}

.ui-page-seller-listingpublic .photo-gallery {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-info) var(--ui-track);
}

.ui-page-seller-listingpublic .photo-gallery::-webkit-scrollbar {
    height: 8px;
}

.ui-page-seller-listingpublic .photo-gallery::-webkit-scrollbar-track {
    background: var(--ui-track);
    border-radius: var(--ui-radius-md);
}

.ui-page-seller-listingpublic .photo-gallery::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--ui-info) 0%, var(--ui-purple) 100%);
    border-radius: var(--ui-radius-md);
}

.ui-page-seller-listingpublic .photo-gallery img {
    height: 300px;
    border-radius: var(--ui-radius);
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(var(--ui-black-rgb), 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ui-page-seller-listingpublic .map-container {
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--ui-black-rgb), 0.08);
}

.ui-page-seller-listingpublic .map-container iframe {
    border-radius: var(--ui-radius);
}

.ui-page-seller-listingpublic main ul {
    line-height: 1.8;
    margin: 0;
    padding: 0;
}

.ui-page-seller-listingpublic main ul>li {
    list-style: none;
}

.ui-page-seller-listingpublic .section-title {
    font-weight: 700;
    color: var(--ui-series-6);
    margin-bottom: 1.5rem;
    font-size: var(--ui-fs-xl);
}

.ui-page-seller-listingpublic .company-name {
    font-weight: 700;
    color: var(--ui-series-6);
    margin: 1rem 0 0.5rem;
    font-size: var(--ui-fs-kpi);
}

.ui-page-seller-listingpublic .delivery-text {
    color: var(--ui-series-6);
    font-size: var(--ui-fs-md);
    margin-bottom: 1rem;
}

.ui-page-seller-listingpublic .modal-content {
    border: none;
    box-shadow: 0 8px 32px rgba(var(--ui-black-rgb), 0.16);
}

.ui-page-seller-listingpublic .modal-header {
    border-bottom: none;
    padding: 1.5rem;
}

.ui-page-seller-listingpublic .modal-header .btn-close {
    filter: invert(1);
}

.ui-page-seller-listingpublic .modal-title {
    font-weight: 700;
}

.ui-page-seller-listingpublic .form-control {
    border-radius: var(--ui-radius-sm);
    border: 2px solid var(--ui-border);
    padding: 0.75rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-page-seller-listingpublic .form-control:focus {
    border-color: var(--ui-info);
    box-shadow: 0 0 0 3px rgba(var(--ui-info-rgb), 0.1);
}

.ui-page-seller-listingpublic .alert-dark {
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-track) 100%);
    border: none;
    border-left: 4px solid var(--ui-info);
}

@media (max-width: 767px) {
    .ui-page-seller-listingpublic .max-width-sm-100 {
    max-width: 100% !important;
    }

    .ui-page-seller-listingpublic .photo-gallery img {
    height: 250px;
        width: auto;
        min-width: 280px;
    }

    .ui-page-seller-listingpublic .card-body {
    padding: 1rem;
    }
}

/* ---------- Page: crm/logistics_audit_view.php (root .ui-page-crm-logistics-audit-view) ---------- */
#auditProfileForm .field-tip {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    cursor: help;
    margin-left: 0.25rem;
    opacity: 0.7;
}

#auditProfileForm .field-tip:hover {
    opacity: 1;
}

#auditProfileForm .audit-card {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

#auditProfileForm .audit-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(var(--ui-black-rgb), 0.08);
}

#auditProfileForm .audit-card .card-header {
    font-weight: 500;
    font-size: var(--ui-fs-md);
    padding: 1rem 1.25rem;
}

#auditProfileForm .audit-card .card-body {
    padding: 1rem 1.25rem;
}

#auditProfileForm .form-label {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
}

#auditProfileForm .form-control,
#auditProfileForm .form-select {
    padding: 0.5rem 0.75rem;
    font-size: var(--ui-fs-base);
    min-height: 38px;
}

#auditProfileForm .form-group-wizard {
    margin-bottom: 1rem;
}

#auditProfileForm .form-group-wizard .form-text {
    font-size: var(--ui-fs-sm);
    margin-top: 0.35rem;
    color: var(--ui-muted);
    line-height: 1.4;
}

.ui-page-crm-logistics-audit-view .audit-field-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.08);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-view .audit-field-block {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-logistics-audit-view .audit-field-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ui-page-crm-logistics-audit-view .audit-field-block-checkbox .audit-field-block-header {
    align-items: center;
}

.ui-page-crm-logistics-audit-view .audit-field-block-checkbox .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    padding: 0;
    min-width: 1.25rem;
    min-height: 1.25rem;
}

.ui-page-crm-logistics-audit-view .audit-field-block-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 5px;
}

.ui-page-crm-logistics-audit-view .audit-field-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-border);
    color: var(--ui-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-logistics-audit-view .audit-field-block-header .form-label {
    margin-bottom: 0px;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-logistics-audit-view .audit-field-subtitle {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

#auditProfileForm .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

#auditProfileForm .audit-wizard-step {
    display: none;
    overflow: hidden;
    min-height: 200px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

#auditProfileForm .audit-wizard-step.active {
    display: block;
    animation: auditWizardSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#auditProfileForm .audit-wizard-step.active.audit-wizard-step-prev {
    animation: auditWizardSlideInFromLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ui-page-crm-logistics-audit-view .audit-wizard-progress {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    transition: box-shadow 0.3s ease;
}

.ui-page-crm-logistics-audit-view .audit-wizard-progress:hover {
    box-shadow: 0 2px 8px rgba(var(--ui-black-rgb), 0.06);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator:hover {
    color: var(--ui-text);
    background: var(--ui-subtle);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator.active {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.12);
    transform: scale(1.02);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator.completed {
    color: var(--ui-success);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator.completed:hover {
    background: rgba(var(--ui-success-rgb), 0.1);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator .step-num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator.active .step-num {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    transform: scale(1.05);
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-indicator.completed .step-num {
    background: var(--ui-success);
    color: var(--ui-on-primary);
}

.ui-page-crm-logistics-audit-view .audit-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border);
}

.ui-page-crm-logistics-audit-view .audit-wizard-nav .btn {
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.ui-page-crm-logistics-audit-view .audit-wizard-step-subtitle {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    margin-bottom: 1rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    #auditProfileForm .metric-grid {
    grid-template-columns: repeat(4, 1fr);
    }
}

@keyframes auditWizardSlideIn {
from {
    opacity: 0;
    transform: translateX(24px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

@keyframes auditWizardSlideInFromLeft {
from {
    opacity: 0;
    transform: translateX(-24px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

/* ---------- Page: analytics/center_warehouse.php (root .ui-page-analytics-center-warehouse) ---------- */
/* chart parameters: categorical slot 1 (validated light + dark), recessive grid and axis ink */
.ui-page-analytics-center-warehouse {
    --wa-series-1: #2a78d6;
    --wa-series-1-soft: color-mix(in srgb, #2a78d6 14%, transparent);
    --wa-grid: var(--ui-border);
    --wa-axis: var(--ui-muted);
    --wa-surface: var(--ui-surface);
    --wa-good: #1f8a4c;
    --wa-warn: #b7791f;
    --wa-bad: #c0392b;
}
body[data-theme=dark] .ui-page-analytics-center-warehouse {
    --wa-series-1: #3987e5;
    --wa-series-1-soft: color-mix(in srgb, #3987e5 22%, transparent);
    --wa-good: #3fb46f;
    --wa-warn: #e0a43a;
    --wa-bad: #e5675a;
}
.ui-page-analytics-center-warehouse .wa-range {
    width: 300px;
    max-width: 100%;
    flex-wrap: nowrap;
}
.ui-page-analytics-center-warehouse .wa-range .input-group-text {
    background: var(--ui-surface);
    color: var(--ui-muted);
}
.ui-page-analytics-center-warehouse .wa-section + .wa-section {
    margin-top: var(--ui-space-6);
}
.ui-page-analytics-center-warehouse .wa-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}
.ui-page-analytics-center-warehouse .wa-section__title {
    margin: 0;
    font-size: var(--ui-fs-lg, 1rem);
    font-weight: 700;
    color: var(--ui-text);
}
.ui-page-analytics-center-warehouse .wa-section__note,
.ui-page-analytics-center-warehouse .wa-section__link {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    text-decoration: none;
    white-space: nowrap;
}
.ui-page-analytics-center-warehouse .wa-section__link:hover {
    color: var(--ui-primary);
}
.ui-page-analytics-center-warehouse .wa-section__link i {
    font-size: 10px;
    margin-left: 2px;
}

/* right now + KPI tiles: one look, label · value · one line of context */
.ui-page-analytics-center-warehouse .wa-now,
.ui-page-analytics-center-warehouse .wa-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-3);
}
.ui-page-analytics-center-warehouse .wa-now__tile,
.ui-page-analytics-center-warehouse .wa-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-page-analytics-center-warehouse .wa-now__label,
.ui-page-analytics-center-warehouse .wa-kpi__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-muted);
}
.ui-page-analytics-center-warehouse .wa-now__value,
.ui-page-analytics-center-warehouse .wa-kpi__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-page-analytics-center-warehouse .wa-now__meta,
.ui-page-analytics-center-warehouse .wa-kpi__sub,
.ui-page-analytics-center-warehouse .wa-kpi__delta {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    min-height: 1.4em;
}
.ui-page-analytics-center-warehouse .wa-kpi__delta.is-up { color: var(--wa-good); }
.ui-page-analytics-center-warehouse .wa-kpi__delta.is-down { color: var(--wa-bad); }
.ui-page-analytics-center-warehouse .wa-kpi__delta span { color: var(--ui-muted); }
.ui-page-analytics-center-warehouse .wa-now__icon { display: none; }
.ui-page-analytics-center-warehouse .wa-now__tile.is-alert { box-shadow: var(--ui-shadow), inset 0 0 0 1px color-mix(in srgb, var(--wa-bad) 35%, transparent); }
.ui-page-analytics-center-warehouse .wa-now__tile.is-alert .wa-now__icon { display: inline; color: var(--wa-bad); }
.ui-page-analytics-center-warehouse .wa-now__tile.is-alert .wa-now__value { color: var(--wa-bad); }

/* cards */
.ui-page-analytics-center-warehouse .wa-card {
    border: 0;
    box-shadow: var(--ui-shadow);
}
.ui-page-analytics-center-warehouse .wa-card .card-body {
    padding: var(--ui-space-5);
}
.ui-page-analytics-center-warehouse .wa-card__title {
    margin: 0;
    font-size: var(--ui-fs-md, .95rem);
    font-weight: 700;
    color: var(--ui-text);
}
.ui-page-analytics-center-warehouse .wa-card__desc {
    margin: 2px 0 var(--ui-space-4);
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}
.ui-page-analytics-center-warehouse .wa-chart { min-height: 280px; }
.ui-page-analytics-center-warehouse .wa-chart--sm { min-height: 220px; }
.ui-page-analytics-center-warehouse .wa-empty {
    margin: 0;
    padding: var(--ui-space-6) 0;
    text-align: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

/* horizontal bar lists: label | bar | value */
.ui-page-analytics-center-warehouse .wa-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ui-page-analytics-center-warehouse .wa-bar {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ui-space-3);
    font-size: var(--ui-fs-sm);
}
.ui-page-analytics-center-warehouse .wa-bar__label {
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-page-analytics-center-warehouse .wa-bar__track {
    height: 10px;
    border-radius: 5px;
    background: var(--ui-subtle);
    overflow: hidden;
}
.ui-page-analytics-center-warehouse .wa-bar__fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--wa-series-1);
}
.ui-page-analytics-center-warehouse .wa-bar--muted .wa-bar__fill { background: color-mix(in srgb, var(--wa-series-1) 45%, var(--ui-subtle)); }
.ui-page-analytics-center-warehouse .wa-bar__value {
    min-width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
    font-weight: 600;
    white-space: nowrap;
}

/* batch times */
.ui-page-analytics-center-warehouse .wa-stats {
    display: grid;
    gap: var(--ui-space-3);
}
.ui-page-analytics-center-warehouse .wa-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "meta value";
    align-items: center;
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle);
}
.ui-page-analytics-center-warehouse .wa-stat__label { grid-area: label; font-weight: 600; color: var(--ui-text); }
.ui-page-analytics-center-warehouse .wa-stat__meta { grid-area: meta; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-page-analytics-center-warehouse .wa-stat__value { grid-area: value; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-text); }

/* weekday x hour heatmap: one hue, light (few) to dark (many) */
.ui-page-analytics-center-warehouse .wa-heat__grid {
    display: grid;
    grid-template-columns: 2.25rem repeat(24, minmax(0, 1fr));
    gap: 3px;
    align-items: center;
}
.ui-page-analytics-center-warehouse .wa-heat__hour,
.ui-page-analytics-center-warehouse .wa-heat__day {
    font-size: 11px;
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}
.ui-page-analytics-center-warehouse .wa-heat__hour { text-align: left; white-space: nowrap; overflow: visible; }
.ui-page-analytics-center-warehouse .wa-heat__cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--ui-subtle);
}
.ui-page-analytics-center-warehouse .wa-heat__cell[data-level="1"] { background: color-mix(in srgb, var(--wa-series-1) 20%, var(--ui-surface)); }
.ui-page-analytics-center-warehouse .wa-heat__cell[data-level="2"] { background: color-mix(in srgb, var(--wa-series-1) 38%, var(--ui-surface)); }
.ui-page-analytics-center-warehouse .wa-heat__cell[data-level="3"] { background: color-mix(in srgb, var(--wa-series-1) 56%, var(--ui-surface)); }
.ui-page-analytics-center-warehouse .wa-heat__cell[data-level="4"] { background: color-mix(in srgb, var(--wa-series-1) 76%, var(--ui-surface)); }
.ui-page-analytics-center-warehouse .wa-heat__cell[data-level="5"] { background: var(--wa-series-1); }

/* client table: on-time meter */
.ui-page-analytics-center-warehouse .wa-table td,
.ui-page-analytics-center-warehouse .wa-table th { vertical-align: middle; }
.ui-page-analytics-center-warehouse .wa-meter {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 8rem;
}
.ui-page-analytics-center-warehouse .wa-meter__track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--ui-subtle);
    overflow: hidden;
}
.ui-page-analytics-center-warehouse .wa-meter__fill { display: block; height: 100%; border-radius: 3px; }
.ui-page-analytics-center-warehouse .wa-meter--good .wa-meter__fill { background: var(--wa-good); }
.ui-page-analytics-center-warehouse .wa-meter--warn .wa-meter__fill { background: var(--wa-warn); }
.ui-page-analytics-center-warehouse .wa-meter--bad .wa-meter__fill { background: var(--wa-bad); }
.ui-page-analytics-center-warehouse .wa-meter__value { min-width: 3rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-page-analytics-center-warehouse .wa-late { color: var(--wa-bad); font-weight: 600; }

/* loading: the values fade while a new period loads, nothing jumps */
.ui-page-analytics-center-warehouse.is-loading :is(.wa-kpi__value, .wa-now__value, .wa-bars, .wa-heat, .wa-chart, .wa-stats, #clientSLATable) {
    opacity: .45;
    transition: opacity .15s ease;
}

@media (max-width: 1199.98px) {
    .ui-page-analytics-center-warehouse .wa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ui-page-analytics-center-warehouse .wa-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ui-page-analytics-center-warehouse .wa-now,
    .ui-page-analytics-center-warehouse .wa-kpis { gap: var(--ui-space-2); }
    .ui-page-analytics-center-warehouse .wa-now__tile,
    .ui-page-analytics-center-warehouse .wa-kpi { padding: var(--ui-space-3); }
    .ui-page-analytics-center-warehouse .wa-now__value,
    .ui-page-analytics-center-warehouse .wa-kpi__value { font-size: 1.375rem; }
    .ui-page-analytics-center-warehouse .wa-card .card-body { padding: var(--ui-space-4); }
    .ui-page-analytics-center-warehouse .wa-bar { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto; }
    .ui-page-analytics-center-warehouse .wa-heat__grid { grid-template-columns: 1.75rem repeat(24, minmax(0, 1fr)); gap: 2px; }
    .ui-page-analytics-center-warehouse .wa-heat__hour { font-size: 10px; }
    .ui-page-analytics-center-warehouse .wa-heat__hour--minor { visibility: hidden; }
    .ui-page-analytics-center-warehouse .wa-bar { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; }
    .ui-page-analytics-center-warehouse .wa-range { width: 100%; }
    .ui-page-analytics-center-warehouse .wa-kpi__delta span { display: none; }
}

/* ---------- Page: center/audit_settings.php (root .ui-page-center-audit-settings) ---------- */
.ui-page-center-audit-settings .capacity-form-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ui-page-center-audit-settings .capacity-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--ui-muted-rgb), 0.06);
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-center-audit-settings .capacity-form-row {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-page-center-audit-settings .capacity-form-row-header {
    flex: 1;
    min-width: 200px;
}

.ui-page-center-audit-settings .capacity-form-row-label {
    display: block;
    font-weight: 500;
}

.ui-page-center-audit-settings .capacity-form-row-desc {
    display: block;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-center-audit-settings .capacity-form-row-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ui-page-center-audit-settings .capacity-form-row-inputs .input-group {
    width: 140px;
}

#rulesManagementModal .rules-tab-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

#rulesManagementModal .rules-tab-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-hover) !important;
}

#rulesManagementModal .rules-tab-card:hover .text-secondary {
    color: var(--ui-primary) !important;
}

#rulesManagementModal .rules-tab-card.active {
    border-color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.05);
}

#rulesManagementModal .rules-tab-card.active .text-secondary {
    color: var(--ui-primary) !important;
}

@media (max-width: 575.98px) {
    .ui-page-center-audit-settings .capacity-form-row {
    flex-direction: column;
        align-items: stretch;
    }

    .ui-page-center-audit-settings .capacity-form-row-inputs .input-group {
    width: 100%;
    }
}

/* ---------- Page: center/batch_cancelled_picks.php (root .ui-page-center-batch-cancelled-picks) ---------- */
#cancelledBatchPicksPage .cbp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

#cancelledBatchPicksPage .cbp-toolbar-field {
    min-width: 16rem;
    flex: 1 1 16rem;
}

#cancelledBatchPicksPage .cbp-toolbar-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#cancelledBatchPicksPage .cbp-kpi {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 1rem 1.15rem;
    height: 100%;
}

#cancelledBatchPicksPage .cbp-kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

#cancelledBatchPicksPage .cbp-kpi-label {
    margin-top: 0.2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#cancelledBatchPicksPage .cbp-empty,
#cancelledBatchPicksPage .cbp-loading,
#cancelledBatchPicksPage .cbp-batch-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

#cancelledBatchPicksPage .cbp-empty,
#cancelledBatchPicksPage .cbp-loading {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
}

#cancelledBatchPicksPage .cbp-batch-card {
    overflow: hidden;
}

#cancelledBatchPicksPage .accordion-item {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

#cancelledBatchPicksPage .accordion-item:first-of-type {
    border-top: 0;
}

#cancelledBatchPicksPage .accordion-item:last-of-type {
    border-bottom: 0;
}

#cancelledBatchPicksPage .accordion-button,
#cancelledBatchPicksPage .accordion-button:not(.collapsed),
#cancelledBatchPicksPage .accordion-body {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: none;
}

#cancelledBatchPicksPage .accordion-button:focus {
    box-shadow: none;
    border-color: var(--ui-border);
}

#cancelledBatchPicksPage .cbp-batch-meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#cancelledBatchPicksPage .cbp-batch-title {
    font-weight: 600;
}

#cancelledBatchPicksPage .cbp-table {
    font-size: var(--ui-fs-sm);
}

#cancelledBatchPicksPage .cbp-table td,
#cancelledBatchPicksPage .cbp-table th {
    vertical-align: middle;
}

#cancelledBatchPicksPage .cbp-section-title {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

/* ---------- Page: center/integrations.php (root .ui-page-center-integrations) ---------- */
#jtlFfnShippingMethodPickerModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
    background: var(--ui-surface);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

#jtlFfnShippingMethodPickerModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#jtlFfnShippingMethodPickerModal .modal-title {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#jtlFfnShippingMethodPickerModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#jtlFfnShippingMethodPickerModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-text);
}

#jtlFfnShippingMethodPickerModal .modal-footer {
    border-top: 0 !important;
    background: transparent;
    padding: 0.5rem 1.35rem 1.2rem;
    align-items: stretch;
    gap: 0.75rem;
}

#jtlFfnShippingMethodPickerModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-search {
    position: relative;
    margin-bottom: 0.75rem;
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-search .form-control {
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    padding: 0.55rem 0.85rem 0.55rem 2.2rem;
    color: var(--ui-text);
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-toolbar .btn-link {
    color: var(--ui-muted);
    text-decoration: none;
    padding: 0;
    min-height: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

#jtlFfnShippingMethodPickerModal .jtl-ffn-sm-count {
    margin-left: auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

#jtlFfnShippingMethodPickerList {
    background: rgba(var(--ui-muted-rgb), 0.12);
    border-radius: var(--ui-radius-md);
    overflow: auto;
    max-height: min(52vh, 420px);
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border-bottom: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
    cursor: pointer;
}

body[data-theme=dark] #jtlFfnShippingMethodPickerList .jtl-ffn-sm-row {
    border-bottom-color: rgba(var(--ui-muted-rgb), 0.45);
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-row:last-child {
    border-bottom: 0;
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-row .form-check-input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-name {
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    margin-top: 0.1rem;
}

#jtlFfnShippingMethodPickerList .jtl-ffn-sm-synced {
    flex: 0 0 auto;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.16);
    border-radius: var(--ui-radius-pill);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    margin-top: 0.1rem;
}

#jtlFfnShippingMethodPickerStatus {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    padding: 0.85rem;
}

@media (max-width: 767.98px) {
    #jtlFfnShippingMethodPickerModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

/* ---------- Page: center/inventory_logs.php (root .ui-page-center-inventory-logs) ---------- */
#inventoryLogsPage .inv-log-delta-positive {
    color: var(--ui-success);
}

#inventoryLogsPage .inv-log-delta-negative {
    color: var(--ui-danger);
}

#inventoryLogsPage .inv-log-delta-neutral {
    color: var(--ui-muted);
}

#inventoryLogsPage .inv-log-stock-change {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}

#inventoryLogsPage .inv-log-transition {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

#inventoryLogsPage .inv-log-transition .inv-log-delta {
    flex-basis: 100%;
    text-align: center;
    margin-top: 0.1rem;
}

#inventoryLogsPage .inv-log-qty-old {
    color: var(--ui-muted);
}

#inventoryLogsPage .inv-log-snapshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

#inventoryLogsPage .inv-log-snapshot-delta {
    text-align: center; width: 100%;
}

#inventoryLogsPage .inv-log-snapshot-delta-positive {
    color: var(--ui-success); font-size: var(--ui-fs-xs);
}

#inventoryLogsPage .inv-log-snapshot-delta-negative {
    color: var(--ui-danger); font-size: var(--ui-fs-xs);
}

#inventoryLogsPage #inventoryLogsTable {
    font-size: var(--ui-fs-sm);
}

#inventoryLogsPage #inventoryLogsTable td {
    vertical-align: middle;
}

#inventoryLogsPage .inv-log-message-cell {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-muted);
}

#inventoryLogsPage .main-buttons .dt-buttons {
    display: contents;
}

#inventoryLogsPage .dataTables_wrapper .dataTables_length,
#inventoryLogsPage .dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}

/* ---------- Page: center/invoicing_module_activate.php (root .ui-page-center-invoicing-module-activate) ---------- */
/* a regular portal card: white, standard shadow and radius, primary button; no gradient or tinted frame */
.ui-page-center-invoicing-module-activate .invoicing-module-gate {
    max-width: 820px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__hero {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-4);
    padding: var(--ui-space-6) var(--ui-space-6) var(--ui-space-4);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-primary-tint, color-mix(in srgb, var(--ui-primary) 12%, transparent));
    color: var(--ui-primary);
    font-size: 18px;
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__eyebrow {
    display: inline-block;
    margin-bottom: var(--ui-space-2);
    padding: 2px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs, 12px);
    font-weight: 600;
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__title {
    margin: 0 0 4px;
    font-size: var(--ui-fs-lg, 1.1rem);
    font-weight: 700;
    color: var(--ui-text);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__text {
    margin: 0;
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2) var(--ui-space-6);
    margin: 0;
    padding: 0 var(--ui-space-6) var(--ui-space-6) calc(var(--ui-space-6) + 44px + var(--ui-space-4));
    list-style: none;
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__features li {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__features li i {
    width: 16px;
    text-align: center;
    color: var(--ui-muted);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-6);
    border-top: 1px solid var(--ui-border);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__price {
    display: flex;
    align-items: baseline;
    gap: var(--ui-space-2);
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}
.ui-page-center-invoicing-module-activate .invoicing-module-gate__price-note {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}
/* paywall layout: the offer beside an example invoice, then what each part does */
.ui-page-center-invoicing-module-activate .inv-paywall {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--ui-space-4);
    align-items: stretch;
}
.ui-page-center-invoicing-module-activate .inv-paywall .invoicing-module-gate {
    max-width: none;
    display: flex;
    flex-direction: column;
}
.ui-page-center-invoicing-module-activate .inv-paywall .invoicing-module-gate__features {
    flex-direction: column;
    flex: 1;
}
.ui-page-center-invoicing-module-activate .inv-preview {
    position: relative;
    margin: 0;
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-page-center-invoicing-module-activate .inv-preview__tag {
    position: absolute;
    top: var(--ui-space-3);
    right: var(--ui-space-3);
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs, 12px);
    font-weight: 600;
}
.ui-page-center-invoicing-module-activate .inv-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding-right: 4.5rem;
    margin-bottom: var(--ui-space-4);
}
.ui-page-center-invoicing-module-activate .inv-preview__title { font-weight: 700; color: var(--ui-text); }
.ui-page-center-invoicing-module-activate .inv-preview__meta { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-page-center-invoicing-module-activate .inv-preview__status {
    padding: 2px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-success-tint);
    color: var(--ui-success);
    font-size: var(--ui-fs-xs, 12px);
    font-weight: 600;
    white-space: nowrap;
}
.ui-page-center-invoicing-module-activate .inv-preview__lines {
    width: 100%;
    font-size: var(--ui-fs-sm);
    font-variant-numeric: tabular-nums;
}
.ui-page-center-invoicing-module-activate .inv-preview__lines td {
    padding: 8px 0;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
}
.ui-page-center-invoicing-module-activate .inv-preview__lines td:nth-child(2) { color: var(--ui-muted); padding-inline: var(--ui-space-3); }
.ui-page-center-invoicing-module-activate .inv-preview__lines td:last-child { text-align: right; white-space: nowrap; }
.ui-page-center-invoicing-module-activate .inv-preview__lines td:first-child { padding-left: 0 !important; }
.ui-page-center-invoicing-module-activate .inv-preview__lines td:last-child { padding-right: 0 !important; }
.ui-page-center-invoicing-module-activate .inv-preview__lines tfoot td {
    color: var(--ui-text) !important;
    padding-inline: 0 !important;
    border-bottom: 0;
    padding-top: var(--ui-space-3);
    font-weight: 700;
}
.ui-page-center-invoicing-module-activate .inv-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-4);
    margin-top: var(--ui-space-4);
}
.ui-page-center-invoicing-module-activate .inv-benefit {
    padding: var(--ui-space-5);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-page-center-invoicing-module-activate .inv-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle);
    color: var(--ui-muted);
}
.ui-page-center-invoicing-module-activate .inv-benefit__title { margin: 0 0 4px; font-size: var(--ui-fs-md, .95rem); font-weight: 700; color: var(--ui-text); }
.ui-page-center-invoicing-module-activate .inv-benefit__text { margin: 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
@media (max-width: 991.98px) {
    .ui-page-center-invoicing-module-activate .inv-paywall { grid-template-columns: minmax(0, 1fr); }
    .ui-page-center-invoicing-module-activate .inv-benefits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .ui-page-center-invoicing-module-activate .inv-preview,
    .ui-page-center-invoicing-module-activate .inv-benefit { padding: var(--ui-space-4); }
    .ui-page-center-invoicing-module-activate .inv-benefits { gap: var(--ui-space-2); }
    .ui-page-center-invoicing-module-activate .invoicing-module-gate__hero { padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-3); gap: var(--ui-space-3); }
    .ui-page-center-invoicing-module-activate .invoicing-module-gate__features { flex-direction: column; padding: 0 var(--ui-space-4) var(--ui-space-4); }
    .ui-page-center-invoicing-module-activate .invoicing-module-gate__footer { padding: var(--ui-space-3) var(--ui-space-4); }
    .ui-page-center-invoicing-module-activate .invoicing-module-gate__cta { width: 100%; }
}

/* ---------- Page: center/listing.php (root .ui-page-center-listing) ---------- */
.ui-page-center-listing .card-container {
    display: flex;
    height: 400px;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

.ui-page-center-listing .ck.ck-editor {
    border-top: solid 1px var(--ui-border-strong);
}

.ui-page-center-listing .maps .panel {
    background: var(--ui-surface);
    width: 300px;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: var(--ui-radius) 0 0 var(--ui-radius);
}

.ui-page-center-listing .maps .half-input-container {
    display: flex;
    justify-content: space-between;
}

.ui-page-center-listing .maps .half-input {
    max-width: 120px;
}

.ui-page-center-listing .maps .map {
    width: calc(100% - 300px);
    border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}

.ui-page-center-listing .maps h2 {
    margin: 0;
    font-family: Roboto, sans-serif;
}

.ui-page-center-listing .maps input {
    height: max(30px, var(--ui-tap-min, 0px));
}

.ui-page-center-listing .maps input {
    border: 0;
    border-bottom: 1px solid var(--ui-border-strong);
    font-size: var(--ui-fs-base);
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: normal;
}

.ui-page-center-listing .maps input:focus::placeholder {
    color: white;
}

.ui-page-center-listing .maps .form-select {
    border: 0;
    border-bottom: 1px solid var(--ui-border-strong);
    border-radius: 0;
    font-weight: 500;
    padding-left: 2px;
}

.ui-page-center-listing main {
    position: relative;
    padding-bottom: 70px;
}

.ui-page-center-listing .floating-save-bar {
    background-color: rgba(var(--ui-black-rgb), 0.76);
    color: white;
    font-weight: bolder;
    padding: 10px;
    border-radius: var(--ui-radius-md);
    position: fixed;
    bottom: 20px;
    transition: bottom 0.5s;
    backdrop-filter: blur(10px);
}

.ui-page-center-listing .upload-button {
    width: 100%;
}

.ui-page-center-listing .center-image {
    width: 100%;
    height: 130px;
    border-radius: var(--ui-radius-xs);
    background-image: url("/portal/public/images/cd_logo/no_product_image.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ui-page-center-listing .section-lines {
    border: var(--ui-border-strong) 1px;
    border-style: dashed;
    border-radius: var(--ui-radius-xs);
    padding: 9px;
}

.ui-page-center-listing .card-body {
    padding-top: 0;
}

.ui-page-center-listing .add-image-wrapper,
.ui-page-center-listing .image-wrapper {
    /* /* width: 200px; */
    height: 200px;
    position: relative;
    color: var(--ui-muted);
}

.ui-page-center-listing .add-image-button {
    text-align: center;
    width: 100px;
    font-size: var(--ui-fs-lg);
    font-weight: 400;
    margin: auto;
    margin-top: 50px;
}

.ui-page-center-listing .add-image-frame {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/portal/public/images/cd_logo/no_product_image.png");
}

.ui-page-center-listing .remove-image {
    border-radius: 50%;
    background-color: var(--ui-track);
    border: 2px solid var(--ui-border);
    position: absolute;
    top: -7px;
    right: -7px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.ui-page-center-listing .remove-image .fa {
    top: 4px;
    left: 5px;
    position: absolute;
    color: var(--ui-danger);
}

.ui-page-center-listing .form-check-label {
    padding-right: 10px;
}

.ui-page-center-listing .specialities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.ui-page-center-listing .speciality-item {
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    padding: 10px 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.ui-page-center-listing .speciality-item > * {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.ui-page-center-listing .speciality-item:hover {
    border-color: var(--ui-border-strong);
}

.ui-page-center-listing .speciality-item input[type="checkbox"]:checked + label {
    color: var(--ui-text);
    font-weight: 500;
}

.ui-page-center-listing .speciality-item input[type="checkbox"]:checked {
    accent-color: var(--ui-primary);
}

.ui-page-center-listing .speciality-item:has(input[type="checkbox"]:checked) {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
}

.ui-page-center-listing .speciality-item.checked {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
}

.ui-page-center-listing .speciality-item .form-check-input {
    margin-top: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.ui-page-center-listing .speciality-item .form-check-label {
    cursor: pointer;
    margin: 0;
    font-size: var(--ui-fs-base);
    line-height: 1.5;
    flex: 1;
    padding-right: 0;
}

@media (max-width: 768px) {
    .ui-page-center-listing .specialities-grid {
    grid-template-columns: 1fr;
    }
}

@media (max-width: 425px) {
    .ui-page-center-listing .map {
    display: none !important;
    }

    .ui-page-center-listing .panel {
    width: 100% !important;
    }

    .ui-page-center-listing .maps .half-input {
    max-width: 100% !important;
    }
}

/* phones: the map is hidden, so the address panel is a plain card of its own height (no 400px box, no gaps spread
   over it, all corners rounded like the cards around it) */
@media (max-width: 767.98px) {
    .ui-page-center-listing .card-container.maps {
    height: auto;
    }

    .ui-page-center-listing .maps .map {
    display: none !important;
    }

    .ui-page-center-listing .maps .panel {
    width: 100% !important;
    padding: 16px;
    justify-content: flex-start;
    gap: 8px;
    border-radius: inherit;
    }

    .ui-page-center-listing .maps .panel > div:first-child {
    margin-bottom: 4px;
    }

    .ui-page-center-listing .maps .half-input-container {
    gap: 16px;
    }

    .ui-page-center-listing .maps .half-input {
    max-width: none !important;
    flex: 1 1 0;
    min-width: 0;
    }
}

/* ---------- Page: center/packaging_line.php (root .ui-page-center-packaging-line) ---------- */
#pl-status-card {
    border: 1px solid var(--ui-border);
    transition: all 0.15s ease-in-out;
    min-height: 260px;
}

#pl-status-card.pl-state-idle {
    border-left: 6px solid var(--ui-muted);
}

#pl-status-card.pl-state-scanning {
    border-left: 6px solid var(--ui-info);
}

#pl-status-card.pl-state-success {
    border-left: 6px solid var(--ui-success);
}

#pl-status-card.pl-state-error {
    border-left: 6px solid var(--ui-danger);
}

.ui-page-center-packaging-line .pl-status-pill {
    font-size: var(--ui-fs-md);
    letter-spacing: 0.04em;
    padding: 0.45rem 0.75rem;
}

#pl-last-scan {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.ui-page-center-packaging-line .pl-meta-label {
    color: var(--ui-muted);
    min-width: 100px;
    display: inline-block;
}

/* ---------- Page: center/seller_announcements.php (root .ui-page-center-seller-announcements) ---------- */
.ui-page-center-seller-announcements .table td {
    vertical-align: middle;
}

#announcementTable tr {
    cursor: pointer;
}

.ui-page-center-seller-announcements .cd-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    border: 2px solid var(--ui-border);
    cursor: pointer;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    transition: all .15s ease;
    user-select: none;
}

.ui-page-center-seller-announcements .cd-type-pill i {
    font-size: var(--ui-fs-lg);
}

.ui-page-center-seller-announcements .cd-type-pill.active {
    border-color: var(--pill-accent);
    background: var(--pill-bg);
    color: var(--ui-text);
}

#announcementPreviewWrap {
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

/* ---------- Page: center/shipping_surcharges.php (root .ui-page-center-shipping-surcharges) ---------- */
#datatable-surcharges thead th.text-center,
#datatable-surcharges tbody td.text-center {
    text-align: center !important;
}

#datatable-surcharges thead th.text-end,
#datatable-surcharges tbody td.text-end {
    text-align: right !important;
}

#datatable-surcharges thead th.text-start,
#datatable-surcharges tbody td.text-start {
    text-align: left !important;
}

#datatable-surcharges {
    width: 100% !important;
}

#datatable-surcharges th,
#datatable-surcharges td {
    vertical-align: middle;
}

#datatable-surcharges thead th,
#datatable-surcharges tbody td {
    box-sizing: border-box;
}

#validateSurchargesModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
}

#validateSurchargesModal .modal-header {
    border-bottom: 0;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#validateSurchargesModal .modal-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#validateSurchargesModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#validateSurchargesModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
    color: var(--ui-text);
    line-height: 1.4;
}

#validateSurchargesModal .modal-footer {
    border-top: 0;
    background: transparent;
    padding: 0.5rem 1.35rem 1.2rem;
}

#validateSurchargesModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
}

#validateSurchargesModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin-top: 0.25rem;
}

#validateSurchargesModal .pricing-section {
    padding: 0.85rem 0;
}

#validateSurchargesModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #validateSurchargesModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#validateSurchargesModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-muted);
    line-height: 1.4;
}

#validateSurchargesModal .validate-surcharge-count {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

#validateSurchargesModal .validate-surcharges-note {
    color: var(--ui-muted);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.ui-page-center-shipping-surcharges .confidence-badge {
    font-size: var(--ui-fs-xs);
    padding: 0.25rem 0.5rem;
}

.ui-page-center-shipping-surcharges .confidence-high {
    background-color: var(--ui-series-3);
    color: white;
}

.ui-page-center-shipping-surcharges .confidence-medium {
    background-color: var(--ui-warning);
    color: var(--ui-text);
}

.ui-page-center-shipping-surcharges .surcharge_import_select.border-primary {
    border-color: var(--ui-primary) !important;
    border-width: 2px !important;
}

.ui-page-center-shipping-surcharges .surcharge_import_select.border-secondary {
    border-color: var(--ui-border) !important;
}

.ui-page-center-shipping-surcharges .confidence-low {
    background-color: var(--ui-muted);
    color: white;
}

#linkOrderSidebar {
    width: 500px;
}

.ui-page-center-shipping-surcharges .suggested-order-item {
    cursor: pointer;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    padding: 10px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.ui-page-center-shipping-surcharges .suggested-order-item:hover {
    background-color: var(--ui-subtle);
    border-color: var(--ui-primary);
}

.ui-page-center-shipping-surcharges .suggested-order-item.selected {
    background-color: var(--ui-primary-tint);
    border-color: var(--ui-primary);
    border-width: 2px;
}

.ui-page-center-shipping-surcharges .dropdown-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#addSurchargeModal .modal-content {
    overflow: hidden;
}

#addSurchargeModal .form-label {
    color: var(--ui-body);
    margin-bottom: 0.5rem;
}

#addSurchargeModal .input-group-text {
    border-right: none;
    border-color: var(--ui-border-strong);
}

#addSurchargeModal .form-control,
#addSurchargeModal .form-select {
    border-left: none;
}

#addSurchargeModal .form-control:focus,
#addSurchargeModal .form-select:focus {
    border-color: var(--ui-info);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-info-rgb), 0.25);
}

#addSurchargeModal .form-control-lg {
    padding: 0.75rem 1rem;
}

#addSurchargeModal .btn-lg {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    #validateSurchargesModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

/* ---------- Page: crm/dialer_analytics.php (root .ui-page-crm-dialer-analytics) ---------- */
.ui-page-crm-dialer-analytics.sd-analytics .page-header h1 {
    margin-bottom: 0.2rem;
}

.ui-page-crm-dialer-analytics .sd-analytics-filters {
    display: grid;
    grid-template-columns: minmax(14rem, 1.2fr) minmax(12rem, 1fr) minmax(12rem, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem 1.15rem;
    margin-bottom: 1.15rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-crm-dialer-analytics .sd-analytics-filters__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-page-crm-dialer-analytics .sd-analytics-filters .form-control,
.ui-page-crm-dialer-analytics .sd-analytics-filters .form-select {
    min-height: 2.5rem;
    background: var(--ui-surface);
}

.ui-page-crm-dialer-analytics .sd-analytics-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.ui-page-crm-dialer-analytics .sd-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.ui-page-crm-dialer-analytics .sd-analytics-kpi {
    padding: 1rem 1.1rem 0.95rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
}

.ui-page-crm-dialer-analytics .sd-analytics-kpi__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-page-crm-dialer-analytics .sd-analytics-kpi__value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

.ui-page-crm-dialer-analytics .sd-analytics-kpi__value.is-calls {
    color: var(--ui-primary);
}

.ui-page-crm-dialer-analytics .sd-analytics-kpi__value.is-conversations {
    color: var(--ui-success);
}

.ui-page-crm-dialer-analytics .sd-analytics-queue {
    margin: 0 0 1.15rem;
    font-size: var(--ui-fs-md);
    color: var(--ui-muted);
}

.ui-page-crm-dialer-analytics .sd-analytics-queue strong {
    color: var(--ui-text); font-weight: 600;
}

.ui-page-crm-dialer-analytics .sd-analytics-queue span + span::before {
    content: "·";
    margin: 0 0.55rem;
    color: color-mix(in srgb, var(--ui-muted) 70%, transparent);
}

.ui-page-crm-dialer-analytics .sd-analytics-panel {
    height: 100%;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
    overflow: hidden;
}

.ui-page-crm-dialer-analytics .sd-analytics-panel__head {
    padding: 1.05rem 1.2rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent);
}

.ui-page-crm-dialer-analytics .sd-analytics-panel__title {
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
}

.ui-page-crm-dialer-analytics .sd-analytics-panel__subtitle {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-crm-dialer-analytics .sd-analytics-chart {
    position: relative;
    height: 320px;
    padding: 0.85rem 1rem 1rem;
}

.ui-page-crm-dialer-analytics .sd-analytics-table {
    margin: 0;
}

.ui-page-crm-dialer-analytics .sd-analytics-table thead th {
    padding: 0.75rem 1.1rem;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-muted);
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
    background: transparent;
}

.ui-page-crm-dialer-analytics .sd-analytics-table tbody td {
    padding: 0.8rem 1.1rem;
    vertical-align: middle;
    border-color: color-mix(in srgb, var(--ui-border) 70%, transparent);
}

.ui-page-crm-dialer-analytics .sd-analytics-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-page-crm-dialer-analytics .sd-analytics-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ui-muted);
}

@media (max-width: 1199.98px) {
    .ui-page-crm-dialer-analytics .sd-analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page-crm-dialer-analytics .sd-analytics-filters {
    grid-template-columns: 1fr 1fr;
    }

    .ui-page-crm-dialer-analytics .sd-analytics-filters__actions {
    grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ui-page-crm-dialer-analytics .sd-analytics-kpis,
    .ui-page-crm-dialer-analytics .sd-analytics-filters {
    grid-template-columns: 1fr;
    }
}

/* ---------- Page: crm/dialer_queue.php (root .ui-page-crm-dialer-queue) ---------- */
.ui-page-crm-dialer-queue .sales-dialer-queue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb), 0.04), 0 8px 24px rgba(var(--ui-ink-rgb), 0.06);
    overflow: hidden;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-table {
    margin: 0;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-table thead th {
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    border-bottom-width: 1px;
    white-space: nowrap;
    padding: 0.85rem 1rem;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-table tbody td {
    vertical-align: middle;
    padding: 0.9rem 1rem;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-company {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-crm-dialer-queue .sales-dialer-queue-meta {
    display: block;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--ui-muted) 12%, transparent);
    color: var(--ui-text);
    white-space: nowrap;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-badge--priority {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer-queue .sales-dialer-queue-badge--claimed,
.ui-page-crm-dialer-queue .sales-dialer-queue-badge--in_call {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.ui-page-crm-dialer-queue .sales-dialer-queue-badge--open {
    background: color-mix(in srgb, var(--ui-muted) 12%, transparent);
}

.ui-page-crm-dialer-queue .sales-dialer-queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
}

.ui-page-crm-dialer-queue .sales-dialer-queue-empty i {
    font-size: var(--ui-fs-kpi);
    opacity: 0.7;
}

.ui-page-crm-dialer-queue .sales-dialer-queue-sync-note {
    margin: 0.35rem 0 0;
    max-width: 46rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

/* ---------- Page: crm/logistics_audit_list.php (root .ui-page-crm-logistics-audit-list) ---------- */
.ui-page-crm-logistics-audit-list .audit-pipeline {
    display: flex;
    align-items: stretch;
    min-width: 240px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px 6px 16px;
    margin-left: -5px;
    min-width: 48px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 12px 100%, 0 50%);
    background: linear-gradient(135deg, var(--ui-border) 0%, var(--ui-border-strong) 100%);
    color: var(--ui-muted);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.06);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step:first-child {
    margin-left: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-last {
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
    padding-right: 16px;
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-complete {
    background: linear-gradient(135deg, var(--ui-success) 0%, var(--ui-success) 100%);
    color: var(--ui-on-primary);
    box-shadow: 0 2px 4px rgba(var(--ui-success-rgb), 0.4);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-pending {
    background: linear-gradient(135deg, var(--ui-border) 0%, var(--ui-border-strong) 100%);
    color: var(--ui-silver);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-clickable {
    cursor: pointer;
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--ui-black-rgb), 0.12);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-clickable.audit-pipeline-complete:hover {
    box-shadow: 0 3px 8px rgba(var(--ui-success-rgb), 0.4);
}

.ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-loading {
    pointer-events: none;
    opacity: 0.85;
    animation: audit-pipeline-pulse 0.8s ease-in-out infinite;
}

.ui-page-crm-logistics-audit-list .audit-pipeline-icon {
    font-size: var(--ui-fs-2xs);
    opacity: 0.9;
}

.ui-page-crm-logistics-audit-list .audit-pipeline-label {
    white-space: nowrap;
}

body[data-theme=dark] .ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-pending {
    background: linear-gradient(135deg, var(--ui-border-strong) 0%, var(--ui-border) 100%);
    color: var(--ui-silver);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-list .audit-pipeline-step.audit-pipeline-complete {
    background: linear-gradient(135deg, var(--ui-success) 0%, var(--ui-success) 100%);
    box-shadow: 0 2px 4px rgba(var(--ui-success-rgb), 0.5);
}

.ui-page-crm-logistics-audit-list .audit-value {
    font-weight: 500; color: var(--ui-text);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-list .audit-value {
    color: var(--ui-text);
}

.ui-page-crm-logistics-audit-list .audit-general-notes-cell {
    max-width: 200px;
}

.ui-page-crm-logistics-audit-list .audit-general-notes {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ui-page-crm-logistics-audit-list .audit-fc-logo-img {
    max-height: 40px; max-width: 100px; width: auto; height: auto; object-fit: contain; vertical-align: middle;
}

@keyframes audit-pipeline-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.6; }
}

/* ---------- Page: crm/logistics_audit_simulation.php (root .ui-page-crm-logistics-audit-simulation) ---------- */
.ui-page-crm-logistics-audit-simulation .audit-analyzing-spinner {
    animation: audit-analyzing-pulse 2s ease-in-out infinite;
}

.ui-page-crm-logistics-audit-simulation .comparison-card {
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ui-page-crm-logistics-audit-simulation .comparison-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(var(--ui-black-rgb), 0.1);
}

.ui-page-crm-logistics-audit-simulation .comparison-card.best-match {
    border: 2px solid var(--ui-success);
    box-shadow: 0 0 0 1px rgba(var(--ui-success-rgb), 0.3);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-simulation .comparison-card.best-match {
    border-color: var(--ui-success);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .card-header h5,
.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row .kpi-label,
.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row .kpi-value,
.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title,
.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .cost-row {
    font-size: var(--ui-fs-base);
    font-weight: 500;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-simulation .comparison-card .cost-row {
    border-bottom-color: var(--ui-border);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row:last-of-type {
    border-bottom: none;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row-total {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--ui-border);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row-total .kpi-label {
    color: var(--ui-text);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .cost-row .kpi-label {
    color: var(--ui-muted);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0;
    user-select: none;
    transition: color 0.2s ease;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title:hover {
    color: var(--ui-text);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title .capacity-chevron {
    font-size: var(--ui-fs-2xs);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title:hover .capacity-chevron {
    opacity: 0.8;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-title[aria-expanded="true"] .capacity-chevron {
    transform: rotate(180deg);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-content {
    margin-top: 0.4rem;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-content .cost-row {
    padding: 0.25rem 0;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-content .cost-row:last-child {
    border-bottom: none;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-content .kpi-label,
.ui-page-crm-logistics-audit-simulation .comparison-card .capacity-block .capacity-content .kpi-value {
    font-size: var(--ui-fs-sm);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .card-header {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-best-badge {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-warning);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-fit-score-muted {
    opacity: 0.65;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-logo-wrapper {
    width: 100%;
    min-height: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: rgba(var(--ui-black-rgb), 0.03);
    border-radius: var(--ui-radius-xs);
}

body[data-theme=dark] .ui-page-crm-logistics-audit-simulation .comparison-card .fc-logo-wrapper {
    background: rgba(var(--ui-white-rgb), 0.06);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-logo-wrapper img.fc-logo {
    max-height: 2.5rem;
    max-width: 100%;
    object-fit: contain;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-logo-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.15);
    border-radius: var(--ui-radius-xs);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-fallback-name {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-align: center;
    color: var(--ui-text);
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .fc-profile-name {
    font-size: var(--ui-fs-sm);
    line-height: 1.3;
}

.ui-page-crm-logistics-audit-simulation .comparison-card .card-header .badge {
    font-size: var(--ui-fs-base);
    font-weight: 500;
}

.ui-page-crm-logistics-audit-simulation .kpi-info {
    font-size: var(--ui-fs-2xs); opacity: 0.7; cursor: help; margin-left: 0.2rem;
}

.ui-page-crm-logistics-audit-simulation .debug-kpi-toggle[aria-expanded="true"] .debug-kpi-chevron {
    transform: rotate(180deg);
}

@keyframes audit-analyzing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ---------- Page: crm/notifications.php (root .ui-page-crm-notifications) ---------- */
.ui-page-crm-notifications .table td {
    vertical-align: middle;
}

#notificationTable tr {
    cursor: pointer;
}

.ui-page-crm-notifications .cd-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    border: 2px solid var(--ui-border);
    cursor: pointer;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    transition: all .15s ease;
    user-select: none;
}

.ui-page-crm-notifications .cd-type-pill i {
    font-size: var(--ui-fs-lg);
}

.ui-page-crm-notifications .cd-type-pill.active {
    border-color: var(--pill-accent);
    background: var(--pill-bg);
    color: var(--ui-text);
}

.ui-page-crm-notifications .cd-audience-chip {
    display: block;
    text-align: center;
    padding: 14px 8px;
    border-radius: var(--ui-radius-md);
    border: 2px solid var(--ui-border);
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
}

.ui-page-crm-notifications .cd-audience-chip i {
    font-size: var(--ui-fs-kpi);
    display: block;
    margin-bottom: 4px;
    color: var(--ui-silver);
}

.ui-page-crm-notifications .cd-audience-chip.active {
    border-color: var(--ui-series-1);
    background: var(--ui-info-tint);
}

.ui-page-crm-notifications .cd-audience-chip.active i {
    color: var(--ui-series-1);
}

#notificationPreviewWrap {
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

/* ---------- Page: crm/onboarding_email_preview.php (root .ui-page-crm-onboarding-email-preview) ---------- */
.ui-page-crm-onboarding-email-preview .oep {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 1rem;
    align-items: start;
}

.ui-page-crm-onboarding-email-preview .oep-nav,
.ui-page-crm-onboarding-email-preview .oep-preview {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.ui-page-crm-onboarding-email-preview .oep-nav {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 0.65rem 0.65rem 0.85rem;
}

.ui-page-crm-onboarding-email-preview .oep-nav__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 0.55rem 0.4rem;
    font-size: var(--ui-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
    font-weight: 600;
}

.ui-page-crm-onboarding-email-preview .oep-nav__group:first-child {
    padding-top: 0.35rem;
}

.ui-page-crm-onboarding-email-preview .oep-nav__count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-info-text);
    font-size: var(--ui-fs-2xs);
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-page-crm-onboarding-email-preview .oep-nav__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ui-text);
    padding: 0.65rem 0.7rem;
    min-height: 52px;
    border-radius: var(--ui-radius-xs);
    margin-bottom: 0.2rem;
}

.ui-page-crm-onboarding-email-preview .oep-nav__item:hover {
    background: rgba(var(--ui-primary-rgb), 0.05);
}

.ui-page-crm-onboarding-email-preview .oep-nav__item.is-active {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-color: rgba(var(--ui-primary-rgb), 0.18);
    box-shadow: inset 3px 0 0 rgb(var(--ui-primary-rgb));
}

.ui-page-crm-onboarding-email-preview .oep-nav__copy {
    min-width: 0;
    flex: 1;
}

.ui-page-crm-onboarding-email-preview .oep-nav__title {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.ui-page-crm-onboarding-email-preview .oep-nav__meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
}

.ui-page-crm-onboarding-email-preview .oep-nav__chips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-top: 0.05rem;
}

.ui-page-crm-onboarding-email-preview .oep-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--ui-track);
    color: var(--ui-body);
}

.ui-page-crm-onboarding-email-preview .oep-chip--delay {
    background: var(--ui-info-tint);
    color: var(--ui-info-text);
}

.ui-page-crm-onboarding-email-preview .oep-chip--offer {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-crm-onboarding-email-preview .oep-preview__meta {
    padding: 1.1rem 1.35rem 1rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-crm-onboarding-email-preview .oep-preview__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.45rem;
}

.ui-page-crm-onboarding-email-preview .oep-preview__subject {
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-xl);
    line-height: 1.35;
    margin: 0 0 0.45rem;
}

.ui-page-crm-onboarding-email-preview .oep-preview__cta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

.ui-page-crm-onboarding-email-preview .oep-preview__frame {
    width: 100%;
    min-height: 720px;
    border: 0;
    background: var(--ui-subtle);
}

@media (max-width: 767.98px) {
    .ui-page-crm-onboarding-email-preview .oep {
    grid-template-columns: 1fr;
    }

    .ui-page-crm-onboarding-email-preview .oep-nav {
    position: static;
        max-height: 320px;
    }
}

/* ---------- Page: crm/performance_overview.php (root .ui-page-crm-performance-overview) ---------- */
.ui-page-crm-performance-overview .dataTables_scrollFoot {
    display: none;
}

.ui-page-crm-performance-overview #dateRangeSelector {
    border-left: none;
    font-weight: 500;
    color: var(--ui-body);
    transition: all 0.2s ease;
}

.ui-page-crm-performance-overview #dateRangeSelector:hover {
    border-color: var(--ui-series-3);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-success-rgb), 0.1);
}

.ui-page-crm-performance-overview #dateRangeSelector:focus {
    border-color: var(--ui-series-3);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-success-rgb), 0.25);
    outline: 0;
}

.ui-page-crm-performance-overview label[for="dateRangeSelector"] {
    transition: background-color 0.2s ease;
}

.ui-page-crm-performance-overview label[for="dateRangeSelector"]:hover {
    background-color: var(--ui-series-3) !important;
}

#performanceChart {
    max-height: 400px;
    border-radius: var(--ui-radius-sm);
    padding: 10px;
}

.ui-page-crm-performance-overview .card-body canvas {
    filter: drop-shadow(0 2px 4px rgba(var(--ui-black-rgb), 0.05));
    transition: filter 0.3s ease;
}

.ui-page-crm-performance-overview .card-body canvas:hover {
    filter: drop-shadow(0 4px 8px rgba(var(--ui-black-rgb), 0.1));
}

#performanceTable thead th {
    font-weight: 600;
    border-bottom: 2px solid var(--ui-border-strong);
    white-space: nowrap;
    padding: 12px 8px;
}

#performanceTable thead th:first-child {
    background-color: var(--ui-page);
    color: var(--ui-body);
}

#performanceTable thead th:nth-child(2),
#performanceTable thead th:nth-child(3) {
    background-color: var(--ui-success-tint);
    color: var(--ui-success-text);
    font-weight: 700;
}

#performanceTable tbody td:nth-child(2),
#performanceTable tbody td:nth-child(3) {
    background-color: var(--ui-subtle);
    font-weight: 600;
    color: var(--ui-success-text);
}

#performanceTable tbody td {
    vertical-align: middle;
}

.ui-page-crm-performance-overview .card {
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--ui-text-rgb), 0.15);
}

.ui-page-crm-performance-overview .card-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.35rem;
}

.ui-page-crm-performance-overview .border-left-primary {
    border-left: 0.25rem solid var(--ui-series-1) !important;
}

.ui-page-crm-performance-overview .chart-loading-overlay,
.ui-page-crm-performance-overview .table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-performance-overview .table-loading-overlay {
    position: relative;
    min-height: 400px;
}

.ui-page-crm-performance-overview .spinner-container {
    text-align: center;
}

.ui-page-crm-performance-overview .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--ui-neutral-tint);
    border-top: 4px solid var(--ui-series-1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.ui-page-crm-performance-overview .loading-text {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    margin: 0;
    animation: pulse 1.5s ease-in-out infinite;
}

.ui-page-crm-performance-overview .table-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ui-white-rgb), 0.8) 50%,
    transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.ui-page-crm-performance-overview .clickable-status-cell:hover,
.ui-page-crm-performance-overview .clickable-revenue-cell:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

#usersModalTable {
    font-size: var(--ui-fs-base);
}

#usersModalTable tbody tr:hover {
    background-color: var(--ui-page);
}

#usersModalTable .badge {
    font-size: var(--ui-fs-xs);
}

@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

@keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

@keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

/* ---------- Page: crm/performance_overview_fc.php (root .ui-page-crm-performance-overview-fc) ---------- */
.ui-page-crm-performance-overview-fc .dataTables_scrollFoot {
    display: none;
}

.ui-page-crm-performance-overview-fc #dateRangeSelector {
    border-left: none;
    font-weight: 500;
    color: var(--ui-body);
    transition: all 0.2s ease;
}

.ui-page-crm-performance-overview-fc #dateRangeSelector:hover {
    border-color: var(--ui-series-3);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-success-rgb), 0.1);
}

.ui-page-crm-performance-overview-fc #dateRangeSelector:focus {
    border-color: var(--ui-series-3);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-success-rgb), 0.25);
    outline: 0;
}

.ui-page-crm-performance-overview-fc label[for="dateRangeSelector"] {
    transition: background-color 0.2s ease;
}

.ui-page-crm-performance-overview-fc label[for="dateRangeSelector"]:hover {
    background-color: var(--ui-series-3) !important;
}

#performanceChart {
    max-height: 400px;
    border-radius: var(--ui-radius-sm);
    padding: 10px;
}

.ui-page-crm-performance-overview-fc .card-body canvas {
    filter: drop-shadow(0 2px 4px rgba(var(--ui-black-rgb), 0.05));
    transition: filter 0.3s ease;
}

.ui-page-crm-performance-overview-fc .card-body canvas:hover {
    filter: drop-shadow(0 4px 8px rgba(var(--ui-black-rgb), 0.1));
}

#performanceTable thead th {
    font-weight: 600;
    border-bottom: 2px solid var(--ui-border-strong);
    white-space: nowrap;
    padding: 12px 8px;
}

#performanceTable thead th:first-child {
    background-color: var(--ui-page);
    color: var(--ui-body);
}

#performanceTable thead th:nth-child(2) {
    background-color: var(--ui-primary-tint);
    color: var(--ui-info-text);
    font-weight: 700;
}

#performanceTable thead th:nth-child(3) {
    background-color: var(--ui-success-tint);
    color: var(--ui-success-text);
    font-weight: 700;
}

#performanceTable thead th:nth-child(4) {
    background-color: var(--ui-warning-tint);
    color: var(--ui-warning-text);
    font-weight: 700;
}

#performanceTable tbody td:nth-child(2) {
    background-color: var(--ui-info-tint);
    font-weight: 600;
    color: var(--ui-info-text);
}

#performanceTable tbody td:nth-child(3) {
    background-color: var(--ui-success-tint);
    font-weight: 600;
    color: var(--ui-success-text);
}

#performanceTable tbody td:nth-child(4) {
    background-color: var(--ui-warning-tint);
    font-weight: 600;
    color: var(--ui-warning-text);
}

#performanceTable tbody td {
    vertical-align: middle;
}

.ui-page-crm-performance-overview-fc .card {
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--ui-text-rgb), 0.15);
}

.ui-page-crm-performance-overview-fc .card-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.35rem;
}

.ui-page-crm-performance-overview-fc .border-left-primary {
    border-left: 0.25rem solid var(--ui-series-1) !important;
}

.ui-page-crm-performance-overview-fc .chart-loading-overlay,
.ui-page-crm-performance-overview-fc .table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-performance-overview-fc .table-loading-overlay {
    position: relative;
    min-height: 400px;
}

.ui-page-crm-performance-overview-fc .spinner-container {
    text-align: center;
}

.ui-page-crm-performance-overview-fc .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--ui-neutral-tint);
    border-top: 4px solid var(--ui-series-1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.ui-page-crm-performance-overview-fc .loading-text {
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    margin: 0;
    animation: pulse 1.5s ease-in-out infinite;
}

.ui-page-crm-performance-overview-fc .table-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ui-white-rgb), 0.8) 50%,
    transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.ui-page-crm-performance-overview-fc .clickable-status-cell:hover,
.ui-page-crm-performance-overview-fc .clickable-revenue-cell:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

#usersModalTable {
    font-size: var(--ui-fs-base);
}

#usersModalTable tbody tr:hover {
    background-color: var(--ui-page);
}

#usersModalTable .badge {
    font-size: var(--ui-fs-xs);
}

@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

@keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

@keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

/* ---------- Page: crm/system_data.php (root .ui-page-crm-system-data) ---------- */
#systemDataTabs {
    margin-bottom: 1rem;
}

#systemDataTabs .nav-link {
    cursor: pointer;
}

#raw_orders_table code,
#inventory_log_table code {
    background: rgba(var(--ui-muted-rgb), 0.08);
    padding: 1px 4px;
    border-radius: var(--ui-radius-xs);
}

#raw_payload_pre,
#inventory_message_pre {
    background: rgb(var(--ui-ink-rgb));
    color: var(--ui-faint);
    padding: 12px 14px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60vh;
    overflow: auto;
    margin: 0;
}

.ui-page-crm-system-data .system-data-filter-row label {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.25rem;
    color: var(--ui-muted);
}

.ui-page-crm-system-data .inventory-log-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-system-data .inventory-log-detail-grid dt {
    color: var(--ui-muted);
    font-weight: 500;
}

.ui-page-crm-system-data .inventory-log-detail-grid dd {
    margin: 0;
    word-break: break-word;
}

/* ---------- Page: crm/tickets_feedback.php (root .ui-page-crm-tickets-feedback) ---------- */
.ui-page-crm-tickets-feedback .table td {
    vertical-align: middle;
}

.ui-page-crm-tickets-feedback .tf-kpi {
    font-size: var(--ui-fs-kpi); font-weight: 600; line-height: 1.1;
}

.ui-page-crm-tickets-feedback .tf-kpi-label {
    font-size: var(--ui-fs-sm); opacity: 0.7;
}

.ui-page-crm-tickets-feedback .tf-stars {
    color: var(--ui-faint); white-space: nowrap;
}

.ui-page-crm-tickets-feedback .tf-stars .is-on {
    color: var(--ui-gold);
}

.ui-page-crm-tickets-feedback .tf-feedback {
    white-space: pre-wrap; max-width: 480px;
}

/* ---------- Page: dashboard/pim.php (root .ui-page-dashboard-pim) ---------- */
#pim-dashboard .pd-overview {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
}

#pim-dashboard .pd-overview__health {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    border-right: 1px solid var(--ui-border);
}

#pim-dashboard .pd-overview__status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    min-width: 0;
}

#pim-dashboard .pd-health {
    display: flex;
    align-items: center;
    gap: 16px;
}

#pim-dashboard .pd-health__title {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

#pim-dashboard .pd-health__text {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 2px 0 0;
}

#pim-dashboard .ui-chips {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#pim-dashboard .pd-mbars-body {
    display: flex;
    flex-direction: column;
}

#pim-dashboard .pd-mbars-legend {
    padding-top: 16px;
}

@media (max-width: 1399.98px) {
    #pim-dashboard .ui-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    #pim-dashboard .pd-overview {
    grid-template-columns: 1fr;
    }

    #pim-dashboard .pd-overview__health {
    border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }
}

@media (max-width: 575.98px) {
    #pim-dashboard .ui-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Page: dev/uikit.php (root .ui-page-dev-uikit) ---------- */
#ui-kit .uk-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

#ui-kit .uk-swatch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#ui-kit .uk-swatch span:first-child {
    height: 40px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--swatch);
}

#ui-kit .uk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#ui-kit .uk-stack > * + * {
    margin-top: 12px;
}

/* ---------- Page: general/barcode_label_designer.php (root .ui-page-general-barcode-label-designer) ---------- */
#barcodeDesigner .bld-element-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--ui-border);
}

#barcodeDesigner .bld-element-row:last-child {
    border-bottom: 0;
}

#barcodeDesigner .bld-element-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--ui-fs-base);
}

#barcodeDesigner .bld-element-label i {
    width: 18px;
    text-align: center;
    color: var(--ui-muted);
}

#barcodeDesigner .bld-preview-wrap {
    position: sticky;
    top: 1rem;
}

#barcodeDesigner .bld-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
    linear-gradient(45deg, rgba(var(--ui-muted-rgb), 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(var(--ui-muted-rgb), 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(var(--ui-muted-rgb), 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(var(--ui-muted-rgb), 0.08) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: var(--ui-radius-xs);
    min-height: 220px;
}

#barcodeDesigner .bld-label {
    /* the label is paper: white with black ink in both themes */
    background: var(--ui-logo-bg);
    color: rgb(var(--ui-black-rgb));
    box-shadow: 0 0.2rem 0.6rem rgba(var(--ui-black-rgb), 0.15);
    border-radius: var(--ui-radius-xs);
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    overflow: hidden;
    box-sizing: border-box;
}

#barcodeDesigner .bld-band {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

#barcodeDesigner .bld-band img {
    max-height: 26px;
    max-width: 45%;
    object-fit: contain;
}

#barcodeDesigner .bld-band .bld-company {
    flex: 1;
    font-weight: 700;
    font-size: var(--ui-fs-sm);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#barcodeDesigner .bld-band .bld-company.bld-company-center {
    text-align: center;
}

#barcodeDesigner .bld-barcode {
    width: 100%;
    display: flex;
    justify-content: center;
}

#barcodeDesigner .bld-barcode svg {
    max-width: 100%;
    height: auto;
}

#barcodeDesigner .bld-lines {
    width: 100%;
    text-align: center;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#barcodeDesigner .bld-lines .bld-line {
    font-size: var(--ui-fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#barcodeDesigner .bld-lines .bld-line.bld-line-primary {
    font-weight: 700;
    font-size: var(--ui-fs-sm);
}

#barcodeDesigner .bld-empty-hint {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

/* ---------- Page: general/load_carrier_types.php (root .ui-page-general-load-carrier-types) ---------- */
.ui-page-general-load-carrier-types .load-carrier-settings {
    max-width: 40rem;
}

.ui-page-general-load-carrier-types .load-carrier-settings .subtitle {
    max-width: 36rem;
    margin-bottom: 0;
}

.ui-page-general-load-carrier-types .load-carrier-note {
    max-width: 36rem;
    margin: 0.4rem 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

.ui-page-general-load-carrier-types .load-carrier-card .card-body {
    padding: 1.1rem 1.15rem 0.35rem;
}

.ui-page-general-load-carrier-types .load-carrier-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-general-load-carrier-types .load-carrier-add .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    min-height: 2.5rem;
}

.ui-page-general-load-carrier-types .load-carrier-add .btn {
    flex: 0 0 auto;
    min-height: max(2.5rem, var(--ui-tap-min, 0px));
    white-space: nowrap;
}

.ui-page-general-load-carrier-types .load-carrier-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.45rem 0.15rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-general-load-carrier-types .load-carrier-row:last-child {
    border-bottom: 0;
}

.ui-page-general-load-carrier-types .load-carrier-row.is-editing {
    margin: 0 -0.35rem;
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

.ui-page-general-load-carrier-types .load-carrier-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-line);
    color: var(--ui-primary);
}

.ui-page-general-load-carrier-types .load-carrier-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--ui-text);
}

.ui-page-general-load-carrier-types .load-carrier-empty {
    padding: 1.6rem 0.5rem 1.35rem;
    text-align: center;
    color: var(--ui-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ui-page-general-load-carrier-types .load-carrier-empty i {
    display: block;
    margin-bottom: 0.45rem;
    font-size: var(--ui-fs-xl);
    opacity: 0.65;
}

@media (max-width: 575.98px) {
    .ui-page-general-load-carrier-types .load-carrier-add {
    flex-direction: column;
        align-items: stretch;
    }

    .ui-page-general-load-carrier-types .load-carrier-add .form-control {
    width: 100%;
    }
}

/* ---------- Page: general/partials/deliveries_receive.php (root .ui-page-general-partials-deliveries-receive) ---------- */
#receiveByProductPage .rbp-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
}

#receiveByProductPage .rbp-product-btn,
#receiveByProductPage .rbp-delivery-btn {
    width: 100%;
    text-align: left;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    border-radius: var(--ui-radius-xs);
    min-height: 44px;
}

#receiveByProductPage .rbp-product-btn:hover,
#receiveByProductPage .rbp-delivery-btn:hover,
#receiveByProductPage .rbp-delivery-btn.is-selected {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-color: var(--ui-primary);
}

#receiveByProductPage .rbp-meta {
    color: var(--ui-muted);
}

#receiveByProductPage .rbp-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
}

#receiveByProductPage .rbp-delivery-btn {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
}

#receiveByProductPage .rbp-age {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    min-height: 3.25rem;
    border-radius: var(--ui-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

#receiveByProductPage .rbp-age__n {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

#receiveByProductPage .rbp-age__u {
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

#receiveByProductPage .rbp-age--fresh {
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

#receiveByProductPage .rbp-age--fresh .rbp-age__n {
    font-size: var(--ui-fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 0 0.15rem;
}

#receiveByProductPage .rbp-age--soon {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#receiveByProductPage .rbp-age--wait {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

#receiveByProductPage .rbp-age--old {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

#receiveByProductPage .rbp-delivery-body {
    min-width: 0;
    flex: 1 1 auto;
}

/* ---------- Page: general/stock_transfer.php (root .ui-page-general-stock-transfer) ---------- */
.ui-page-general-stock-transfer .list-group-item {
    transition: all 0.2s ease;
    cursor: pointer;
}

.ui-page-general-stock-transfer .list-group-item:hover {
    background-color: var(--ui-subtle);
    transform: translateX(4px);
}

body[data-theme=dark] .ui-page-general-stock-transfer .list-group-item:hover {
    background-color: var(--ui-subtle);
}

.ui-page-general-stock-transfer .list-group-item-action:active {
    background-color: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-page-general-stock-transfer .selected-product-card {
    background-color: var(--ui-subtle);
    border: 1px solid var(--ui-primary);
}

body[data-theme=dark] .ui-page-general-stock-transfer .selected-product-card {
    background-color: rgba(var(--ui-primary-rgb), 0.1);
    border-color: var(--ui-primary);
}

.ui-page-general-stock-transfer .transfer-history-card {
    border: none;
    background-color: transparent;
    transition: background-color 0.2s ease;
    margin-bottom: 0.75rem;
}

.ui-page-general-stock-transfer .transfer-history-card:hover {
    background-color: transparent;
}

.ui-page-general-stock-transfer .transfer-history-card .card-body {
    padding: 1rem;
}

.ui-page-general-stock-transfer .transfer-history-card h6 {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--ui-text);
}

.ui-page-general-stock-transfer .transfer-history-card h6 a {
    color: var(--ui-text);
}

.ui-page-general-stock-transfer .transfer-history-card h6 a:hover {
    color: var(--ui-primary);
}

.ui-page-general-stock-transfer .transfer-history-card small {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

body[data-theme=dark] .ui-page-general-stock-transfer .transfer-history-card small {
    color: var(--ui-border-strong);
}

.ui-page-general-stock-transfer .transfer-history-card .row {
    margin-top: 0.5rem;
}

.ui-page-general-stock-transfer .transfer-history-card .col-6,
.ui-page-general-stock-transfer .transfer-history-card .col-12 {
    padding: 0.5rem 0;
}

.ui-page-general-stock-transfer .transfer-history-card strong {
    color: var(--ui-text);
    font-weight: 500;
}

.ui-page-general-stock-transfer .transfer-steps-grid {
    display: flex;
    flex-direction: column;
}

#productResults .list-group-item.highlighted {
    border: 2px solid var(--ui-primary);
    background-color: transparent;
}

#productResults .list-group-item.highlighted small {
    color: var(--ui-muted);
}

body[data-theme=dark] #productResults .list-group-item.highlighted small {
    color: var(--ui-border-strong);
}

#sourceSectionResults .list-group-item.highlighted,
#destinationSectionResults .list-group-item.highlighted {
    border: 2px solid var(--ui-primary);
    background-color: transparent;
}

.ui-page-general-stock-transfer .source-quick-option {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ui-radius-pill);
    font-weight: 500;
}

.ui-page-general-stock-transfer .source-quick-option i {
    font-size: 0.85em;
}

.ui-page-general-stock-transfer .source-quick-option.is-active {
    background-color: var(--ui-primary);
    color: var(--ui-on-primary);
    border-color: var(--ui-primary);
}

@media (max-width: 767px) {
    .ui-page-general-stock-transfer .table-responsive {
    overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Page: general/wms_dashboard.php (root .ui-page-general-wms-dashboard) ---------- */
/* Full-screen warehouse monitor: page background edge to edge, content capped for very wide screens */
.ui-page-general-wms-dashboard {
    background-color: var(--ui-page);
    min-height: 100vh;
    padding: 2rem;
}

.ui-page-general-wms-dashboard > .container-fluid {
    max-width: 1800px;
    margin: 0 auto;
}

#datatableUserActions {
    width: 100% !important;
}

@media (max-width: 575.98px) {
    .ui-page-general-wms-dashboard {
        padding: 1rem;
    }
}

/* ---------- Page: home/center_home.php (root .ui-page-home-center-home) ---------- */
/* Date range in the header: calendar icon inside the field, same height as the buttons */
.ui-page-home-center-home .fch-range {
    position: relative;
    display: block;
    width: 15rem;
}

.ui-page-home-center-home .fch-range > i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    pointer-events: none;
}

.ui-page-home-center-home .fch-range .form-control {
    height: var(--ui-control-h);
    padding-left: 2.1rem;
    border-radius: var(--ui-radius);
    background-color: var(--ui-surface);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-home-center-home .ui-page-header__actions .btn:has(> i:only-child) {
    width: var(--ui-control-h);
    padding: 0;
    justify-content: center;
}

/* "Live" pill on cards that ignore the date range */
.ui-page-home-center-home .fch-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-page-home-center-home .fch-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-success);
    animation: fch-pulse 2s ease-out infinite;
}

@keyframes fch-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), .5); }
    70%, 100% { box-shadow: 0 0 0 6px rgba(var(--ui-success-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-home-center-home .fch-live__dot {
        animation: none;
    }
}

.ui-page-home-center-home .ui-card__title .ui-tab__count {
    margin-left: 4px;
}

/* ---- Today ---- */
.ui-page-home-center-home .fch-today {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
}

.ui-page-home-center-home .fch-today__main {
    display: flex;
    align-items: center;
    gap: var(--ui-space-5);
    flex: 1 1 auto;
    padding: 4px 0;
}

.ui-page-home-center-home .fch-today__ring {
    width: 104px;
    height: 104px;
}

.ui-page-home-center-home .fch-today__ring::after {
    inset: 10px;
}

.ui-page-home-center-home .fch-today__done {
    font-size: 1.6rem;
    color: var(--ui-success);
}

.ui-page-home-center-home .fch-actions__clear {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.ui-page-home-center-home .fch-today__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.ui-page-home-center-home .fch-today__big {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.2;
}

.ui-page-home-center-home .fch-today__big strong {
    font-size: var(--ui-fs-xl);
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-today__big span {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-home-center-home .fch-today__big .ui-skeleton {
    width: 9rem;
}

.ui-page-home-center-home .fch-today__text {
    margin: 0 0 4px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-home-center-home .fch-today__late {
    white-space: nowrap;
    font-weight: 600;
    color: var(--ui-danger-text);
}

.ui-page-home-center-home .fch-today__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ui-border);
    margin: 0 -20px -20px;
}

.ui-page-home-center-home .fch-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px 14px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: background-color var(--ui-ease);
}

.ui-page-home-center-home .fch-fact + .fch-fact {
    border-left: 1px solid var(--ui-border);
}

.ui-page-home-center-home .fch-fact:hover {
    background: var(--ui-subtle);
    color: inherit;
}

.ui-page-home-center-home .fch-fact:first-child {
    border-bottom-left-radius: var(--ui-radius);
}

.ui-page-home-center-home .fch-fact:last-child {
    border-bottom-right-radius: var(--ui-radius);
}

.ui-page-home-center-home .fch-fact__value {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-fact__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-home-center-home .fch-pipeline .ui-legend {
    margin-top: 8px;
}

.ui-page-home-center-home .fch-pipeline .ui-legend > span {
    display: inline-flex;
    align-items: center;
}

/* ---- Needs attention ---- */
.ui-page-home-center-home .fch-actions {
    list-style: none;
    margin: 0;
    padding: 0 8px;
}

.ui-page-home-center-home .fch-actions > li + li {
    border-top: 1px solid var(--ui-border);
}

.ui-page-home-center-home .fch-actions__loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.ui-page-home-center-home .fch-action {
    --tone-tint: var(--ui-info-tint);
    --tone-text: var(--ui-info-text);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: 10px 12px;
    border-radius: var(--ui-radius);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ui-ease);
}

.ui-page-home-center-home .fch-action--danger {
    --tone-tint: var(--ui-danger-tint);
    --tone-text: var(--ui-danger-text);
}

.ui-page-home-center-home .fch-action--warning {
    --tone-tint: var(--ui-warning-tint);
    --tone-text: var(--ui-warning-text);
}

.ui-page-home-center-home .fch-action:hover {
    background: var(--ui-subtle);
    color: inherit;
}

.ui-page-home-center-home .fch-action__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ui-radius);
    background: var(--tone-tint);
    color: var(--tone-text);
    font-size: var(--ui-fs-sm);
}

.ui-page-home-center-home .fch-action__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.ui-page-home-center-home .fch-action__label {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-home-center-home .fch-action__hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-home-center-home .fch-action__count {
    flex: 0 0 auto;
    min-width: 2.25rem;
    padding: 2px 9px;
    border-radius: var(--ui-radius-pill);
    background: var(--tone-tint);
    color: var(--tone-text);
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-action__go {
    flex: 0 0 auto;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-faint);
    transition: transform var(--ui-ease), color var(--ui-ease);
}

.ui-page-home-center-home .fch-action:hover .fch-action__go {
    color: var(--ui-primary);
    transform: translateX(2px);
}

.ui-page-home-center-home .fch-actions__clear {
    padding: var(--ui-space-6) var(--ui-space-4);
}

.ui-page-home-center-home .fch-actions__more {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    padding: 8px;
    border: 0;
    border-top: 1px solid var(--ui-border);
    background: transparent;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-primary);
    transition: color var(--ui-ease);
}

.ui-page-home-center-home .fch-actions__more:hover {
    color: var(--ui-primary-hover);
}

/* ---- KPI strip: delta sits next to the number ---- */
.ui-page-home-center-home .fch-kpis .ui-stat__value {
    align-items: center;
}

.ui-page-home-center-home .fch-kpis .ui-meter {
    margin-top: 8px;
}

/* ---- Chart ---- */
.ui-page-home-center-home .fch-chart {
    position: relative;
    min-height: 320px;
}

.ui-page-home-center-home .fch-chart__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
    border-radius: var(--ui-radius);
    z-index: 2;
}

.ui-page-home-center-home .fch-chart__empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ui-page-home-center-home .ui-rank .ui-empty {
    border: 0;
    padding: var(--ui-space-6) 0;
}

/* ---- Fulfilment speed ---- */
.ui-page-home-center-home .fch-speed__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
}

.ui-page-home-center-home .fch-speed__value {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-speed__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-page-home-center-home .fch-speed__list {
    border-top: 1px solid var(--ui-border);
}

/* ---- Team ---- */
.ui-page-home-center-home .fch-team {
    padding-top: 4px;
}

.ui-page-home-center-home .fch-team__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    padding-top: 4px;
}

.ui-page-home-center-home .fch-team__legend > span {
    display: inline-flex;
    align-items: center;
}

.ui-page-home-center-home .fch-team__loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.ui-page-home-center-home .fch-team__row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    grid-template-areas:
        "who kpis"
        "who timeline";
    gap: 10px var(--ui-space-5);
    align-items: center;
    padding: 14px 0;
}

.ui-page-home-center-home .fch-team__row + .fch-team__row {
    border-top: 1px solid var(--ui-border);
}

.ui-page-home-center-home .fch-team__who {
    grid-area: who;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-width: 0;
    align-self: start;
}

.ui-page-home-center-home .fch-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: .02em;
}

.ui-page-home-center-home .fch-avatar--sm {
    width: 22px;
    height: 22px;
    font-size: max(.6rem, var(--ui-meta-min, 0px));
    background: var(--ui-surface);
    color: var(--ui-muted);
}

.ui-page-home-center-home .fch-team__id {
    min-width: 0;
}

.ui-page-home-center-home .fch-team__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-page-home-center-home .fch-team__email {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-home-center-home .fch-team__kpis {
    grid-area: kpis;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ui-space-2);
    min-height: 38px;
}

.ui-page-home-center-home .fch-team__kpis > .ui-skeleton {
    grid-column: 1 / -1;
    align-self: center;
}

.ui-page-home-center-home .fch-kpi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-page-home-center-home .fch-kpi__value {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-kpi__label {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-page-home-center-home .fch-kpi.is-zero .fch-kpi__value {
    color: var(--ui-faint);
}

.ui-page-home-center-home .fch-team__timeline {
    grid-area: timeline;
    min-width: 0;
}

.ui-page-home-center-home .timeline-bar {
    position: relative;
    height: 22px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    overflow: hidden;
}

.ui-page-home-center-home .timeline-content {
    position: relative;
    height: 100%;
}

.ui-page-home-center-home .timeline-activity,
.ui-page-home-center-home .timeline-marker {
    position: absolute;
    top: 0;
    height: 100%;
    cursor: pointer;
}

.ui-page-home-center-home .timeline-activity {
    border-radius: 3px;
    opacity: .85;
}

.ui-page-home-center-home .timeline-marker {
    width: 3px;
    margin-left: -1px;
    border-radius: 2px;
    z-index: 1;
}

.ui-page-home-center-home .timeline-activity:hover,
.ui-page-home-center-home .timeline-marker:hover {
    opacity: 1;
    filter: brightness(1.1);
}

.ui-page-home-center-home .timeline-empty {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
}

.ui-page-home-center-home .timeline-hours {
    position: relative;
    height: 16px;
    margin-top: 3px;
}

.ui-page-home-center-home .timeline-hour-label {
    position: absolute;
    top: 0;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-page-home-center-home .fch-team__inactive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--ui-border);
}

.ui-page-home-center-home .fch-team > .fch-team__inactive:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.ui-page-home-center-home .fch-team__inactive-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    margin-right: 4px;
}

.ui-page-home-center-home .fch-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-xs);
    color: var(--ui-body);
}

@media (max-width: 991.98px) {
    .ui-page-home-center-home .fch-team__row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "who"
            "kpis"
            "timeline";
    }

    .ui-page-home-center-home .fch-team__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 10px;
    }
}

@media (max-width: 575.98px) {
    /* the numbers arrive after first paint: hold their final size (one big line, two text lines on phones) */
    .ui-page-home-center-home .fch-today__big {
        min-height: 1.5rem; /* the count inside is set larger than the line */
    }

    .ui-page-home-center-home .fch-today__text {
        min-height: 2lh;
    }

    .ui-page-home-center-home .ui-page-header__actions {
        width: 100%;
        flex-wrap: nowrap;
    }

    .ui-page-home-center-home .fch-range {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ui-page-home-center-home .ui-page-header__actions .btn-primary > span {
        display: none;
    }

    .ui-page-home-center-home .ui-page-header__actions .btn-primary {
        width: var(--ui-control-h);
        padding: 0;
        justify-content: center;
    }

    .ui-page-home-center-home .fch-today__main {
        gap: var(--ui-space-3);
    }

    .ui-page-home-center-home .fch-today__ring {
        width: 84px;
        height: 84px;
    }

    .ui-page-home-center-home .fch-today__ring::after {
        inset: 8px;
    }

    .ui-page-home-center-home .fch-fact {
        padding: 10px 12px 12px;
    }

    .ui-page-home-center-home .fch-fact__label {
        white-space: normal;
    }

    .ui-page-home-center-home .fch-team-card .ui-card__head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ui-page-home-center-home .fch-action__hint {
        white-space: normal;
    }

    .ui-page-home-center-home .fch-action__go {
        display: none;
    }
}

/* ---------- Page: home/correct_address.php (root .ui-page-home-correct-address) ---------- */
.ui-page-home-correct-address.correct-address-page {
    padding: var(--ui-space-6) var(--ui-space-3);
}

.ui-page-home-correct-address .correct-address-card {
    padding: var(--ui-space-6);
}

.ui-page-home-correct-address .correct-address-powered {
    margin-top: var(--ui-space-4);
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-page-home-correct-address .correct-address-powered img {
    max-width: 120px;
    margin-top: -3px;
    display: inline;
}

@media (max-width: 575.98px) {
    .ui-page-home-correct-address .correct-address-card {
    padding: var(--ui-space-5) var(--ui-space-4);
    }
}

/* ---------- Page: home/fc_pricing_calculator.php (root .ui-page-home-fc-pricing-calculator) ---------- */
.ui-page-home-fc-pricing-calculator .fcp-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ui-space-4);
    align-items: stretch;
}

.ui-page-home-fc-pricing-calculator .fcp-input__body,
.ui-page-home-fc-pricing-calculator .fcp-result__body {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    padding: var(--ui-space-6) var(--ui-space-6) var(--ui-space-5);
}

.ui-page-home-fc-pricing-calculator .fcp-question {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.ui-page-home-fc-pricing-calculator .fcp-orders {
    display: flex;
    align-items: baseline;
    gap: var(--ui-space-3);
    border-bottom: 2px solid var(--ui-border-strong);
    transition: border-color var(--ui-ease);
}

.ui-page-home-fc-pricing-calculator .fcp-orders:focus-within {
    border-color: var(--ui-primary);
}

.ui-page-home-fc-pricing-calculator .fcp-orders__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 4px 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    outline: none;
}

.ui-page-home-fc-pricing-calculator .fcp-orders__unit {
    flex: none;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-home-fc-pricing-calculator .fcp-range {
    accent-color: var(--ui-primary);
}

.ui-page-home-fc-pricing-calculator .fcp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.ui-page-home-fc-pricing-calculator .fcp-presets .btn {
    font-variant-numeric: tabular-nums;
    min-width: 52px;
}

.ui-page-home-fc-pricing-calculator .fcp-hint {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-home-fc-pricing-calculator .fcp-hint.is-warning {
    color: var(--ui-warning-text);
    font-weight: 600;
}

.ui-page-home-fc-pricing-calculator .fcp-discount {
    max-width: 160px;
}

.ui-page-home-fc-pricing-calculator .fcp-secret {
    cursor: pointer;
}

.ui-page-home-fc-pricing-calculator .fcp-result {
    background: var(--ui-primary-soft);
    box-shadow: inset 0 0 0 1px var(--ui-primary-line);
}

.ui-page-home-fc-pricing-calculator .fcp-result__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ui-space-3);
}

.ui-page-home-fc-pricing-calculator .fcp-eyebrow {
    margin: 0 0 2px;
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-primary);
}

.ui-page-home-fc-pricing-calculator .fcp-package {
    margin: 0;
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-home-fc-pricing-calculator .fcp-badge {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ui-page-home-fc-pricing-calculator .fcp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--ui-space-3);
}

.ui-page-home-fc-pricing-calculator .fcp-price__value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-page-home-fc-pricing-calculator .fcp-price__unit {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-home-fc-pricing-calculator .fcp-was {
    margin: -8px 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.ui-page-home-fc-pricing-calculator .fcp-stats {
    --ui-stat-cols: 3;
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    margin-top: auto;
}

.ui-page-home-fc-pricing-calculator .fcp-error {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-danger-text);
}

.ui-page-home-fc-pricing-calculator .fcp-result__body > *,
.ui-page-home-fc-pricing-calculator .fcp-packages {
    transition: opacity var(--ui-ease);
}

.ui-page-home-fc-pricing-calculator .fcp-result.is-loading .fcp-price,
.ui-page-home-fc-pricing-calculator .fcp-result.is-loading .fcp-stats,
.ui-page-home-fc-pricing-calculator .fcp-packages.is-loading {
    opacity: .5;
}

.ui-page-home-fc-pricing-calculator .fcp-compare {
    margin-top: var(--ui-space-6);
}

.ui-page-home-fc-pricing-calculator .fcp-section-title {
    margin: 0 0 var(--ui-space-3);
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-home-fc-pricing-calculator .fcp-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ui-space-4);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding: var(--ui-space-5);
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    border: 2px solid transparent;
}

.ui-page-home-fc-pricing-calculator .fcp-pkg.is-best {
    border-color: var(--ui-primary);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__name {
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__terms {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.5;
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__price {
    margin-top: auto;
    padding-top: var(--ui-space-3);
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-kpi);
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__price small {
    margin-left: 4px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-faint);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg__diff {
    margin: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-page-home-fc-pricing-calculator .fcp-pkg.is-best .fcp-pkg__diff {
    color: var(--ui-success-text);
}

.ui-page-home-fc-pricing-calculator .fcp-notes {
    margin-top: var(--ui-space-6);
}

.ui-page-home-fc-pricing-calculator .fcp-notes .ui-card__body {
    padding: var(--ui-space-5) var(--ui-space-6);
}

.ui-page-home-fc-pricing-calculator .fcp-notes__list {
    margin: var(--ui-space-2) 0 0;
    padding-left: 1.1rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
}

#offerModal .fcp-modal-subtitle {
    margin: 2px 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#offerModal .fcp-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ui-space-4);
}

#offerModal .fcp-form-full {
    grid-column: 1 / -1;
}

#offerModal .fcp-optional {
    font-weight: 400;
    color: var(--ui-faint);
}

#offerModal .fcp-modal-meta {
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#offerModal .fcp-extras > div {
    margin-top: var(--ui-space-4);
    max-width: 220px;
}

#offerModal .fcp-modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-4);
}

#offerModal .fcp-quiet-actions {
    display: flex;
    gap: 2px;
}

#offerModal .fcp-quiet-btn {
    border: 0;
    background: transparent;
    padding: 2px 5px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    opacity: .35;
    cursor: pointer;
    transition: opacity var(--ui-ease);
}

#offerModal .fcp-quiet-btn:hover,
#offerModal .fcp-quiet-btn:focus-visible,
#offerModal .fcp-quiet-btn.is-on {
    opacity: 1;
}

#offerModal .fcp-quiet-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

#offerModal .fcp-error {
    margin: var(--ui-space-3) 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-danger-text);
}

@media (max-width: 575.98px) {
    #offerModal .fcp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .ui-page-home-fc-pricing-calculator .fcp-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ui-page-home-fc-pricing-calculator .fcp-input__body,
    .ui-page-home-fc-pricing-calculator .fcp-result__body,
    .ui-page-home-fc-pricing-calculator .fcp-notes .ui-card__body {
        padding: var(--ui-space-5) var(--ui-space-4);
    }

    .ui-page-home-fc-pricing-calculator .fcp-orders__input {
        font-size: 2rem;
    }

    .ui-page-home-fc-pricing-calculator .fcp-price__value {
        font-size: 2.4rem;
    }

    .ui-page-home-fc-pricing-calculator .fcp-stats {
        --ui-stat-cols: 1;
    }

    .ui-page-home-fc-pricing-calculator .fcp-stats .ui-stat + .ui-stat {
        border-left: 0;
        border-top: 1px solid var(--ui-border);
    }
}

.ui-page-home-knowledge .search-results .card:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.ui-page-home-knowledge .result-item .card-body {
    padding: 1.25rem;
}

.ui-page-home-knowledge .ai-response-content {
    line-height: 1.6;
}

.ui-page-home-knowledge .badge {
    font-weight: 500;
}

.ui-page-home-knowledge .input-group-text {
    border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm)!important;
}

.ui-page-home-knowledge .form-control:focus,
.ui-page-home-knowledge .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem var(--ui-primary-line);
}

.ui-page-home-knowledge .btn-primary {
    border-radius: var(--ui-radius-sm);
}

.ui-page-home-knowledge .btn-success {
    border-radius: var(--ui-radius-sm);
}

.ui-page-home-knowledge .sources-section {
    border-top: 1px solid var(--ui-border) !important;
}

.ui-page-home-knowledge .sources-section .sources-list {
    max-height: 300px;
    overflow-y: auto;
}

.ui-page-home-knowledge .source-item {
    transition: all 0.2s ease;
    border-left: 3px solid var(--ui-primary);
}

.ui-page-home-knowledge .source-item:hover {
    background-color: var(--ui-subtle) !important;
    transform: translateX(2px);
}

.ui-page-home-knowledge .source-item .badge {
    font-size: 0.75em;
}

/* ---------- Page: seller/centers.php (root .ui-page-seller-centers) ---------- */
#no_center_message {
    font-size: var(--ui-fs-kpi);
    font-weight: 500;
    margin: auto;
    text-align: center;
    color: var(--ui-muted);
}

#centers-map {
    height: 500px;
    width: 100%;
}

#centers-map {
    position: relative;
}

/* ---------- Page: seller/employee_analytics.php (root .ui-page-seller-employee-analytics) ---------- */
.ui-page-seller-employee-analytics .employee-inactive {
    opacity: 0.7;
}

.ui-page-seller-employee-analytics .employee-inactive .card-body {
    padding: 0.75rem 1rem;
}

.ui-page-seller-employee-analytics .employee-inactive .card-title {
    margin-bottom: 0.25rem;
}

.ui-page-seller-employee-analytics .employee-inactive small {
    font-size: var(--ui-fs-xs);
}

#employeeAnalyticsList {
    position: relative;
    min-height: 200px;
}

#employeeAnalyticsList .loading-initial.chart-loading {
    min-height: 200px;
}

#employeeAnalyticsList .loading-active.chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--ui-surface) 95%, transparent);
    z-index: 10;
    min-height: 200px;
}

.ui-page-seller-employee-analytics .employee-kpis-skeleton {
    display: flex;
    gap: 0.5rem;
}

.ui-page-seller-employee-analytics .employee-kpis-skeleton .skeleton-item {
    flex: 1;
    height: 80px;
    background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-border-strong) 50%, var(--ui-track) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--ui-radius-xs);
}

body[data-theme="dark"] .ui-page-seller-employee-analytics .employee-kpis-skeleton .skeleton-item {
    background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-surface) 50%, var(--ui-track) 75%);
    background-size: 200% 100%;
}

.ui-page-seller-employee-analytics .employee-timeline-skeleton {
    height: 45px;
    background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-border-strong) 50%, var(--ui-track) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--ui-radius-xs);
    margin-bottom: 0.5rem;
}

body[data-theme="dark"] .ui-page-seller-employee-analytics .employee-timeline-skeleton {
    background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-surface) 50%, var(--ui-track) 75%);
    background-size: 200% 100%;
}

.ui-page-seller-employee-analytics .employee-timeline-container .timeline-bar {
    background-color: var(--ui-track) !important;
}

.ui-page-seller-employee-analytics .employee-timeline-container .timeline-hours,
.ui-page-seller-employee-analytics .employee-timeline-container .timeline-hour-label {
    color: var(--ui-muted) !important;
}

body[data-theme="dark"] .ui-page-seller-employee-analytics .employee-timeline-container .timeline-bar {
    background-color: var(--ui-subtle) !important;
}

body[data-theme="dark"] .ui-page-seller-employee-analytics .employee-timeline-container .timeline-hours,
body[data-theme="dark"] .ui-page-seller-employee-analytics .employee-timeline-container .timeline-hour-label {
    color: var(--ui-muted) !important;
}

.ui-page-seller-employee-analytics .chart-loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-page-seller-employee-analytics .kpi-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ui-neutral-tint);
    border-top: 4px solid var(--ui-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes loading {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* ---------- Page: seller/feeds.php (root .ui-page-seller-feeds) ---------- */
.ui-page-seller-feeds .upgrade-card {
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-track) 100%);
}

body[data-theme=dark] .ui-page-seller-feeds .upgrade-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface) 95%, transparent) 0%, color-mix(in srgb, var(--ui-surface) 95%, transparent) 100%);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1) !important;
}

.ui-page-seller-feeds .upgrade-card-icon-badge {
    background-color: var(--ui-primary-tint);
}

body[data-theme=dark] .ui-page-seller-feeds .upgrade-card-icon-badge {
    background-color: var(--ui-primary-line);
}

.ui-page-seller-feeds .upgrade-card h5 {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-seller-feeds .upgrade-card h5 {
    color: var(--ui-text);
}

.ui-page-seller-feeds .upgrade-card .text-muted {
    color: var(--ui-muted) !important;
}

body[data-theme=dark] .ui-page-seller-feeds .upgrade-card .text-muted {
    color: var(--ui-border-strong) !important;
}

/* ---------- Page: seller/forwarding_rules.php (root .ui-page-seller-forwarding-rules) ---------- */
#forwardingRulesTable tr.rule-row-last-opened {
    background: var(--ui-primary-soft) !important;
    border-left: 3px solid var(--ui-primary);
}

#forwardingRulesTable tr.rule-row-last-opened td {
    border-left: none;
}

body[data-theme=dark] #forwardingRulesTable tr.rule-row-last-opened {
    background: var(--ui-primary-line) !important;
}

#forwardingRuleModal .select2-container {
    z-index: 1065;
}

#forwardingRuleModal .select2-dropdown {
    z-index: 1066;
}

/* ---------- Page: seller/fulfillment.php (root .ui-page-seller-fulfillment) ---------- */
.ui-page-seller-fulfillment .hover-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.ui-page-seller-fulfillment .hover-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ui-shadow-hover)!important;
}

.ui-page-seller-fulfillment .hover-card:hover .text-secondary {
    color: var(--ui-primary) !important;
}

/* ---------- Page: seller/general_settings.php (root .ui-page-seller-general-settings) ---------- */
.ui-page-seller-general-settings .org-ip-whitelist-tags-wrap .bootstrap-tagsinput {
    width: 100%;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
}

.ui-page-seller-general-settings .org-ip-whitelist-tags-wrap .bootstrap-tagsinput input {
    min-height: 40px;
    font-size: var(--ui-fs-lg);
}

/* ---------- Page: seller/neworder.php (root .ui-page-seller-neworder) ---------- */
.ui-page-seller-neworder .new-order-page {
    max-width: 650px;
    margin: 0 auto;
}

.ui-page-seller-neworder .form-group {
    margin-bottom: 1rem;
}

.ui-page-seller-neworder .form-label {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.ui-page-seller-neworder .customer-search-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

.ui-page-seller-neworder .customer-search-wrapper .input-group {
    width: 280px;
    min-width: 280px;
}

.ui-page-seller-neworder .customer-search-input {
    height: 38px;
    min-width: 0;
}

.ui-page-seller-neworder .customer-search-btn {
    height: 38px;
    z-index: 0;
}

.ui-page-seller-neworder .customer-form-row {
    margin-bottom: 0.75rem;
}

.ui-page-seller-neworder .customer-form-row:last-child {
    margin-bottom: 0;
}

.ui-page-seller-neworder .address-card .half-input-container {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.ui-page-seller-neworder .address-card .half-input {
    flex: 1;
}

.ui-page-seller-neworder .address-map-container {
    height: 250px;
    overflow: hidden;
    border-top: 1px solid rgba(var(--ui-black-rgb), 0.125);
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.125);
    margin: 0;
}

.ui-page-seller-neworder .maps .map {
    width: 100%;
    height: 100%;
}

.ui-page-seller-neworder .import-products-btn {
    float: right;
}

.ui-page-seller-neworder .btn-primary {
    transition: all 0.2s ease-in-out;
}

@media (max-width: 768px) {
    .ui-page-seller-neworder .new-order-page {
    max-width: 100%;
    }

    .ui-page-seller-neworder .card-header > .d-flex:has(> .customer-search-wrapper) {
    flex-wrap: wrap;
    }

    .ui-page-seller-neworder .customer-search-wrapper {
    margin-top: 0.75rem;
        justify-content: flex-start;
        width: 100%;
    }

    .ui-page-seller-neworder .customer-search-wrapper form {
    width: 100%;
    }

    .ui-page-seller-neworder .customer-search-wrapper .input-group {
    margin-top: -10px;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .ui-page-seller-neworder .table-responsive {
    border: 0;
    }

    .ui-page-seller-neworder .table-responsive .table {
    margin-bottom: 0;
    }

    .ui-page-seller-neworder .table-responsive .table td,
    .ui-page-seller-neworder .table-responsive .table th {
    white-space: nowrap;
        padding: 0.5rem;
    }

    .ui-page-seller-neworder .small-product-image {
    width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .ui-page-seller-neworder .new-order-page .card-body {
    padding: 1rem;
    }

    .ui-page-seller-neworder .customer-form-row {
    margin-bottom: 1rem;
    }
}

@media (max-width: 425px) {
    .ui-page-seller-neworder .address-map-container {
    display: none;
    }
}

/* ---------- Page: seller/onboarding.php (root .ui-page-seller-onboarding) ---------- */
#progression-view {
    display: none !important;
}

.ui-page-seller-onboarding .progression-half-background-dark {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    background: var(--ui-border);
    height: 50vh;
}

/* ---------- Page: seller/orders_legacy.php (root .ui-page-seller-orders-legacy) ---------- */
.ui-page-seller-orders-legacy .dataTables_scroll {
    margin-top: 5px;
}

#datatable-open-orders_wrapper {
    margin-top: 10px;
}

.ui-page-seller-orders-legacy .dataTables_length {
    padding-left: 0px;
}

.ui-page-seller-orders-legacy div.dataTables_wrapper div.dataTables_filter label {
    padding-right: 0px;
}

#orderImportTableWrapper.ai-detecting {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#orderImportProductsModal .order-import-table-card {
    max-height: 40vh;
    overflow: auto;
    border-radius: var(--ui-radius-xs);
}

#orderImportUploadModal.modal {
    z-index: 1062;
}

#orderImportUploadModal .modal-content {
    border: 0;
    overflow: hidden;
}

#orderImportUploadModal .modal-header {
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.06);
}

#orderImportUploadModal .modal-body {
    padding: 1.25rem;
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
}

@media (max-width: 767px) {
    .ui-page-seller-orders-legacy .dt-buttons {
    display: flex;
        flex-direction: column;
        width: 100%;
    }

    .ui-page-seller-orders-legacy .dt-buttons>div.mx-1 {
    width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ui-page-seller-orders-legacy .dt-buttons button,
    .ui-page-seller-orders-legacy .dt-buttons label {
    width: 100%;
        justify-content: center;
    }

    .ui-page-seller-orders-legacy .dt-buttons .dropdown-toggle::after {
    margin-left: auto;
    }

    .ui-page-seller-orders-legacy .dt-buttons .columns-button,
    .ui-page-seller-orders-legacy .dt-buttons button.columns-button {
    display: none !important;
    }

    #orderImportUploadModal .modal-body {
    padding: 1rem;
    }
}

/* ---------- Page: seller/other.php (root .ui-page-seller-other) ---------- */
.ui-page-seller-other .upgrade-card {
    background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-track) 100%);
}

body[data-theme=dark] .ui-page-seller-other .upgrade-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface) 95%, transparent) 0%, color-mix(in srgb, var(--ui-surface) 95%, transparent) 100%);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1) !important;
}

.ui-page-seller-other .upgrade-card-icon-badge {
    background-color: var(--ui-primary-tint);
}

body[data-theme=dark] .ui-page-seller-other .upgrade-card-icon-badge {
    background-color: var(--ui-primary-line);
}

.ui-page-seller-other .upgrade-card h5 {
    color: var(--ui-text);
}

body[data-theme=dark] .ui-page-seller-other .upgrade-card h5 {
    color: var(--ui-text);
}

.ui-page-seller-other .upgrade-card .text-muted {
    color: var(--ui-muted) !important;
}

body[data-theme=dark] .ui-page-seller-other .upgrade-card .text-muted {
    color: var(--ui-border-strong) !important;
}

/* ---------- Page: seller/pos_overview.php (root .ui-page-seller-pos-overview) ---------- */
.ui-page-seller-pos-overview .hover-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.ui-page-seller-pos-overview .hover-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ui-shadow-hover)!important;
}

.ui-page-seller-pos-overview .hover-card:hover .text-secondary {
    color: var(--ui-primary) !important;
}

.ui-page-seller-thanks-for-payment .review-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--ui-info-rgb), 0.3) !important;
}

.ui-page-seller-thanks-for-payment .review-btn:hover .position-absolute {
    opacity: 1 !important;
}

/* ---------- Page: reports/listing_report.php (root .ui-page-reports-listing-report) ---------- */
.ui-page-reports-listing-report,
.ui-page-reports-listing-report .table {
    font-weight: 400;
    font-family: 'Heebo', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial,sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif;
}

/* The A4 sheet sits on a dark backdrop (the html element) */
html.ui-doc-listing-report {
    background-color: rgb(var(--ui-ink-rgb));
    padding: 50px 0px;
}

/* phones / small tablets: the A4 pages are scaled to the screen width (listing_report.php), with a slim frame */
@media (max-width: 839.98px) {
    html.ui-doc-listing-report {
        padding: 8px 0;
        /* iOS would enlarge the scaled-down text on its own, out of its boxes */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: hidden;
    }
}
/* the export button outside the scaled report body (phones) keeps the report's button look */
.export-btn.export-btn--floating {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    background-color: var(--ui-primary);
    color: var(--ui-on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--ui-radius-pill);
    font: 700 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: var(--ui-shadow-hover);
    z-index: 999;
}

.ui-page-reports-listing-report {
    color: var(--ui-text);
    position: relative;
}

.ui-page-reports-listing-report {
    padding: 0px 0px;
    width: 210mm;
    min-height: 297mm;
    margin: auto;
    background-color: var(--ui-surface);
}

.ui-page-reports-listing-report .export-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--ui-primary);
    color: var(--ui-on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--ui-radius-pill);
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--ui-shadow-hover);
    z-index: 999;
}

.ui-page-reports-listing-report .full-page {
    position: relative;
    width: 100%;
    height: 1122.75px;
    padding: 50px 50px 0px 50px;
    overflow: hidden;
    border: solid 1px white;
    border-bottom: solid 1px rgb(var(--ui-ink-rgb));
}

.ui-page-reports-listing-report .visible-spacer {
    position: relative;
    width: 100%;
    left: 0%;
    color: white;
    top: 0px;
    text-align: center;
    font-size: var(--ui-fs-lg);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(var(--ui-ink-rgb));
}

.ui-page-reports-listing-report .description-fonts {
    font-size: var(--ui-fs-sm);
}

.ui-page-reports-listing-report .description-fonts h3 {
    font-size: var(--ui-fs-lg);
}

@media print {
    .ui-page-reports-listing-report .visible-spacer,
    .ui-page-reports-listing-report .page-marker,
    .ui-page-reports-listing-report .export-btn {
    display: none !important;
    }
}

/* ---------- Page: general/offline.php (root .ui-page-general-offline) ---------- */
.ui-page-general-offline *,
.ui-page-general-offline *::before,
.ui-page-general-offline *::after {
    box-sizing: border-box;
}

.ui-page-general-offline,
.ui-page-general-offline {
    margin: 0;
    padding: 0;
}

.ui-page-general-offline {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--ui-page);
    color: var(--ui-text);
    -webkit-font-smoothing: antialiased;
}

.ui-page-general-offline .offline-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image:
    radial-gradient(60% 45% at 50% 0%, var(--ui-primary-soft), transparent 70%),
    radial-gradient(45% 35% at 50% 100%, var(--ui-primary-tint), transparent 70%);
}

.ui-page-general-offline .offline-page__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-page-general-offline .offline-page__logo {
    height: 24px;
    width: auto;
    opacity: 0.92;
}

body[data-theme=dark].ui-page-general-offline .offline-page__logo {
    filter: brightness(0) invert(1);
}

.ui-page-general-offline .offline-page__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.ui-page-general-offline .offline-page__card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    padding: 2.5rem 2rem 2.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-pop);
    animation: offline-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ui-page-general-offline .offline-art {
    display: block;
    width: 168px;
    height: 168px;
    margin: -0.5rem auto 1.25rem;
    color: var(--ui-primary);
    overflow: visible;
}

.ui-page-general-offline .offline-art__ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transform-origin: 84px 84px;
    animation: offline-ring 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
    opacity: 0;
}

.ui-page-general-offline .offline-art__ring:nth-of-type(2) {
    animation-delay: 1.2s;
}

.ui-page-general-offline .offline-art__ring:nth-of-type(3) {
    animation-delay: 2.4s;
}

.ui-page-general-offline .offline-art__disc {
    fill: var(--ui-primary-soft);
}

.ui-page-general-offline .offline-art__glyph {
    transform-origin: 84px 84px;
    animation: offline-float 4s ease-in-out infinite;
}

.ui-page-general-offline .offline-art__arc {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.18;
    animation: offline-scan 2.4s ease-in-out infinite;
}

.ui-page-general-offline .offline-art__arc--2 {
    animation-delay: 0.2s;
}

.ui-page-general-offline .offline-art__arc--3 {
    animation-delay: 0.4s;
}

.ui-page-general-offline .offline-art__dot {
    fill: currentColor;
}

.ui-page-general-offline .offline-art__slash {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 76;
    stroke-dashoffset: 76;
    animation: offline-draw 0.7s cubic-bezier(0.6, 0, 0.2, 1) 0.5s forwards;
}

.ui-page-general-offline .offline-art__slash--gap {
    stroke: var(--ui-surface);
    stroke-width: 11;
}

.ui-page-general-offline .offline-art__slash--line {
    stroke: currentColor;
    stroke-width: 5;
}

.ui-page-general-offline .offline-art__badge {
    transform-origin: 118px 118px;
    transform: scale(0);
    animation: offline-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s forwards;
}

.ui-page-general-offline .offline-art__badge circle {
    fill: var(--ui-warning);
    stroke: var(--ui-surface);
    stroke-width: 4;
}

.ui-page-general-offline .offline-art__badge path {
    stroke: var(--ui-on-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.ui-page-general-offline .offline-page__title {
    margin: 0 0 0.6rem;
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ui-text);
}

.ui-page-general-offline .offline-page__hint {
    margin: 0 auto 1.75rem;
    max-width: 340px;
    font-size: var(--ui-fs-md);
    line-height: 1.6;
    color: var(--ui-muted);
}

.ui-page-general-offline .offline-page__retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    min-width: 180px;
    padding: 0.65rem 1.75rem;
    font: inherit;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-on-primary);
    background: var(--ui-primary);
    border: 0;
    border-radius: var(--ui-radius-pill);
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(var(--ui-primary-rgb), 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ui-page-general-offline .offline-page__retry:hover {
    background: var(--ui-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(var(--ui-primary-rgb), 0.55);
}

.ui-page-general-offline .offline-page__retry:active {
    transform: translateY(0);
}

.ui-page-general-offline .offline-page__retry:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ui-primary-soft), 0 6px 16px -4px rgba(var(--ui-primary-rgb), 0.45);
}

.ui-page-general-offline .offline-page__retry[disabled] {
    cursor: progress;
    transform: none;
}

.ui-page-general-offline .offline-page__retry-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ui-page-general-offline .offline-page__retry[aria-busy=true] .offline-page__retry-icon {
    animation: offline-spin 0.8s linear infinite;
}

@media (max-width: 480px) {
    .ui-page-general-offline .offline-page__card {
    padding: 2rem 1.25rem 1.75rem;
    }

    .ui-page-general-offline .offline-page__title {
    font-size: var(--ui-fs-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-general-offline .offline-page__card,
    .ui-page-general-offline .offline-art__ring,
    .ui-page-general-offline .offline-art__glyph,
    .ui-page-general-offline .offline-art__arc,
    .ui-page-general-offline .offline-page__retry[aria-busy=true] .offline-page__retry-icon {
    animation: none;
    }

    .ui-page-general-offline .offline-art__ring {
    opacity: 0;
    }

    .ui-page-general-offline .offline-art__arc {
    opacity: 0.35;
    }

    .ui-page-general-offline .offline-art__slash {
    animation: none;
        stroke-dashoffset: 0;
    }

    .ui-page-general-offline .offline-art__badge {
    animation: none;
        transform: scale(1);
    }
}

@keyframes offline-rise {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

@keyframes offline-ring {
            0%   { transform: scale(0.55); opacity: 0.45; }
            100% { transform: scale(1.25); opacity: 0; }
        }

@keyframes offline-float {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-3px); }
        }

@keyframes offline-scan {
            0%, 15%  { opacity: 0.18; }
            30%      { opacity: 1; }
            55%, 100% { opacity: 0.18; }
        }

@keyframes offline-draw {
        to { stroke-dashoffset: 0; }
    }

@keyframes offline-pop {
        to { transform: scale(1); }
    }

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

/* ---------- Page: demo_setup/index.php (root .ui-page-demo-setup-index) ---------- */
.ui-page-demo-setup-index.demo-setup-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: var(--ui-page);
    color: var(--ui-text);
}

.ui-page-demo-setup-index .demo-setup-card {
    position: relative;
    width: min(100%, 760px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px clamp(28px, 8vw, 90px);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.ui-page-demo-setup-index .demo-setup-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: '';
    background: linear-gradient(90deg, var(--ui-primary) 0%, var(--ui-primary) 58%, var(--ui-success) 100%);
}

.ui-page-demo-setup-index .demo-setup-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
}

.ui-page-demo-setup-index .demo-setup-brand img {
    display: block;
    height: 30px;
    width: auto;
}

.ui-page-demo-setup-index .demo-setup-brand img + img {
    height: 20px;
}

.ui-page-demo-setup-index .demo-setup-card h1 {
    margin: 0 0 14px;
    color: var(--ui-text);
    font-size: clamp(1.9rem, 4vw, 2.65rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.ui-page-demo-setup-index .demo-setup-card p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-lg);
    line-height: 1.65;
}

.ui-page-demo-setup-index .demo-setup-status {
    min-height: 24px;
    margin-top: 30px;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    font-weight: 500;
}

.ui-page-demo-setup-index .demo-setup-status::after {
    content: ' ·';
    color: var(--ui-primary);
    animation: demoSetupDots 1.2s steps(3, end) infinite;
}

.ui-page-demo-setup-index .demo-setup-progress {
    width: min(100%, 300px);
    height: 4px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
}

.ui-page-demo-setup-index .demo-setup-progress::before {
    display: block;
    width: 38%;
    height: 100%;
    content: '';
    border-radius: inherit;
    background: var(--ui-primary);
    animation: demoSetupProgress 2.4s ease-in-out infinite;
}

.ui-page-demo-setup-index .demo-setup-error {
    color: var(--ui-danger);
}

.ui-page-demo-setup-index .demo-setup-retry {
    min-height: 44px; margin-top: 24px; padding: 0 28px;
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-demo-setup-index .demo-setup-progress::before,
    .ui-page-demo-setup-index .demo-setup-status::after {
    animation: none;
    }
}

@media (max-width: 575.98px) {
    .ui-page-demo-setup-index.demo-setup-page {
    padding: 16px;
    }

    .ui-page-demo-setup-index .demo-setup-card {
    min-height: 430px; padding: 44px 24px; border-radius: var(--ui-radius);
    }

    .ui-page-demo-setup-index .demo-setup-brand {
    margin-bottom: 38px;
    }
}

@keyframes demoSetupProgress { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

@keyframes demoSetupDots {
            0%, 20% { content: ' ·'; }
            40% { content: ' · ·'; }
            60%, 100% { content: ' · · ·'; }
        }

/* ---------- Page: mcpoauth/authorize.php (root .ui-page-mcpoauth-authorize) ---------- */
.ui-page-mcpoauth-authorize {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface);
    padding: 1.5rem;
}

.ui-page-mcpoauth-authorize .mcp-oauth-card {
    width: 100%;
    max-width: 520px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 8px 30px rgba(var(--ui-black-rgb), 0.06);
    padding: 1.75rem;
}

.ui-page-mcpoauth-authorize .mcp-oauth-title {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.35rem;
}

.ui-page-mcpoauth-authorize .mcp-oauth-subtitle {
    color: var(--ui-muted);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

.ui-page-mcpoauth-authorize .mcp-oauth-meta {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    background: rgba(var(--ui-muted-rgb), 0.04);
}

.ui-page-mcpoauth-authorize .mcp-oauth-meta dt {
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.15rem;
}

.ui-page-mcpoauth-authorize .mcp-oauth-meta dd {
    margin: 0 0 0.85rem;
    color: var(--ui-text);
    word-break: break-word;
}

.ui-page-mcpoauth-authorize .mcp-oauth-meta dd:last-child {
    margin-bottom: 0;
}

.ui-page-mcpoauth-authorize .mcp-oauth-actions {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .ui-page-mcpoauth-authorize .mcp-oauth-actions {
    grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Page: mcpoauth/error.php (root .ui-page-mcpoauth-error) ---------- */
.ui-page-mcpoauth-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface);
    padding: 1.5rem;
}

.ui-page-mcpoauth-error .mcp-oauth-card {
    width: 100%;
    max-width: 480px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 8px 30px rgba(var(--ui-black-rgb), 0.06);
    padding: 1.75rem;
}

/* ---------- Page: auth/scheduleDemo.php (root .ui-page-auth-scheduledemo) ---------- */
.ui-page-auth-scheduledemo .demo-host {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
}

.ui-page-auth-scheduledemo .demo-host-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.16);
}

.ui-page-auth-scheduledemo .demo-host-copy {
    min-width: 0;
}

.ui-page-auth-scheduledemo .demo-host-name {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.ui-page-auth-scheduledemo .demo-host-langs {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.45rem;
}

.ui-page-auth-scheduledemo .demo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ui-page-auth-scheduledemo .demo-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.ui-page-auth-scheduledemo .demo-meta-chip i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-2xs);
}

.ui-page-auth-scheduledemo .demo-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ui-page-auth-scheduledemo .demo-calendar-label {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-auth-scheduledemo .demo-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-page-auth-scheduledemo .demo-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ui-page-auth-scheduledemo .demo-day-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ui-page-auth-scheduledemo .demo-day {
    min-height: 64px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: inherit;
    padding: 0.4rem 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.ui-page-auth-scheduledemo .demo-day:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.ui-page-auth-scheduledemo .demo-day-name {
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-page-auth-scheduledemo .demo-day-number {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-auth-scheduledemo .demo-day.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary);
}

.ui-page-auth-scheduledemo .demo-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    min-height: 132px;
}

.ui-page-auth-scheduledemo .demo-slot {
    min-height: 44px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-md);
}

.ui-page-auth-scheduledemo .demo-slot.is-selected {
    border-color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
}

.ui-page-auth-scheduledemo .demo-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
    text-align: center;
    padding: 0.5rem;
}

.ui-page-auth-scheduledemo .demo-skeleton {
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--ui-primary-rgb), 0.06) 25%, rgba(var(--ui-primary-rgb), 0.14) 50%, rgba(var(--ui-primary-rgb), 0.06) 75%);
    background-size: 200% 100%;
    animation: demoSkeletonShimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.ui-page-auth-scheduledemo .demo-week-skeleton {
    width: 9.5rem;
    height: 0.9rem;
    border-radius: var(--ui-radius-pill);
    margin: 0 auto;
}

.ui-page-auth-scheduledemo .demo-day.demo-skeleton .demo-day-name,
.ui-page-auth-scheduledemo .demo-day.demo-skeleton .demo-day-number {
    visibility: hidden;
}

.ui-page-auth-scheduledemo .demo-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 148px;
    padding: 0.75rem 0.5rem;
    color: var(--ui-muted);
    text-align: center;
}

.ui-page-auth-scheduledemo .demo-loading-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(var(--ui-primary-rgb), 0.18);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: demoSpinner 0.7s linear infinite;
}

.ui-page-auth-scheduledemo .demo-loading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ui-page-auth-scheduledemo .demo-loading-title {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-page-auth-scheduledemo .demo-loading-text {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

.ui-page-auth-scheduledemo .account-setup-skip {
    display: block;
    width: 100%;
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
    font-weight: 600;
    min-height: 40px;
}

.ui-page-auth-scheduledemo .demo-timezone {
    margin-top: 0.65rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ui-page-auth-scheduledemo .demo-skeleton,
    .ui-page-auth-scheduledemo .demo-loading-spinner {
    animation: none;
    }
}

@media (max-width: 575.98px) {
    .ui-page-auth-scheduledemo .demo-day {
    min-height: 58px;
    }

    .ui-page-auth-scheduledemo .demo-host-photo {
    width: 60px;
        height: 60px;
    }
}

@keyframes demoSkeletonShimmer {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }

@keyframes demoSpinner {
        to { transform: rotate(360deg); }
    }

/* ---------- Page: auth/choosePriority.php (root .ui-page-auth-choosepriority) ---------- */
.ui-page-auth-choosepriority .priority-options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ui-page-auth-choosepriority .priority-option {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 1rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.ui-page-auth-choosepriority .priority-option:hover,
.ui-page-auth-choosepriority .priority-option:focus-visible {
    border-color: var(--ui-primary);
    outline: none;
}

.ui-page-auth-choosepriority .priority-option.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary);
}

.ui-page-auth-choosepriority .priority-option-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-lg);
    margin-top: 0.1rem;
}

.ui-page-auth-choosepriority .priority-option-icon.tone-blue {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-page-auth-choosepriority .priority-option-icon.tone-cyan {
    background: var(--ui-info-tint);
    color: var(--ui-info);
}

.ui-page-auth-choosepriority .priority-option-icon.tone-purple {
    background: var(--ui-purple-tint);
    color: var(--ui-purple);
}

.ui-page-auth-choosepriority .priority-option-icon.tone-green {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-auth-choosepriority .priority-option-copy {
    flex: 1;
    min-width: 0;
}

.ui-page-auth-choosepriority .priority-option-title {
    display: block;
    font-weight: 700;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-auth-choosepriority .priority-option-text {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.45;
}

.ui-page-auth-choosepriority .priority-option-features {
    list-style: none;
    margin: 0.55rem 0 0 0;
    padding: 0;
}

.ui-page-auth-choosepriority .priority-option-features li {
    position: relative;
    padding-left: 1.05rem;
    margin-top: 0.28rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    line-height: 1.4;
}

.ui-page-auth-choosepriority .priority-option-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--ui-primary);
}

.ui-page-auth-choosepriority .priority-radio {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
}

.ui-page-auth-choosepriority .priority-option.is-selected .priority-radio {
    border-color: var(--ui-primary);
}

.ui-page-auth-choosepriority .priority-option.is-selected .priority-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-primary);
}

.ui-page-auth-choosepriority .priority-options.is-invalid .priority-option {
    border-color: var(--ui-danger);
}

/* ---------- Page: auth/register.php (root .ui-page-auth-register) ---------- */
.ui-page-auth-register .register-terms-label {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
}

.ui-page-auth-register .register-terms-label a {
    color: var(--ui-primary);
}

.ui-page-auth-register .login-mobile-header .login-mobile-audience {
    font-size: var(--ui-fs-md);
    color: var(--ui-muted);
    margin-top: 0.75rem;
}

/* ---------- Page: auth/verifyPhone.php (root .ui-page-auth-verifyphone) ---------- */
#salesStageStep .account-setup-title {
    margin-bottom: 0.35rem;
}

.ui-page-auth-verifyphone .account-setup-stages {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ui-page-auth-verifyphone .account-setup-stage {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    width: 100%;
    min-height: 72px;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    cursor: pointer;
    color: inherit;
}

.ui-page-auth-verifyphone .account-setup-stage:hover,
.ui-page-auth-verifyphone .account-setup-stage:focus-visible {
    border-color: var(--ui-primary);
    outline: none;
}

.ui-page-auth-verifyphone .account-setup-stage.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

.ui-page-auth-verifyphone .account-setup-stage-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-lg);
}

.ui-page-auth-verifyphone .account-setup-stage-icon.tone-blue {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-page-auth-verifyphone .account-setup-stage-icon.tone-cyan {
    background: var(--ui-info-tint);
    color: var(--ui-info);
}

.ui-page-auth-verifyphone .account-setup-stage-icon.tone-green {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-page-auth-verifyphone .account-setup-stage-body {
    flex: 1;
    min-width: 0;
}

.ui-page-auth-verifyphone .account-setup-stage-title {
    display: block;
    font-weight: 700;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-page-auth-verifyphone .account-setup-stage-copy {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.35;
}

.ui-page-auth-verifyphone .account-setup-stage-radio {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-page-auth-verifyphone .account-setup-stage.is-selected .account-setup-stage-radio {
    border-color: var(--ui-primary);
}

.ui-page-auth-verifyphone .account-setup-stage.is-selected .account-setup-stage-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-primary);
}

.ui-page-auth-verifyphone .account-setup-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ui-page-auth-verifyphone .account-setup-label {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 0.5rem;
}

.ui-page-auth-verifyphone .account-setup-label-row .account-setup-label {
    margin-bottom: 0;
}

.ui-page-auth-verifyphone .account-setup-field-check {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ui-success);
    color: var(--ui-on-primary);
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-2xs);
    flex-shrink: 0;
}

.ui-page-auth-verifyphone .is-complete .account-setup-field-check {
    display: inline-flex;
}

.ui-page-auth-verifyphone .account-setup-card .form-control.is-complete,
.ui-page-auth-verifyphone .account-setup-phone.is-complete .form-control {
    border-color: var(--ui-success);
}

.ui-page-auth-verifyphone .account-setup-hint {
    margin: 0.4rem 0 0 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.4;
}

.ui-page-auth-verifyphone .account-setup-field:has(.account-setup-error.is-visible) .account-setup-hint {
    display: none;
}

.ui-page-auth-verifyphone .account-setup-cta-note {
    margin: 0.7rem 0 0 0;
    text-align: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.4;
}

.ui-page-auth-verifyphone .account-setup-card .form-control {
    font-size: var(--ui-fs-lg);
    min-height: 48px;
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border-strong);
    background-color: var(--ui-surface);
    color: var(--ui-text);
}

.ui-page-auth-verifyphone .account-setup-card .form-control::placeholder {
    color: var(--ui-muted);
    font-weight: 400;
}

.ui-page-auth-verifyphone .account-setup-phone .iti {
    width: 100%;
    display: block;
}

.ui-page-auth-verifyphone .account-setup-phone .iti__flag-container {
    border-right: 1px solid var(--ui-border-strong);
}

.ui-page-auth-verifyphone .account-setup-phone .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    padding: 0 10px;
}

.ui-page-auth-verifyphone .account-setup-phone .iti--separate-dial-code .iti__selected-dial-code {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    margin-left: 0;
}

.ui-page-auth-verifyphone .account-setup-phone .iti__flag {
    display: none;
}

.ui-page-auth-verifyphone .account-setup-phone input {
    padding-left: 5.25rem !important;
}

.ui-page-auth-verifyphone .account-setup-continue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ui-page-auth-verifyphone .account-setup-card .form-control.is-invalid,
.ui-page-auth-verifyphone .account-setup-phone.is-invalid .form-control {
    border-color: var(--ui-danger);
}

.ui-page-auth-verifyphone .account-setup-stages.is-invalid .account-setup-stage {
    border-color: var(--ui-danger);
}

.ui-page-auth-verifyphone .countdown {
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    margin-top: 10px;
}

/* ---------- Page: crm/error_monitor.php (root .ui-page-crm-error-monitor) ---------- */
.ui-page-crm-error-monitor {
    background-color: black;
    color: white;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ui-page-crm-error-monitor::-webkit-scrollbar {
    display: none;
}

.ui-page-crm-error-monitor .timeline {
    list-style: none;
    padding: 8px 0;
    position: relative;
    margin-left: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.ui-page-crm-error-monitor .timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    width: 2px;
    background: linear-gradient(180deg,
    rgba(var(--ui-success-rgb), 0.2) 0%,
    rgba(var(--ui-success-rgb), 0.6) 50%,
    rgba(var(--ui-success-rgb), 0.2) 100%);
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 0 10px rgba(var(--ui-success-rgb), 0.3);
}

.ui-page-crm-error-monitor .error-container {
    background: rgba(var(--ui-text-rgb), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--ui-radius);
    margin: 12px 0 12px 80px;
    box-shadow: 0 4px 24px rgba(var(--ui-black-rgb), 0.2);
    border: 1px solid rgba(var(--ui-white-rgb), 0.15);
    position: relative;
}

.ui-page-crm-error-monitor .error-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(var(--ui-success-rgb), 0.15);
    border-color: rgba(var(--ui-success-rgb), 0.3);
}

.ui-page-crm-error-monitor .error-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 2px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    background: rgba(var(--ui-text-rgb), 0.5);
}

.ui-page-crm-error-monitor .error-badge {
    position: absolute;
    left: -50px;
    top: 16px;
    z-index: 1;
}

.ui-page-crm-error-monitor .timeline-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-success);
    border: 3px solid rgba(var(--ui-white-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--ui-success-rgb), 0.3),
    0 0 20px rgba(var(--ui-success-rgb), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-page-crm-error-monitor .timeline-badge i {
    color: white;
    font-size: var(--ui-fs-base);
}

.ui-page-crm-error-monitor .error-badge .timeline-badge.danger {
    background-image: linear-gradient(45deg, var(--ui-danger), var(--ui-danger));
}

.ui-page-crm-error-monitor .error-badge .timeline-badge.warning {
    background-image: linear-gradient(45deg, var(--ui-gold), var(--ui-gold));
}

.ui-page-crm-error-monitor .error-badge .timeline-badge.success {
    background-image: linear-gradient(45deg, var(--ui-series-3), var(--ui-series-3));
}

.ui-page-crm-error-monitor .error-badge .timeline-badge.primary {
    background-image: linear-gradient(45deg, var(--ui-primary), rgb(var(--ui-ink-rgb)));
}

.ui-page-crm-error-monitor .error-badge .timeline-badge.dark {
    background-image: linear-gradient(45deg, var(--ui-border), var(--ui-surface));
}

.ui-page-crm-error-monitor .error-title #error-api-count {
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    color: var(--ui-on-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ui-fs-lg);
    letter-spacing: 0.3px;
}

.ui-page-crm-error-monitor .error-count {
    background: rgba(var(--ui-success-rgb), 0.2);
    color: var(--ui-on-primary);
    padding: 6px 14px;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(var(--ui-success-rgb), 0.4);
}

.ui-page-crm-error-monitor .error-timestamp {
    color: rgba(var(--ui-white-rgb), 0.8);
    font-size: var(--ui-fs-md);
    font-weight: 500;
    background: rgba(var(--ui-white-rgb), 0.1);
    padding: 6px 12px;
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-error-monitor .error-content {
    padding: 12px 16px;
}

.ui-page-crm-error-monitor .error-table {
    width: 100%;
    border-spacing: 0 6px;
}

.ui-page-crm-error-monitor .error-table td {
    padding: 8px 12px;
    line-height: 1.5;
}

.ui-page-crm-error-monitor .error-table tr:not(:last-child) {
    margin-bottom: 8px;
}

.ui-page-crm-error-monitor .error-table tr:first-child td {
    margin-bottom: 12px;
    display: table-cell;
}

.ui-page-crm-error-monitor .error-table td:first-child {
    color: rgba(var(--ui-white-rgb), 0.8);
    font-weight: 600;
    width: 140px;
    background: rgba(var(--ui-text-rgb), 0.3);
    border-radius: var(--ui-radius-sm);
    margin-right: 12px;
}

.ui-page-crm-error-monitor .error-filepath {
    background: rgba(var(--ui-text-rgb), 0.5);
    border-radius: var(--ui-radius-sm);
    padding: 8px;
    font-family: 'SF Mono', monospace;
    font-size: var(--ui-fs-base);
    color: var(--ui-on-primary);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-error-monitor .error-line {
    color: var(--ui-danger);
    font-weight: 700;
    font-size: var(--ui-fs-lg);
    background: rgba(var(--ui-danger-rgb), 0.1);
    padding: 2px 8px;
    border-radius: var(--ui-radius-xs);
    border: 1px solid rgba(var(--ui-danger-rgb), 0.3);
}

.ui-page-crm-error-monitor .error-line-warning {
    color: var(--ui-series-4);
    font-weight: 700;
    font-size: var(--ui-fs-lg);
    background: rgba(var(--ui-text-rgb), 0.1);
    padding: 2px 8px;
    border-radius: var(--ui-radius-xs);
    border: 1px solid rgba(var(--ui-warning-rgb), 0.3);
}

.ui-page-crm-error-monitor .error-message {
    background: rgba(var(--ui-text-rgb), 0.5);
    border-radius: var(--ui-radius-sm);
    padding: 8px;
    font-family: 'SF Mono', monospace;
    font-size: var(--ui-fs-base);
    color: var(--ui-danger);
    line-height: 1.5;
    margin-top: 8px;
    border: 1px solid rgba(var(--ui-danger-rgb), 0.2);
    white-space: pre-wrap;
    max-height: 150px;
    overflow-y: auto;
}

.ui-page-crm-error-monitor .error-message::-webkit-scrollbar {
    width: 8px;
}

.ui-page-crm-error-monitor .error-message::-webkit-scrollbar-track {
    background: rgba(var(--ui-black-rgb), 0.1);
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-error-monitor .error-message::-webkit-scrollbar-thumb {
    background: rgba(var(--ui-danger-rgb), 0.3);
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-error-monitor .error-message::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ui-danger-rgb), 0.4);
}

.ui-page-crm-error-monitor .error-message-warning {
    background: rgba(var(--ui-text-rgb), 0.5);
    border-radius: var(--ui-radius-sm);
    padding: 8px;
    font-family: 'SF Mono', monospace;
    font-size: var(--ui-fs-base);
    color: var(--ui-series-4);
    /* Warning orange instead of error red */
    line-height: 1.5;
    margin-top: 8px;
    border: 1px solid rgba(var(--ui-warning-rgb), 0.2);
    /* Warning orange border */
    white-space: pre-wrap;
    max-height: 150px;
    overflow-y: auto;
}

.ui-page-crm-error-monitor .error-message-warning::-webkit-scrollbar {
    width: 8px;
}

.ui-page-crm-error-monitor .error-message-warning::-webkit-scrollbar-track {
    background: rgba(var(--ui-black-rgb), 0.1);
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-error-monitor .error-message-warning::-webkit-scrollbar-thumb {
    background: rgba(var(--ui-warning-rgb), 0.3);
    /* Warning orange scrollbar */
    border-radius: var(--ui-radius-xs);
}

.ui-page-crm-error-monitor .error-message-warning::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ui-warning-rgb), 0.4);
    /* Warning orange scrollbar hover */
}

.ui-page-crm-error-monitor .fixed-it-button {
    background: linear-gradient(135deg, var(--ui-success), var(--ui-series-3));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(var(--ui-success-rgb), 0.2);
}

.ui-page-crm-error-monitor .fixed-it-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--ui-success-rgb), 0.3);
    background: linear-gradient(135deg, var(--ui-series-3), var(--ui-success));
}

.ui-page-crm-error-monitor .new-error .error-container {
    border-left: 4px solid var(--ui-danger);
}

.ui-page-crm-error-monitor .new-warning .error-container {
    border-left: 4px solid var(--ui-series-4);
}

.ui-page-crm-error-monitor .modern-timer {
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 6px rgba(var(--ui-success-rgb), 0.3));
}

.ui-page-crm-error-monitor .modern-timer__progress {
    transition: 1s linear all;
    transform-origin: center;
}

.ui-page-crm-error-monitor .table-container {
    padding: 20px;
    border-radius: var(--ui-radius);
    box-shadow: 0 4px 24px rgba(var(--ui-black-rgb), 0.2);
    background: rgba(var(--ui-text-rgb), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--ui-white-rgb), 0.15);
}

.ui-page-crm-error-monitor table.newStyle {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--ui-radius);
    padding: 20px;
    background: transparent;
    color: white;
    overflow: hidden;
}

.ui-page-crm-error-monitor table.newStyle thead {
    background: rgba(var(--ui-text-rgb), 0.5);
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-error-monitor table.newStyle th.border-0 {
    border: 0;
    text-align: center;
    padding: 16px;
    font-weight: 500;
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-md);
}

.ui-page-crm-error-monitor table.newStyle th.border-0 i {
    opacity: 0.7;
    color: var(--ui-success);
}

.ui-page-crm-error-monitor td.newStyle {
    border: 0;
    text-align: left;
    padding: 16px;
    font-size: var(--ui-fs-md);
    color: rgba(var(--ui-white-rgb), 0.9);
}

.ui-page-crm-error-monitor tbody>tr.newStyle {
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.05);
    transition: background-color 0.2s ease;
}

.ui-page-crm-error-monitor tbody>tr.newStyle:nth-child(odd) {
    background-color: rgba(var(--ui-text-rgb), 0.3);
}

.ui-page-crm-error-monitor .api-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-base);
    font-weight: 500;
    background: rgba(var(--ui-success-rgb), 0.15);
    color: var(--ui-success);
    border: 1px solid rgba(var(--ui-success-rgb), 0.3);
}

.ui-page-crm-error-monitor .api-status i {
    margin-right: 6px;
}

.ui-page-crm-error-monitor .api-status.error {
    background: rgba(var(--ui-danger-rgb), 0.15);
    color: var(--ui-danger);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
}

.ui-page-crm-error-monitor .api-action-btn {
    background: rgba(var(--ui-success-rgb), 0.15);
    border: 1px solid rgba(var(--ui-success-rgb), 0.3);
    color: var(--ui-success);
    padding: 8px;
    border-radius: var(--ui-radius-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-page-crm-error-monitor .api-action-btn:hover {
    background: rgba(var(--ui-success-rgb), 0.25);
    border-color: rgba(var(--ui-success-rgb), 0.4);
}

.ui-page-crm-error-monitor .api-action-btn.error {
    background: rgba(var(--ui-danger-rgb), 0.15);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
    color: var(--ui-danger);
}

.ui-page-crm-error-monitor .api-action-btn.error:hover {
    background: rgba(var(--ui-danger-rgb), 0.25);
    border-color: rgba(var(--ui-danger-rgb), 0.4);
}

.ui-page-crm-error-monitor .modern-header {
    background: rgba(var(--ui-text-rgb), 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--ui-radius);
    padding: 24px;
    margin: 20px 0;
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-error-monitor .display-title {
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ui-on-primary);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ui-page-crm-error-monitor .logo-text {
    background: linear-gradient(135deg, var(--ui-success), var(--ui-success-tint));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.ui-page-crm-error-monitor .badge-beta {
    font-size: var(--ui-fs-sm);
    background: rgba(var(--ui-white-rgb), 0.1);
    padding: 4px 8px;
    border-radius: var(--ui-radius-xs);
    font-weight: 500;
    color: var(--ui-success);
}

.ui-page-crm-error-monitor .filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ui-page-crm-error-monitor .filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-md);
    font-weight: 500;
}

.ui-page-crm-error-monitor .filter-icon {
    color: var(--ui-success);
}

.ui-page-crm-error-monitor .select-wrapper {
    position: relative;
    width: 300px;
}

.ui-page-crm-error-monitor .modern-select {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--ui-fs-lg);
    color: white;
    background: rgba(var(--ui-text-rgb), 0.6);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius);
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-page-crm-error-monitor .modern-select:hover {
    background: rgba(var(--ui-text-rgb), 0.8);
    border-color: rgba(var(--ui-white-rgb), 0.2);
}

.ui-page-crm-error-monitor .modern-select:focus {
    outline: none;
    border-color: var(--ui-success);
    box-shadow: 0 0 0 3px rgba(var(--ui-danger-rgb), 0.2);
}

.ui-page-crm-error-monitor .select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-success);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.ui-page-crm-error-monitor .modern-select:focus+.select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.ui-page-crm-error-monitor .modern-select option {
    background: rgb(var(--ui-ink-rgb));
    color: white;
    padding: 12px;
}

#error-title-type {
    font-family: 'Heebo', sans-serif;
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    color: var(--ui-on-primary);
    margin: 24px 0 16px;
    padding-left: 80px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ui-page-crm-error-monitor .error-empty-state {
    background: rgba(var(--ui-text-rgb), 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--ui-radius);
    padding: 32px;
    text-align: center;
    margin: 24px 0 24px 80px;
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

.ui-page-crm-error-monitor .error-empty-state i {
    font-size: 2rem;
    color: var(--ui-success);
    margin-bottom: 16px;
}

.ui-page-crm-error-monitor .error-empty-state h3 {
    color: var(--ui-on-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.ui-page-crm-error-monitor .error-empty-state p {
    color: rgba(var(--ui-white-rgb), 0.6);
    font-size: var(--ui-fs-md);
}

.ui-page-crm-error-monitor .settings-btn {
    margin-left: auto;
    background: rgba(var(--ui-success-rgb), 0.15);
    border: 1px solid rgba(var(--ui-success-rgb), 0.3);
    color: var(--ui-success);
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-page-crm-error-monitor .settings-btn i {
    font-size: var(--ui-fs-xl);
    transition: transform 0.3s ease;
}

.ui-page-crm-error-monitor .settings-btn.active i {
    transform: rotate(180deg);
}

.ui-page-crm-error-monitor .modern-panel {
    background: rgba(var(--ui-text-rgb), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--ui-radius);
    margin-top: 16px;
    border: 1px solid rgba(var(--ui-white-rgb), 0.15);
    padding: 24px;
}

.ui-page-crm-error-monitor .panel-section {
    margin-bottom: 24px;
}

.ui-page-crm-error-monitor .panel-section:last-child {
    margin-bottom: 0;
}

.ui-page-crm-error-monitor .section-title {
    font-size: var(--ui-fs-lg);
    color: var(--ui-on-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-page-crm-error-monitor .section-title i {
    color: var(--ui-success);
    opacity: 0.8;
}

.ui-page-crm-error-monitor .language-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ui-page-crm-error-monitor .button-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-page-crm-error-monitor .group-label {
    font-size: var(--ui-fs-md);
    color: rgba(var(--ui-white-rgb), 0.6);
}

.ui-page-crm-error-monitor .btn-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ui-page-crm-error-monitor .modern-btn {
    background: rgba(var(--ui-success-rgb), 0.15);
    border: 1px solid rgba(var(--ui-success-rgb), 0.3);
    color: var(--ui-success);
    padding: 8px 16px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ui-page-crm-error-monitor .modern-btn:hover {
    background: rgba(var(--ui-success-rgb), 0.25);
    border-color: rgba(var(--ui-success-rgb), 0.4);
}

.ui-page-crm-error-monitor .modern-btn.alt {
    background: rgba(var(--ui-warning-rgb), 0.15);
    border-color: rgba(var(--ui-warning-rgb), 0.3);
    color: var(--ui-series-4);
}

.ui-page-crm-error-monitor .modern-btn.alt:hover {
    background: rgba(var(--ui-warning-rgb), 0.25);
    border-color: rgba(var(--ui-warning-rgb), 0.4);
}

.ui-page-crm-error-monitor .modern-btn.reset-btn {
    background: rgba(var(--ui-danger-rgb), 0.15);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
    color: var(--ui-danger);
    width: 100%;
    padding: 12px;
}

.ui-page-crm-error-monitor .modern-btn.reset-btn:hover {
    background: rgba(var(--ui-danger-rgb), 0.25);
    border-color: rgba(var(--ui-danger-rgb), 0.4);
}

.ui-page-crm-error-monitor .error-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ui-page-crm-error-monitor .error-timestamp {
    font-size: var(--ui-fs-lg);
    color: rgba(var(--ui-white-rgb), 0.6);
    font-weight: normal;
}

.ui-page-crm-error-monitor .error-table tr {
    display: flex;
}

.ui-page-crm-error-monitor .mode-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 24px;
}

.ui-page-crm-error-monitor .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.ui-page-crm-error-monitor .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ui-page-crm-error-monitor .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--ui-success-rgb), 0.15);
    border: 1px solid rgba(var(--ui-success-rgb), 0.3);
    transition: .4s;
    border-radius: var(--ui-radius);
}

.ui-page-crm-error-monitor .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background-color: var(--ui-success);
    transition: .4s;
    border-radius: 50%;
}

.ui-page-crm-error-monitor input:checked+.slider {
    background-color: rgba(var(--ui-danger-rgb), 0.15);
    border-color: rgba(var(--ui-danger-rgb), 0.3);
}

.ui-page-crm-error-monitor input:checked+.slider:before {
    background-color: var(--ui-danger);
    transform: translateX(29px);
}

.ui-page-crm-error-monitor .mode-label {
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-md);
    font-weight: 500;
}

.ui-page-crm-error-monitor .datetime-filter {
    margin-top: 16px;
}

.ui-page-crm-error-monitor .datetime-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ui-page-crm-error-monitor .datetime-separator {
    color: rgba(var(--ui-white-rgb), 0.6);
    margin: 0 8px;
}

.ui-page-crm-error-monitor input[type="datetime-local"] {
    background: rgba(var(--ui-text-rgb), 0.6);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius);
    color: white;
    padding: 12px 16px;
    font-size: var(--ui-fs-lg);
    width: 250px;
}

.ui-page-crm-error-monitor input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

.ui-page-crm-error-monitor input[type="datetime-local"]:hover {
    background: rgba(var(--ui-text-rgb), 0.8);
    border-color: rgba(var(--ui-white-rgb), 0.2);
}

.ui-page-crm-error-monitor input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--ui-success);
    box-shadow: 0 0 0 3px rgba(var(--ui-success-rgb), 0.2);
}

#error-title-type {
    display: flex;
    align-items: center;
    gap: 16px;
}

#sorting-wrapper .filter-wrapper {
    margin: 0;
}

#sorting-wrapper .select-wrapper {
    width: 150px;
}

#sorting-wrapper .modern-select {
    padding: 6px 12px;
    font-size: var(--ui-fs-md);
}

#sorting-wrapper {
    margin-left: auto;
    /* Push to the right */
}

#sorting-wrapper .filter-wrapper {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ui-text-rgb), 0.6);
    padding: 6px 12px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
}

#sorting-wrapper .filter-label {
    color: rgba(var(--ui-white-rgb), 0.7);
    font-size: var(--ui-fs-md);
    font-weight: 500;
}

#sorting-wrapper .filter-icon {
    color: var(--ui-success);
    font-size: var(--ui-fs-md);
}

#sorting-wrapper .select-wrapper {
    width: 120px;
    position: relative;
}

#sorting-wrapper .modern-select {
    width: 100%;
    padding: 4px 8px;
    font-size: var(--ui-fs-base);
    background: rgba(var(--ui-text-rgb), 0.6);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius-xs);
    color: white;
    cursor: pointer;
    appearance: none;
}

#sorting-wrapper .modern-select:hover {
    background: rgba(var(--ui-text-rgb), 0.8);
    border-color: rgba(var(--ui-white-rgb), 0.2);
}

#sorting-wrapper .modern-select:focus {
    outline: none;
    border-color: var(--ui-success);
    box-shadow: 0 0 0 2px rgba(var(--ui-success-rgb), 0.2);
}

#sorting-wrapper .select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-success);
    font-size: var(--ui-fs-sm);
    pointer-events: none;
}

.ui-page-crm-error-monitor .logo-text,
.ui-page-crm-error-monitor .settings-btn,
.ui-page-crm-error-monitor .filter-icon,
.ui-page-crm-error-monitor .settings-btn i {
    transition: all 0.3s ease;
}

.ui-page-crm-error-monitor .settings-btn {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.ui-page-crm-error-monitor .settings-btn:hover {
    transform: rotate(15deg);
}

/* ---------- Partial: crm/seller_onboarding_emails.php ---------- */
.crm-onboarding-emails {
    padding: 0.85rem 1rem 1.1rem;
}

.crm-onboarding-emails__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.crm-onboarding-emails__progress {
    margin-bottom: 0.95rem;
}

.crm-onboarding-emails__progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.crm-onboarding-emails__stage {
    color: var(--ui-text);
    font-weight: 500;
    font-size: var(--ui-fs-sm);
}

.crm-onboarding-emails__pct {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.crm-onboarding-emails__bar {
    height: 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border);
    overflow: hidden;
}

.crm-onboarding-emails__bar-fill {
    height: 100%;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary);
    width: 0;
}

.crm-onboarding-emails__next-action {
    margin-top: 0.45rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.crm-onboarding-emails__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.55rem 0 0.9rem;
}

.crm-onboarding-emails__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    background: var(--ui-surface);
}

.crm-onboarding-emails__chip--offer {
    border-color: rgba(var(--ui-warning-rgb), 0.45);
    background: rgba(var(--ui-warning-rgb), 0.12);
    color: var(--ui-text);
}

.crm-onboarding-emails__next {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: rgba(var(--ui-primary-rgb), 0.06);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
    border-radius: var(--ui-radius-xs);
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.9rem;
}

.crm-onboarding-emails__next-body {
    flex: 1;
    min-width: 0;
}

.crm-onboarding-emails__next .cd-icon-text-btn {
    flex-shrink: 0;
    align-self: center;
    background: var(--ui-surface);
}

.crm-onboarding-emails__next-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.crm-onboarding-emails__next-label {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.crm-onboarding-emails__next-title {
    color: var(--ui-text);
    font-weight: 500;
    margin: 0.1rem 0 0;
    font-size: var(--ui-fs-md);
}

.crm-onboarding-emails__subtitle {
    color: var(--ui-muted);
    font-weight: 400;
    font-size: var(--ui-fs-sm);
    line-height: 1.35;
    margin: 0.15rem 0 0.2rem;
}

.crm-onboarding-emails__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}

.crm-onboarding-emails__col {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    padding: 0.7rem 0.75rem 0.55rem;
}

.crm-onboarding-emails__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
}

.crm-onboarding-emails__count {
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-2xs);
    background: rgba(var(--ui-muted-rgb), 0.12);
    color: var(--ui-muted);
}

.crm-onboarding-emails__count--ok {
    background: rgba(var(--ui-success-rgb), 0.16);
    color: var(--ui-success-text);
}

.crm-onboarding-emails__count--miss {
    background: rgba(var(--ui-warning-rgb), 0.2);
    color: var(--ui-warning-text);
}

.crm-onboarding-emails__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

.crm-onboarding-emails__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.28rem 0;
    line-height: 1.4;
}

.crm-onboarding-emails__check {
    width: 0.95rem;
    color: var(--ui-success);
    margin-top: 0.12rem;
    flex-shrink: 0;
}

.crm-onboarding-emails__dot {
    width: 0.95rem;
    color: var(--ui-warning);
    margin-top: 0.12rem;
    flex-shrink: 0;
}

.crm-onboarding-emails__section-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    margin-bottom: 0.4rem;
}

.crm-onboarding-emails__history {
    max-height: 280px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.crm-onboarding-emails__history-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.35rem 0.65rem;
    align-items: start;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    padding: 0.6rem 0.7rem;
}

.crm-onboarding-emails__history-meta {
    grid-column: 2;
}

.crm-onboarding-emails__badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    padding: 0.12rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    height: fit-content;
    margin-top: 0.12rem;
}

.crm-onboarding-emails__badge--sent {
    background: rgba(var(--ui-success-rgb), 0.16);
    color: var(--ui-success-text);
}

.crm-onboarding-emails__badge--skipped {
    background: rgba(var(--ui-muted-rgb), 0.14);
    color: var(--ui-muted);
}

.crm-onboarding-emails__badge--scheduled {
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-info-text);
}

.crm-onboarding-emails__empty {
    padding: 0.85rem 0.5rem;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

body[data-theme=dark] .crm-onboarding-emails__count--ok,
    body[data-theme=dark] .crm-onboarding-emails__badge--sent,
    body[data-theme=dark] .crm-onboarding-emails__check {
    color: var(--ui-success-text);
}

body[data-theme=dark] .crm-onboarding-emails__count--miss,
    body[data-theme=dark] .crm-onboarding-emails__dot {
    color: var(--ui-warning);
}

body[data-theme=dark] .crm-onboarding-emails__badge--scheduled {
    color: var(--ui-info-text);
}

@media (min-width: 768px) {
    .crm-onboarding-emails__columns {
    grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Partial: general/batch_leftover_modal.php ---------- */
#batchLeftoverModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--ui-black-rgb), 0.18);
    background: var(--ui-surface);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

#batchLeftoverModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#batchLeftoverModal .modal-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#batchLeftoverModal .modal-title i {
    display: none;
}

#batchLeftoverModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#batchLeftoverModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
}

#batchLeftoverModal .modal-footer {
    border-top: 0 !important;
    background: transparent;
    padding: 0.5rem 1.35rem 1.2rem;
    align-items: stretch;
}

#batchLeftoverModal .modal-footer .btn {
    border: 0;
    border-radius: var(--ui-radius);
    min-height: 44px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-fs-md);
}

#batchLeftoverModal .modal-footer .btn-primary {
    background-color: var(--ui-primary);
    border-color: transparent;
    color: var(--ui-on-primary);
}

#batchLeftoverModal .modal-footer .btn-primary:hover,
    #batchLeftoverModal .modal-footer .btn-primary:focus {
    background-color: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

#batchLeftoverModal .modal-footer .btn-primary:disabled {
    background-color: var(--ui-primary);
    color: var(--ui-on-primary);
    opacity: 0.45;
}

#batchLeftoverModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#batchLeftoverModal .pricing-section {
    padding: 0.9rem 0;
}

#batchLeftoverModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #batchLeftoverModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#batchLeftoverModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
    margin-bottom: 0.45rem;
}

#batchLeftoverModal .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#batchLeftoverModal .form-control,
    #batchLeftoverModal .form-label,
    #batchLeftoverModal .input-group-text {
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#batchLeftoverModal .form-control {
    border-radius: var(--ui-radius-md);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    color: var(--ui-text);
    text-align: left;
}

#batchLeftoverModal .form-control::placeholder {
    text-align: left;
    color: var(--ui-muted);
    opacity: 0.85;
}

#batchLeftoverModal .input-group {
    background: rgba(var(--ui-muted-rgb), 0.12);
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    align-items: stretch;
}

#batchLeftoverModal .input-group .form-control {
    background: transparent;
    border-radius: 0;
    min-height: 42px;
}

#batchLeftoverModal .input-group:focus-within {
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), 0.16);
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#batchLeftoverModal .input-group:focus-within .form-control:focus {
    box-shadow: none;
    background: transparent;
}

#batchLeftoverModal .input-group-text {
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    padding-left: 0.85rem;
    padding-right: 0.35rem;
}

#batchLeftoverModal .batch-leftover-help,
    #batchLeftoverModal .batch-leftover-empty,
    #batchLeftoverModal .batch-leftover-meta,
    #batchLeftoverModal .batch-leftover-seller {
    color: var(--ui-muted);
}

#batchLeftoverModal .batch-leftover-help {
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    margin: 0 0 0.65rem;
}

#batchLeftoverModal .batch-leftover-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    max-height: min(36vh, 320px);
    overflow: auto;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.08);
}

#batchLeftoverModal .batch-leftover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    padding: 1rem 0.85rem;
    background: transparent;
}

#batchLeftoverModal .batch-leftover-empty i {
    font-size: var(--ui-fs-lg);
    opacity: 0.55;
}

#batchLeftoverModal .batch-leftover-row,
    #batchLeftoverModal .batch-leftover-match {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

#batchLeftoverModal .batch-leftover-row:first-child,
    #batchLeftoverModal .batch-leftover-match:first-child {
    border-top: 0;
}

body[data-theme=dark] #batchLeftoverModal .batch-leftover-row,
    body[data-theme=dark] #batchLeftoverModal .batch-leftover-match {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#batchLeftoverModal .batch-leftover-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.12);
    flex-shrink: 0;
}

#batchLeftoverModal .batch-leftover-copy {
    min-width: 0;
    flex: 1;
}

#batchLeftoverModal .batch-leftover-title {
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
    word-break: break-word;
}

#batchLeftoverModal .batch-leftover-meta,
    #batchLeftoverModal .batch-leftover-seller {
    font-size: var(--ui-fs-xs);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#batchLeftoverModal .batch-leftover-flag {
    display: inline-block;
    margin-top: 0.2rem;
}

#batchLeftoverModal .batch-leftover-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

#batchLeftoverModal .batch-leftover-qty-value {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 600;
    color: var(--ui-text);
}

#batchLeftoverModal .batch-leftover-match {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    text-align: left;
    min-height: 44px;
    color: inherit;
}

#batchLeftoverModal .batch-leftover-match:hover,
    #batchLeftoverModal .batch-leftover-match:focus {
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#batchLeftoverModal #batchLeftoverMatches:not(:empty) {
    margin-top: 0.65rem;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-muted-rgb), 0.08);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    #batchLeftoverModal .modal-dialog {
    margin: 0;
        max-width: 100%;
        min-height: 100%;
        align-items: flex-end;
    }

    #batchLeftoverModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
        max-height: 92vh;
    }
}

/* ---------- Partial: general/batch_template_groups.php ---------- */
#batchTemplateGroupsBar {
    background: transparent;
}

#batchTemplateGroupsBar .batch-template-groups-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
}

#batchTemplateGroupsBar .btg-tile {
    position: relative;
    width: 196px;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: var(--ui-radius);
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-text);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(var(--ui-text-rgb), 0.08);
}

body[data-theme=dark] #batchTemplateGroupsBar .btg-tile {
    box-shadow: inset 0 0 0 1px rgba(var(--ui-white-rgb), 0.08);
}

#batchTemplateGroupsBar .btg-tile.is-active {
    background: var(--ui-surface);
    box-shadow: 0 10px 28px rgba(var(--ui-black-rgb), 0.08), 0 0 0 2px rgba(var(--ui-success-rgb), 0.85);
}

body[data-theme=dark] #batchTemplateGroupsBar .btg-tile.is-active {
    box-shadow: 0 10px 28px rgba(var(--ui-black-rgb), 0.35), 0 0 0 2px rgba(var(--ui-success-rgb), 0.85);
}

#batchTemplateGroupsBar .btg-tile__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-height: 0;
    padding: 0.55rem 2.15rem 0.55rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

#batchTemplateGroupsBar .btg-tile.is-active .btg-tile__main {
    cursor: default;
}

#batchTemplateGroupsBar .btg-tile:not(.is-active):not(.btg-tile--add):hover {
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#batchTemplateGroupsBar .btg-tile__main:focus-visible {
    outline: 2px solid rgba(var(--ui-primary-rgb), 0.55);
    outline-offset: -2px;
}

#batchTemplateGroupsBar .btg-tile__live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-success-text);
}

#batchTemplateGroupsBar .btg-tile__live-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-success);
    box-shadow: 0 0 0 4px rgba(var(--ui-success-rgb), 0.22);
    animation: btg-live 1.6s ease-in-out infinite;
}

#batchTemplateGroupsBar .btg-tile__name {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    letter-spacing: -0.03em;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#batchTemplateGroupsBar .btg-tile__actions {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
}

#batchTemplateGroupsBar .btg-tile--add {
    width: 196px;
    min-height: 0;
    border: 1.5px dashed rgba(var(--ui-text-rgb), 0.28);
    background: transparent;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    padding: 0.45rem 0.7rem;
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--ui-fs-md);
    letter-spacing: -0.02em;
    cursor: pointer;
    text-align: center;
}

#batchTemplateGroupsBar .btg-tile--add__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

#batchTemplateGroupsBar .btg-tile--add__hint {
    display: block;
    max-width: 11rem;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--ui-muted);
}

body[data-theme=dark] #batchTemplateGroupsBar .btg-tile--add {
    border-color: rgba(var(--ui-muted-rgb), 0.55);
}

#batchTemplateGroupsBar .btg-tile--add i {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-muted-rgb), 0.12);
    font-size: var(--ui-fs-xs);
}

#batchTemplateGroupsBar .btg-tile--add:hover,
#batchTemplateGroupsBar .btg-tile--add:focus-visible {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.06);
    outline: none;
}

#batchTemplateGroupModal #batchTemplateGroupDeleteBtn {
    color: var(--ui-danger);
    background: rgba(var(--ui-danger-rgb), 0.08);
}

body[data-theme=dark] #batchTemplateGroupModal #batchTemplateGroupDeleteBtn {
    color: var(--ui-danger);
    background: rgba(var(--ui-danger-rgb), 0.12);
}

#batchTemplateGroupModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--ui-black-rgb), 0.18);
    background: var(--ui-surface);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

#batchTemplateGroupModal .modal-header {
    border-bottom: 0 !important;
    padding: 0.95rem 1.35rem;
    min-height: 3.5rem;
    align-items: center;
    background: transparent;
}

#batchTemplateGroupModal .modal-title {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-text);
    line-height: 1.25;
    margin: 0;
}

#batchTemplateGroupModal .modal-title i {
    display: none;
}

#batchTemplateGroupModal .btn-close {
    opacity: 0.45;
    transform: scale(0.85);
    margin: 0 0 0 auto;
    padding: 0.5rem;
}

#batchTemplateGroupModal .modal-body {
    padding: 0.35rem 1.35rem 0.5rem;
}

#batchTemplateGroupModal,
#batchTemplateGroupModal .form-control,
#batchTemplateGroupModal .form-label,
#batchTemplateGroupModal .input-group-text {
    font-family: inherit;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#batchTemplateGroupModal .pricing-sections-card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#batchTemplateGroupModal .pricing-section {
    padding: 1rem 0;
}

#batchTemplateGroupModal .pricing-section + .pricing-section {
    border-top: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

body[data-theme=dark] #batchTemplateGroupModal .pricing-section + .pricing-section {
    border-top-color: rgba(var(--ui-muted-rgb), 0.45);
}

#batchTemplateGroupModal .pricing-section-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}

#batchTemplateGroupModal .pricing-section-label i {
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    color: var(--ui-muted);
    opacity: 0.85;
}

#batchTemplateGroupModal .pricing-field-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.4;
}

#batchTemplateGroupModal .batch-template-group-checklist {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.75rem;
}

#batchTemplateGroupModal .batch-template-group-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    margin: 0;
    color: var(--ui-text);
}

#batchTemplateGroupModal .batch-template-group-option:hover {
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#batchTemplateGroupModal .batch-template-group-option input {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    #batchTemplateGroupModal .modal-content {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
}

@keyframes btg-live {
50% { box-shadow: 0 0 0 6px rgba(var(--ui-success-rgb), 0.08); }
}

/* ---------- Partial: general/center_header.php ---------- */
.logo-compact {
    display: none !important;
}

.logo-sticky {
    display: inline-block !important;
}

body[data-sidebar-behavior="compact"] .logo-compact {
    display: inline-block !important;
}

body[data-sidebar-behavior="compact"] .logo-sticky {
    display: none !important;
}

body[data-sidebar-behavior="sticky"] .logo-compact {
    display: none !important;
}

body[data-sidebar-behavior="sticky"] .logo-sticky {
    display: inline-block !important;
}

.sidebar-tutorial-video-btn-label {
    font-size: var(--ui-fs-sm);
    top: -2px;
    position: relative;
    display: inline-block;
}

body.channeldock-tutorial-video-backdrop .modal-backdrop.show {
    opacity: 1;
    background: radial-gradient(ellipse 100% 85% at 50% 40%, rgba(var(--ui-ink-rgb), 0.94) 0%, rgb(var(--ui-black-rgb)) 55%, rgb(var(--ui-black-rgb)) 100%);
}

#channeldock-tutorial-video-modal .modal-dialog {
    max-width: min(1280px, calc(100vw - 1rem));
    width: 100%;
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    background: linear-gradient(165deg, rgb(var(--ui-ink-rgb)) 0%, rgb(var(--ui-ink-rgb)) 45%, rgb(var(--ui-ink-rgb)) 100%);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow:
    0 0 0 1px rgba(var(--ui-black-rgb), 0.55),
    0 32px 96px rgba(var(--ui-black-rgb), 0.78),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.05);
    color: rgba(var(--ui-white-rgb), 0.95);
}

body[data-theme=dark] #channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    border-color: var(--ui-border-strong);
    box-shadow: 0 0 0 1px rgba(var(--ui-black-rgb), 0.65),
    0 36px 110px rgba(var(--ui-black-rgb), 0.88),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.06);
}

#channeldock-tutorial-video-modal .modal-header {
    padding: 0.8rem 1rem 0.65rem 1.1rem;
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.07);
    background: linear-gradient(180deg, rgba(var(--ui-black-rgb), 0.4) 0%, transparent 100%);
}

#channeldock-tutorial-video-modal .modal-title {
    color: rgba(var(--ui-white-rgb), 0.98);
    font-weight: 500;
    font-size: var(--ui-fs-md);
    letter-spacing: 0.02em;
}

#channeldock-tutorial-video-modal .btn-close {
    opacity: 0.75;
}

#channeldock-tutorial-video-modal .btn-close:hover {
    opacity: 1;
}

#channeldock-tutorial-video-modal .modal-body {
    padding: 0.65rem 0.75rem 1rem;
    background: rgb(var(--ui-black-rgb));
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame {
    background: rgb(var(--ui-black-rgb));
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    box-shadow:
    inset 0 0 0 1px rgba(var(--ui-white-rgb), 0.09),
    0 10px 40px rgba(var(--ui-black-rgb), 0.7),
    inset 0 2px 20px rgba(var(--ui-black-rgb), 0.4);
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame iframe,
                #channeldock-tutorial-video-modal .channeldock-tutorial-video-frame video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#channeldock-tutorial-video-modal #channeldock-tutorial-video-caption {
    color: rgba(var(--ui-white-rgb), 0.65);
    padding-top: 0.65rem;
    line-height: 1.45;
}

.tasks-dropdown {
    display: none !important;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    z-index: 1050;
    box-shadow: var(--ui-shadow-hover);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    flex-direction: column;
}

.tasks-dropdown.show,
.dropdown-menu.tasks-dropdown.show {
    display: flex !important;
}

#tasksDropdownContent::-webkit-scrollbar {
    width: 8px;
}

#tasksDropdownContent::-webkit-scrollbar-track {
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-xs);
}

#tasksDropdownContent::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    transition: background 0.2s;
}

#tasksDropdownContent::-webkit-scrollbar-thumb:hover {
    background: var(--ui-muted);
}

body[data-theme=dark] #tasksDropdownContent::-webkit-scrollbar-track {
    background: var(--ui-track);
}

body[data-theme=dark] #tasksDropdownContent::-webkit-scrollbar-thumb {
    background: var(--ui-track);
}

body[data-theme=dark] #tasksDropdownContent::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ui-surface) 50%, transparent);
}

body[data-theme=dark] .tasks-dropdown > div:last-child {
    border-top-color: var(--ui-border);
}

.task-dropdown-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ui-border);
    cursor: pointer;
    transition: background-color 0.2s;
}

.task-dropdown-item:hover {
    background-color: var(--ui-subtle);
}

.task-dropdown-title {
    font-weight: 500;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    margin-bottom: 0.25rem;
    word-wrap: break-word;
}

.task-dropdown-category-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.task-dropdown-date {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.task-dropdown-date.overdue {
    color: var(--ui-danger);
    font-weight: 600;
}

.task-dropdown-context,
.task-dropdown-product {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.task-dropdown-context:hover,
.task-dropdown-product:hover {
    color: var(--ui-primary);
    text-decoration: underline;
}

.task-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.task-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    color: var(--ui-muted);
}

.task-action-btn:hover {
    background: var(--ui-track);
    color: var(--ui-body);
    transform: scale(1.1);
}

body[data-theme=dark] .task-action-btn {
    background: var(--ui-subtle);
    color: var(--ui-faint);
}

body[data-theme=dark] .task-action-btn:hover {
    background: var(--ui-track);
    color: var(--ui-text);
}

.task-action-btn.complete-btn {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

.task-action-btn.complete-btn:hover {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.task-action-btn svg {
    width: 14px;
    height: 14px;
}

.task-status-dropdown {
    position: relative;
}

.task-status-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    box-shadow: var(--ui-shadow-hover);
    z-index: 1000;
    min-width: 140px;
    display: none;
    padding: 0.25rem 0;
}

body[data-theme=dark] .task-status-menu {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

.task-status-menu.show {
    display: block;
}

.task-status-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.task-status-menu-item:hover {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .task-status-menu-item {
    color: var(--ui-text);
}

body[data-theme=dark] .task-status-menu-item:hover {
    background-color: var(--ui-track);
}

body[data-theme=dark] .tasks-dropdown {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

body[data-theme=dark] .task-dropdown-title {
    color: var(--ui-text);
}

/* ---------- Partial: general/crm_header.php ---------- */
#ua-export {
    display: none !important;
}

.sidebar-tutorial-video-btn-label {
    font-size: var(--ui-fs-sm);
    top: -2px;
    position: relative;
    display: inline-block;
}

body.channeldock-tutorial-video-backdrop .modal-backdrop.show {
    opacity: 1;
    background: radial-gradient(ellipse 100% 85% at 50% 40%, rgba(var(--ui-ink-rgb), 0.94) 0%, rgb(var(--ui-black-rgb)) 55%, rgb(var(--ui-black-rgb)) 100%);
}

#channeldock-tutorial-video-modal .modal-dialog {
    max-width: min(1280px, calc(100vw - 1rem));
    width: 100%;
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    background: linear-gradient(165deg, rgb(var(--ui-ink-rgb)) 0%, rgb(var(--ui-ink-rgb)) 45%, rgb(var(--ui-ink-rgb)) 100%);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow:
    0 0 0 1px rgba(var(--ui-black-rgb), 0.55),
    0 32px 96px rgba(var(--ui-black-rgb), 0.78),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.05);
    color: rgba(var(--ui-white-rgb), 0.95);
}

body[data-theme=dark] #channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    border-color: rgba(var(--ui-white-rgb), 0.11);
    box-shadow:
    0 0 0 1px rgba(var(--ui-black-rgb), 0.65),
    0 36px 110px rgba(var(--ui-black-rgb), 0.88),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.06);
}

#channeldock-tutorial-video-modal .modal-header {
    padding: 0.8rem 1rem 0.65rem 1.1rem;
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.07);
    background: linear-gradient(180deg, rgba(var(--ui-black-rgb), 0.4) 0%, transparent 100%);
}

#channeldock-tutorial-video-modal .modal-title {
    color: rgba(var(--ui-white-rgb), 0.98);
    font-weight: 500;
    font-size: var(--ui-fs-md);
    letter-spacing: 0.02em;
}

#channeldock-tutorial-video-modal .btn-close {
    opacity: 0.75;
}

#channeldock-tutorial-video-modal .btn-close:hover {
    opacity: 1;
}

#channeldock-tutorial-video-modal .modal-body {
    padding: 0.65rem 0.75rem 1rem;
    background: rgb(var(--ui-black-rgb));
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame {
    background: rgb(var(--ui-black-rgb));
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    box-shadow:
    inset 0 0 0 1px rgba(var(--ui-white-rgb), 0.09),
    0 10px 40px rgba(var(--ui-black-rgb), 0.7),
    inset 0 2px 20px rgba(var(--ui-black-rgb), 0.4);
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame iframe,
                #channeldock-tutorial-video-modal .channeldock-tutorial-video-frame video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#channeldock-tutorial-video-modal #channeldock-tutorial-video-caption {
    color: rgba(var(--ui-white-rgb), 0.65);
    padding-top: 0.65rem;
    line-height: 1.45;
}

/* ---------- Partial: general/partials/printnode_setup_card.php ---------- */
.printnode-setup-card .printnode-setup-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    flex-shrink: 0;
}

.printnode-setup-card .printnode-setup-icon i {
    font-size: var(--ui-fs-xl);
}

.printnode-setup-card .printnode-setup-benefit {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    height: 100%;
}

.printnode-setup-card .printnode-setup-benefit-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.printnode-setup-card h4,
  .printnode-setup-card h3 {
    color: var(--ui-text);
}

@media (max-width: 767.98px) {
    .printnode-setup-card .printnode-setup-icon {
    width: 40px;
        height: 40px;
    }
}

/* ---------- Partial: general/partials/sendcloud_import_picker.php ---------- */
#sendcloudImportPickerModal .modal-header {
    align-items: flex-start;
    padding-bottom: 0.75rem;
}

#sendcloudImportPickerModal .modal-title {
    font-weight: 600;
}

#sendcloudImportPickerModal .modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
}

#sendcloudImportPickerModal .sendcloud-import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#sendcloudImportPickerModal .sendcloud-import-search {
    flex: 1 1 240px;
    max-width: 360px;
    position: relative;
}

#sendcloudImportPickerModal .sendcloud-import-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
}

#sendcloudImportPickerModal .sendcloud-import-search input {
    padding-left: 2.1rem;
}

#sendcloudImportPickerList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#sendcloudImportPickerList .sendcloud-address-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

#sendcloudImportPickerList .sendcloud-address-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

#sendcloudImportPickerList .sendcloud-address-toggle:hover,
    #sendcloudImportPickerList .sendcloud-address-toggle:focus {
    background: rgba(var(--ui-black-rgb), 0.035);
    color: inherit;
    box-shadow: none;
}

body[data-theme=dark] #sendcloudImportPickerList .sendcloud-address-toggle:hover,
    html[data-bs-theme=dark] #sendcloudImportPickerList .sendcloud-address-toggle:hover {
    background: rgba(var(--ui-white-rgb), 0.06);
    color: inherit;
}

#sendcloudImportPickerList .sendcloud-address-chevron {
    color: var(--ui-muted);
    width: 1rem;
    text-align: center;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

#sendcloudImportPickerList .sendcloud-address-card.is-open .sendcloud-address-chevron {
    transform: rotate(90deg);
}

#sendcloudImportPickerList .sendcloud-address-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#sendcloudImportPickerList .sendcloud-address-title {
    font-weight: 600;
    line-height: 1.3;
}

#sendcloudImportPickerList .sendcloud-address-meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    margin-top: 0.15rem;
}

#sendcloudImportPickerList .sendcloud-address-count {
    flex: 0 0 auto;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    background: rgba(var(--ui-black-rgb), 0.05);
    border-radius: var(--ui-radius-pill);
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

#sendcloudImportPickerList .sendcloud-address-count.has-selection {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

body[data-theme=dark] #sendcloudImportPickerList .sendcloud-address-count.has-selection,
    html[data-bs-theme=dark] #sendcloudImportPickerList .sendcloud-address-count.has-selection {
    color: var(--ui-success-text);
    background: rgba(var(--ui-success-rgb), 0.28);
}

#sendcloudImportPickerList .sendcloud-address-body {
    display: none;
    border-top: 1px solid var(--ui-border);
    padding: 0.75rem 1rem 0.85rem;
    background: rgba(var(--ui-black-rgb), 0.015);
}

body[data-theme=dark] #sendcloudImportPickerList .sendcloud-address-body,
    html[data-bs-theme=dark] #sendcloudImportPickerList .sendcloud-address-body {
    background: rgba(var(--ui-white-rgb), 0.03);
}

#sendcloudImportPickerList .sendcloud-address-tools {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

#sendcloudImportPickerList .sendcloud-address-tools .btn-link {
    color: var(--ui-muted);
}

#sendcloudImportPickerList .sendcloud-address-tools .btn-link:hover {
    color: inherit;
    background: transparent;
}

#sendcloudImportPickerList .sendcloud-method-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: var(--ui-radius-xs);
}

#sendcloudImportPickerList .sendcloud-method-row:hover {
    background: rgba(var(--ui-black-rgb), 0.04);
}

body[data-theme=dark] #sendcloudImportPickerList .sendcloud-method-row:hover,
    html[data-bs-theme=dark] #sendcloudImportPickerList .sendcloud-method-row:hover {
    background: rgba(var(--ui-white-rgb), 0.05);
}

#sendcloudImportPickerList .sendcloud-method-row .form-check-input {
    margin-top: 0.2rem;
}

#sendcloudImportPickerList .sendcloud-method-row .form-check-label {
    cursor: pointer;
    line-height: 1.35;
}

#sendcloudImportPickerModal #sendcloudPruneWrapper {
    margin-right: auto;
}

#sendcloudImportPickerList .sendcloud-methods-loading {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.15rem 0 0.35rem;
}

#sendcloudImportPickerList .sendcloud-methods-loading .spinner-border {
    margin-top: 0.15rem;
}

#sendcloudImportPickerList .sendcloud-methods-loading-hint {
    margin-top: 0.2rem;
    line-height: 1.35;
}

/* ---------- Partial: general/partials/work_stations_card.php ---------- */
.work-station-barcode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--ui-fs-base);
}

.work-station-actions {
    white-space: nowrap;
}

.empty-state-container.work-stations-empty {
    min-height: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ---------- Partial: general/seller_footer.php ---------- */
#exceededUsageModal .modal-dialog {
    max-width: 520px;
}

#exceededUsageModal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 20px 60px rgba(var(--ui-black-rgb), 0.18);
}

#exceededUsageModal .upgrade-modal-hero {
    position: relative;
    padding: 1.75rem 1.5rem 1.35rem;
    text-align: center;
    background: var(--ui-surface);
    border-bottom: 0.5px solid rgba(var(--ui-text-rgb), 0.18);
}

#exceededUsageModal .upgrade-modal-close {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    margin: 0;
    padding: 0.5rem;
    opacity: .45;
    transform: scale(0.85);
}

#exceededUsageModal .upgrade-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    color: var(--ui-success);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#exceededUsageModal .upgrade-modal-kicker::before {
    width: .35rem;
    height: .35rem;
    content: '';
    background: currentColor;
    border-radius: 50%;
}

#exceededUsageModal .upgrade-modal-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(var(--ui-primary-rgb), 0.08), rgba(var(--ui-success-rgb), 0.13));
    border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
    border-radius: var(--ui-radius);
    box-shadow: 0 .5rem 1.25rem rgba(var(--ui-primary-rgb), 0.1), inset 0 1px 0 rgba(var(--ui-white-rgb), 0.8);
}

#exceededUsageModal .upgrade-modal-icon::before,
    #exceededUsageModal .upgrade-modal-icon::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(var(--ui-success-rgb), 0.18);
    border-radius: 50%;
    animation: upgrade-icon-orbit 4s ease-in-out infinite;
}

#exceededUsageModal .upgrade-modal-icon::before {
    width: 5.5rem;
    height: 5.5rem;
}

#exceededUsageModal .upgrade-modal-icon::after {
    width: 7rem;
    height: 7rem;
    opacity: .5;
    animation-delay: -1.5s;
}

#exceededUsageModal .upgrade-modal-icon svg {
    position: relative;
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    overflow: visible;
}

#exceededUsageModal .upgrade-modal-icon .upgrade-chart-line {
    stroke-dasharray: 76;
    stroke-dashoffset: 76;
    animation: upgrade-chart-draw 1.4s cubic-bezier(.65, 0, .35, 1) .2s forwards;
}

#exceededUsageModal .upgrade-modal-icon .upgrade-chart-dot {
    transform-origin: 19px 14px;
    animation: upgrade-chart-dot 1.8s ease-in-out 1.4s infinite;
}

#exceededUsageModal .upgrade-modal-icon .upgrade-chart-spark {
    transform-origin: center;
    animation: upgrade-chart-spark 1.8s ease-out 1.25s infinite;
}

body[data-theme=dark] #exceededUsageModal .upgrade-modal-hero {
    border-bottom-color: rgba(var(--ui-text-rgb), 0.18);
}

#exceededUsageModal .upgrade-modal-hero h3 {
    margin: 0 auto .5rem;
    color: var(--ui-text);
    font-size: clamp(1.3rem, 3vw, 1.65rem);
    font-weight: 600;
    line-height: 1.25;
}

#exceededUsageModal .upgrade-modal-hero p {
    max-width: 31rem;
    margin: 0 auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

#exceededUsageModal .upgrade-modal-body {
    padding: 1.1rem 1.5rem 1.35rem;
}

#exceededUsageModal .upgrade-modal-message {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: .85rem .95rem;
    color: var(--ui-text);
    background: rgba(var(--ui-muted-rgb), 0.12);
    border: 0;
    border-radius: var(--ui-radius);
}

#exceededUsageModal .upgrade-modal-message i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

#exceededUsageModal .upgrade-modal-message h4 {
    margin: 0 0 .15rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

#exceededUsageModal .upgrade-modal-message p {
    margin: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
}

#exceededUsageModal .upgrade-benefits {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

#exceededUsageModal .upgrade-benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.75rem;
    padding: .55rem .75rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    transition: border-color .2s ease, background-color .2s ease;
}

#exceededUsageModal .upgrade-benefit:hover {
    background: rgba(var(--ui-primary-rgb), 0.025);
    border-color: rgba(var(--ui-primary-rgb), 0.3);
}

#exceededUsageModal .upgrade-benefit-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--ui-on-primary);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-fs-lg);
}

#exceededUsageModal .upgrade-benefit:nth-child(1) .upgrade-benefit-icon {
    background: var(--ui-series-1);
}

#exceededUsageModal .upgrade-benefit:nth-child(2) .upgrade-benefit-icon {
    background: var(--ui-danger-soft);
}

#exceededUsageModal .upgrade-benefit:nth-child(3) .upgrade-benefit-icon {
    background: var(--ui-series-1);
}

#exceededUsageModal .upgrade-benefit-copy {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

#exceededUsageModal .upgrade-benefit h6 {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

#exceededUsageModal .upgrade-benefit small {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    text-align: left;
    display: block;
    margin-top: .1rem;
}

#exceededUsageModal .upgrade-benefit-check {
    color: var(--ui-success);
    font-size: var(--ui-fs-sm);
}

#exceededUsageModal .upgrade-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: .65rem 1.5rem;
    border: 0;
    border-radius: var(--ui-radius);
    color: var(--ui-on-primary);
    text-decoration: none;
    background: var(--ui-success);
    box-shadow: 0 .35rem .75rem rgba(var(--ui-success-rgb), 0.2);
    font-weight: 600;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#exceededUsageModal .upgrade-cta:hover,
    #exceededUsageModal .upgrade-cta:focus {
    color: var(--ui-on-primary);
    text-decoration: none;
    background: var(--ui-success);
    box-shadow: 0 .5rem 1rem rgba(var(--ui-success-rgb), 0.28);
    transform: translateY(-1px);
}

#exceededUsageModal .upgrade-choices {
    display: grid;
    gap: .65rem;
}

#exceededUsageModal .upgrade-choice {
    display: block;
    width: 100%;
    padding: .9rem 1rem;
    text-align: left;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#exceededUsageModal .upgrade-choice:hover,
    #exceededUsageModal .upgrade-choice:focus {
    color: var(--ui-text);
    text-decoration: none;
}

#exceededUsageModal .upgrade-choice--buy {
    border-color: rgba(var(--ui-success-rgb), 0.45);
    background: rgba(var(--ui-success-rgb), 0.1);
    box-shadow: 0 .35rem .75rem rgba(var(--ui-success-rgb), 0.12);
}

#exceededUsageModal .upgrade-choice--buy:hover,
    #exceededUsageModal .upgrade-choice--buy:focus {
    border-color: rgba(var(--ui-success-rgb), 0.7);
    background: rgba(var(--ui-success-rgb), 0.16);
}

#exceededUsageModal .upgrade-choice--remove {
    background: rgba(var(--ui-danger-rgb), 0.06);
    border-color: rgba(var(--ui-danger-rgb), 0.22);
}

#exceededUsageModal .upgrade-choice--remove:hover,
    #exceededUsageModal .upgrade-choice--remove:focus {
    background: rgba(var(--ui-danger-rgb), 0.1);
    border-color: rgba(var(--ui-danger-rgb), 0.4);
}

#exceededUsageModal .upgrade-choice__label {
    display: block;
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
}

#exceededUsageModal .upgrade-choice__hint {
    display: block;
    margin-top: .2rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
}

#exceededUsageModal .upgrade-remove-confirm {
    padding: .95rem 1rem;
    background: rgba(var(--ui-danger-rgb), 0.08);
    border-radius: var(--ui-radius);
}

#exceededUsageModal .upgrade-remove-confirm p {
    margin: 0 0 .85rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
}

#exceededUsageModal .upgrade-remove-confirm .btn {
    min-height: 44px;
    border-radius: var(--ui-radius);
    font-weight: 600;
}

#exceededUsageModal .upgrade-remove-back {
    display: block;
    margin-top: .75rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    text-align: center;
    text-decoration: none;
    background: none;
    border: 0;
    width: 100%;
}

#exceededUsageModal .upgrade-remove-back:hover {
    color: var(--ui-text);
    text-decoration: underline;
}

#exceededUsageModal .upgrade-modal-price {
    display: none;
    margin: 1rem auto 0;
    padding: .7rem .9rem;
    max-width: 22rem;
    background: rgba(var(--ui-success-rgb), 0.08);
    border: 1px solid rgba(var(--ui-success-rgb), 0.22);
    border-radius: var(--ui-radius);
    color: var(--ui-text);
}

body[data-theme=dark] #exceededUsageModal .upgrade-modal-price {
    background: rgba(var(--ui-success-rgb), 0.14);
    border-color: rgba(var(--ui-success-rgb), 0.28);
}

#exceededUsageModal .upgrade-modal-price strong {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
}

#exceededUsageModal .upgrade-modal-price span {
    display: block;
    margin-top: .15rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-icon,
    #exceededUsageModal.upgrade-modal--pim .upgrade-modal-message,
    #exceededUsageModal.upgrade-modal--pim .upgrade-benefits,
    #exceededUsageModal.upgrade-modal--pim .upgrade-modal-price,
    #exceededUsageModal.upgrade-modal--pim .upgrade-trust {
    display: none;
}

#exceededUsageModal.upgrade-modal--pim .modal-dialog {
    max-width: 420px;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-hero {
    padding: 1.55rem 1.35rem .25rem;
    border-bottom: 0;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-kicker {
    margin-bottom: .5rem;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-hero h3 {
    max-width: 18rem;
    font-size: var(--ui-fs-xl);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-hero p {
    max-width: 20rem;
    margin-top: .4rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-modal-body {
    padding: 1.1rem 1.35rem 1.35rem;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choices {
    gap: .5rem;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--buy {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .7rem 1rem;
    text-align: center;
    color: var(--ui-on-primary);
    background: var(--ui-success);
    border: 0;
    box-shadow: 0 .35rem .75rem rgba(var(--ui-success-rgb), 0.2);
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--buy:hover,
    #exceededUsageModal.upgrade-modal--pim .upgrade-choice--buy:focus {
    color: var(--ui-on-primary);
    background: var(--ui-success);
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--buy .upgrade-choice__hint {
    display: none;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--remove {
    min-height: 44px;
    padding: .65rem .75rem;
    text-align: center;
    background: rgba(var(--ui-muted-rgb), 0.1);
    border: 0;
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--remove:hover,
    #exceededUsageModal.upgrade-modal--pim .upgrade-choice--remove:focus {
    background: rgba(var(--ui-muted-rgb), 0.16);
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--remove .upgrade-choice__label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

#exceededUsageModal.upgrade-modal--pim .upgrade-choice--remove .upgrade-choice__hint {
    display: none;
}

#__scanner_sink__ {
    position: fixed;       /* stay in place */
    top: 0; left: 0;       /* top-left corner */
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;  /* don’t block clicks */
    z-index: -1;           /* behind everything */
}

@media (prefers-reduced-motion: reduce) {
    #exceededUsageModal .upgrade-modal-icon::before,
            #exceededUsageModal .upgrade-modal-icon::after,
            #exceededUsageModal .upgrade-modal-icon .upgrade-chart-line,
            #exceededUsageModal .upgrade-modal-icon .upgrade-chart-dot,
            #exceededUsageModal .upgrade-modal-icon .upgrade-chart-spark {
    animation: none;
    }

    #exceededUsageModal .upgrade-modal-icon .upgrade-chart-line {
    stroke-dashoffset: 0;
    }
}

@media (max-width: 575.98px) {
    #exceededUsageModal .upgrade-modal-hero,
            #exceededUsageModal .upgrade-modal-body {
    padding-right: 1.25rem; padding-left: 1.25rem;
    }

    #exceededUsageModal .upgrade-benefit-copy {
    display: block;
    }

    #exceededUsageModal .upgrade-benefit small {
    display: block; margin-top: .1rem; text-align: left;
    }

    #exceededUsageModal .upgrade-benefit-check {
    margin-left: auto;
    }
}

@keyframes upgrade-chart-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes upgrade-chart-dot {
        0%, 100% { opacity: .65; transform: scale(.8); }
        45%, 70% { opacity: 1; transform: scale(1.15); }
    }

@keyframes upgrade-chart-spark {
        0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); }
        35% { opacity: 1; transform: scale(1) rotate(45deg); }
        65% { opacity: 0; transform: scale(.7) rotate(90deg); }
    }

@keyframes upgrade-icon-orbit {
        0%, 100% { transform: scale(.92); opacity: .35; }
        50% { transform: scale(1.05); opacity: .8; }
    }

/* ---------- Partial: general/seller_header.php ---------- */
.sidebar-tutorial-video-btn-label {
    font-size: var(--ui-fs-sm);
    top: -2px;
    position: relative;
    display: inline-block;
}

body.channeldock-tutorial-video-backdrop .modal-backdrop.show {
    opacity: 1;
    background: radial-gradient(ellipse 100% 85% at 50% 40%, rgba(var(--ui-ink-rgb), 0.94) 0%, rgb(var(--ui-black-rgb)) 55%, rgb(var(--ui-black-rgb)) 100%);
}

#channeldock-tutorial-video-modal .modal-dialog {
    max-width: min(1280px, calc(100vw - 1rem));
    width: 100%;
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    background: linear-gradient(165deg, rgb(var(--ui-ink-rgb)) 0%, rgb(var(--ui-ink-rgb)) 45%, rgb(var(--ui-ink-rgb)) 100%);
    border: 1px solid rgba(var(--ui-white-rgb), 0.1);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow:
    0 0 0 1px rgba(var(--ui-black-rgb), 0.55),
    0 32px 96px rgba(var(--ui-black-rgb), 0.78),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.05);
    color: rgba(var(--ui-white-rgb), 0.95);
}

body[data-theme=dark] #channeldock-tutorial-video-modal .channeldock-tutorial-video-modal-content {
    border-color: var(--ui-border-strong);
    box-shadow: 0 0 0 1px rgba(var(--ui-black-rgb), 0.65),
    0 36px 110px rgba(var(--ui-black-rgb), 0.88),
    inset 0 1px 0 rgba(var(--ui-white-rgb), 0.06);
}

#channeldock-tutorial-video-modal .modal-header {
    padding: 0.8rem 1rem 0.65rem 1.1rem;
    border-bottom: 1px solid rgba(var(--ui-white-rgb), 0.07);
    background: linear-gradient(180deg, rgba(var(--ui-black-rgb), 0.4) 0%, transparent 100%);
}

#channeldock-tutorial-video-modal .modal-title {
    color: rgba(var(--ui-white-rgb), 0.98);
    font-weight: 500;
    font-size: var(--ui-fs-md);
    letter-spacing: 0.02em;
}

#channeldock-tutorial-video-modal .btn-close {
    opacity: 0.75;
}

#channeldock-tutorial-video-modal .btn-close:hover {
    opacity: 1;
}

#channeldock-tutorial-video-modal .modal-body {
    padding: 0.65rem 0.75rem 1rem;
    background: rgb(var(--ui-black-rgb));
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame {
    background: rgb(var(--ui-black-rgb));
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    box-shadow:
    inset 0 0 0 1px rgba(var(--ui-white-rgb), 0.09),
    0 10px 40px rgba(var(--ui-black-rgb), 0.7),
    inset 0 2px 20px rgba(var(--ui-black-rgb), 0.4);
}

#channeldock-tutorial-video-modal .channeldock-tutorial-video-frame iframe,
                #channeldock-tutorial-video-modal .channeldock-tutorial-video-frame video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#channeldock-tutorial-video-modal #channeldock-tutorial-video-caption {
    color: rgba(var(--ui-white-rgb), 0.65);
    padding-top: 0.65rem;
    line-height: 1.45;
}

/* ---------- Partial: partials/pick_algorithm_sequence.php ---------- */
.pick-algorithm-sequence__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 260px;
}

.pick-algorithm-sequence__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
}

.pick-algorithm-sequence__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.pick-algorithm-sequence__label {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1.3;
}

.pick-algorithm-sequence__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-muted);
    line-height: 1;
    cursor: help;
}

.pick-algorithm-sequence__help:hover,
.pick-algorithm-sequence__help:focus {
    color: var(--ui-primary);
}

.tooltip.pick-algorithm-sequence__tooltip .tooltip-inner {
    max-width: 320px;
    text-align: left;
}

.pick-algorithm-sequence__actions {
    display: inline-flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

.pick-algorithm-sequence__move {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
}

.pick-algorithm-sequence__note {
    margin: 0.55rem 0 0;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    font-weight: 400;
    color: var(--ui-muted);
}

.settings-toggle-row--stack {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}

.settings-toggle-row--stack .pick-algorithm-sequence {
    width: 100%;
}

.onboarding-setting-row--sequence {
    align-items: flex-start;
    flex-wrap: wrap;
}

.onboarding-setting-row--sequence .pick-algorithm-sequence {
    width: 100%;
    margin-top: 0.5rem;
}

/* ---------- Partial: seller/partials/pim_image_editor_modals.php ---------- */
#markImageAreaModal .btn-group .btn.active {
    background-color: rgba(var(--ui-primary-rgb), .1) !important;
    border-color: rgba(var(--ui-primary-rgb), .45) !important;
    color: var(--ui-primary) !important;
}

#optimiseListingImageModal .opt-summary {
    display: flex;
    gap: 16px;
    align-items: center;
}

#optimiseListingImageModal .opt-summary__thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-subtle, var(--ui-page));
    box-shadow: inset 0 0 0 1px var(--ui-border, rgb(var(--ui-white-rgb)));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#optimiseListingImageModal .opt-summary__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#optimiseListingImageModal .opt-summary__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#optimiseListingImageModal .opt-summary__slot {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted, var(--ui-muted));
}

#optimiseListingImageModal .opt-summary__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ui-fs-base);
    color: var(--ui-body, var(--ui-body));
}

#optimiseListingImageModal .opt-summary__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#optimiseListingImageModal .opt-summary__hint {
    margin: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
}

#optimiseListingImageModal .opt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    background: var(--ui-subtle, var(--ui-page));
    color: var(--ui-body, var(--ui-body));
}

#optimiseListingImageModal .opt-chip i {
    font-size: var(--ui-fs-xs);
}

#optimiseListingImageModal .opt-chip--keep {
    background: rgba(var(--ui-success-rgb), 0.12); color: var(--ui-series-3);
}

#optimiseListingImageModal .opt-chip--improve {
    background: rgba(var(--ui-warning-rgb), 0.16); color: var(--ui-warning-text);
}

#optimiseListingImageModal .opt-chip--remove {
    background: rgba(var(--ui-danger-rgb), 0.1); color: var(--ui-danger);
}

#optimiseListingImageModal .opt-chip--add {
    background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-primary);
}

#optimiseListingImageModal .opt-section {
    margin-top: 20px;
}

#optimiseListingImageModal .opt-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#optimiseListingImageModal .opt-section__title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text, var(--ui-text));
}

#optimiseListingImageModal .opt-section__tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

#optimiseListingImageModal .opt-section__tools .btn-link {
    font-size: var(--ui-fs-sm);
    text-decoration: none;
}

#optimiseListingImageModal .opt-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#optimiseListingImageModal .opt-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted, var(--ui-muted));
}

#optimiseListingImageModal .opt-item {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-surface, var(--ui-surface));
    box-shadow: inset 0 0 0 1px var(--ui-border, rgb(var(--ui-white-rgb)));
    cursor: pointer;
    transition: box-shadow 150ms ease, background-color 150ms ease;
}

#optimiseListingImageModal .opt-item:hover {
    box-shadow: inset 0 0 0 1px var(--ui-border-strong, rgb(var(--ui-white-rgb))), var(--ui-shadow, 0 1px 4px rgba(var(--ui-black-rgb), 0.08));
}

#optimiseListingImageModal .opt-item:has(.form-check-input:checked) {
    background: rgba(var(--ui-primary-rgb), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--ui-primary-rgb), .35);
}

#optimiseListingImageModal .opt-item .form-check-input {
    flex-shrink: 0;
    margin: 2px 0 0;
    cursor: pointer;
}

#optimiseListingImageModal .opt-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

#optimiseListingImageModal .opt-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#optimiseListingImageModal .opt-item__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
    line-height: 1.4;
}

#optimiseListingImageModal .opt-item__change {
    margin-top: 4px;
    font-size: var(--ui-fs-base);
    color: var(--ui-body, var(--ui-body));
    line-height: 1.45;
}

#optimiseListingImageModal .opt-item__why {
    margin-top: 6px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
    line-height: 1.45;
}

#optimiseListingImageModal .opt-priority {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

#optimiseListingImageModal .opt-priority--high {
    background: rgba(var(--ui-danger-rgb), 0.1); color: var(--ui-danger);
}

#optimiseListingImageModal .opt-priority--medium {
    background: rgba(var(--ui-warning-rgb), 0.16); color: var(--ui-warning-text);
}

#optimiseListingImageModal .opt-priority--low {
    background: var(--ui-subtle, var(--ui-page)); color: var(--ui-muted, var(--ui-muted));
}

#optimiseListingImageModal .opt-empty {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border-radius: var(--ui-radius, 12px);
    background: rgba(var(--ui-success-rgb), 0.08);
    color: var(--ui-body, var(--ui-body));
    font-size: var(--ui-fs-base);
}

#optimiseListingImageModal .opt-empty i {
    color: var(--ui-series-3);
}

#optimiseListingImageModal .opt-next {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--ui-radius, 12px);
    background: rgba(var(--ui-primary-rgb), .06);
    font-size: var(--ui-fs-base);
    color: var(--ui-body, var(--ui-body));
}

#optimiseListingImageModal .opt-next > i {
    margin-top: 3px;
    color: var(--ui-warning);
}

#optimiseListingImageModal .opt-next__title {
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
    margin-bottom: 2px;
}

#optimiseListingImageModal .opt-fold {
    margin-top: 12px;
    border-radius: var(--ui-radius, 12px);
    box-shadow: inset 0 0 0 1px var(--ui-border, rgb(var(--ui-white-rgb)));
    overflow: hidden;
}

#optimiseListingImageModal .opt-fold__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text, var(--ui-text));
    text-align: left;
}

#optimiseListingImageModal .opt-fold__toggle:hover {
    background: var(--ui-subtle, var(--ui-page));
}

#optimiseListingImageModal .opt-fold__chevron {
    margin-left: auto;
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint, var(--ui-faint));
    transition: transform 150ms ease;
}

#optimiseListingImageModal .opt-fold__toggle:not(.collapsed) .opt-fold__chevron {
    transform: rotate(180deg);
}

#optimiseListingImageModal .opt-count {
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle, var(--ui-page));
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted, var(--ui-muted));
}

#optimiseListingImageModal .opt-keep-list {
    list-style: none;
    margin: 0;
    padding: 0 14px 12px 38px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#optimiseListingImageModal .opt-keep-list li {
    font-size: var(--ui-fs-base);
    color: var(--ui-text, var(--ui-text));
}

#optimiseListingImageModal .opt-keep-list .opt-item__why {
    margin-top: 2px;
}

#optimiseListingImageModal .opt-analysis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

#optimiseListingImageModal .opt-analysis__item {
    padding: 10px 12px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-subtle, var(--ui-page));
}

#optimiseListingImageModal .opt-analysis__label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted, var(--ui-muted));
    margin-bottom: 4px;
}

#optimiseListingImageModal .opt-analysis__value {
    font-size: var(--ui-fs-sm);
    color: var(--ui-body, var(--ui-body));
    line-height: 1.45;
}

#alternativeListingImageModal #alternativeListingImageModalContent {
    background: var(--ui-surface);
}

#alternativeListingImageModal .alt-listing-img-card {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 0.05rem 0.2rem rgba(var(--ui-black-rgb), 0.04);
    transition: box-shadow 0.2s ease;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-img-card {
    border-color: rgba(var(--ui-white-rgb), 0.12) !important;
    background: rgba(var(--ui-white-rgb), 0.03) !important;
    box-shadow: none;
}

#alternativeListingImageModal .alt-listing-loading-panel {
    border-radius: var(--ui-radius-sm);
    border: 1px dashed var(--ui-border);
    background: var(--ui-subtle);
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-loading-panel {
    border-color: rgba(var(--ui-white-rgb), 0.15);
}

#alternativeListingImageModal #alternativeListingImageAnalysisWrap {
    margin-bottom: 0 !important;
    padding: 12px 14px 4px !important;
    border: 0 !important;
    border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0!important;
    background: var(--ui-subtle, var(--ui-page));
    box-shadow: none !important;
}

#alternativeListingImageModal #alternativeListingImageAnalysisWrap #alternativeListingImageAnalysis {
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-base);
    line-height: 1.5;
}

#alternativeListingImageModal #alternativeListingImageAnalysisWrap + .alt-rationale-callout.d-none {
    display: none !important;
}

#alternativeListingImageModal #alternativeListingImageAnalysisWrap:has(+ .alt-rationale-callout.d-none) {
    padding-bottom: 12px !important;
    margin-bottom: 1rem !important;
    border-radius: var(--ui-radius-md)!important;
}

#alternativeListingImageModal .alt-brand-theme-swatch {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.06);
}

body[data-theme=dark] #alternativeListingImageModal .alt-brand-theme-swatch {
    border-color: rgba(var(--ui-white-rgb), 0.2);
}

#alternativeListingImageModal #alternativeListingImageRationaleWrap.alt-rationale-callout {
    padding: 0 14px 12px;
    border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
    background: var(--ui-subtle, var(--ui-page));
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#alternativeListingImageModal #alternativeListingImagePromptTa,
    #alternativeListingImageModal #alternativeListingImagePromptsMulti textarea {
    min-height: 11rem;
    resize: vertical;
    line-height: 1.5;
}

#alternativeListingImageModal .alt-listing-modal-footer {
    background: var(--ui-subtle);
    border-top: 1px solid var(--ui-border) !important;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-modal-footer {
    background: rgba(var(--ui-black-rgb), 0.2);
    border-top-color: rgba(var(--ui-white-rgb), 0.08) !important;
}

#alternativeListingImageModal .alt-listing-strategy-card {
    border: 1px solid var(--ui-border, var(--ui-border));
    border-radius: var(--ui-radius-md);
    padding: 12px 14px;
    background: var(--ui-surface, var(--ui-surface));
    cursor: pointer;
    min-height: 44px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

#alternativeListingImageModal .alt-listing-strategy-card:hover {
    border-color: rgba(var(--ui-primary-rgb), .35);
}

#alternativeListingImageModal .alt-listing-strategy-card:has(input:checked) {
    border-color: rgba(var(--ui-primary-rgb), .5);
    background: rgba(var(--ui-primary-rgb), .04);
}

#alternativeListingImageModal .alt-listing-strategy-card:has(input:disabled:not(:checked)) {
    cursor: not-allowed;
    opacity: .55;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-strategy-card:has(input:checked) {
    background: rgba(var(--ui-primary-rgb), .12);
}

#alternativeListingImageModal .alt-listing-strategy-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

#alternativeListingImageModal .alt-listing-strategy-card__title {
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-strategy-card__badge {
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle, var(--ui-subtle));
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-strategy-card__badge.is-infographic {
    background: rgba(var(--ui-primary-rgb), .1);
    color: var(--ui-primary);
}

#alternativeListingImageModal .alt-listing-strategy-card__desc {
    margin: 4px 0 0;
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#alternativeListingImageModal .alt-listing-prompt-option-card {
    border: 1px solid var(--ui-border, var(--ui-border));
    border-radius: var(--ui-radius-md);
    padding: 14px;
    background: var(--ui-surface, var(--ui-surface));
    transition: border-color 150ms ease;
}

#alternativeListingImageModal .alt-listing-prompt-option-card:has(.alt-listing-prompt-cb:checked) {
    border-color: rgba(var(--ui-primary-rgb), .5);
}

#alternativeListingImageModal .alt-listing-prompt-option-card .fw-semibold.small {
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-base)!important;
}

#alternativeListingImageModal .alt-listing-prompt-option-card .form-label {
    color: var(--ui-text, var(--ui-text)) !important;
    font-size: var(--ui-fs-sm)!important;
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-prompt-option-card .alt-listing-prompt-ta {
    min-height: 6.5rem;
    font-family: inherit !important;
    font-size: var(--ui-fs-base)!important;
    line-height: 1.5;
    resize: vertical;
}

#alternativeListingImageModal .alt-listing-prompt-option-card small.text-muted {
    font-size: var(--ui-fs-xs);
}

#alternativeListingImageModal #alternativeListingImageReadyBanner {
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-base);
}

#alternativeListingImageModal #alternativeListingImageReadyBanner .small {
    font-size: var(--ui-fs-base);
}

#alternativeListingImageModal .alt-listing-context-card {
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-subtle);
    overflow: hidden;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-context-card {
    background: rgba(var(--ui-white-rgb), 0.04);
    border-color: rgba(var(--ui-white-rgb), 0.1);
}

#alternativeListingImageModal .alt-listing-context-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-context-card__head {
    background: rgba(var(--ui-white-rgb), 0.02);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
}

#alternativeListingImageModal .alt-listing-context-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-base);
}

#alternativeListingImageModal .alt-listing-context-field {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ui-border);
}

#alternativeListingImageModal .alt-listing-context-field:last-of-type {
    border-bottom: 0;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-context-field {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
}

#alternativeListingImageModal .alt-listing-context-field__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 0.4rem;
}

#alternativeListingImageModal .alt-listing-context-field__label i {
    font-size: var(--ui-fs-xs);
    opacity: 0.75;
}

#alternativeListingImageModal .alt-listing-context-field__value {
    font-size: var(--ui-fs-base);
    line-height: 1.55;
    color: var(--ui-text);
    margin: 0;
    word-break: break-word;
}

#alternativeListingImageModal .alt-listing-context-field__value--title {
    font-weight: 500;
}

#alternativeListingImageModal .alt-listing-context-field__value--desc {
    color: var(--ui-muted);
    white-space: pre-wrap;
}

#alternativeListingImageModal .alt-listing-context-footnote {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
    background: rgba(var(--ui-primary-rgb), 0.05);
    border-top: 1px solid rgba(var(--ui-primary-rgb), 0.12);
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-context-footnote {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-top-color: rgba(var(--ui-primary-rgb), 0.2);
}

#alternativeListingImageModal .alt-listing-context-footnote i {
    margin-top: 0.1rem;
    color: var(--ui-primary);
    opacity: 0.85;
}

#alternativeListingImageModal .alt-listing-context-card__sub {
    font-size: var(--ui-fs-xs);
    margin: 0;
    color: var(--ui-muted);
}

#alternativeListingImageModal .alt-listing-context-collapse .alt-listing-context-field__value--desc {
    font-size: var(--ui-fs-sm);
    max-height: 12rem;
    overflow-y: auto;
}

#alternativeListingImageModal .alt-listing-shared-prompt-parts {
    background: var(--ui-subtle);
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-shared-prompt-parts {
    background: rgba(var(--ui-white-rgb), 0.06);
}

#alternativeListingImageModal .alt-listing-wizard-nav {
    margin: 0 0 1.25rem;
}

#alternativeListingImageModal .alt-listing-wizard-steps {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

#alternativeListingImageModal .alt-listing-wizard-steps li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted, var(--ui-muted));
}

#alternativeListingImageModal .alt-listing-wizard-steps li + li::before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(50% + 18px);
    left: calc(-50% + 18px);
    height: 2px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-border, var(--ui-border));
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-active::before,
    #alternativeListingImageModal .alt-listing-wizard-steps li.is-done::before {
    background: var(--ui-primary);
}

#alternativeListingImageModal .alt-listing-wizard-steps__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-pill);
    border: 2px solid var(--ui-border, var(--ui-border));
    background: var(--ui-surface, var(--ui-surface));
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-active {
    color: var(--ui-text, var(--ui-text));
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-active .alt-listing-wizard-steps__dot {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    box-shadow: 0 0 0 4px rgba(var(--ui-primary-rgb), .15);
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-done {
    color: var(--ui-text, var(--ui-text));
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-done .alt-listing-wizard-steps__dot {
    border-color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), .1);
    color: transparent;
}

#alternativeListingImageModal .alt-listing-wizard-steps li.is-done .alt-listing-wizard-steps__dot::after {
    content: "\f00c";
    position: absolute;
    color: var(--ui-primary);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--ui-fs-xs);
}

#alternativeListingImageModal .alt-listing-wizard-steps__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#alternativeListingImageModal .alt-listing-credits-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0 0 1rem;
    padding: 8px 12px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), .06);
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
}

#alternativeListingImageModal .alt-listing-credits-hint::before {
    content: "\f51e";
    flex: none;
    color: var(--ui-primary);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
}

#alternativeListingImageModal .alt-listing-credits-hint.d-none {
    display: none;
}

#alternativeListingImageModal .alt-listing-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 1rem;
    padding: 10px 12px;
    border: 1px solid rgba(var(--ui-danger-rgb), 0.25);
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-danger-rgb), 0.08);
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-base);
    line-height: 1.45;
}

#alternativeListingImageModal .alt-listing-error i {
    margin-top: 2px;
    color: var(--ui-danger);
}

#alternativeListingImageModal .alt-listing-error.d-none {
    display: none;
}

#alternativeListingImageModal .alt-listing-setup-product {
    padding: 12px;
    border-radius: var(--ui-radius, 12px);
    background: var(--ui-subtle, var(--ui-page));
}

#alternativeListingImageModal .alt-listing-setup-product__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

#alternativeListingImageModal .alt-listing-setup-product__img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: inset 0 0 0 1px var(--ui-border, rgb(var(--ui-white-rgb)));
}

#alternativeListingImageModal .alt-listing-setup-product__eyebrow {
    margin: 0 0 2px;
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#alternativeListingImageModal .alt-listing-setup-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 2px;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1.4;
}

#alternativeListingImageModal .alt-listing-context-desc-toggle {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-decoration: none;
}

#alternativeListingImageModal .alt-listing-context-collapse .alt-listing-context-field__value--desc {
    max-height: 12rem;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface, var(--ui-surface));
    font-size: var(--ui-fs-sm);
}

#alternativeListingImageModal .alt-listing-step-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

#alternativeListingImageModal .alt-listing-step-intro__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), .1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

#alternativeListingImageModal .alt-listing-step-intro__title {
    margin: 0 0 2px;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-step-intro__text {
    margin: 0;
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#alternativeListingImageModal .alt-listing-icp {
    padding: 14px 16px 2px;
    border: 1px solid var(--ui-border, var(--ui-border));
    border-radius: var(--ui-radius, 12px);
}

#alternativeListingImageModal .alt-listing-icp .form-label,
    #alternativeListingImageModal .alt-listing-setup-options-body .form-label {
    color: var(--ui-text, var(--ui-text)) !important;
    font-size: var(--ui-fs-sm)!important;
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-icp .form-label .text-muted {
    font-weight: 400;
}

#alternativeListingImageModal .alt-listing-icp__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#alternativeListingImageModal .alt-listing-icp textarea {
    font-size: var(--ui-fs-base);
    line-height: 1.5;
}

#alternativeListingImageModal .alt-listing-count {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border, var(--ui-border));
    border-radius: var(--ui-radius, 12px);
}

#alternativeListingImageModal .alt-listing-count__copy {
    flex: 1 1 auto;
    min-width: 0;
}

#alternativeListingImageModal .alt-listing-count__label {
    display: block;
    margin: 0 0 2px;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-count__help {
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
}

#alternativeListingImageModal .alt-listing-stepper {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle, var(--ui-subtle));
}

#alternativeListingImageModal .alt-listing-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-xs);
    transition: background-color 150ms ease, color 150ms ease;
}

#alternativeListingImageModal .alt-listing-stepper__btn:hover:not(:disabled) {
    background: var(--ui-surface, var(--ui-surface));
    box-shadow: 0 1px 2px rgba(var(--ui-black-rgb), 0.08);
}

#alternativeListingImageModal .alt-listing-stepper__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

#alternativeListingImageModal .alt-listing-stepper__btn:focus-visible,
    #alternativeListingImageModal .alt-listing-stepper__value:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 1px;
}

#alternativeListingImageModal .alt-listing-stepper__value {
    width: 44px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-align-last: center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#alternativeListingImageModal .alt-listing-stepper__value:focus {
    outline: none;
}

#alternativeListingImageModal .alt-listing-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

#alternativeListingImageModal .alt-listing-options--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#alternativeListingImageModal .alt-listing-options__field .form-label {
    margin-bottom: 4px;
    color: var(--ui-text, var(--ui-text));
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-options__field .form-select {
    font-size: var(--ui-fs-base);
}

#alternativeListingImageModal .alt-listing-options__help {
    margin: 4px 0 0;
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
}

#alternativeListingImageModal .alt-listing-setup-options-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--ui-border, var(--ui-border-strong));
    border-radius: var(--ui-radius, 12px);
    background: transparent;
    color: var(--ui-text, var(--ui-text));
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease;
}

#alternativeListingImageModal .alt-listing-setup-options-toggle:hover {
    border-color: rgba(var(--ui-primary-rgb), .45);
    background: rgba(var(--ui-primary-rgb), .03);
}

#alternativeListingImageModal .alt-listing-setup-options-toggle__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), .1);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

#alternativeListingImageModal .alt-listing-setup-options-toggle__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#alternativeListingImageModal .alt-listing-setup-options-toggle__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
}

#alternativeListingImageModal .alt-listing-setup-options-toggle__sub {
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
}

#alternativeListingImageModal .alt-listing-setup-options-toggle__chevron {
    flex: none;
    color: var(--ui-muted, var(--ui-muted));
    font-size: var(--ui-fs-xs);
    transition: transform 200ms ease;
}

#alternativeListingImageModal .alt-listing-setup-options-toggle:not(.collapsed) .alt-listing-setup-options-toggle__chevron {
    transform: rotate(180deg);
}

#alternativeListingImageModal .alt-listing-setup-options-body {
    padding: 12px 2px 0;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-setup-product__img {
    background: var(--ui-logo-bg);
    box-shadow: none;
}

body[data-theme=dark] #alternativeListingImageModal .alt-listing-error {
    background: rgba(var(--ui-danger-rgb), 0.15);
}

#editedImagePreviewModal .cd-image-container {
    container-type: size;
    aspect-ratio: 1 / 1;
    /* Keep the square within the viewport so the decision buttons below stay visible */
    width: min(100%, 62vh);
    margin: 0 auto;
    background: var(--ui-page);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

#editedImagePreviewModal .cd-image-container img,
    #editedImagePreviewModal .cd-resize-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    max-width: none;
    object-fit: contain;
    background: var(--ui-logo-bg);
}

#editedImagePreviewModal .is-visible .cd-resize-img {
    filter: none;
    -webkit-filter: none;
}

#editedImagePreviewModal .cd-compare-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
    padding: .25rem .65rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-on-primary);
    background: rgba(var(--ui-black-rgb), 0.65);
    pointer-events: none;
}

#editedImagePreviewModal .cd-compare-badge-old {
    left: 10px;
}

#editedImagePreviewModal .cd-compare-badge-new {
    right: 10px;
    background: rgba(var(--ui-primary-rgb), 0.85);
}

#editedMultiImagePreviewModal .batch-variant-error-panel,
    #bulkAssetProgressModal .batch-variant-error-panel {
    min-height: 200px;
    border: 1px dashed rgba(var(--ui-danger-rgb), 0.35);
    background: rgba(var(--ui-danger-rgb), 0.06);
}

body[data-theme=dark] #editedMultiImagePreviewModal .batch-variant-error-panel,
    body[data-theme=dark] #bulkAssetProgressModal .batch-variant-error-panel {
    border-color: rgba(var(--ui-danger-rgb), 0.45);
    background: rgba(var(--ui-danger-rgb), 0.12);
}

#editedMultiImagePreviewModal .batch-variant-error-icon,
    #bulkAssetProgressModal .batch-variant-error-icon {
    width: 3rem;
    height: 3rem;
}

#editedMultiImagePreviewModal .batch-variant-img-wrap .js-batch-expand-img,
    #bulkAssetProgressModal .batch-variant-img-wrap .js-batch-expand-img {
    z-index: 2;
    opacity: 0.95;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid rgba(var(--ui-black-rgb), 0.08);
}

body[data-theme=dark] #editedMultiImagePreviewModal .batch-variant-img-wrap .js-batch-expand-img,
    body[data-theme=dark] #bulkAssetProgressModal .batch-variant-img-wrap .js-batch-expand-img {
    border-color: rgba(var(--ui-white-rgb), 0.12);
}

#bulkAssetActionsModal .bulk-asset-thumb-wrap {
    position: relative;
}

#bulkAssetActionsModal .bulk-asset-cb {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 1.15rem;
    height: 1.15rem;
}

#bulkAssetActionsModal .bulk-asset-thumb {
    max-width: 100%;
    max-height: 100px;
    cursor: pointer;
}

#bulkAssetActionsModal .js-bulk-asset-expand {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    opacity: 0.9;
}

#bulkAssetSelectionBar {
    border-top: 1px solid rgba(var(--ui-black-rgb), 0.08);
    background: var(--ui-surface);
}

body[data-theme=dark] #bulkAssetSelectionBar {
    background: var(--ui-purple-tint);
}

#bulkAssetAiSettingsModal .bulk-asset-option-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(var(--ui-black-rgb), 0.1);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

#bulkAssetAiSettingsModal .bulk-asset-option-card i {
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
    margin-bottom: 4px;
}

#bulkAssetAiSettingsModal .bulk-asset-option-card:hover {
    border-color: var(--ui-primary);
}

#bulkAssetAiSettingsModal .btn-check:checked + .bulk-asset-option-card {
    border-color: var(--ui-primary);
    background-color: rgba(var(--ui-primary-rgb), 0.06);
}

body[data-theme=dark] #bulkAssetAiSettingsModal .btn-check:checked + .bulk-asset-option-card {
    background-color: rgba(var(--ui-primary-rgb), 0.15);
}

#bulkAssetAiSettingsModal .bulk-asset-settings-body {
    background: var(--ui-subtle);
}

body[data-theme=dark] #bulkAssetAiSettingsModal .bulk-asset-settings-body {
    background: rgba(var(--ui-white-rgb), 0.03);
}

#bulkAssetAiSettingsModal .bulk-asset-inline-card {
    padding: 12px 14px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-black-rgb), 0.03);
}

body[data-theme=dark] #bulkAssetAiSettingsModal .bulk-asset-inline-card {
    background: rgba(var(--ui-white-rgb), 0.05);
}

#editedMultiImagePreviewModal .batch-variant-card-inner > .position-relative,
    #editedMultiImagePreviewModal .batch-variant-img-wrap,
    #editedMultiImagePreviewModal .batch-variant-error-panel {
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
}

#editedMultiImagePreviewModal .batch-variant-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-logo-bg) !important;
}

#editedMultiImagePreviewModal .batch-variant-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#batchGeneratedImageExpandModal {
    z-index: 2200;
}

#batchGeneratedImageExpandModal .modal-body img {
    max-height: min(85vh, 920px);
}

.price-adjustment-type-group.btn-group {
    flex-wrap: nowrap;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    #optimiseListingImageModal .opt-analysis {
    grid-template-columns: minmax(0, 1fr);
    }

    #optimiseListingImageModal .opt-summary__thumb {
    flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    #alternativeListingImageModal .alt-listing-count {
    flex-direction: column;
        align-items: stretch;
    }

    #alternativeListingImageModal .alt-listing-stepper {
    align-self: flex-start;
    }

    #alternativeListingImageModal .alt-listing-wizard-steps__label {
    font-size: var(--ui-fs-xs);
    }
}

@media (max-width: 767.98px) {
    #alternativeListingImageModal .alt-listing-icp__pair {
    grid-template-columns: minmax(0, 1fr);
    }

    #alternativeListingImageModal .alt-listing-options {
    grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Partial: seller/partials/sales_channels_connect.php ---------- */
.nav-link.text-dark.active {
    color: white !important;
}

.channel-logo-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-page);
    border-radius: var(--ui-radius-sm);
    padding: 8px;
}

.channel-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(var(--ui-black-rgb), 0.15) !important;
}

.transition-all {
    transition: all 0.3s ease;
}

.channel-card {
    display: block;
}

.channel-card.hidden {
    display: none;
}

.product-types-wrapper {
    margin-top: 8px;
}

.product-types-wrapper .badge {
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    border-color: var(--ui-primary) !important;
}

.weclapp-wizard-modal-content .modal-body {
    background: var(--ui-subtle);
}

body[data-theme=dark] .weclapp-wizard-modal-content .modal-body {
    background: var(--ui-subtle);
}

.weclapp-wizard-panel {
    max-width: 100%;
}

.weclapp-warehouse-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.weclapp-warehouse-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.875rem 1rem;
    text-align: left;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.weclapp-warehouse-card:hover,
    .weclapp-warehouse-card:focus {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.12);
    outline: none;
}

.weclapp-warehouse-card.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.18);
}

.weclapp-warehouse-card-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    font-size: var(--ui-fs-base);
}

.weclapp-warehouse-card.is-selected .weclapp-warehouse-card-icon {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.weclapp-warehouse-card-name {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-text);
}

.weclapp-wizard-review-card {
    padding: 1rem 1.125rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

.weclapp-wizard-review-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    margin: 0;
}

.weclapp-wizard-review-list {
    margin: 0;
}

.weclapp-wizard-review-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ui-border);
}

.weclapp-wizard-review-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.weclapp-wizard-review-row dt {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-muted);
    margin: 0;
}

.weclapp-wizard-review-row dd {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    margin: 0;
    word-break: break-word;
}

.weclapp-wizard-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ui-surface);
}

#add_amazon_api_modal .region-section {
    padding: 1rem;
    background: var(--ui-page);
    border-radius: var(--ui-radius-sm);
    transition: all 0.3s ease;
}

#add_amazon_api_modal .region-section:hover {
    background: var(--ui-border);
    transform: translateY(-2px);
}

#add_amazon_api_modal .region-title {
    font-size: var(--ui-fs-md);
    color: var(--ui-body);
    border-bottom: 2px solid var(--ui-muted);
    padding-bottom: 0.5rem;
}

#add_amazon_api_modal .country-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#add_amazon_api_modal .country-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--ui-text);
    border-radius: var(--ui-radius-sm);
    transition: all 0.2s ease;
    font-size: var(--ui-fs-md);
}

#add_amazon_api_modal .country-link:hover {
    background: var(--ui-surface);
    color: var(--ui-primary);
    transform: translateX(4px);
    box-shadow: 0 2px 4px rgba(var(--ui-black-rgb), 0.1);
}

#add_amazon_api_modal .country-flag {
    margin-right: 0.75rem;
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 1px 3px rgba(var(--ui-black-rgb), 0.1);
}

@media (min-width: 576px) {
    .weclapp-warehouse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Partial: seller/pos/_close_shift_modal_styles.php ---------- */
.pos-close-shift-modal .pos-close-shift-dialog {
    max-width: 440px;
}

.pos-close-shift-modal .pos-close-shift-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 0.5rem 2rem rgba(var(--ui-black-rgb), 0.12);
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-content {
    box-shadow: 0 0.5rem 2rem rgba(var(--ui-black-rgb), 0.45);
}

.pos-close-shift-modal .pos-close-shift-body {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
}

.pos-close-shift-modal .pos-close-shift-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.pos-close-shift-modal .pos-close-shift-hero {
    text-align: center;
    padding: 0 1.5rem 1.25rem;
}

.pos-close-shift-modal .pos-close-shift-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    margin-bottom: 0.85rem;
    background: rgba(var(--ui-warning-rgb), 0.14);
    color: var(--ui-bronze);
    font-size: var(--ui-fs-kpi);
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-icon {
    background: rgba(var(--ui-warning-rgb), 0.18);
    color: var(--ui-warning);
}

.pos-close-shift-modal .pos-close-shift-title {
    font-size: var(--ui-fs-xl);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.35rem;
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-title {
    color: var(--ui-text);
}

.pos-close-shift-modal .pos-close-shift-subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 22rem;
}

.pos-close-shift-modal .pos-close-shift-summary {
    background: var(--ui-page);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-summary {
    background: rgba(var(--ui-white-rgb), 0.05);
    border-color: rgba(var(--ui-white-rgb), 0.12);
}

.pos-close-shift-modal .pos-close-shift-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
}

.pos-close-shift-modal .pos-close-shift-summary-row + .pos-close-shift-summary-row {
    border-top: 1px solid rgba(var(--ui-black-rgb), 0.06);
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-summary-row + .pos-close-shift-summary-row {
    border-top-color: rgba(var(--ui-white-rgb), 0.08);
}

.pos-close-shift-modal .pos-close-shift-summary-label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.pos-close-shift-modal .pos-close-shift-summary-value {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    text-align: right;
}

.pos-close-shift-modal .pos-close-shift-summary-row--difference {
    margin-top: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(var(--ui-black-rgb), 0.1) !important;
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-summary-row--difference {
    border-top-color: rgba(var(--ui-white-rgb), 0.14) !important;
}

.pos-close-shift-modal .pos-close-shift-diff-value {
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    text-align: right;
}

.pos-close-shift-modal .pos-close-shift-diff-value.is-short {
    color: var(--ui-danger);
}

.pos-close-shift-modal .pos-close-shift-diff-value.is-over {
    color: var(--ui-warning-text);
}

.pos-close-shift-modal .pos-close-shift-diff-value.is-exact {
    color: var(--ui-success);
}

.pos-close-shift-modal .pos-close-shift-fields .form-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.pos-close-shift-modal .pos-close-shift-amount-input .form-control,
    .pos-close-shift-modal .pos-close-shift-amount-input .input-group-text {
    min-height: 48px;
    font-size: var(--ui-fs-lg);
}

.pos-close-shift-modal .pos-close-shift-amount-input .form-control {
    font-weight: 500;
}

.pos-close-shift-modal .pos-close-shift-fields textarea.form-control {
    min-height: 48px;
    font-size: var(--ui-fs-md);
    resize: vertical;
}

.pos-close-shift-modal .pos-close-shift-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin: 0.4rem 0 0;
}

.pos-close-shift-modal .pos-close-shift-footer {
    border-top: 1px solid var(--ui-border);
    padding: 1rem 1.5rem 1.25rem;
    gap: 0.625rem;
}

body[data-theme=dark] .pos-close-shift-modal .pos-close-shift-footer {
    border-top-color: rgba(var(--ui-white-rgb), 0.1);
}

.pos-close-shift-modal .pos-close-shift-footer .btn {
    min-height: 44px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

@media (max-width: 575.98px) {
    .pos-close-shift-modal .modal-dialog {
    margin: 0.75rem;
    }

    .pos-close-shift-modal .pos-close-shift-footer {
    flex-direction: column-reverse;
    }

    .pos-close-shift-modal .pos-close-shift-footer .btn {
    width: 100%;
    }
}

/* ---------- Partial: seller/pos/sales/_refund_modal_styles.php ---------- */
.pos-refund-modal .pos-refund-dialog {
    max-width: 720px;
}

.pos-refund-modal .pos-refund-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 0.5rem 2rem rgba(var(--ui-black-rgb), 0.12);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-content {
    box-shadow: 0 0.5rem 2rem rgba(var(--ui-black-rgb), 0.45);
}

.pos-refund-modal .pos-refund-body {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
}

.pos-refund-modal .pos-refund-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.pos-refund-modal .pos-refund-hero {
    text-align: center;
    padding: 0 1.5rem 1.25rem;
}

.pos-refund-modal .pos-refund-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    margin-bottom: 0.85rem;
    background: rgba(var(--ui-danger-rgb), 0.12);
    color: var(--ui-danger-text);
    font-size: var(--ui-fs-xl);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-icon {
    background: rgba(var(--ui-danger-rgb), 0.18);
    color: var(--ui-danger-soft);
}

.pos-refund-modal .pos-refund-title {
    font-size: var(--ui-fs-xl);
    font-weight: 500;
    color: var(--ui-text);
    margin-bottom: 0.35rem;
}

body[data-theme=dark] .pos-refund-modal .pos-refund-title {
    color: var(--ui-text);
}

.pos-refund-modal .pos-refund-subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.55;
    margin: 0 auto 0.75rem;
    max-width: 28rem;
}

.pos-refund-modal .pos-refund-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    padding: 0.35rem 0.75rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.14);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-order-pill {
    color: var(--ui-text);
    background: rgba(var(--ui-white-rgb), 0.06);
    border-color: rgba(var(--ui-white-rgb), 0.12);
}

.pos-refund-modal .pos-refund-loading {
    padding: 2rem 0;
}

.pos-refund-modal .pos-refund-lines-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    background: var(--ui-surface);
    margin-bottom: 1.25rem;
}

body[data-theme=dark] .pos-refund-modal .pos-refund-lines-card {
    border-color: rgba(var(--ui-white-rgb), 0.12);
    background: rgba(var(--ui-white-rgb), 0.03);
}

.pos-refund-modal .pos-refund-lines-table {
    margin-bottom: 0;
}

.pos-refund-modal .pos-refund-lines-table thead th {
    white-space: nowrap;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.08);
    background: var(--ui-page);
    padding: 0.65rem 0.75rem;
}

body[data-theme=dark] .pos-refund-modal .pos-refund-lines-table thead th {
    background: rgba(var(--ui-white-rgb), 0.04);
    border-bottom-color: rgba(var(--ui-white-rgb), 0.1);
}

.pos-refund-modal .pos-refund-lines-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.05);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-lines-table tbody td {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.06);
}

.pos-refund-modal .pos-refund-lines-table tbody tr:last-child td {
    border-bottom: 0;
}

.pos-refund-modal .pos-refund-lines-table tbody tr.is-selected {
    background: rgba(var(--ui-primary-rgb), 0.04);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-lines-table tbody tr.is-selected {
    background: rgba(var(--ui-white-rgb), 0.04);
}

.pos-refund-modal .pos-refund-product-title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.4;
}

.pos-refund-modal .pos-refund-product-ean {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 0.15rem;
}

.pos-refund-modal .pos-refund-remaining-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-text);
}

.pos-refund-modal .pos-refund-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
}

.pos-refund-modal .pos-refund-qty {
    width: 4.5rem;
    min-height: 44px;
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    text-align: center;
}

.pos-refund-modal .pos-refund-qty-max {
    min-height: 44px;
    min-width: 44px;
    padding: 0.35rem 0.65rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--ui-radius-xs);
}

.pos-refund-modal .pos-refund-line-amount {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

.pos-refund-modal .pos-refund-lines-table tbody tr.is-selected .pos-refund-line-amount {
    color: var(--ui-danger);
    font-weight: 600;
}

.pos-refund-modal .pos-refund-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.pos-refund-modal .pos-refund-options .form-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.pos-refund-modal .pos-refund-reason-input {
    min-height: 48px;
    font-size: var(--ui-fs-md);
    resize: vertical;
}

.pos-refund-modal .pos-refund-restock-card {
    display: flex;
    align-items: stretch;
    min-height: 100%;
}

.pos-refund-modal .pos-refund-restock-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-page);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-restock-inner {
    border-color: rgba(var(--ui-white-rgb), 0.12);
    background: rgba(var(--ui-white-rgb), 0.04);
}

.pos-refund-modal .pos-refund-restock-inner .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0;
    flex-shrink: 0;
}

.pos-refund-modal .pos-refund-restock-inner .form-check-label {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.4;
}

.pos-refund-modal .pos-refund-restock-hint {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}

.pos-refund-modal .pos-refund-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-danger-rgb), 0.06);
    border: 1px solid rgba(var(--ui-danger-rgb), 0.16);
}

body[data-theme=dark] .pos-refund-modal .pos-refund-total-card {
    background: rgba(var(--ui-danger-rgb), 0.12);
    border-color: rgba(var(--ui-danger-rgb), 0.22);
}

.pos-refund-modal .pos-refund-total-label {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

.pos-refund-modal .pos-refund-total-value {
    font-size: var(--ui-fs-kpi);
    font-weight: 600;
    color: var(--ui-danger);
    line-height: 1;
}

.pos-refund-modal .pos-refund-total-card.is-zero .pos-refund-total-value {
    color: var(--ui-muted);
    font-weight: 500;
    font-size: var(--ui-fs-lg);
}

.pos-refund-modal .pos-refund-footer {
    border-top: 1px solid var(--ui-border);
    padding: 1rem 1.5rem 1.25rem;
    gap: 0.625rem;
}

body[data-theme=dark] .pos-refund-modal .pos-refund-footer {
    border-top-color: rgba(var(--ui-white-rgb), 0.1);
}

.pos-refund-modal .pos-refund-footer .btn {
    min-height: 44px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

@media (min-width: 768px) {
    .pos-refund-modal .pos-refund-options {
    grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

@media (max-width: 767.98px) {
    .pos-refund-modal .pos-refund-lines-table thead {
    display: none;
    }

    .pos-refund-modal .pos-refund-lines-table tbody tr {
    display: block;
        padding: 0.85rem 0.75rem;
        border-bottom: 1px solid rgba(var(--ui-black-rgb), 0.06);
    }

    body[data-theme=dark] .pos-refund-modal .pos-refund-lines-table tbody tr {
    border-bottom-color: rgba(var(--ui-white-rgb), 0.08);
    }

    .pos-refund-modal .pos-refund-lines-table tbody tr:last-child {
    border-bottom: 0;
    }

    .pos-refund-modal .pos-refund-lines-table tbody td {
    display: block;
        border: 0;
        padding: 0.2rem 0;
        text-align: left !important;
    }

    .pos-refund-modal .pos-refund-lines-table tbody td::before {
    content: attr(data-label);
        display: block;
        font-size: var(--ui-fs-xs);
        font-weight: 500;
        color: var(--ui-muted);
        margin-bottom: 0.2rem;
    }

    .pos-refund-modal .pos-refund-lines-table tbody td:first-child::before {
    display: none;
    }

    .pos-refund-modal .pos-refund-lines-table tbody td:first-child {
    margin-bottom: 0.5rem;
    }

    .pos-refund-modal .pos-refund-qty-control {
    justify-content: flex-start;
    }

    .pos-refund-modal .pos-refund-footer {
    flex-direction: column-reverse;
    }

    .pos-refund-modal .pos-refund-footer .btn {
    width: 100%;
    }
}

/* ---------- Partial: seller/pos/sales/_styles.php ---------- */
#pos-sales .pos-sales-filters-card {
    margin-bottom: 1rem;
    overflow: hidden;
}

#pos-sales .pos-sales-filters-card .card-body {
    padding: 1rem 1.15rem;
}

#pos-sales .pos-sales-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
}

#pos-sales .pos-sales-filter-field {
    flex: 1 1 10rem;
    min-width: min(100%, 10rem);
    max-width: 100%;
}

#pos-sales .pos-sales-filter-field--date {
    flex: 1.35 1 13.5rem;
    min-width: min(100%, 13.5rem);
}

#pos-sales .pos-sales-filter-field .form-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

#pos-sales .pos-sales-filter-input-wrap,
    #pos-sales .pos-sales-filter-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

#pos-sales .pos-sales-filter-field-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    width: 1rem;
    text-align: center;
    pointer-events: none;
    transition: color 0.2s ease;
}

#pos-sales .pos-sales-filter-field .pos-sales-filter-control {
    width: 100%;
}

#pos-sales .pos-sales-filter-input-wrap .pos-sales-filter-control,
    #pos-sales .pos-sales-filter-select-wrap .pos-sales-filter-control {
    padding-left: 2.25rem;
}

#pos-sales .pos-sales-filter-select-wrap .form-select {
    padding-right: 2rem;
    background-position: right 0.75rem center;
}

#pos-sales .pos-sales-filter-input-wrap:focus-within .pos-sales-filter-field-icon,
    #pos-sales .pos-sales-filter-select-wrap:focus-within .pos-sales-filter-field-icon {
    color: var(--ui-primary);
}

#pos-sales .pos-sales-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

#pos-sales .pos-sales-kpi-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.95rem 1rem;
    background: var(--ui-surface);
    height: 100%;
}

#pos-sales .pos-sales-kpi-grid .pos-sales-kpi-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 5.25rem;
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-card {
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

#pos-sales .pos-sales-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-md);
    flex-shrink: 0;
    background: var(--ui-surface);
    color: var(--ui-muted);
}

#pos-sales .pos-sales-kpi-card--revenue .pos-sales-kpi-icon {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
}

#pos-sales .pos-sales-kpi-card--transactions .pos-sales-kpi-icon {
    color: var(--ui-success);
    background: var(--ui-success-tint);
}

#pos-sales .pos-sales-kpi-card--ticket .pos-sales-kpi-icon {
    color: var(--ui-series-1);
    background: rgba(var(--ui-info-rgb), 0.1);
}

#pos-sales .pos-sales-kpi-card--payment .pos-sales-kpi-icon {
    color: var(--ui-bronze);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-sales-kpi-card--discount .pos-sales-kpi-icon {
    color: var(--ui-series-5);
    background: rgba(var(--ui-purple-rgb), 0.1);
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-icon {
    background: var(--ui-subtle);
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-card--revenue .pos-sales-kpi-icon {
    background: rgba(var(--ui-primary-rgb), 0.14);
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-card--ticket .pos-sales-kpi-icon {
    color: var(--ui-info);
    background: rgba(var(--ui-info-rgb), 0.14);
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-card--payment .pos-sales-kpi-icon {
    color: var(--ui-warning);
    background: var(--ui-warning-tint);
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-card--discount .pos-sales-kpi-icon {
    color: var(--ui-series-5);
    background: rgba(var(--ui-info-rgb), 0.14);
}

#pos-sales .pos-sales-kpi-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

#pos-sales .pos-sales-kpi-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    line-height: 1.35;
    min-height: 1.85rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
}

#pos-sales .pos-sales-kpi-value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#pos-sales .pos-sales-kpi-value:empty,
    #pos-sales .pos-sales-kpi-value[data-empty="true"] {
    color: var(--ui-muted);
    font-weight: 500;
}

body[data-theme=dark] #pos-sales .pos-sales-kpi-value {
    color: var(--ui-text);
}

#pos-sales .pos-sales-chart-wrap {
    position: relative;
    min-height: 280px;
}

#pos-sales .pos-sales-chart-wrap canvas {
    max-height: 320px;
}

#pos-sales .pos-sales-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ui-surface) 85%, transparent);
    z-index: 2;
}

body[data-theme=dark] #pos-sales .pos-sales-chart-loading {
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
}

#pos-sales .pos-sales-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 280px;
    padding: 2rem 1.5rem;
    text-align: center;
}

#pos-sales .pos-sales-chart-empty.d-none {
    display: none !important;
}

#pos-sales .pos-sales-chart-wrap:has(.pos-sales-chart-empty:not(.d-none)) canvas {
    display: none;
}

#pos-sales .pos-sales-chart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
    margin-bottom: 0.35rem;
}

#pos-sales .pos-sales-chart-empty-icon--muted {
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
}

body[data-theme=dark] #pos-sales .pos-sales-chart-empty-icon {
    background: rgba(var(--ui-primary-rgb), 0.16);
}

body[data-theme=dark] #pos-sales .pos-sales-chart-empty-icon--muted {
    background: var(--ui-subtle);
}

#pos-sales .pos-sales-chart-empty-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-body);
    margin: 0;
}

body[data-theme=dark] #pos-sales .pos-sales-chart-empty-title {
    color: var(--ui-text);
}

#pos-sales .pos-sales-chart-empty-message {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    max-width: 22rem;
    margin: 0;
    line-height: 1.5;
}

#pos-sales .pos-sales-chart-empty-action,
    #pos-sales .pos-sales-cashiers-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1.15rem;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
}

#pos-sales .pos-sales-chart-empty-action {
    margin-top: 0.15rem;
}

#pos-sales .pos-sales-cashiers-empty-action {
    margin-top: 0.15rem;
}

#pos-sales .pos-sales-chart-empty--compact {
    min-height: 280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

#pos-sales .pos-sales-chart-empty--compact .pos-sales-chart-empty-message {
    max-width: 16rem;
}

#pos-sales .pos-sales-table-card {
    overflow: hidden;
}

#pos-sales .pos-sales-table-card .card-body {
    padding: 1rem 1.25rem 1.25rem;
}

#pos-sales #posSalesExportButtons .dt-buttons {
    margin: 0;
}

#pos-sales #posSalesExportButtons .pos-sales-dt-export-btn {
    min-height: 44px;
    border-radius: var(--ui-radius-xs);
    font-weight: 500;
    border-color: rgba(var(--ui-black-rgb), 0.08);
    box-shadow: none;
}

#pos-sales #posSalesExportButtons .dropdown-menu {
    min-width: 11rem;
}

body[data-theme=dark] #pos-sales #posSalesExportButtons .pos-sales-dt-export-btn {
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-sales-dt-toolbar-secondary .dataTables_length label,
    #pos-sales .pos-sales-dt-toolbar-secondary .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-sales .pos-sales-dt-toolbar-secondary .dataTables_filter input {
    min-height: 38px;
    padding-left: 34px; /* room for the magnifier every list search draws */
    padding-right: 12px;
    min-width: min(100%, 220px);
}

#pos-sales .pos-sales-dt-toolbar-secondary .dataTables_length select {
    min-height: 38px;
    border-radius: var(--ui-radius-xs);
}

#pos-sales .pos-sales-transactions-table-wrap .dataTables_info {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    padding-top: 0.85rem;
}

#pos-sales .pos-sales-transactions-table-wrap .dataTables_paginate {
    padding-top: 0.65rem;
}

#pos-sales .pos-sales-transactions-table thead th {
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: transparent;
}

#pos-sales .pos-sales-transactions-table tbody td {
    vertical-align: middle;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    font-size: var(--ui-fs-sm);
}

body[data-theme=dark] #pos-sales .pos-sales-transactions-table tbody td {
    border-bottom-color: var(--ui-border) !important;
}

#pos-sales .pos-sales-transactions-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

#pos-sales .pos-sales-transactions-table tbody tr:nth-child(even) td {
    background: transparent;
}

#pos-sales .pos-sales-transactions-table tbody tr:hover td {
    background: rgba(var(--ui-primary-rgb), 0.03);
}

body[data-theme=dark] #pos-sales .pos-sales-transactions-table tbody tr:hover td {
    background: var(--ui-subtle);
}

#pos-sales .pos-sales-tx-date {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.25;
    white-space: nowrap;
}

#pos-sales .pos-sales-tx-date-day {
    font-weight: 500;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-date-day {
    color: var(--ui-text);
}

#pos-sales .pos-sales-tx-date-time {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#pos-sales .pos-sales-tx-order-link {
    font-weight: 600;
    color: var(--ui-primary);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

#pos-sales .pos-sales-tx-order-link:hover {
    text-decoration: underline;
    color: var(--ui-primary);
}

#pos-sales .pos-sales-tx-customer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ui-text);
}

#pos-sales .pos-sales-tx-customer.is-walkin {
    color: var(--ui-muted);
}

#pos-sales .pos-sales-tx-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3em 0.6em;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--ui-radius-pill);
    line-height: 1.2;
}

#pos-sales .pos-sales-tx-payment-badge i {
    font-size: var(--ui-fs-2xs);
    opacity: 0.85;
}

#pos-sales .pos-sales-tx-payment-badge--cash {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
    border: 1px solid var(--ui-success);
}

#pos-sales .pos-sales-tx-payment-badge--card {
    color: var(--ui-info-text);
    background: var(--ui-primary-tint);
    border: 1px solid var(--ui-primary-line);
}

#pos-sales .pos-sales-tx-payment-badge--other {
    color: var(--ui-muted);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
}

#pos-sales .pos-sales-tx-payment-badge--split {
    color: var(--ui-info-text);
    background: rgba(var(--ui-info-rgb), 0.14);
    border: 1px solid rgba(var(--ui-info-rgb), 0.28);
}

#pos-sales .pos-sales-tx-payment-badge--default {
    color: var(--ui-text);
    background: rgba(var(--ui-muted-rgb), 0.12);
    border: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-payment-badge--cash {
    color: var(--ui-success);
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-payment-badge--card {
    color: var(--ui-info-text);
    background: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-payment-badge--other {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-payment-badge--split {
    color: var(--ui-info-text);
    background: rgba(var(--ui-info-rgb), 0.16);
    border-color: rgba(var(--ui-info-rgb), 0.32);
}

#pos-sales .pos-sales-meta-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28em 0.6em;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
    vertical-align: middle;
}

#pos-sales .pos-sales-meta-badge--info {
    color: var(--ui-info-text);
    background: rgba(var(--ui-info-rgb), 0.14);
    border: 1px solid rgba(var(--ui-info-rgb), 0.28);
}

body[data-theme=dark] #pos-sales .pos-sales-meta-badge--info {
    color: var(--ui-info-text);
    background: rgba(var(--ui-info-rgb), 0.16);
    border-color: rgba(var(--ui-info-rgb), 0.32);
}

#pos-sales .pos-sales-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    font-weight: 500;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
    white-space: nowrap;
}

#pos-sales .pos-sales-tx-amount-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 5rem;
    max-width: 100%;
}

#pos-sales .pos-sales-tx-amount-primary {
    line-height: 1.2;
}

#pos-sales .pos-sales-tx-amount-value {
    font-weight: 600;
    font-size: var(--ui-fs-base);
    letter-spacing: -0.02em;
    color: var(--ui-body);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#pos-sales .pos-sales-tx-amount-value--refunded {
    color: var(--ui-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(var(--ui-danger-rgb), 0.45);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-amount-value {
    color: var(--ui-text);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-amount-value--refunded {
    color: var(--ui-muted);
}

#pos-sales .pos-sales-tx-amount-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
    line-height: 1.2;
}

#pos-sales .pos-sales-tx-net-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#pos-sales .pos-sales-tx-refund-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.3;
}

#pos-sales .pos-sales-tx-refund-pill--full {
    color: var(--ui-danger-text);
    background: var(--ui-danger-tint);
}

#pos-sales .pos-sales-tx-refund-pill--partial {
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-refund-pill--partial {
    color: var(--ui-warning);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-sales-tx-amount {
    font-weight: 600;
    font-size: var(--ui-fs-md);
    letter-spacing: -0.01em;
    color: var(--ui-body);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

body[data-theme=dark] #pos-sales .pos-sales-tx-amount {
    color: var(--ui-text);
}

#pos-sales .pos-sales-tx-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ui-text);
    white-space: nowrap;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pos-sales .pos-sales-tx-meta i {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
}

#pos-sales .pos-sales-tx-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

#pos-sales .pos-sales-tx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border-radius: var(--ui-radius-xs);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

#pos-sales .pos-sales-tx-action-btn:hover {
    color: var(--ui-primary);
    border-color: rgba(var(--ui-primary-rgb), 0.25);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

#pos-sales .pos-sales-tx-action-btn--danger:hover {
    color: var(--ui-danger);
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

body[data-theme=dark] #pos-sales .pos-sales-tx-action-btn {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

#pos-sales .pos-sales-table-card .empty-state-container {
    min-height: 220px;
    padding: 2rem 1rem;
}

#pos-sales .pos-sales-cashiers-card {
    border: 0;
    box-shadow: 0 0 0.875rem 0 rgba(var(--ui-black-rgb), 0.05);
    overflow: hidden;
}

body[data-theme=dark] #pos-sales .pos-sales-cashiers-card {
    box-shadow: 0 0 0.875rem 0 rgba(var(--ui-black-rgb), 0.25);
}

#pos-sales .pos-shift-diff-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

#pos-sales .pos-shift-diff-badge.is-short {
    color: var(--ui-danger-text);
    background: var(--ui-danger-tint);
}

#pos-sales .pos-shift-diff-badge.is-over {
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-shift-diff-badge.is-exact {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

body[data-theme=dark] #pos-sales .pos-shift-diff-badge.is-short {
    color: var(--ui-danger-soft);
}

body[data-theme=dark] #pos-sales .pos-shift-diff-badge.is-over {
    color: var(--ui-warning-text);
}

body[data-theme=dark] #pos-sales .pos-shift-diff-badge.is-exact {
    color: var(--ui-success-text);
}

#pos-sales .pos-cash-period-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
}

#pos-sales .pos-cash-period-filters-bar .pos-sales-filter-field {
    flex: 1 1 10rem;
    min-width: min(100%, 10rem);
    max-width: 100%;
}

#pos-sales .pos-cash-period-filters-bar .pos-sales-filter-field--date {
    flex: 1.35 1 13.5rem;
    min-width: min(100%, 13.5rem);
}

#pos-sales .pos-cash-card {
    overflow: hidden;
}

#pos-sales .pos-cash-open-shifts-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

#pos-sales .pos-cash-open-shifts-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-success-tint);
    color: var(--ui-success);
    font-size: var(--ui-fs-lg);
    flex-shrink: 0;
}

#pos-sales .pos-cash-open-shifts-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.2rem;
}

#pos-sales .pos-cash-open-shifts-hint {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-sales .pos-cash-open-shifts-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    padding: 0.35rem 0;
}

#pos-sales .pos-cash-open-shifts-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px dashed var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-muted);
}

body[data-theme=dark] #pos-sales .pos-cash-open-shifts-empty {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-cash-open-shifts-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
    flex-shrink: 0;
}

#pos-sales .pos-cash-open-shifts-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

#pos-sales .pos-cash-shift-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.55rem 0.85rem 0.55rem 0.7rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

#pos-sales .pos-cash-shift-badge:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.35);
    background: var(--ui-surface);
}

#pos-sales .pos-cash-shift-badge:focus-visible {
    outline: 0;
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.12);
}

#pos-sales .pos-cash-shift-badge.is-active {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
    box-shadow: 0 0 0 1px var(--ui-success-tint);
}

body[data-theme=dark] #pos-sales .pos-cash-shift-badge {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #pos-sales .pos-cash-shift-badge:hover {
    background: var(--ui-subtle);
}

#pos-sales .pos-cash-shift-badge-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ui-success);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--ui-success-tint);
}

#pos-sales .pos-cash-shift-badge-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

#pos-sales .pos-cash-shift-badge-name {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-body);
    line-height: 1.2;
    white-space: nowrap;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-badge-name {
    color: var(--ui-text);
}

#pos-sales .pos-cash-shift-badge-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#pos-sales .pos-cash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
}

#pos-sales .pos-cash-empty--setup {
    min-height: 18rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-sales .pos-cash-empty--setup {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-cash-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.06);
    font-size: var(--ui-fs-xl);
    margin-bottom: 0.15rem;
}

body[data-theme=dark] #pos-sales .pos-cash-empty-icon {
    background: rgba(var(--ui-primary-rgb), 0.16);
    box-shadow: 0 0 0 1px rgba(var(--ui-primary-rgb), 0.12);
}

#pos-sales .pos-cash-empty-title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-sales .pos-cash-empty-title {
    color: var(--ui-text);
}

#pos-sales .pos-cash-empty-message {
    margin: 0;
    max-width: 24rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
}

#pos-sales .pos-cash-empty-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

#pos-sales .pos-cash-empty-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface);
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    color: var(--ui-muted);
    white-space: nowrap;
}

#pos-sales .pos-cash-empty-step i {
    font-size: var(--ui-fs-2xs);
    opacity: 0.85;
}

body[data-theme=dark] #pos-sales .pos-cash-empty-step {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.35rem;
    padding: 0.55rem 1.15rem;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
}

#pos-sales .pos-cash-shift-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#pos-sales .pos-cash-shift-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] #pos-sales .pos-cash-shift-toolbar {
    border-bottom-color: var(--ui-border);
}

#pos-sales .pos-cash-shift-meta {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    line-height: 1.45;
    max-width: 28rem;
}

#pos-sales .pos-cash-shift-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-sales .pos-cash-shift-actions {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-shift-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-action {
    background: var(--ui-surface);
}

#pos-sales .pos-cash-shift-action:hover {
    text-decoration: none;
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #pos-sales .pos-cash-shift-action:hover {
    box-shadow: var(--ui-shadow-pop);
}

#pos-sales .pos-cash-shift-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.15);
}

#pos-sales .pos-cash-shift-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
}

#pos-sales .pos-cash-shift-action--in .pos-cash-shift-action-icon {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

#pos-sales .pos-cash-shift-action--out .pos-cash-shift-action-icon {
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-cash-shift-action--report .pos-cash-shift-action-icon {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.1);
}

#pos-sales .pos-cash-shift-action--close {
    margin-left: 0.15rem;
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

#pos-sales .pos-cash-shift-action--close .pos-cash-shift-action-icon {
    color: var(--ui-on-primary);
    background: rgba(var(--ui-white-rgb), 0.2);
}

#pos-sales .pos-cash-shift-action--close .pos-cash-shift-action-label {
    color: var(--ui-on-primary);
    font-weight: 600;
}

#pos-sales .pos-cash-shift-action--in:hover {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#pos-sales .pos-cash-shift-action--out:hover {
    border-color: var(--ui-warning);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-cash-shift-action--report:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.24);
    background: rgba(var(--ui-primary-rgb), 0.05);
}

#pos-sales .pos-cash-shift-action--close:hover {
    border-color: var(--ui-primary-hover);
    background: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

#pos-sales .pos-cash-shift-action--close:hover .pos-cash-shift-action-label {
    color: var(--ui-on-primary);
}

#pos-sales .pos-cash-shift-balance {
    padding: 1.1rem 1.15rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-success);
    background: var(--ui-success-tint);
}

#pos-sales .pos-cash-shift-balance-label {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.3rem;
}

#pos-sales .pos-cash-shift-balance-value {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ui-body);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-balance-value {
    color: var(--ui-text);
}

#pos-sales .pos-cash-shift-balance-meta {
    margin-top: 0.35rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-sales .pos-cash-shift-breakdown-heading {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.55rem;
}

#pos-sales .pos-cash-shift-breakdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-breakdown-list {
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-shift-breakdown-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.9rem;
    font-size: var(--ui-fs-sm);
    border-bottom: 1px solid var(--ui-border);
}

#pos-sales .pos-cash-shift-breakdown-list li:last-child {
    border-bottom: 0;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-breakdown-list li {
    border-bottom-color: var(--ui-border);
}

#pos-sales .pos-cash-shift-breakdown-term {
    color: var(--ui-text);
}

#pos-sales .pos-cash-shift-breakdown-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-body);
    white-space: nowrap;
}

body[data-theme=dark] #pos-sales .pos-cash-shift-breakdown-value {
    color: var(--ui-text);
}

#pos-sales .pos-cash-shift-breakdown-list li.is-add .pos-cash-shift-breakdown-value::before {
    content: '+ ';
    color: var(--ui-success);
    font-weight: 500;
}

#pos-sales .pos-cash-shift-breakdown-list li.is-subtract .pos-cash-shift-breakdown-value::before {
    content: '− ';
    color: var(--ui-bronze);
    font-weight: 500;
}

#pos-sales .pos-cash-shift-breakdown-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.65rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-sales .pos-cash-shift-breakdown-note strong {
    color: var(--ui-text);
    font-weight: 500;
}

#pos-sales .pos-cash-movements-card .card-body {
    padding: 1rem 1.15rem 1.1rem;
}

#pos-sales .pos-cash-movements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

#pos-sales .pos-cash-movements-heading {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
}

#pos-sales .pos-cash-movements-scope {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    padding: 0.2rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #pos-sales .pos-cash-movements-scope {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-movements-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#pos-sales .pos-cash-movement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-sales .pos-cash-movement-item {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-movement-item-start {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
}

#pos-sales .pos-cash-movement-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
}

#pos-sales .pos-cash-movement-item--in .pos-cash-movement-type-icon {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

#pos-sales .pos-cash-movement-item--out .pos-cash-movement-type-icon {
    color: var(--ui-warning-text);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-cash-movement-item-copy {
    min-width: 0;
    flex: 1 1 auto;
}

#pos-sales .pos-cash-movement-item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    line-height: 1.3;
}

#pos-sales .pos-cash-movement-type-label {
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-sales .pos-cash-movement-type-label {
    color: var(--ui-text);
}

#pos-sales .pos-cash-movement-time {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
}

#pos-sales .pos-cash-movement-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

#pos-sales .pos-cash-movement-meta-sep {
    opacity: 0.55;
}

#pos-sales .pos-cash-movement-amount {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

#pos-sales .pos-cash-movement-item--in .pos-cash-movement-amount {
    color: var(--ui-success-text);
}

#pos-sales .pos-cash-movement-item--out .pos-cash-movement-amount {
    color: var(--ui-warning-text);
}

body[data-theme=dark] #pos-sales .pos-cash-movement-item--in .pos-cash-movement-amount {
    color: var(--ui-success-text);
}

body[data-theme=dark] #pos-sales .pos-cash-movement-item--out .pos-cash-movement-amount {
    color: var(--ui-warning);
}

#pos-sales .pos-cash-movements-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--ui-muted);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-sales .pos-cash-movements-empty {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-cash-movements-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-muted-rgb), 0.1);
    color: var(--ui-muted);
    font-size: var(--ui-fs-md);
}

#pos-sales .pos-cash-recon-summary {
    border: 0;
    box-shadow: 0 0 0.875rem 0 rgba(var(--ui-black-rgb), 0.05);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-summary {
    box-shadow: 0 0 0.875rem 0 rgba(var(--ui-black-rgb), 0.25);
}

#pos-sales .pos-cash-recon-summary .card-body {
    padding: 1.15rem 1.25rem;
}

#pos-sales .pos-cash-recon-summary-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem;
}

#pos-sales .pos-cash-recon-hero {
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
    padding: 1rem 1.15rem;
    border-radius: var(--ui-radius-md);
    background: rgba(var(--ui-black-rgb), 0.02);
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-hero {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

#pos-sales .pos-cash-recon-hero-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

#pos-sales .pos-cash-recon-hero-value {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ui-body);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-hero-value {
    color: var(--ui-text);
}

#pos-sales .pos-cash-recon-hero-value.is-short {
    color: var(--ui-danger-text);
}

#pos-sales .pos-cash-recon-hero-value.is-over {
    color: var(--ui-warning-text);
}

#pos-sales .pos-cash-recon-hero-value.is-exact {
    color: var(--ui-success-text);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-hero-value.is-short {
    color: var(--ui-danger-soft);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-hero-value.is-over {
    color: var(--ui-warning-text);
}

body[data-theme=dark] #pos-sales .pos-cash-recon-hero-value.is-exact {
    color: var(--ui-success-text);
}

#pos-sales .pos-cash-recon-hero-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.65rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-sales .pos-cash-recon-hero-context strong {
    color: var(--ui-text);
    font-weight: 500;
}

#pos-sales .pos-cash-recon-hero-sep {
    opacity: 0.5;
}

#pos-sales .pos-cash-recon-metrics {
    flex: 1 1 16rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

#pos-sales .pos-cash-recon-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    min-height: 4.5rem;
}

body[data-theme=dark] #pos-sales .pos-cash-recon-metric {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

#pos-sales .pos-cash-recon-metric-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
}

#pos-sales .pos-cash-recon-metric-value {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-body);
    line-height: 1.2;
}

body[data-theme=dark] #pos-sales .pos-cash-recon-metric-value {
    color: var(--ui-text);
}

#pos-sales .pos-cash-recon-metric-hint {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.3;
}

#pos-sales .pos-cash-recon-metric-hint:empty {
    display: none;
}

#pos-sales .pos-cash-shift-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    padding: 0.3em 0.65em;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
}

#pos-sales .pos-cash-shift-status--open {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

#pos-sales .pos-cash-shift-status--closed {
    color: var(--ui-muted);
    background: rgba(var(--ui-muted-rgb), 0.12);
}

#pos-sales .pos-cash-shift-status--open i {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-success);
}

#pos-sales .pos-cash-shifts-table thead th {
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: transparent;
}

#pos-sales .pos-cash-shifts-table tbody td {
    vertical-align: middle;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
}

#pos-sales .pos-cash-shifts-table tbody tr:nth-child(even) td {
    background: rgba(var(--ui-black-rgb), 0.015);
}

body[data-theme=dark] #pos-sales .pos-cash-shifts-table tbody tr:nth-child(even) td {
    background: var(--ui-subtle);
}

#pos-sales .pos-cash-shifts-table tbody tr:hover td {
    background: rgba(var(--ui-primary-rgb), 0.03);
}

body[data-theme=dark] #pos-sales .pos-cash-shifts-table tbody tr:hover td {
    background: var(--ui-subtle);
}

#pos-sales .pos-sales-cashiers-card .card-body {
    padding: 0.5rem 1.25rem 1rem;
}

#pos-sales .pos-sales-cashiers-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#pos-sales .pos-sales-cashier-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--ui-border);
}

#pos-sales .pos-sales-cashier-item:last-child {
    border-bottom: 0;
    padding-bottom: 0.25rem;
}

#pos-sales .pos-sales-cashier-item:first-child {
    padding-top: 0.35rem;
}

#pos-sales .pos-sales-cashier-item--leader {
    position: relative;
    padding-left: 0.65rem;
}

#pos-sales .pos-sales-cashier-item--leader::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 3px;
    border-radius: var(--ui-radius-pill);
    background: linear-gradient(180deg, var(--ui-warning) 0%, var(--ui-warning) 100%);
}

#pos-sales .pos-sales-cashier-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

#pos-sales .pos-sales-cashier-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: hsl(var(--cashier-hue, 215), 42%, 32%);
    background: hsl(var(--cashier-hue, 215), 55%, 92%);
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-avatar {
    color: hsl(var(--cashier-hue, 215), 45%, 88%);
    background: hsl(var(--cashier-hue, 215), 35%, 28%);
}

#pos-sales .pos-sales-cashier-rank {
    position: absolute;
    right: -0.2rem;
    bottom: -0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-muted);
    background: var(--ui-surface);
    border: 1.5px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-rank {
    color: color-mix(in srgb, var(--ui-on-primary) 85%, transparent);
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-sales-cashier-rank--1 {
    color: var(--ui-warning-text);
    border-color: var(--ui-warning);
    background: var(--ui-warning-tint);
}

#pos-sales .pos-sales-cashier-rank--2 {
    color: var(--ui-muted);
    border-color: rgba(var(--ui-info-rgb), 0.5);
    background: var(--ui-subtle);
}

#pos-sales .pos-sales-cashier-rank--3 {
    color: var(--ui-warning-text);
    border-color: rgba(var(--ui-warning-rgb), 0.45);
    background: var(--ui-danger-tint);
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-rank--1 {
    background: var(--ui-warning-tint);
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-rank--2 {
    background: rgba(var(--ui-muted-rgb), 0.16);
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-rank--3 {
    background: rgba(var(--ui-warning-rgb), 0.16);
}

#pos-sales .pos-sales-cashier-info {
    min-width: 0;
    flex: 1;
}

#pos-sales .pos-sales-cashier-name {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-body);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-name {
    color: var(--ui-text);
}

#pos-sales .pos-sales-cashier-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
}

#pos-sales .pos-sales-cashier-bar-track {
    flex: 1;
    height: 0.3rem;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-black-rgb), 0.06);
    overflow: hidden;
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-bar-track {
    background: var(--ui-track);
}

#pos-sales .pos-sales-cashier-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
    min-width: 0.25rem;
    transition: width 0.35s ease;
}

#pos-sales .pos-sales-cashier-item--leader .pos-sales-cashier-bar-fill {
    background: linear-gradient(90deg, var(--ui-primary) 0%, var(--ui-success) 100%);
}

#pos-sales .pos-sales-cashier-share {
    flex-shrink: 0;
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    color: var(--ui-muted);
    min-width: 2rem;
    text-align: right;
}

#pos-sales .pos-sales-cashier-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    text-align: right;
    padding-left: 0.5rem;
}

#pos-sales .pos-sales-cashier-amount {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-body);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

body[data-theme=dark] #pos-sales .pos-sales-cashier-amount {
    color: var(--ui-text);
}

#pos-sales .pos-sales-cashier-count {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    white-space: nowrap;
}

#pos-sales .pos-sales-cashiers-empty,
    #pos-sales .pos-sales-cashiers-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-sales .pos-sales-cashiers-empty,
    body[data-theme=dark] #pos-sales .pos-sales-cashiers-loading {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
}

#pos-sales .pos-sales-cashiers-empty-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-body);
    margin: 0;
}

body[data-theme=dark] #pos-sales .pos-sales-cashiers-empty-title {
    color: var(--ui-text);
}

#pos-sales .pos-sales-cashiers-empty-message {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    max-width: 24rem;
    margin: 0;
    line-height: 1.5;
}

#pos-sales .pos-sales-cashiers-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

.pos-shift-report-modal .pos-shift-report-dialog {
    max-width: 640px;
}

.pos-shift-report-modal .pos-shift-report-content {
    border: 0;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-content {
    background: var(--ui-surface);
}

.pos-shift-report-modal .pos-shift-report-body {
    position: relative;
    padding: 1.35rem 1.35rem 0.5rem;
}

.pos-shift-report-modal .pos-shift-report-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.pos-shift-report-modal .pos-shift-report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
    color: var(--ui-muted);
}

.pos-shift-report-modal .pos-shift-report-hero {
    text-align: center;
    padding: 0.25rem 2rem 1rem;
}

.pos-shift-report-modal .pos-shift-report-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xl);
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-icon {
    background: var(--ui-primary-line);
}

.pos-shift-report-modal .pos-shift-report-title {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-body);
    margin-bottom: 0.35rem;
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-title {
    color: var(--ui-text);
}

.pos-shift-report-modal .pos-shift-report-subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.pos-shift-report-modal .pos-shift-report-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
}

.pos-shift-report-modal .pos-shift-report-meta-item {
    min-width: 0;
}

.pos-shift-report-modal .pos-shift-report-meta-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.2rem;
}

.pos-shift-report-modal .pos-shift-report-meta-label i {
    margin-right: 0.35rem;
    width: 0.85rem;
    text-align: center;
}

.pos-shift-report-modal .pos-shift-report-meta-value {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    word-break: break-word;
}

.pos-shift-report-modal .pos-shift-report-section + .pos-shift-report-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-border-strong);
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-section + .pos-shift-report-section {
    border-top-color: var(--ui-border);
}

.pos-shift-report-modal .pos-shift-report-section-title {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.55rem;
}

.pos-shift-report-modal .pos-shift-report-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: var(--ui-fs-sm);
}

.pos-shift-report-modal .pos-shift-report-row-label {
    color: var(--ui-muted);
    min-width: 0;
}

.pos-shift-report-modal .pos-shift-report-row-value {
    font-weight: 500;
    color: var(--ui-text);
    text-align: right;
    white-space: nowrap;
}

.pos-shift-report-modal .pos-shift-report-row--emphasis .pos-shift-report-row-label,
    .pos-shift-report-modal .pos-shift-report-row--emphasis .pos-shift-report-row-value {
    font-weight: 500;
    color: var(--ui-text);
}

.pos-shift-report-modal .pos-shift-report-row--difference {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--ui-border-strong);
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-row--difference {
    border-top-color: var(--ui-border-strong);
}

.pos-shift-report-modal .pos-shift-report-diff.is-short {
    color: var(--ui-danger);
}

.pos-shift-report-modal .pos-shift-report-diff.is-over {
    color: var(--ui-warning);
}

.pos-shift-report-modal .pos-shift-report-diff.is-exact {
    color: var(--ui-success);
}

.pos-shift-report-modal .pos-shift-report-rows--movements .pos-shift-report-row-label {
    font-size: var(--ui-fs-sm);
}

.pos-shift-report-modal .pos-shift-report-note {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
}

.pos-shift-report-modal .pos-shift-report-note-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

.pos-shift-report-modal .pos-shift-report-note-text {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    white-space: pre-wrap;
}

.pos-shift-report-modal .pos-shift-report-footer {
    border-top: 1px solid var(--ui-border-strong);
    padding: 0.85rem 1.25rem;
    gap: 0.5rem;
}

body[data-theme=dark] .pos-shift-report-modal .pos-shift-report-footer {
    border-top-color: var(--ui-border);
}

.pos-shift-report-modal .pos-shift-report-footer .btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    #pos-sales .pos-sales-filters-bar {
    gap: 0.65rem;
    }

    #pos-sales .pos-sales-filter-field,
            #pos-sales .pos-sales-filter-field--date {
    flex: 1 1 100%;
        min-width: 100%;
    }

    #pos-sales .pos-sales-chart-empty,
            #pos-sales .pos-sales-chart-empty--compact {
    min-height: 240px;
        padding: 1.5rem 1rem;
    }

    #pos-sales .pos-sales-dt-toolbar-secondary {
    flex-direction: column;
        align-items: stretch !important;
    }

    #pos-sales .pos-sales-dt-toolbar-secondary .dataTables_filter,
            #pos-sales .pos-sales-dt-toolbar-secondary .dataTables_length {
    width: 100%;
    }

    #pos-sales .pos-sales-dt-toolbar-secondary .dataTables_filter input {
    width: 100%;
    }

    #pos-sales .pos-cash-period-filters-bar {
    gap: 0.65rem;
    }

    #pos-sales .pos-cash-period-filters-bar .pos-sales-filter-field,
            #pos-sales .pos-cash-period-filters-bar .pos-sales-filter-field--date {
    flex: 1 1 100%;
        min-width: 100%;
    }

    #pos-sales .pos-cash-movement-item {
    align-items: flex-start;
    }

    #pos-sales .pos-cash-movement-amount {
    padding-top: 0.15rem;
    }

    #pos-sales .pos-cash-recon-metrics {
    grid-template-columns: 1fr;
        width: 100%;
    }

    #pos-sales .pos-cash-recon-hero-value {
    font-size: var(--ui-fs-kpi);
    }

    #pos-sales .pos-cash-shift-toolbar {
    flex-direction: column;
        align-items: stretch;
    }

    #pos-sales .pos-cash-shift-actions {
    width: 100%;
        justify-content: stretch;
    }

    #pos-sales .pos-cash-shift-action {
    flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
        min-height: 44px;
    }

    #pos-sales .pos-cash-shift-action--close {
    margin-left: 0;
    }

    #pos-sales .pos-cash-shift-balance-value {
    font-size: var(--ui-fs-kpi);
    }
}

@media (min-width: 768px) {
    #pos-sales .pos-sales-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 1200px) {
    #pos-sales .pos-sales-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

@media (max-width: 479.98px) {
    #pos-sales .pos-sales-kpi-grid .pos-sales-kpi-card {
    flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    #pos-sales .pos-sales-cashier-item {
    flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    #pos-sales .pos-sales-cashier-stats {
    flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 3.1rem;
    }

    #pos-sales .pos-sales-cashier-meta {
    max-width: none;
    }

    .pos-shift-report-modal .pos-shift-report-meta {
    grid-template-columns: 1fr;
    }

    .pos-shift-report-modal .pos-shift-report-footer {
    flex-direction: column-reverse;
        align-items: stretch;
    }

    .pos-shift-report-modal .pos-shift-report-footer .btn {
    width: 100%;
    }
}

/* ---------- Partial: seller/pos/sales/_view_order_modal_styles.php ---------- */
.pos-view-order-modal .pos-view-order-dialog {
    max-width: 680px;
}

.pos-view-order-modal .pos-view-order-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-hover);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-content {
    box-shadow: var(--ui-shadow-pop);
}

.pos-view-order-modal .pos-view-order-body {
    padding: 1.25rem 1.5rem 1.25rem;
}

.pos-view-order-modal .pos-view-order-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
}

.pos-view-order-modal .pos-view-order-hero.modal-header {
    flex-wrap: nowrap;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero.bg-white {
    background-color: var(--ui-surface) !important;
}

.pos-view-order-modal .pos-view-order-hero-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
}

.pos-view-order-modal .pos-view-order-hero-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.75rem;
    width: 100%;
    min-width: 0;
}

.pos-view-order-modal .pos-view-order-hero-id {
    font-size: var(--ui-fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-id {
    color: var(--ui-text);
}

.pos-view-order-modal .pos-view-order-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.pos-view-order-modal .pos-view-order-hero-badges:empty {
    display: none;
}

.pos-view-order-modal .pos-view-order-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 28px;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pos-view-order-modal .pos-view-order-hero-badge i {
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
    opacity: 0.9;
}

.pos-view-order-modal .pos-view-order-hero-badge--success {
    color: var(--ui-success-text);
    background-color: var(--ui-success-tint);
    border-color: var(--ui-success);
}

.pos-view-order-modal .pos-view-order-hero-badge--primary {
    color: var(--ui-info-text);
    background-color: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

.pos-view-order-modal .pos-view-order-hero-badge--info {
    color: var(--ui-success-text);
    background-color: rgba(var(--ui-info-rgb), 0.22);
    border-color: rgba(var(--ui-info-rgb), 0.28);
}

.pos-view-order-modal .pos-view-order-hero-badge--warning {
    color: var(--ui-warning-text);
    background-color: var(--ui-warning-tint);
    border-color: var(--ui-warning);
}

.pos-view-order-modal .pos-view-order-hero-badge--danger {
    color: var(--ui-danger-text);
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

.pos-view-order-modal .pos-view-order-hero-badge--secondary {
    color: var(--ui-body);
    background-color: rgba(var(--ui-muted-rgb), 0.2);
    border-color: rgba(var(--ui-muted-rgb), 0.28);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--success {
    color: var(--ui-success-text);
    background-color: var(--ui-success-tint);
    border-color: var(--ui-success);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--primary {
    color: var(--ui-info-text);
    background-color: var(--ui-primary-line);
    border-color: var(--ui-primary-line);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--info {
    color: var(--ui-info-text);
    background-color: rgba(var(--ui-info-rgb), 0.24);
    border-color: rgba(var(--ui-info-rgb), 0.35);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--warning {
    color: var(--ui-warning-text);
    background-color: var(--ui-warning-tint);
    border-color: var(--ui-warning);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--danger {
    color: var(--ui-danger-text);
    background-color: var(--ui-danger-tint);
    border-color: var(--ui-danger-soft);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-badge--secondary {
    color: color-mix(in srgb, var(--ui-on-primary) 88%, transparent);
    background-color: rgba(var(--ui-muted-rgb), 0.28);
    border-color: var(--ui-border-strong);
}

.pos-view-order-modal .pos-view-order-hero-subline {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
    padding-left: 0.75rem;
    border-left: 1px solid var(--ui-border);
    font-variant-numeric: tabular-nums;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-hero-subline {
    color: var(--ui-muted);
    border-left-color: var(--ui-border-strong);
}

.pos-view-order-modal .pos-view-order-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    margin-bottom: 1.15rem;
}

.pos-view-order-modal .pos-view-order-meta-item {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-meta-item {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-meta-label {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-bottom: 0.15rem;
}

.pos-view-order-modal .pos-view-order-meta-value {
    display: block;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
    word-break: break-word;
}

.pos-view-order-modal .pos-view-order-lines-card,
    .pos-view-order-modal .pos-view-order-refunds-card,
    .pos-view-order-modal .pos-view-order-note-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface);
    margin-bottom: 1rem;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-lines-card,
    body[data-theme=dark] .pos-view-order-modal .pos-view-order-refunds-card,
    body[data-theme=dark] .pos-view-order-modal .pos-view-order-note-card {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-section-title-main {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pos-view-order-modal .pos-view-order-section-title-main i {
    font-size: var(--ui-fs-xs);
    opacity: 0.7;
}

.pos-view-order-modal .pos-view-order-lines-count {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ui-muted);
}

.pos-view-order-modal .pos-view-order-lines {
    padding: 0.15rem 0;
}

.pos-view-order-modal .pos-view-order-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.25rem 5.25rem 5.25rem;
    gap: 0.65rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    transition: background-color 0.15s ease;
}

.pos-view-order-modal .pos-view-order-lines-list .pos-view-order-line:last-child {
    border-bottom: 0;
}

.pos-view-order-modal .pos-view-order-lines-list .pos-view-order-line:hover {
    background: var(--ui-row-hover);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-lines-list .pos-view-order-line:hover {
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-line--head {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 65%, transparent);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-line--head {
    background: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

.pos-view-order-modal .pos-view-order-line--head:hover {
    background: color-mix(in srgb, var(--ui-surface) 65%, transparent);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-line--head:hover {
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-line-qty,
    .pos-view-order-modal .pos-view-order-line-unit,
    .pos-view-order-modal .pos-view-order-line-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pos-view-order-modal .pos-view-order-line-qty {
    text-align: center;
}

.pos-view-order-modal .pos-view-order-line-unit {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

.pos-view-order-modal .pos-view-order-line-total {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-text);
}

.pos-view-order-modal .pos-view-order-line-product {
    min-width: 0;
}

.pos-view-order-modal .pos-view-order-product-title {
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-body);
    word-break: break-word;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-product-title {
    color: var(--ui-text);
}

.pos-view-order-modal .pos-view-order-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.35rem;
}

.pos-view-order-modal .pos-view-order-product-ean {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--ui-muted);
    padding: 0.12rem 0.45rem;
    border-radius: var(--ui-radius-xs);
    background: rgba(var(--ui-black-rgb), 0.04);
    letter-spacing: 0.01em;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-product-ean {
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-body);
    background: var(--ui-track);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-qty-badge {
    color: var(--ui-text);
    background: var(--ui-track);
}

.pos-view-order-modal .pos-view-order-refunded-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-danger);
    padding: 0.12rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
}

.pos-view-order-modal .pos-view-order-totals {
    padding: 0.85rem 1rem 1rem;
    background: var(--ui-subtle);
    border-top: 1px solid var(--ui-border);
}

.pos-view-order-modal .pos-view-order-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: var(--ui-fs-base);
}

.pos-view-order-modal .pos-view-order-total-row > span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.pos-view-order-modal .pos-view-order-total-row--grand {
    margin-top: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

.pos-view-order-modal .pos-view-order-total-row--grand > span:last-child {
    font-weight: 600;
    color: var(--ui-text);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-total-row--grand {
    border-top-color: var(--ui-border-strong);
}

.pos-view-order-modal .pos-view-order-total-row--muted {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.pos-view-order-modal .pos-view-order-total-row--danger {
    color: var(--ui-danger);
}

.pos-view-order-modal .pos-view-order-splits {
    padding: 0.65rem 0.9rem 0.2rem;
}

.pos-view-order-modal .pos-view-order-split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: var(--ui-fs-sm);
}

.pos-view-order-modal .pos-view-order-refund-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--ui-border);
}

.pos-view-order-modal .pos-view-order-refund-item:last-child {
    border-bottom: 0;
}

.pos-view-order-modal .pos-view-order-refund-amount {
    font-weight: 600;
    color: var(--ui-danger);
    white-space: nowrap;
}

.pos-view-order-modal .pos-view-order-note-card {
    padding: 0.75rem 0.9rem;
    font-size: var(--ui-fs-base);
    color: var(--ui-muted);
    font-style: italic;
}

.pos-view-order-modal .pos-view-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--ui-border-strong);
    padding: 0.9rem 1.25rem 1.1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--ui-surface);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer {
    border-top-color: var(--ui-border);
    background: var(--ui-surface);
}

.pos-view-order-modal .pos-view-order-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-muted);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pos-view-order-modal .pos-view-order-close-btn:hover,
    .pos-view-order-modal .pos-view-order-close-btn:focus {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
    box-shadow: none;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-close-btn {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-close-btn:hover,
    body[data-theme=dark] .pos-view-order-modal .pos-view-order-close-btn:focus {
    background: var(--ui-track);
    border-color: var(--ui-border-strong);
}

.pos-view-order-modal .pos-view-order-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.pos-view-order-modal .pos-view-order-footer-toolbar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-toolbar {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-footer-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action {
    background: var(--ui-surface);
}

.pos-view-order-modal .pos-view-order-footer-action:hover,
    .pos-view-order-modal .pos-view-order-footer-action:focus {
    text-decoration: none;
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action:hover,
    body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action:focus {
    box-shadow: var(--ui-shadow-pop);
}

.pos-view-order-modal .pos-view-order-footer-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.15);
}

.pos-view-order-modal .pos-view-order-footer-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-fs-xs);
    flex-shrink: 0;
}

.pos-view-order-modal .pos-view-order-footer-action-label {
    white-space: nowrap;
}

.pos-view-order-modal .pos-view-order-footer-action--orders .pos-view-order-footer-action-icon {
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.1);
}

.pos-view-order-modal .pos-view-order-footer-action--orders:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.24);
    background: rgba(var(--ui-primary-rgb), 0.05);
}

.pos-view-order-modal .pos-view-order-footer-action--receipt .pos-view-order-footer-action-icon {
    color: var(--ui-success-text);
    background: var(--ui-success-tint);
}

.pos-view-order-modal .pos-view-order-footer-action--receipt:hover {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

.pos-view-order-modal .pos-view-order-footer-action--download .pos-view-order-footer-action-icon {
    color: var(--ui-muted);
    background: var(--ui-neutral-tint);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action--download .pos-view-order-footer-action-icon {
    color: var(--ui-text);
    background: var(--ui-track);
}

.pos-view-order-modal .pos-view-order-footer-action--download:hover {
    border-color: rgba(var(--ui-muted-rgb), 0.28);
    background: var(--ui-neutral-tint);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action--download:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

.pos-view-order-modal .pos-view-order-footer-action--refund .pos-view-order-footer-action-icon {
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
}

.pos-view-order-modal .pos-view-order-footer-action--refund:hover {
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

body[data-theme=dark] .pos-view-order-modal .pos-view-order-footer-action--refund:hover {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-soft);
}

@media (max-width: 575.98px) {
    .pos-view-order-modal .pos-view-order-hero-primary {
    flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .pos-view-order-modal .pos-view-order-hero-subline {
    padding-left: 0;
        border-left: 0;
    }

    .pos-view-order-modal .modal-dialog {
    margin: 0.75rem;
    }

    .pos-view-order-modal .pos-view-order-line--head {
    display: none;
    }

    .pos-view-order-modal .pos-view-order-line {
    grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.85rem 1rem;
    }

    .pos-view-order-modal .pos-view-order-line-qty,
            .pos-view-order-modal .pos-view-order-line-unit,
            .pos-view-order-modal .pos-view-order-line-total {
    display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .pos-view-order-modal .pos-view-order-line-qty::before,
            .pos-view-order-modal .pos-view-order-line-unit::before,
            .pos-view-order-modal .pos-view-order-line-total::before {
    content: attr(data-label);
        font-size: var(--ui-fs-xs);
        font-weight: 500;
        color: var(--ui-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .pos-view-order-modal .pos-view-order-line-total {
    padding-top: 0.25rem;
        margin-top: 0.15rem;
        border-top: 1px dashed var(--ui-border);
    }

    .pos-view-order-modal .pos-view-order-footer {
    flex-direction: column;
        align-items: stretch;
        padding: 0.85rem 1rem 1rem;
    }

    .pos-view-order-modal .pos-view-order-close-btn {
    width: 100%;
    }

    .pos-view-order-modal .pos-view-order-footer-actions {
    width: 100%;
        margin-left: 0;
    }

    .pos-view-order-modal .pos-view-order-footer-toolbar {
    display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.4rem;
    }

    .pos-view-order-modal .pos-view-order-footer-action {
    width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

@media (min-width: 576px) {
    .pos-view-order-modal .pos-view-order-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Partial: seller/pos/settings/_styles.php ---------- */
#pos-settings .pos-settings-section-title {
    font-weight: 500;
    color: var(--ui-body);
    margin-bottom: 1rem;
}

body[data-theme=dark] #pos-settings .pos-settings-section-title {
    color: var(--ui-text);
}

#pos-settings .pos-settings-hint {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
}

#pos-settings .pos-locations-card-header {
    padding: 1.25rem 1.25rem 1.125rem;
    border-bottom: 1px solid var(--ui-border);
}

body[data-theme=dark] #pos-settings .pos-locations-card-header {
    border-bottom-color: var(--ui-border);
}

#pos-settings .pos-locations-card-header .pos-settings-section-title {
    margin-bottom: 0.35rem;
}

#pos-settings .pos-locations-card-body {
    padding: 1.25rem;
}

#pos-settings #posLocationsList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#pos-settings .pos-location-card {
    overflow: hidden;
}

#pos-settings .pos-location-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-subtle);
}

body[data-theme=dark] #pos-settings .pos-location-card-header {
    background: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

#pos-settings .pos-location-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

#pos-settings .pos-location-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

#pos-settings .pos-location-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    margin: 0;
}

body[data-theme=dark] #pos-settings .pos-location-title {
    color: var(--ui-text);
}

#pos-settings .pos-location-meta {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#pos-settings .pos-location-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

#pos-settings .pos-location-card-body {
    padding: 0.25rem 1.25rem 1rem;
}

#pos-settings .pos-registers-table {
    margin-bottom: 0;
}

#pos-settings .pos-registers-table thead th {
    white-space: nowrap;
    border-bottom-width: 1px;
    background: transparent;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

#pos-settings .pos-registers-table tbody td {
    vertical-align: middle;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

#pos-settings .pos-registers-empty {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    color: var(--ui-muted);
    padding: 1rem;
    margin-top: 0.5rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
    text-align: center;
}

body[data-theme=dark] #pos-settings .pos-registers-empty {
    color: var(--ui-muted);
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

#pos-settings .pos-locations-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ui-muted);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    line-height: 1.5;
}

body[data-theme=dark] #pos-settings .pos-locations-empty {
    color: var(--ui-muted);
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

#pos-settings .pos-receipt-layout {
    align-items: flex-start;
}

#pos-settings .pos-receipt-settings-col {
    min-width: 0;
}

#pos-settings .pos-receipt-preview-col {
    min-width: 0;
}

#pos-settings .pos-receipt-live-preview {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body[data-theme=dark] #pos-settings .pos-receipt-live-preview {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

#pos-settings .pos-receipt-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

body[data-theme=dark] #pos-settings .pos-receipt-preview-toolbar {
    border-bottom-color: var(--ui-border);
    background: var(--ui-surface);
}

#pos-settings .pos-receipt-preview-title {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-body);
    margin: 0;
}

body[data-theme=dark] #pos-settings .pos-receipt-preview-title {
    color: var(--ui-text);
}

#pos-settings .pos-receipt-preview-frame-wrap {
    position: relative;
    min-height: 360px;
    height: 44vh;
    max-height: 480px;
    background: var(--ui-track);
}

body[data-theme=dark] #pos-settings .pos-receipt-preview-frame-wrap {
    background: rgba(var(--ui-black-rgb), 0.2);
}

#pos-settings #posReceiptPreviewFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--ui-track);
}

body[data-theme=dark] #pos-settings #posReceiptPreviewFrame {
    background: rgba(var(--ui-black-rgb), 0.2);
}

#pos-settings .pos-receipt-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#pos-settings .pos-receipt-preview-loading.is-hidden {
    opacity: 0;
}

#pos-settings .pos-receipt-logo-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#pos-settings .pos-receipt-logo-preview {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    overflow: hidden;
    padding: 0.25rem;
}

body[data-theme=dark] #pos-settings .pos-receipt-logo-preview {
    border-color: var(--ui-border-strong);
    background: var(--ui-subtle);
}

#pos-settings .pos-receipt-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#pos-settings .pos-receipt-logo-empty {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    text-align: center;
    line-height: 1.2;
}

#pos-settings .pos-receipt-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

#pos-settings .pos-receipt-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

#pos-settings .pos-receipt-display-group-title {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ui-muted);
    margin: 0.75rem 0 0.35rem;
}

#pos-settings .pos-receipt-display-group-title:first-child {
    margin-top: 0;
}

#pos-settings .pos-receipt-display-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

#pos-settings .pos-receipt-display-toggles .form-check {
    margin-bottom: 0;
    min-width: 7.5rem;
}

#pos-settings .pos-receipt-text-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

body[data-theme=dark] #pos-settings .pos-receipt-text-panel {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

#pos-settings .pos-receipt-text-panel .accordion-item {
    border: 0;
    background: transparent;
}

#pos-settings .pos-receipt-text-panel .accordion-button {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    padding: 0.75rem 1rem;
    background: transparent;
    box-shadow: none;
}

#pos-settings .pos-receipt-text-panel .accordion-button:not(.collapsed) {
    background: var(--ui-subtle);
    color: inherit;
}

#pos-settings .pos-receipt-text-panel .accordion-body {
    padding: 0 1rem 1rem;
}

#pos-settings .pos-receipt-text-panel .form-label {
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.35rem;
}

#pos-settings .pos-receipt-text-panel textarea {
    font-size: var(--ui-fs-base);
}

#pos-settings .pos-payment-methods-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

#pos-settings .pos-payment-methods-inline .form-check {
    margin-bottom: 0;
}

#pos-settings .pos-settings-page-body {
    padding-bottom: 5rem;
}

#pos-settings .pos-settings-save-bar {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 1040;
    width: calc(100% - 2rem);
    max-width: 520px;
    transform: translateX(-50%) translateY(calc(100% + 1.5rem));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

#pos-settings .pos-settings-save-bar.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#pos-settings .pos-settings-save-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    border-radius: var(--ui-radius-md);
    border: 1px solid rgba(var(--ui-white-rgb), 0.08);
    background: rgba(var(--ui-text-rgb), 0.94);
    color: var(--ui-on-primary);
    box-shadow: var(--ui-shadow-pop);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-theme=dark] #pos-settings .pos-settings-save-bar-inner {
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-pop);
}

#pos-settings .pos-settings-save-bar-text {
    font-size: var(--ui-fs-base);
    line-height: 1.4;
    color: color-mix(in srgb, var(--ui-on-primary) 88%, transparent);
    margin: 0;
}

#pos-settings .pos-settings-save-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
}

#pos-settings .pos-provider-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

#pos-settings .pos-provider-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.4rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

#pos-settings .pos-provider-logo--lg {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.5rem;
    border-radius: var(--ui-radius-md);
}

/* Provider logos are drawn for white: the tile stays the logo background in dark mode too */
body[data-theme=dark] #pos-settings .pos-provider-logo:has(img) {
    background: var(--ui-logo-bg);
    border-color: var(--ui-border-strong);
}

#pos-settings .pos-provider-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#pos-settings .pos-provider-brand-text {
    min-width: 0;
}

#pos-settings .pos-provider-brand-name {
    display: block;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.3;
}

body[data-theme=dark] #pos-settings .pos-provider-brand-name {
    color: var(--ui-text);
}

#pos-settings .pos-provider-brand-desc {
    display: block;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    color: var(--ui-muted);
    margin-top: 0.1rem;
}

#pos-settings .pos-provider-active-card {
    border: 1px solid var(--ui-success);
    border-radius: var(--ui-radius-md);
    background: linear-gradient(180deg, var(--ui-success-tint) 0%, rgba(var(--ui-success-rgb), 0.03) 100%);
    padding: 1.25rem 1.375rem;
    margin-bottom: 1.25rem;
}

body[data-theme=dark] #pos-settings .pos-provider-active-card {
    border-color: var(--ui-success);
    background: linear-gradient(180deg, var(--ui-success-tint) 0%, rgba(var(--ui-success-rgb), 0.04) 100%);
}

#pos-settings .pos-provider-active-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.125rem;
}

#pos-settings .pos-provider-active-eyebrow {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin: 0 0 0.2rem;
}

#pos-settings .pos-provider-active-terminal {
    padding-top: 1rem;
    margin-bottom: 1rem;
    border-top: 1px solid var(--ui-success-tint);
}

#pos-settings .pos-provider-active-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#pos-settings .pos-provider-empty-state {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
    background: var(--ui-subtle);
}

#pos-settings .pos-provider-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

#pos-settings .pos-provider-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#pos-settings .pos-provider-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body[data-theme=dark] #pos-settings .pos-provider-row {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

#pos-settings .pos-provider-row:not(.is-unavailable):not(.is-connected):hover {
    border-color: var(--ui-border-strong);
    box-shadow: 0 2px 8px rgba(var(--ui-ink-rgb), 0.06);
}

body[data-theme=dark] #pos-settings .pos-provider-row:not(.is-unavailable):not(.is-connected):hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-hover);
}

#pos-settings .pos-provider-row.is-connected {
    border-color: var(--ui-success);
    background: rgba(var(--ui-success-rgb), 0.04);
}

body[data-theme=dark] #pos-settings .pos-provider-row.is-connected {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
}

#pos-settings .pos-provider-row.is-unavailable {
    opacity: 0.72;
}

#pos-settings .pos-provider-row.is-unavailable .pos-provider-logo img {
    filter: grayscale(1);
    opacity: 0.75;
}

#pos-settings .pos-provider-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

#pos-settings .pos-provider-connect-btn {
    min-height: 44px;
    min-width: 6.5rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
    box-shadow: 0 1px 2px var(--ui-primary-tint);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

#pos-settings .pos-provider-connect-btn:hover,
    #pos-settings .pos-provider-connect-btn:focus {
    box-shadow: 0 3px 10px var(--ui-primary-line);
    transform: translateY(-1px);
}

#pos-settings .pos-provider-connect-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px var(--ui-primary-line);
}

#pos-settings .pos-provider-action-btn {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    font-weight: 500;
    font-size: var(--ui-fs-sm);
    border-radius: var(--ui-radius-xs);
}

#pos-settings .pos-provider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35em 0.75em;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
}

#pos-settings .pos-provider-badge--muted {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-muted);
}

body[data-theme=dark] #pos-settings .pos-provider-badge--muted {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-muted);
}

#pos-settings .pos-provider-badge--success {
    background: var(--ui-success-tint);
    border: 1px solid var(--ui-success);
    color: var(--ui-success-text);
}

body[data-theme=dark] #pos-settings .pos-provider-badge--success {
    background: var(--ui-success-tint);
    border-color: var(--ui-success);
    color: var(--ui-success);
}

#pos-settings .pos-provider-active-header .pos-provider-badge--success {
    min-height: 2.25rem;
    padding: 0.4em 0.85em;
    font-size: var(--ui-fs-sm);
}

#pos-settings .pos-registers-table .pos-provider-badge {
    min-height: 1.75rem;
    padding: 0.28em 0.65em;
    font-size: var(--ui-fs-xs);
}

#pos-settings .pos-location-title-row .pos-provider-badge {
    min-height: 1.75rem;
    padding: 0.28em 0.65em;
    font-size: var(--ui-fs-xs);
}

@media (min-width: 992px) {
    #pos-settings .pos-receipt-live-preview {
    position: sticky;
        top: 1rem;
    }

    #pos-settings .pos-receipt-preview-frame-wrap {
    min-height: 440px;
        height: 520px;
        max-height: 560px;
    }
}

@media (max-width: 575.98px) {
    #pos-settings .pos-receipt-option-grid {
    grid-template-columns: 1fr;
    }

    #pos-settings .pos-settings-save-bar-inner {
    flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    #pos-settings .pos-settings-save-btn {
    width: 100%;
    }

    #pos-settings .pos-provider-row {
    flex-direction: column;
        align-items: stretch;
    }

    #pos-settings .pos-provider-row-meta {
    margin-left: 0;
        width: 100%;
    }

    #pos-settings .pos-provider-connect-btn {
    width: 100%;
    }
}

/* ---------- Partial: shared/api_credentials_table_styles.php ---------- */
.cd-api-keys-table {
    margin-bottom: 0;
}

.cd-api-keys-table thead th {
    border-bottom-width: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.cd-api-keys-table tbody td {
    vertical-align: middle;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.cd-api-key-name {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.35;
}

.cd-api-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cd-api-token__value {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    background: rgba(var(--ui-muted-rgb), .08);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 5px 10px;
    color: var(--ui-text);
}

.cd-api-token__empty {
    color: var(--ui-muted);
}

.cd-api-date {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.3;
}

.cd-api-date__time {
    display: block;
    margin-top: 2px;
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-muted);
}

/* ---------- Partial: shared/api_pii_status.php ---------- */
.cd-pii-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 1.25rem;
    border-radius: var(--ui-radius);
}

.cd-pii-banner__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
}

.cd-pii-banner__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

.cd-pii-banner__text {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    margin: 0;
    color: inherit;
    opacity: .78;
}

.cd-pii-banner--on {
    background: var(--ui-success-tint);
    border: 1px solid var(--ui-success-tint);
    color: var(--ui-success-text);
}

.cd-pii-banner--on .cd-pii-banner__icon {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.cd-pii-banner--off {
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    color: var(--ui-muted);
}

.cd-pii-banner--off .cd-pii-banner__icon {
    background: var(--ui-track);
}

/* ---------- Partial: shared/mcp_api_teaser.php ---------- */
.cd-mcp-teaser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 1.25rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.cd-mcp-teaser__main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.cd-mcp-teaser__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-sm);
    background: rgba(var(--ui-primary-rgb), .1);
    color: var(--ui-primary);
}

.cd-mcp-teaser__title {
    font-size: var(--ui-fs-base);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

.cd-mcp-teaser__text {
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    margin: 0;
    color: var(--ui-muted);
}

/* ---------- Partial: sub_views/location_wizard_modal.php ---------- */
#locationWizardModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(var(--ui-ink-rgb), 0.14);
}

#locationWizardModal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#locationWizardModal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-text);
}

#locationWizardModal .wizard-title-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.1);
    font-size: var(--ui-fs-base);
}

#locationWizardModal .modal-body {
    background: var(--ui-surface);
    padding: 1.1rem;
}

#locationWizardModal .wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
}

#locationWizardModal .wizard-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

#locationWizardModal .wizard-panel-header {
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.125rem;
}

#locationWizardModal .wizard-panel-title {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-text);
}

#locationWizardModal .wizard-panel-subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.25rem;
    line-height: 1.45;
    max-width: 28rem;
}

#locationWizardModal .wizard-panel-body {
    padding: 1rem 1.125rem 1.125rem;
}

#locationWizardModal .wizard-format-example {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
    background: rgba(var(--ui-primary-rgb), 0.06);
}

#locationWizardModal .wizard-format-example.is-empty {
    border-color: var(--ui-border);
    background: var(--ui-subtle);
}

#locationWizardModal .wizard-format-example-copy {
    min-width: 0;
}

#locationWizardModal .wizard-format-example-label {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.15rem;
}

#locationWizardModal .wizard-format-example-hint {
    display: block;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    color: var(--ui-muted);
}

#locationWizardModal .wizard-format-example-value {
    display: inline-block;
    max-width: 100%;
    padding: 0.35rem 0.65rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locationWizardModal .wizard-settings-block {
    margin-bottom: 1.125rem;
}

#locationWizardModal .wizard-settings-block-title {
    margin: 0 0 0.75rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
}

#locationWizardModal .wizard-start-section-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#locationWizardModal .wizard-clear-parent-btn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-xs);
    color: var(--ui-primary);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

#locationWizardModal .wizard-clear-parent-btn:hover,
    #locationWizardModal .wizard-clear-parent-btn:focus {
    text-decoration: underline;
    color: var(--ui-primary-hover);
}

#locationWizardModal .wizard-clear-parent-btn.is-hidden {
    display: none;
}

#locationWizardModal .wizard-levels-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

#locationWizardModal .wizard-levels-title {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
}

#locationWizardModal .wizard-levels-help {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
    max-width: 18rem;
}

#locationWizardModal #wizardAddLevelBtn {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    font-size: var(--ui-fs-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

#locationWizardModal .wizard-level-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.875rem;
    margin-bottom: 0.625rem;
    background: var(--ui-subtle);
}

#locationWizardModal .wizard-level-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#locationWizardModal .wizard-level-index {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

#locationWizardModal .wizard-level-sample {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
    color: var(--ui-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#locationWizardModal .wizard-remove-level {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--ui-radius-xs);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ui-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    flex-shrink: 0;
}

#locationWizardModal .wizard-remove-level:hover,
    #locationWizardModal .wizard-remove-level:focus {
    background: rgba(var(--ui-danger-rgb), 0.1);
    color: var(--ui-danger);
    border-color: rgba(var(--ui-danger-rgb), 0.2);
    outline: none;
}

#locationWizardModal .wizard-remove-level i {
    font-size: var(--ui-fs-sm);
}

#locationWizardModal .wizard-level-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 0.75rem;
}

#locationWizardModal .wizard-level-field--type {
    grid-column: 1 / -1;
}

#locationWizardModal .wizard-level-field--separator {
    grid-column: 1 / -1;
}

#locationWizardModal .wizard-level-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-text);
}

#locationWizardModal .wizard-level-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.35;
    color: var(--ui-muted);
}

#locationWizardModal .wizard-level-type-toggle .btn {
    min-height: 36px;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

#locationWizardModal .wizard-preview-list {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    max-height: 420px;
    overflow: auto;
    padding: 0.75rem;
    background: var(--ui-subtle);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--ui-fs-sm);
}

#locationWizardModal .wizard-summary-card {
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
    background: rgba(var(--ui-primary-rgb), 0.06);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

#locationWizardModal .wizard-preview-line {
    white-space: nowrap;
    line-height: 1.45;
    padding: 0.15rem 0.3rem;
    border-radius: var(--ui-radius-xs);
}

#locationWizardModal .wizard-preview-line:nth-child(even) {
    background: var(--ui-subtle);
}

#locationWizardModal #wizardCreateBtn {
    min-width: 9rem;
    min-height: 44px;
}

#locationWizardModal .modal-footer {
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
    padding: 0.875rem 1.125rem;
}

body[data-theme=dark] #locationWizardModal .wizard-format-example-value {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

@media (max-width: 991.98px) {
    #locationWizardModal .wizard-layout {
    grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    #locationWizardModal .wizard-level-fields {
    grid-template-columns: 1fr;
    }

    #locationWizardModal .wizard-format-example {
    flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Partial: sub_views/shipping_rules_modal.php ---------- */
#shippingRulesTable tr.rule-row-last-opened {
    background: rgba(var(--ui-primary-rgb), 0.08) !important;
    border-left: 3px solid var(--ui-primary);
}

#shippingRulesTable tr.rule-row-last-opened td {
    border-left: none;
}

body[data-theme=dark] #shippingRulesTable tr.rule-row-last-opened {
    background: rgba(var(--ui-primary-rgb), 0.15) !important;
}

#shippingRuleModal .select2-container {
    z-index: 1065;
}

#shippingRuleModal .select2-dropdown {
    z-index: 1066;
}

.onboarding-shipping-rules-filters .form-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.onboarding-shipping-rules-table-wrap .dataTables_filter {
    padding: 0.75rem 1.25rem 0;
}

.onboarding-shipping-rules-table-wrap .dataTables_filter input {
    min-height: 44px;
    font-size: var(--ui-fs-lg);
}

/* ---------- Partial: sub_views/shipping_rules_simulator.php ---------- */
.shipping-rules-sim-modal .modal-body {
    background: var(--ui-surface);
}

.shipping-rules-sim-header {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
}

.shipping-rules-sim-header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.shipping-rules-sim-header-text {
    min-width: 0;
}

.shipping-rules-sim-header .modal-title {
    margin-bottom: 0.125rem;
    line-height: 1.25;
}

.shipping-rules-sim-header-desc {
    margin-bottom: 0;
    line-height: 1.35;
}

.shipping-rules-sim-header-close {
    flex: 0 0 auto;
    margin: 0;
    margin-left: auto;
}

.shipping-rules-sim-header-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    flex-shrink: 0;
    font-size: var(--ui-fs-lg);
}

.shipping-rules-sim-toolbar {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 1rem 1.25rem;
}

.shipping-rules-sim-input {
    font-size: var(--ui-fs-lg);
    min-height: 48px;
}

.shipping-rules-sim-run-btn {
    min-height: 48px;
    min-width: 8rem;
    font-weight: 500;
}

.shipping-rules-sim-empty-illus {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    font-size: var(--ui-fs-kpi);
}

.shipping-rules-sim-hero {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

.shipping-rules-sim-hero-inner {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--ui-primary-rgb), 0.07) 0%, rgba(var(--ui-primary-rgb), 0.02) 100%);
    border-bottom: 1px solid var(--ui-border);
}

.shipping-rules-sim-hero-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.15);
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

.shipping-rules-sim-hero .hero-label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-muted);
    margin-bottom: 0.2rem;
}

.shipping-rules-sim-hero .hero-value {
    font-size: var(--ui-fs-lg);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
    margin: 0;
}

.shipping-rules-sim-hero .hero-sub {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-top: 0.35rem;
}

.shipping-rules-sim-hero-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
}

.shipping-rules-sim-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    border: 1px solid transparent;
}

.shipping-rules-sim-count.count-applied {
    background: rgba(var(--ui-success-rgb), 0.1);
    color: var(--ui-success);
    border-color: rgba(var(--ui-success-rgb), 0.2);
}

.shipping-rules-sim-count.count-not_matched {
    background: rgba(var(--ui-muted-rgb), 0.08);
    color: var(--ui-muted);
    border-color: var(--ui-border);
}

.shipping-rules-sim-count.count-skipped {
    background: rgba(var(--ui-warning-rgb), 0.08);
    color: var(--ui-warning);
    border-color: rgba(var(--ui-warning-rgb), 0.2);
}

.shipping-rules-sim-stat {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.85rem 1rem;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.shipping-rules-sim-stat .stat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-primary-rgb), 0.08);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
    flex-shrink: 0;
}

.shipping-rules-sim-stat .stat-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.1rem;
}

.shipping-rules-sim-stat .stat-value {
    font-size: var(--ui-fs-base);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.35;
    word-break: break-word;
}

.shipping-rules-sim-rules-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

.shipping-rules-sim-rules-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
}

.shipping-rules-sim-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.shipping-rules-sim-filter-btn {
    border: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ui-radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shipping-rules-sim-filter-btn:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.shipping-rules-sim-filter-btn.active {
    background: rgba(var(--ui-primary-rgb), 0.1);
    border-color: rgba(var(--ui-primary-rgb), 0.35);
    color: var(--ui-primary);
}

.shipping-rules-sim-rules-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shipping-rules-sim-rule-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    border-left-width: 3px;
    transition: box-shadow 0.15s;
    flex-shrink: 0;
}

.shipping-rules-sim-rule-card:hover {
    box-shadow: 0 2px 8px rgba(var(--ui-black-rgb), 0.04);
}

.shipping-rules-sim-rule-card.status-applied {
    border-left-color: var(--ui-success);
}

.shipping-rules-sim-rule-card.status-matched_not_applied {
    border-left-color: var(--ui-warning);
}

.shipping-rules-sim-rule-card.status-not_matched {
    border-left-color: var(--ui-border);
}

.shipping-rules-sim-rule-card.status-skipped_superseded,
.shipping-rules-sim-rule-card.status-skipped_inactive,
.shipping-rules-sim-rule-card.status-skipped_empty {
    border-left-color: var(--ui-border); opacity: 0.9;
}

.shipping-rules-sim-rule-card.is-hidden {
    display: none;
}

.shipping-rules-sim-rule-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.shipping-rules-sim-rule-top .priority-pill {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
}

.shipping-rules-sim-rule-top .rule-body {
    flex: 1; min-width: 0;
}

.shipping-rules-sim-rule-top .rule-name {
    font-weight: 500;
    font-size: var(--ui-fs-md);
    color: var(--ui-text);
    margin-bottom: 0.2rem;
}

.shipping-rules-sim-rule-top .rule-meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.shipping-rules-sim-rule-top .rule-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.shipping-rules-sim-rule-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text);
    overflow: visible;
}

.shipping-rules-sim-rule-reason > span {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.shipping-rules-sim-rule-reason > i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: var(--ui-fs-xs);
}

.shipping-rules-sim-rule-reason.reason-applied {
    background: rgba(var(--ui-success-rgb), 0.06);
}

.shipping-rules-sim-rule-reason.reason-applied > i {
    color: var(--ui-success);
}

.shipping-rules-sim-rule-reason.reason-matched_not_applied {
    background: rgba(var(--ui-warning-rgb), 0.1);
}

.shipping-rules-sim-rule-reason.reason-matched_not_applied > i {
    color: var(--ui-warning);
}

.shipping-rules-sim-rule-reason.reason-not_matched {
    background: rgba(var(--ui-danger-rgb), 0.05);
}

.shipping-rules-sim-rule-reason.reason-not_matched > i {
    color: var(--ui-danger);
}

.shipping-rules-sim-rule-reason.reason-skipped_superseded,
.shipping-rules-sim-rule-reason.reason-skipped_inactive,
.shipping-rules-sim-rule-reason.reason-skipped_empty {
    background: rgba(var(--ui-muted-rgb), 0.05);
    color: var(--ui-muted);
}

.shipping-rules-sim-rule-reason.reason-skipped_superseded > i,
.shipping-rules-sim-rule-reason.reason-skipped_inactive > i,
.shipping-rules-sim-rule-reason.reason-skipped_empty > i {
    color: var(--ui-muted);
}

.shipping-rules-sim-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    padding: 0.35em 0.7em;
    border-radius: var(--ui-radius);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sim-status-applied {
    background: rgba(var(--ui-success-rgb), 0.12); color: var(--ui-success);
}

.sim-status-matched_not_applied {
    background: rgba(var(--ui-warning-rgb), 0.15); color: var(--ui-warning);
}

.sim-status-not_matched {
    background: rgba(var(--ui-muted-rgb), 0.1); color: var(--ui-muted);
}

.sim-status-skipped_superseded,
.sim-status-skipped_inactive,
.sim-status-skipped_empty {
    background: rgba(var(--ui-muted-rgb), 0.06); color: var(--ui-muted);
}

.shipping-rules-sim-rule-conditions {
    border-top: 1px solid var(--ui-border);
    padding: 0.65rem 1rem 0.85rem;
    background: rgba(var(--ui-muted-rgb), 0.03);
}

.shipping-rules-sim-rule-conditions-title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

.shipping-rules-sim-req {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.5rem 0.65rem;
    padding: 0.5rem 0;
    font-size: var(--ui-fs-sm);
    border-bottom: 1px solid var(--ui-border);
}

.shipping-rules-sim-req:last-of-type {
    border-bottom: 0; padding-bottom: 0;
}

.shipping-rules-sim-req .req-icon {
    grid-row: span 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.15rem;
    font-size: var(--ui-fs-xs);
}

.shipping-rules-sim-req.passed .req-icon {
    color: var(--ui-success);
}

.shipping-rules-sim-req.failed .req-icon {
    color: var(--ui-danger);
}

.shipping-rules-sim-req .req-label {
    font-weight: 500;
    color: var(--ui-text);
}

.shipping-rules-sim-req .req-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.25rem;
}

.shipping-rules-sim-req .req-compare-item {
    font-size: var(--ui-fs-xs);
}

.shipping-rules-sim-req .req-compare-item .lbl {
    color: var(--ui-muted);
    margin-right: 0.25rem;
}

.shipping-rules-sim-req .req-compare-item .val {
    font-weight: 500;
    color: var(--ui-text);
}

.shipping-rules-sim-req.failed .req-compare-item.actual .val {
    color: var(--ui-danger);
}

.shipping-rules-sim-footnote {
    margin-top: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.45;
}

.shipping-rules-sim-footnote i {
    color: var(--ui-primary);
}

.shipping-rules-sim-no-rules {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-base);
}

@media (max-width: 575.98px) {
    .shipping-rules-sim-rule-top {
    flex-wrap: wrap;
    }

    .shipping-rules-sim-status {
    margin-left: 2.75rem;
    }
}

/* ---------- Partial: sub_views/stock_import_styles.php ---------- */
body[data-theme=dark] .stock-sections-page .card {
    box-shadow: none;
    border: 1px solid var(--ui-border);
}

body[data-theme=dark] .stock-sections-page .card-header {
    background-color: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] .stock-sections-page .card-footer {
    border-top-color: var(--ui-border);
}

body[data-theme=dark] .stock-sections-page .card-title {
    color: var(--ui-text);
}

body[data-theme=dark] #warehouses_container .btn {
    color: var(--ui-muted);
    border-color: var(--ui-border);
}

body[data-theme=dark] #warehouses_container .btn:hover {
    background-color: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none;
    transform: none;
}

body[data-theme=dark] #warehouses_container .selected-warehouse,
    body[data-theme=dark] #warehouses_container .selected-warehouse:hover {
    background-color: var(--ui-primary-tint) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-primary-line) !important;
}

body[data-theme=dark] .stock-sections-page .table-hover tbody tr:hover {
    background-color: var(--ui-subtle);
}

body[data-theme=dark] .stock-sections-page .table-light,
    body[data-theme=dark] .stock-sections-page .table-light th,
    body[data-theme=dark] .stock-sections-page .table-light td {
    background-color: var(--ui-subtle) !important;
    color: var(--ui-text);
}

body[data-theme=dark] .search-sections-input-group {
    box-shadow: none !important;
    border: 1px solid var(--ui-border);
    background-color: var(--ui-surface);
}

body[data-theme=dark] .search-sections-input-group .input-group-text,
    body[data-theme=dark] .search-sections-input-group .form-control {
    background-color: transparent !important;
    border-color: transparent !important;
}

body[data-theme=dark] .search-sections-input-group .input-group-text {
    color: var(--ui-muted);
}

body[data-theme=dark] #stock_section_navigator a {
    color: var(--ui-muted);
    text-decoration: none;
}

body[data-theme=dark] #stock_section_navigator a:hover {
    color: var(--ui-text);
}

body[data-theme=dark] #stock_section_navigator .text-primary a {
    color: var(--ui-primary) !important;
}

body[data-theme=dark] .stock-sections-page .card-header .float-end i,
    body[data-theme=dark] .stock-sections-page .card-header .cursor-pointer i {
    color: var(--ui-muted);
}

body[data-theme=dark] .stock-sections-page .card-header .float-end i:hover,
    body[data-theme=dark] .stock-sections-page .card-header .cursor-pointer i:hover {
    color: var(--ui-text);
}

body[data-theme=dark] #importExportModal .card[style*="border"] {
    border-color: var(--ui-border) !important;
}

body[data-theme=dark] #importExportModal .text-dark {
    color: var(--ui-text) !important;
}

body[data-theme=dark] #importExportModal .shadow-md {
    box-shadow: none !important;
}

body[data-theme=dark] .settingsNav {
    border-left: 1px solid var(--ui-border);
}

/* ---------- Partial: sub_views/warehouse_insights_modal.php ---------- */
#warehouseInsightsModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(var(--ui-black-rgb), 0.12);
}

#warehouseInsightsModal .modal-header {
    border-bottom: 1px solid rgba(var(--ui-primary-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--ui-primary-rgb), 0.12), rgba(var(--ui-primary-rgb), 0.03));
}

#warehouseInsightsModal .insights-toolbar {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    padding: 0.85rem;
    margin-bottom: 0.9rem;
}

#warehouseInsightsModal .insights-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

#warehouseInsightsModal .insight-tile {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    padding: 0.8rem 0.9rem;
}

#warehouseInsightsModal .insight-kpi {
    cursor: help;
}

#warehouseInsightsModal .insight-label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#warehouseInsightsModal .insight-value {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    margin-top: 0.2rem;
    line-height: 1.2;
}

#warehouseInsightsModal .insights-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

#warehouseInsightsModal .insights-body-left {
    grid-column: 1;
}

#warehouseInsightsModal .insights-body-mid {
    grid-column: 2;
}

#warehouseInsightsModal .insight-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    padding: 0.9rem;
}

#warehouseInsightsModal .insight-panel-title {
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-bottom: 0.75rem;
}

#warehouseInsightsModal .insight-donut {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    position: relative;
    flex-shrink: 0;
}

#warehouseInsightsModal .insight-donut::after {
    content: '';
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ui-surface);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#warehouseInsightsModal .donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: var(--ui-fs-sm);
}

#warehouseInsightsModal .donut-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

#warehouseInsightsModal .donut-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: var(--ui-radius-xs);
    flex-shrink: 0;
}

#warehouseInsightsModal .donut-legend-label {
    color: var(--ui-muted);
    flex: 1;
}

#warehouseInsightsModal .donut-legend-val {
    font-weight: 600;
}

#warehouseInsightsModal .vol-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--ui-fs-sm);
    margin-bottom: 0.35rem;
}

#warehouseInsightsModal .vol-row-label {
    color: var(--ui-muted);
}

#warehouseInsightsModal .vol-row-value {
    font-weight: 600;
}

#warehouseInsightsModal .insight-bar-track {
    width: 100%;
    height: 8px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-text-rgb), 0.12);
    overflow: hidden;
    margin: 0.5rem 0 0.35rem;
}

#warehouseInsightsModal .insight-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ui-primary), rgba(var(--ui-primary-rgb), 0.65));
    border-radius: var(--ui-radius-pill);
    transition: width 0.4s ease;
}

#warehouseInsightsModal .insight-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-fs-sm);
}

#warehouseInsightsModal .insight-table th {
    border-bottom: 2px solid var(--ui-border);
    padding: 0.3rem 0.4rem;
    text-align: left;
}

#warehouseInsightsModal .insight-table td {
    border-bottom: 1px solid var(--ui-border);
    padding: 0.4rem;
    text-align: left;
}

#warehouseInsightsModal .insight-table tr:last-child td {
    border-bottom: 0;
}

#warehouseInsightsModal .health-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

#warehouseInsightsModal .health-item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.7rem 0.8rem;
    background: rgba(var(--ui-text-rgb), 0.02);
}

#warehouseInsightsModal .health-item-label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

#warehouseInsightsModal .health-item-value {
    font-size: var(--ui-fs-lg);
    font-weight: 700;
}

#warehouseInsightsModal .insights-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ui-muted);
}

#warehouseInsightsModal .insights-scope-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ui-border);
}

@media (max-width: 767.98px) {
    #warehouseInsightsModal .insights-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #warehouseInsightsModal .insights-body {
    grid-template-columns: 1fr;
    }

    #warehouseInsightsModal .insights-body-left,
            #warehouseInsightsModal .insights-body-mid {
    grid-column: 1;
    }
}

@media (max-width: 575.98px) {
    #warehouseInsightsModal .insights-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #warehouseInsightsModal .health-grid {
    grid-template-columns: 1fr;
    }
}

/* ---------- Shipping rules: select2 fields (moved from sub_views/shipping_rules_select2_styles.php) ---------- */
.shipping-rule-action-value-field--shipment-method {
    width: 100%;
    min-width: 0;
}

.shipping-rule-select2-container--shipment-method .select2-selection--single {
    border-color: rgba(var(--ui-primary-rgb), 0.22);
    background: var(--ui-surface);
}

.shipping-rule-select2-container--shipment-method.select2-container--focus .select2-selection--single,
.shipping-rule-select2-container--shipment-method.select2-container--open .select2-selection--single {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.12);
}

.shipping-rule-select2-dropdown--shipment-method .select2-search--dropdown {
    background: rgba(var(--ui-primary-rgb), 0.04);
}

.shipping-rule-select2-container .select2-selection--single {
    min-height: 44px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
}

.shipping-rule-select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 0.75rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-base);
}

.shipping-rule-select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 0.5rem;
}

.shipping-rule-select2-dropdown {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--ui-ink-rgb), 0.12);
    overflow: hidden;
    padding: 0;
}

.shipping-rule-select2-dropdown .select2-search--dropdown {
    padding: 0.625rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-subtle);
}

.shipping-rule-select2-dropdown .select2-search__field {
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    font-size: var(--ui-fs-lg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    outline: none;
}

.shipping-rule-select2-dropdown .select2-search__field:focus {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.12);
}

.shipping-rule-select2-dropdown .select2-results > .select2-results__options {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.35rem 0;
}

.shipping-rule-select2-dropdown .select2-results__group {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
    background: transparent;
}

.shipping-rule-select2-dropdown .select2-results__option {
    padding: 0.55rem 0.875rem;
    font-size: var(--ui-fs-base);
    line-height: 1.35;
    color: var(--ui-text);
}

.shipping-rule-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--ui-primary-rgb), 0.1);
    color: var(--ui-text);
}

.shipping-rule-select2-dropdown .select2-results__option[aria-selected=true] {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.shipping-rule-select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background: var(--ui-primary-hover);
    color: var(--ui-on-primary);
}

.shipping-rule-select2-dropdown .select2-results__option[aria-disabled=true] {
    cursor: default;
    opacity: 1;
    color: var(--ui-muted);
    background: transparent;
}

.shipping-rule-select2-dropdown .select2-results__option[aria-disabled=true].select2-results__option--highlighted {
    background: transparent;
    color: var(--ui-muted);
}

body[data-theme=dark] .shipping-rule-select2-container .select2-selection--single {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] .shipping-rule-select2-dropdown {
    background: rgb(var(--bs-modal-bg-rgb, 36, 37, 40));
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-pop);
}

body[data-theme=dark] .shipping-rule-select2-dropdown .select2-search--dropdown {
    background: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] .shipping-rule-select2-dropdown .select2-search__field {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

/* Multi-select chips (channel, country, packaging, etc.) */
#shippingRuleModal .shipping-rule-select2-container--multiple, #forwardingRuleModal .shipping-rule-select2-container--multiple {
    width: 100% !important;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple {
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface);
    cursor: text;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple .select2-selection__rendered, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 !important;
    padding: 0.22rem 0.5rem 0.22rem 0.4rem !important;
    font-size: var(--ui-fs-xs)!important;
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--ui-radius-pill)!important;
    background: rgba(var(--ui-primary-rgb), 0.12) !important;
    color: var(--ui-primary) !important;
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18) !important;
    white-space: nowrap;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__display, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__display {
    padding: 0 !important;
    font-weight: 500;
    color: inherit;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove {
    position: static !important;
    margin: 0 0.1rem 0 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-right: 0 !important;
    color: var(--ui-primary) !important;
    font-size: var(--ui-fs-md)!important;
    font-weight: 600;
    line-height: 1;
    opacity: 0.7;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove:hover, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    background: transparent !important;
    color: var(--ui-danger) !important;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove::after, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove::after {
    display: none !important;
    content: none !important;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-search--inline, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-search--inline {
    flex: 1 1 6rem;
    min-width: 6rem;
}

#shippingRuleModal .shipping-rule-select2-container--multiple .select2-search--inline .select2-search__field, #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-search--inline .select2-search__field {
    min-height: 28px;
    margin-top: 0;
    padding: 0.15rem 0;
    font-size: var(--ui-fs-base);
    color: var(--ui-text);
}

#shippingRuleModal .shipping-rule-select2-container--multiple.select2-container--focus .select2-selection--multiple, #forwardingRuleModal .shipping-rule-select2-container--multiple.select2-container--focus .select2-selection--multiple,
#shippingRuleModal .shipping-rule-select2-container--multiple.select2-container--open .select2-selection--multiple, #forwardingRuleModal .shipping-rule-select2-container--multiple.select2-container--open .select2-selection--multiple {
    border-color: rgba(var(--ui-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.2rem rgba(var(--ui-primary-rgb), 0.12);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection--multiple {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice {
    background: rgba(var(--ui-primary-rgb), 0.16) !important;
    border-color: rgba(var(--ui-primary-rgb), 0.28) !important;
    color: var(--ui-info-text) !important;
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-select2-container--multiple .select2-selection__choice__remove {
    color: var(--ui-info-text) !important;
}

/* ---------- Shipping rules: rule editor dialog (moved from sub_views/shipping_rules_modal_styles.php) ---------- */
/* Shipping rule editor modal */
#shippingRuleModal .modal-content, #forwardingRuleModal .modal-content {
    border: 0;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(var(--ui-ink-rgb), 0.14);
}

#shippingRuleModal .modal-header, #forwardingRuleModal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#shippingRuleModal .shipping-rule-modal-head, #forwardingRuleModal .shipping-rule-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

#shippingRuleModal .shipping-rule-modal-head-copy, #forwardingRuleModal .shipping-rule-modal-head-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

#shippingRuleModal .shipping-rule-modal-icon, #forwardingRuleModal .shipping-rule-modal-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.1);
    font-size: var(--ui-fs-md);
}

#shippingRuleModal .modal-title, #forwardingRuleModal .modal-title {
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-text);
}

#shippingRuleModal .shipping-rule-modal-subtitle, #forwardingRuleModal .shipping-rule-modal-subtitle {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

#shippingRuleModal .shipping_rule_priority, #forwardingRuleModal .shipping_rule_priority {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.1);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
    vertical-align: middle;
}

#shippingRuleModal .modal-body, #forwardingRuleModal .modal-body {
    padding: 1.125rem 1.25rem 1.25rem;
    background: var(--ui-surface);
}

#shippingRuleModal .shipping-rule-meta-panel, #forwardingRuleModal .shipping-rule-meta-panel {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

#shippingRuleModal .shipping-rule-meta-panel .form-label, #forwardingRuleModal .shipping-rule-meta-panel .form-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

#shippingRuleModal .shipping-rule-meta-panel .form-control, #forwardingRuleModal .shipping-rule-meta-panel .form-control {
    min-height: 44px;
    font-size: var(--ui-fs-base);
}

#shippingRuleModal .shipping-rule-note, #forwardingRuleModal .shipping-rule-note {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ui-border);
}

#shippingRuleModal .shipping-rule-note-toggle, #forwardingRuleModal .shipping-rule-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

#shippingRuleModal .shipping-rule-note-toggle:hover, #forwardingRuleModal .shipping-rule-note-toggle:hover,
#shippingRuleModal .shipping-rule-note-toggle:focus, #forwardingRuleModal .shipping-rule-note-toggle:focus {
    color: var(--ui-primary);
    outline: none;
}

#shippingRuleModal .shipping-rule-note-caret, #forwardingRuleModal .shipping-rule-note-caret {
    font-size: var(--ui-fs-2xs);
    transition: transform 0.15s ease;
}

#shippingRuleModal .shipping-rule-note-toggle[aria-expanded="true"] .shipping-rule-note-caret, #forwardingRuleModal .shipping-rule-note-toggle[aria-expanded="true"] .shipping-rule-note-caret {
    transform: rotate(180deg);
}

#shippingRuleModal .shipping-rule-note-field, #forwardingRuleModal .shipping-rule-note-field {
    margin-top: 0.6rem;
}

#shippingRuleModal .shipping-rule-note-field .form-control, #forwardingRuleModal .shipping-rule-note-field .form-control {
    font-size: var(--ui-fs-sm);
    resize: vertical;
}

#shippingRuleModal .shipping-rule-section, #forwardingRuleModal .shipping-rule-section {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

#shippingRuleModal .shipping-rule-section + .shipping-rule-section, #forwardingRuleModal .shipping-rule-section + .shipping-rule-section {
    margin-top: 0.875rem;
}

#shippingRuleModal .shipping-rule-section-header, #forwardingRuleModal .shipping-rule-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-subtle);
}

#shippingRuleModal .shipping-rule-section-title-wrap, #forwardingRuleModal .shipping-rule-section-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

#shippingRuleModal .shipping-rule-section-icon, #forwardingRuleModal .shipping-rule-section-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    background: var(--ui-subtle);
}

#shippingRuleModal .shipping-rule-section-title, #forwardingRuleModal .shipping-rule-section-title {
    margin: 0;
    font-size: var(--ui-fs-base);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ui-text);
}

#shippingRuleModal .shipping-rule-section-lead, #forwardingRuleModal .shipping-rule-section-lead {
    margin: 0.15rem 0 0;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
}

#shippingRuleModal .shipping-rule-match-row, #forwardingRuleModal .shipping-rule-match-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.55rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

#shippingRuleModal .shipping-rule-match-row .form-select, #forwardingRuleModal .shipping-rule-match-row .form-select {
    width: auto;
    min-width: 5.5rem;
    min-height: 32px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: var(--ui-fs-sm);
}

#shippingRuleModal .shipping-rule-section-body, #forwardingRuleModal .shipping-rule-section-body {
    padding: 0.875rem 1rem 1rem;
}

#shippingRuleModal #requirements_wrapper:empty::before, #forwardingRuleModal #requirements_wrapper:empty::before {
    content: attr(data-empty-text);
    display: block;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
}

#shippingRuleModal .shipping-rule-condition-row, #forwardingRuleModal .shipping-rule-condition-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1.15fr) minmax(5.5rem, 0.55fr) minmax(0, 1.2fr) 2.25rem;
    gap: 0.5rem 0.625rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#shippingRuleModal .shipping-rule-condition-row:last-child, #forwardingRuleModal .shipping-rule-condition-row:last-child {
    margin-bottom: 0;
}

#shippingRuleModal .shipping-rule-condition-row:hover, #forwardingRuleModal .shipping-rule-condition-row:hover {
    border-color: rgba(var(--ui-primary-rgb), 0.22);
}

#shippingRuleModal .shipping-rule-condition-row--no-value,
#forwardingRuleModal .shipping-rule-condition-row--no-value {
    grid-template-columns: 3.25rem minmax(0, 1.15fr) minmax(5.5rem, 1.75fr) 2.25rem;
}

#shippingRuleModal .shipping-rule-condition-row--no-value .shipping-rule-condition-field--value,
#forwardingRuleModal .shipping-rule-condition-row--no-value .shipping-rule-condition-field--value {
    display: none;
}

#shippingRuleModal .shipping-rule-logic-label, #forwardingRuleModal .shipping-rule-logic-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ui-primary);
    background: rgba(var(--ui-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.16);
}

#shippingRuleModal .shipping-rule-logic-label--then, #forwardingRuleModal .shipping-rule-logic-label--then {
    color: var(--ui-success);
    background: rgba(var(--ui-success-rgb), 0.1);
    border-color: rgba(var(--ui-success-rgb), 0.2);
}

#shippingRuleModal .shipping-rule-condition-field .form-select, #forwardingRuleModal .shipping-rule-condition-field .form-select,
#shippingRuleModal .shipping-rule-condition-field .form-control, #forwardingRuleModal .shipping-rule-condition-field .form-control {
    min-height: 40px;
    font-size: var(--ui-fs-sm);
}

#shippingRuleModal .shipping-rule-condition-remove, #forwardingRuleModal .shipping-rule-condition-remove {
    flex-shrink: 0;
}

#shippingRuleModal .shipping-rule-action-block, #forwardingRuleModal .shipping-rule-action-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#shippingRuleModal .shipping-rule-action-row,
#forwardingRuleModal .shipping-rule-action-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(8.5rem, 0.75fr) minmax(0, 1.65fr);
    gap: 0.625rem;
    align-items: center;
}

#forwardingRuleModal .forwarding-rule-action-row {
    grid-template-columns: 3.25rem minmax(8.5rem, 0.75fr) minmax(0, 1.65fr);
    align-items: start;
}

#forwardingRuleModal .forwarding-rule-action-row .form-label {
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    color: var(--ui-muted);
    margin-bottom: 0.35rem;
}

#shippingRuleModal .shipping-rule-action-field .form-select, #forwardingRuleModal .shipping-rule-action-field .form-select,
#shippingRuleModal .shipping-rule-action-field .form-control, #forwardingRuleModal .shipping-rule-action-field .form-control {
    min-height: 44px;
    font-size: var(--ui-fs-base);
}

#shippingRuleModal .shipping-rule-action-field--value, #forwardingRuleModal .shipping-rule-action-field--value {
    min-width: 0;
}

#shippingRuleModal .shipping-rule-pair-fields, #forwardingRuleModal .shipping-rule-pair-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

#shippingRuleModal .shipping-rule-pair-fields .form-control, #forwardingRuleModal .shipping-rule-pair-fields .form-control {
    min-width: 0;
    flex: 1 1 0;
}

#shippingRuleModal .shipping-rule-pair-fields--add-product .shipping-rule-add-product-qty,
#forwardingRuleModal .shipping-rule-pair-fields--add-product .shipping-rule-add-product-qty {
    flex: 0 0 5.5rem;
    max-width: 5.5rem;
}

#shippingRuleModal .shipping-rule-pair-separator, #forwardingRuleModal .shipping-rule-pair-separator {
    flex: 0 0 auto;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1;
}

#shippingRuleModal .shipping-rule-action-value-field--shipment-method, #forwardingRuleModal .shipping-rule-action-value-field--shipment-method {
    width: 100%;
    min-width: 0;
}

#shippingRuleModal .shipping-rule-select2-wrap, #forwardingRuleModal .shipping-rule-select2-wrap {
    width: 100%;
    min-width: 0;
}

#shippingRuleModal .shipping-rule-select2-container--shipment-method, #forwardingRuleModal .shipping-rule-select2-container--shipment-method {
    width: 100% !important;
}

#shippingRuleModal .shipping-rule-action-hint, #forwardingRuleModal .shipping-rule-action-hint {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
    background: rgba(var(--ui-primary-rgb), 0.05);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.12);
}

#shippingRuleModal #shippingRuleActionDescription, #forwardingRuleModal #shippingRuleActionDescription {
    display: block;
    white-space: normal;
}

#shippingRuleModal .shipping-rule-apply-all, #forwardingRuleModal .shipping-rule-apply-all {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-primary-rgb), 0.04);
}

#shippingRuleModal .shipping-rule-apply-all .form-check, #forwardingRuleModal .shipping-rule-apply-all .form-check {
    padding-left: 2.5rem;
    min-height: 1.5rem;
}

#shippingRuleModal .shipping-rule-apply-all .form-check-input, #forwardingRuleModal .shipping-rule-apply-all .form-check-input {
    margin-left: -2.5rem;
    cursor: pointer;
}

#shippingRuleModal .shipping-rule-apply-all .form-check-label, #forwardingRuleModal .shipping-rule-apply-all .form-check-label {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-text);
    cursor: pointer;
}

#shippingRuleModal .shipping-rule-apply-all-help, #forwardingRuleModal .shipping-rule-apply-all-help {
    padding-left: 2.5rem;
    font-size: var(--ui-fs-xs);
    line-height: 1.45;
    color: var(--ui-muted);
}

#shippingRuleModal .shipping-rule-action-hint i, #forwardingRuleModal .shipping-rule-action-hint i {
    color: var(--ui-primary);
}

#shippingRuleModal .modal-footer, #forwardingRuleModal .modal-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

#shippingRuleModal .modal-footer .btn, #forwardingRuleModal .modal-footer .btn {
    min-height: 44px;
    padding-inline: 1.125rem;
}

#shippingRuleModal .bootstrap-tagsinput, #forwardingRuleModal .bootstrap-tagsinput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-xs);
    box-shadow: none;
}

#shippingRuleModal .bootstrap-tagsinput .tag, #forwardingRuleModal .bootstrap-tagsinput .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.22rem 0.5rem 0.22rem 0.55rem;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-primary-rgb), 0.12);
    color: var(--ui-primary);
    border: 1px solid rgba(var(--ui-primary-rgb), 0.18);
}

#shippingRuleModal .bootstrap-tagsinput .tag [data-role="remove"], #forwardingRuleModal .bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 0;
    padding: 0;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    line-height: 1;
    opacity: 0.7;
}

#shippingRuleModal .bootstrap-tagsinput .tag [data-role="remove"]:hover, #forwardingRuleModal .bootstrap-tagsinput .tag [data-role="remove"]:hover {
    opacity: 1;
    color: var(--ui-danger);
}

#shippingRuleModal .bootstrap-tagsinput input, #forwardingRuleModal .bootstrap-tagsinput input {
    flex: 1 1 6rem;
    min-width: 6rem;
    min-height: 28px;
    margin: 0;
    padding: 0.15rem 0;
    font-size: var(--ui-fs-base);
    border: 0;
    box-shadow: none;
    background: transparent;
}

body[data-theme=dark] #shippingRuleModal .modal-content,
body[data-theme=dark] #forwardingRuleModal .modal-content,
body[data-theme=dark] #shippingRuleModal .modal-header,
body[data-theme=dark] #forwardingRuleModal .modal-header,
body[data-theme=dark] #shippingRuleModal .modal-footer,
body[data-theme=dark] #forwardingRuleModal .modal-footer,
body[data-theme=dark] #shippingRuleModal .shipping-rule-meta-panel,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-meta-panel,
body[data-theme=dark] #shippingRuleModal .shipping-rule-section,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-section {
    background: var(--ui-surface);
}

body[data-theme=dark] #shippingRuleModal .modal-body,
body[data-theme=dark] #forwardingRuleModal .modal-body {
    background: var(--ui-surface);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-section-header,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-section-header {
    background: var(--ui-subtle);
    border-bottom-color: var(--ui-border);
}

body[data-theme=dark] #shippingRuleModal .modal-title,
body[data-theme=dark] #forwardingRuleModal .modal-title {
    color: var(--ui-text);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-modal-subtitle,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-modal-subtitle,
body[data-theme=dark] #shippingRuleModal .shipping-rule-section-lead,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-section-lead,
body[data-theme=dark] #shippingRuleModal .shipping-rule-match-row,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-match-row,
body[data-theme=dark] #shippingRuleModal .form-text,
body[data-theme=dark] #forwardingRuleModal .form-text {
    color: var(--ui-muted);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-section-title,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-section-title {
    color: var(--ui-text);
}

body[data-theme=dark] #shippingRuleModal .form-control,
body[data-theme=dark] #shippingRuleModal .form-select,
body[data-theme=dark] #forwardingRuleModal .form-control,
body[data-theme=dark] #forwardingRuleModal .form-select {
    background-color: var(--cd-surface-input, var(--bs-input-bg, var(--ui-subtle))) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

body[data-theme=dark] #shippingRuleModal .form-control:focus,
body[data-theme=dark] #shippingRuleModal .form-select:focus,
body[data-theme=dark] #forwardingRuleModal .form-control:focus,
body[data-theme=dark] #forwardingRuleModal .form-select:focus {
    background-color: var(--cd-surface-input, var(--bs-input-bg, var(--ui-subtle))) !important;
    border-color: rgba(var(--ui-primary-rgb), 0.45) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--ui-primary-rgb), 0.12) !important;
    color: var(--ui-text) !important;
}

body[data-theme=dark] #shippingRuleModal .bootstrap-tagsinput,
body[data-theme=dark] #forwardingRuleModal .bootstrap-tagsinput {
    background: var(--cd-surface-input, var(--bs-input-bg, var(--ui-subtle)));
    border-color: var(--ui-border-strong);
}

body[data-theme=dark] #shippingRuleModal .bootstrap-tagsinput input,
body[data-theme=dark] #forwardingRuleModal .bootstrap-tagsinput input {
    color: var(--ui-text);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-condition-row,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-condition-row {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-logic-label,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-logic-label {
    color: var(--ui-info-text);
    background: rgba(var(--ui-primary-rgb), 0.18);
    border-color: rgba(var(--ui-primary-rgb), 0.32);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-logic-label--then,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-logic-label--then {
    color: var(--ui-success-text);
    background: rgba(var(--ui-success-rgb), 0.18);
    border-color: rgba(var(--ui-success-rgb), 0.32);
}

body[data-theme=dark] #shippingRuleModal #requirements_wrapper:empty::before,
body[data-theme=dark] #forwardingRuleModal #requirements_wrapper:empty::before {
    background: var(--ui-subtle);
    border-color: var(--ui-border-strong);
    color: var(--ui-muted);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-action-hint,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-action-hint {
    background: rgba(var(--ui-primary-rgb), 0.1);
    border-color: rgba(var(--ui-primary-rgb), 0.22);
    color: var(--ui-body);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-apply-all,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-apply-all {
    background: rgba(var(--ui-primary-rgb), 0.08);
    border-color: rgba(var(--ui-primary-rgb), 0.18);
}

body[data-theme=dark] #shippingRuleModal .shipping-rule-action-hint i,
body[data-theme=dark] #forwardingRuleModal .shipping-rule-action-hint i {
    color: var(--ui-info-text);
}

@media (max-width: 767.98px) {
    #shippingRuleModal .shipping-rule-condition-row, #forwardingRuleModal .shipping-rule-condition-row,
    #shippingRuleModal .shipping-rule-condition-row--no-value, #forwardingRuleModal .shipping-rule-condition-row--no-value,
    #shippingRuleModal .shipping-rule-action-row, #forwardingRuleModal .shipping-rule-action-row {
grid-template-columns: 1fr;
    }

    #shippingRuleModal .shipping-rule-logic-label, #forwardingRuleModal .shipping-rule-logic-label {
justify-self: start;
    }

    #shippingRuleModal .shipping-rule-condition-remove, #forwardingRuleModal .shipping-rule-condition-remove {
justify-self: end;
    }
}

/* Phones: the header button squeezed the title and match row into a narrow column, so drop it below */
@media (max-width: 575.98px) {
    #shippingRuleModal .shipping-rule-section-header, #forwardingRuleModal .shipping-rule-section-header {
flex-wrap: wrap;
    }

    #shippingRuleModal .shipping-rule-section-header > .btn, #forwardingRuleModal .shipping-rule-section-header > .btn {
margin-left: 2.375rem;
    }
}

/* ---------- Sidebar menu favourites (moved from general/partials/sidebar_menu_favorites.css.php) ---------- */
/* Menu page favorites */
#sidebar .sidebar-nav > .sidebar-item {
    position: relative;
}

#sidebar .sidebar-nav .sidebar-dropdown > .sidebar-item {
    position: relative;
}

body:not([data-sidebar-behavior=compact]) .sidebar-nav .sidebar-link.menu-fav-has-toggle {
    padding-right: 2rem;
}

.menu-fav-toggle {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: 3;
    width: 28px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}

.sidebar-dropdown .menu-fav-toggle {
    height: 36px;
    right: 4px;
}

.sidebar-item:hover > .menu-fav-toggle,
.sidebar-item:focus-within > .menu-fav-toggle,
.menu-fav-toggle.is-favorite,
.menu-fav-toggle:focus-visible {
    opacity: 1;
}

.menu-fav-toggle i {
    font-size: var(--ui-fs-md);
    line-height: 1;
}

.menu-fav-toggle:hover,
.menu-fav-toggle.is-favorite {
    color: var(--ui-gold);
}

.menu-fav-toggle.is-favorite i {
    filter: drop-shadow(0 0 4px rgba(var(--ui-warning-rgb), 0.45));
}

.menu-fav-toggle:active {
    transform: scale(0.9);
}

.menu-favorites-empty-hint {
    pointer-events: none;
    opacity: 0.62;
    font-weight: 400 !important;
    font-size: var(--ui-fs-sm)!important;
}

#menu-favorites-header .sidebar-section-icon {
    color: var(--ui-gold);
}

body[data-theme=dark] .menu-fav-toggle.is-favorite,
body[data-theme=dark] .menu-fav-toggle:hover {
    color: var(--ui-warning-text);
}

body[data-sidebar-behavior=compact] .menu-fav-toggle,
body[data-sidebar-behavior=compact] .menu-favorites-empty {
    display: none !important;
}

body[data-sidebar-behavior=compact] #menu-favorites-header.menu-favorites-header-empty {
    display: none !important;
}

.onboarding-shipping-rules-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border-strong);
    background: var(--ui-subtle);
}

/* ---------- Keyframes restored from the original page CSS ---------- */
@keyframes ai-chat-glow-fade {
        0% { opacity: 0; }
        4% { opacity: 1; }
        94% { opacity: 1; }
        100% { opacity: 0; }
    }

/* ---------- B2B orders: approvals table scrolls inside its card (style.css clips the card for its corners) ---------- */
.b2b-approvals-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Approve / reject as icon buttons below 1700px: with their labels the actions sat past the card edge
   (title + aria-label still name them) */
@media (max-width: 1699.98px) {
    .b2b-approvals-table-wrap .b2b-icon-text-btn {
        width: max(2.25rem, var(--ui-tap-min, 0px));
        padding-inline: 0;
    }

    .b2b-approvals-table-wrap .b2b-icon-text-btn > span {
        display: none;
    }

    .b2b-approvals-table-wrap .b2b-icon-text-btn > i {
        font-size: var(--ui-fs-md);
    }
}

/* Error monitor header wraps on narrow screens instead of running off the right edge */
.ui-page-crm-error-monitor .display-title {
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .ui-page-crm-error-monitor .display-title {
        font-size: var(--ui-fs-xl);
    }

    .ui-page-crm-error-monitor .settings-btn {
        margin-left: auto;
    }
}

/* Connect a sales channel: long product-type badges wrap inside the dialog */
#select_api_modal .badge {
    white-space: normal;
    text-align: left;
}

/* Batches (FC + seller): sync status and resync button stack on phones so both labels stay readable */
@media (max-width: 575.98px) {
    .batch-sync-toolbar {
        flex-direction: column;
    }

    .batch-sync-toolbar .batch-sync-status,
    .batch-sync-toolbar .btn {
        width: 100%;
    }
}

/* Messages: "no messages yet" preview reads as secondary text, not near-invisible (style.css made it too faint) */
#messages-page .chat_ib-preview--empty {
    color: var(--ui-muted) !important;
}

/* CRM stock queue: refresh button keeps icon and label on one line, as tall as the period select */
.ui-page-crm-stock-queue-analytics .sq-refresh-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    min-height: var(--ui-control-h);
}

/* CRM ticket: the "upcoming week" shortcut is as tall as the deadline field next to it */
.st-mgmt-deadline-row {
    align-items: stretch;
}

/* B2B orders toolbar: legacy style.css pins its buttons to 2rem; they match the other toolbar controls */
.b2b-orders-dt-toolbar .dt-buttons > .btn,
.b2b-orders-dt-toolbar .dt-buttons > .dt-button,
.b2b-orders-dt-toolbar .dt-buttons > .btn-group > .btn {
    height: auto;
    min-height: var(--ui-control-h);
}

/* Order / label / CRM user dialogs on phones: the action row wraps instead of pushing
   "Meer acties" past the panel edge (legacy style.css kept it on one row) */
@media (max-width: 767.98px) {
    .open-order-modal-actions:not(.handle-order-actions) {
        flex-wrap: wrap;
    }

    .open-order-modal-actions:not(.handle-order-actions) > .btn,
    .open-order-modal-actions:not(.handle-order-actions) > .dropdown {
        flex: 1 1 auto;
    }

    .open-order-modal-actions:not(.handle-order-actions) > .dropdown > .dropdown-toggle {
        width: 100%;
    }
}

/* Onboarding step toolbar on phones: "Volgende: …" got wider than the space next to "Terug" and
   covered it; the row wraps and the next step takes the full width */
@media (max-width: 575.98px) {
    .onboarding-step-toolbar {
        flex-wrap: wrap;
    }

    .onboarding-step-toolbar-end {
        flex: 1 1 100%;
        flex-shrink: 1;
        min-width: 0;
    }

    .onboarding-step-toolbar-end {
        flex-wrap: wrap;
    }

    .onboarding-step-toolbar-end > .btn {
        flex: 1 1 100%;
    }

    .onboarding-step-toolbar-continue {
        min-width: 0;
        white-space: normal;
    }
}

/* Pick screen bin buttons: the label inherited the centred card text and floated mid-button */
.pick-bin-card .pick-bin-label {
    text-align: left;
}

/* ---------- Product modal, PIM description editor and delivery details (moved from style.css, 31013f66e) ---------- */
/* Product modal — KPI cards: label + tinted icon on top, one big number below */
#productModal .product-kpi-card {
	height: calc(100% - var(--ui-space-4));
	margin-bottom: var(--ui-space-4);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: none;
	background: var(--ui-surface);
}

#productModal .product-kpi-card .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--ui-space-4) var(--ui-space-5);
}

#productModal .product-kpi-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ui-space-3);
	margin-bottom: var(--ui-space-2);
}

#productModal .product-kpi-label {
	font-size: var(--ui-fs-sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--ui-muted);
	padding-top: 2px;
}

#productModal .product-kpi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--ui-radius-sm);
	font-size: 0.9rem;
	background: var(--ui-tone-soft);
	color: var(--ui-tone-text);
	transition: background var(--ui-ease), box-shadow var(--ui-ease);
}

#productModal .product-kpi-icon--primary { --ui-tone-soft: var(--ui-primary-tint); --ui-tone-text: var(--ui-primary); }
#productModal .product-kpi-icon--success { --ui-tone-soft: var(--ui-success-tint); --ui-tone-text: var(--ui-success-text); }
#productModal .product-kpi-icon--warning { --ui-tone-soft: var(--ui-warning-tint); --ui-tone-text: var(--ui-warning-text); }

#productModal .product-kpi-icon--action {
	cursor: pointer;
}

#productModal .product-kpi-icon--action:hover,
#productModal .product-kpi-icon--action[aria-expanded="true"] {
	box-shadow: inset 0 0 0 1px currentColor;
}

#productModal .product-kpi-icon--action:focus-visible {
	outline: none;
	box-shadow: var(--ui-focus-ring);
}

#productModal .product-kpi-value {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ui-text);
	font-variant-numeric: tabular-nums;
}

#productModal .product-kpi-breakdown {
	display: flex;
	flex-direction: column;
}

#productModal .product-kpi-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ui-space-3);
	padding: 6px 0;
	border-bottom: 1px dashed var(--ui-border);
	cursor: default;
}

#productModal .product-kpi-row:first-child { padding-top: 0; }
#productModal .product-kpi-row:last-child { padding-bottom: 0; border-bottom: 0; }

#productModal .product-kpi-row-label {
	font-size: var(--ui-fs-sm);
	color: var(--ui-muted);
}

#productModal .product-kpi-row-value {
	font-size: var(--ui-fs-md);
	font-weight: 600;
	color: var(--ui-text);
	font-variant-numeric: tabular-nums;
}

#productModal .product-kpi-value.is-negative,
#productModal .product-kpi-row-value.is-negative {
	color: var(--ui-danger-text);
}

/* Product modal — tabs and their table read as one card */
#productModal .product-tabs-card,
#productModal .col-lg-9 > .tab {
	margin-bottom: var(--ui-space-4);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	overflow: hidden;
}

#productModal .product-tabs-wrapper {
	padding: 0 var(--ui-space-4);
	border-bottom: 1px solid var(--ui-border);
	background: var(--ui-surface);
}

#productModal .product-tabs-nav,
#productModal .product-tabs-nav .nav-item {
	border: 0 !important;
	background: transparent !important;
}

#productModal .product-tabs-nav .nav-item {
	flex: 0 0 auto;
}

#productModal .product-tabs-nav .nav-link {
	position: relative;
	min-height: 46px;
	padding: 0 var(--ui-space-3) !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	font-size: var(--ui-fs-md);
	font-weight: 500;
	color: var(--ui-muted) !important;
	box-shadow: none !important;
}

#productModal .product-tabs-nav .nav-link:hover {
	color: var(--ui-text) !important;
}

#productModal .product-tabs-nav .nav-link.active {
	font-weight: 600;
	color: var(--ui-primary) !important;
}

#productModal .product-tabs-nav .nav-link.active::after {
	content: "";
	position: absolute;
	left: var(--ui-space-3);
	right: var(--ui-space-3);
	bottom: 0; /* inside the link: the scrolling tab row clips anything below its edge */
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--ui-primary);
}

#productModal .product-inventory-tabs {
	margin-top: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ui-surface) !important;
}

#productModal .product-inventory-tabs .tab-content {
	padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-2);
	border: 0;
}

#productModal .product-inventory-tabs .dataTables_info {
	padding-top: var(--ui-space-3);
	font-size: var(--ui-fs-sm);
	color: var(--ui-muted);
}

/* Product modal — channels table: text columns left, controls centred */
#productModal #channels_table thead th {
	text-align: left;
}

#productModal #channels_table thead th:first-child,
#productModal #channels_table thead th:last-child {
	text-align: center;
}

#productModal #channels_table .product-modal-table-cell:not(.product-modal-table-cell--sync):not(.product-modal-table-cell--action) {
	text-align: left;
}

#productModal .product-modal-channel-name {
	font-size: var(--ui-fs-md);
	color: var(--ui-text);
	max-width: 11rem; /* wider pushed the Actions column out of the modal; the full name is in the title */
}

#productModal .product-modal-stock-levels--channels {
	gap: var(--ui-space-4);
}

#productModal .product-modal-stock-levels--channels .product-modal-stock-level {
	gap: 6px;
}

#productModal .product-modal-stock-levels--channels .product-modal-stock-level + .product-modal-stock-level::before {
	content: none;
}

#productModal .product-modal-stock-levels--channels .product-modal-stock-level-label {
	font-size: var(--ui-fs-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ui-muted);
}

#productModal .product-modal-stock-levels--channels .badge {
	font-size: var(--ui-fs-sm) !important;
	min-width: 1.75rem;
	border-radius: var(--ui-radius-pill);
}

#productModal .product-modal-stock-levels--channels .badge-primary {
	background: var(--ui-primary-tint);
	color: var(--ui-primary);
}

#productModal .product-modal-stock-badge--negative,
#productModal .product-modal-stock-levels--channels .badge.product-modal-stock-badge--negative {
	background: var(--ui-danger-tint) !important;
	color: var(--ui-danger-text) !important;
}

#productModal .product-modal-stock-levels--channels .product-modal-table-empty {
	font-size: var(--ui-fs-md);
	color: var(--ui-faint);
}

/* Product modal — side panel facts */
#productModal .product-facts-card {
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: none;
	background: var(--ui-surface);
}

#productModal .product-facts-card .card-body {
	padding: var(--ui-space-2) var(--ui-space-4);
}

#productModal .product-facts {
	display: flex;
	flex-direction: column;
}

#productModal .product-facts--details {
	border-top: 1px solid var(--ui-border);
}

#productModal .product-fact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ui-space-2);
	padding: 10px 0;
}

#productModal .product-fact + .product-fact {
	border-top: 1px dashed var(--ui-border);
}

#productModal .product-fact-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#productModal .product-fact-label {
	font-size: var(--ui-fs-xs);
	font-weight: 500;
	color: var(--ui-muted);
}

#productModal .product-fact-value {
	font-size: var(--ui-fs-md);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ui-text);
	overflow-wrap: anywhere;
}

#productModal .product-fact-value--code {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

#productModal .product-fact-empty {
	font-weight: 400;
	color: var(--ui-faint);
}

#productModal .product-fact-actions {
	display: flex;
	flex-shrink: 0;
	gap: 2px;
}

#productModal .product-fact-actions .cd-icon-btn {
	width: 1.85rem;
	height: 1.85rem;
	color: var(--ui-faint);
}

#productModal .product-fact-actions .cd-icon-btn:hover,
#productModal .product-fact-actions .cd-icon-btn:focus-visible {
	color: var(--ui-text);
}

/* Product modal (FC) — key/value spec list, label left and value right, grouped by dividers */
#productModal .product-facts-card + .product-facts-card {
	margin-top: var(--ui-space-4);
}

#productModal .product-facts-card .product-spec-title {
	margin: var(--ui-space-2) 0 var(--ui-space-1);
	font-size: var(--ui-fs-lg);
	font-weight: 600;
	color: var(--ui-text);
}

#productModal .product-spec-group {
	padding: var(--ui-space-1) 0;
}

#productModal .product-spec-group + .product-spec-group {
	border-top: 1px solid var(--ui-border);
}

#productModal .product-spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ui-space-3);
	min-height: 2rem;
	padding: 3px 0;
}

#productModal .product-spec-row.d-none {
	display: none !important;
}

#productModal .product-spec-label {
	flex-shrink: 0;
	max-width: 50%;
	font-size: var(--ui-fs-sm);
	line-height: 1.35;
	color: var(--ui-muted);
}

#productModal .product-spec-value {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	min-width: 0;
	font-size: var(--ui-fs-base);
	font-weight: 600;
	text-align: right;
	color: var(--ui-text);
	overflow-wrap: anywhere;
}

#productModal .product-spec-value--num {
	font-variant-numeric: tabular-nums;
}

#productModal .product-spec-value a {
	color: var(--ui-primary);
}

#productModal .product-spec-print {
	width: 1.75rem;
	height: 1.75rem;
	margin-right: -6px;
	color: var(--ui-faint);
}

#productModal .product-spec-print:hover,
#productModal .product-spec-print:focus-visible {
	color: var(--ui-text);
}

#productModal .product-spec-select.form-select {
	width: auto;
	min-height: 0;
	height: auto;
	padding: 2px 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none;
	font-size: var(--ui-fs-base);
	font-weight: 600;
	text-align: right;
	color: var(--ui-text);
	opacity: 1;
	appearance: none;
	-webkit-appearance: none;
}

#productModal .product-modal-table-empty {
    white-space: nowrap;
}

/* Product modal — stock advice header: title + status pill on one line, then one quiet line with
   the reason (no data, disabled) and when it was checked, instead of two grey pills */
#productModal .pim-stock-advice-panel__hero-copy {
    gap: 3px;
}

#productModal .pim-stock-advice-panel__hero-sub {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    margin: 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-muted);
}

#productModal .pim-stock-advice-panel__meta {
    color: var(--ui-faint);
    white-space: nowrap;
}

#productModal .pim-stock-advice-panel__hero-sub > span + .pim-stock-advice-panel__meta::before {
    content: "·";
    margin-right: 6px;
}

@media (max-width: 575.98px) {
    /* On phones the reason wraps and the timestamp lands on its own line, where a leading "·" dangles */
    #productModal .pim-stock-advice-panel__hero-sub > span + .pim-stock-advice-panel__meta::before {
        content: none;
    }

    /* The 24px tab gap pushed "Orders" out of view; tighter, all four tabs fit (a bundle's fifth scrolls) */
    #productModal .product-tabs-nav .nav-link {
        padding: 0 var(--ui-space-2) !important;
    }

    #productModal .product-tabs-nav {
        column-gap: 2px;
    }
}

/* Product modal — "Add tag" is a quiet dashed chip next to the tags, not a solid green badge */
#productModal .product-modal-add-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    line-height: 1;
    color: var(--ui-muted);
    cursor: pointer;
    transition: color var(--ui-ease), border-color var(--ui-ease), background var(--ui-ease);
}

#productModal .product-modal-add-tag i {
    font-size: 0.6rem;
}

#productModal .product-modal-add-tag:hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

#productModal .product-modal-add-tag:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* Product modal — table toolbars: one compact 32px row (the shared toolbar uses 36px) */
#productModal .product-inventory-tabs .dataTables_wrapper {
    --ui-tb-h: 2rem;
}

#productModal .product-inventory-tabs .dataTables_wrapper .dataTables_filter input,
#productModal .product-inventory-tabs #orderStatusFilter {
    height: 2rem;
    min-height: 2rem;
}

/* The legacy cell padding left no room for the sort arrows, which ran into the header text */
#productModal table.dataTable thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc) {
    padding-right: 26px;
}

/* style.css paints .badge-primary text white with !important, which made the tinted stock pill unreadable */
#productModal .product-modal-stock-levels--channels .badge-primary {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}

/* Channel setting (Shopify location): fills its cell so a long location name truncates instead of
   pushing the Actions column out of view; small type like the other cells */
#productModal .product-modal-setting-select {
    width: 100%;
    min-width: 8rem;
    max-width: 12rem;
    height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    text-overflow: ellipsis;
}

/* Product image viewer: a regular dialog (the old lightbox was a bare transparent image) with a large
   contained preview, an empty state, drag and drop, and an upload state. ".modal .modal-dialog" outranks
   the legacy light and dark transparent rules in style.css */
#productImageLightboxModal.modal .modal-dialog {
    width: auto;
    max-width: 640px;
}

#productImageLightboxModal.modal .modal-dialog .modal-content {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-pop);
    overflow: hidden;
}

#productImageLightboxModal.modal .modal-dialog .modal-body {
    display: block;
    padding: var(--ui-space-4) var(--ui-space-5);
    background: transparent;
}

#productImageLightboxModal .product-image-viewer-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#productImageLightboxModal .product-image-viewer-subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#productImageLightboxModal .product-image-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-height: 62vh;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle);
    overflow: hidden;
    transition: border-color var(--ui-ease), background var(--ui-ease);
}

#productImageLightboxModal.modal .product-image-viewer-stage .product-image-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: var(--ui-space-3);
    background: transparent;
}

#productImageLightboxModal .product-image-viewer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-1);
    max-width: 18rem;
    padding: var(--ui-space-4);
    text-align: center;
}

#productImageLightboxModal .product-image-viewer-empty > i {
    margin-bottom: var(--ui-space-2);
    font-size: 2.25rem;
    color: var(--ui-faint);
}

#productImageLightboxModal .product-image-viewer-empty-title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
}

#productImageLightboxModal .product-image-viewer-empty-text {
    font-size: var(--ui-fs-sm);
    line-height: 1.45;
    color: var(--ui-muted);
}

/* Drop target and upload state cover the stage */
#productImageLightboxModal :is(.product-image-viewer-drop, .product-image-viewer-busy) {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

#productImageLightboxModal .product-image-viewer-drop {
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary-tint) 92%, transparent);
}

#productImageLightboxModal .product-image-viewer-drop > i {
    font-size: 2rem;
}

#productImageLightboxModal .product-image-viewer-busy {
    color: var(--ui-muted);
    background: color-mix(in srgb, var(--ui-surface) 82%, transparent);
}

#productImageLightboxModal .product-image-viewer-stage.is-dragging {
    border: 1px dashed var(--ui-primary);
}

#productImageLightboxModal .product-image-viewer-stage.is-dragging .product-image-viewer-drop,
#productImageLightboxModal .product-image-viewer-stage.is-busy .product-image-viewer-busy {
    display: flex;
}

#productImageLightboxModal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

#productImageLightboxModal .product-image-viewer-hint {
    margin-right: auto;
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
}

#productImageLightboxModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Header thumbnail: always opens the viewer; without an image it hints at uploading */
#productModal .product-modal-hero-img-btn.is-placeholder {
    cursor: pointer;
}

#productModal .product-modal-hero-img-upload {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-size: 0.9rem;
    color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary-tint) 90%, transparent);
    pointer-events: none;
}

#productModal .product-modal-hero-img-btn.is-placeholder:is(:hover, :focus-visible) .product-modal-hero-img-upload {
    display: inline-flex;
}

/* Warehouse tab: the same warehouse repeats on every row, so it reads as plain text with a tinted icon
   instead of a bordered green card per row (the icon and status colour still show open/blocked) */
#productModal .sloc-warehouse {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Orders tab: the order date stays on one line under the order number, and the eight columns sit a
   little closer so Actions stays in view */
#productModal .product-modal-order-meta {
    white-space: nowrap;
}

/* (via the wrapper: with scrollX the header row lives in a cloned table without the id) */
#productModal #productOpenOrdersTable_wrapper table > :is(thead, tbody) > tr > :is(th, td) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#productModal #productOpenOrdersTable_wrapper table > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc) {
    padding-right: 22px;
}

/* Eight columns don't fit next to the facts panel, so the table scrolls sideways; the actions menu
   stays pinned to the right edge instead of scrolling out of view */
#productModal #productOpenOrdersTable_wrapper table > :is(thead, tbody) > tr > :is(th, td):last-child:not(.dataTables_empty) {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--ui-surface);
    box-shadow: inset 1px 0 0 var(--ui-border);
}

/* Delivery "add product": the add button matches the quantity field (it was 31px next to a 44px field) */
#add_delivery_product_modal .delivery-add-queue-btn {
    min-height: var(--ui-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* FC export dialogs: the export button at control height with its icon beside the label */
:is(#exportCenterAdministrationBtn, #exportOrderHistoryBtn, #exportReturnHistoryBtn, #exportSurchargesBtn, #exportProductsBtn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ui-control-h);
    padding-inline: 1.25rem;
    white-space: nowrap;
}

/* Sales channel connect dialogs: the connect action sits in the form body as a full-width slab; show it
   at its natural width on the right like every other dialog action (Bol.com keeps its stacked OAuth /
   client-ID choice) */
.modal[id^="add_"][id$="_api_modal"]:not(#add_bolcom_api_modal) .modal-body button[type="submit"].w-100 {
    display: block;
    width: auto !important; /* .w-100 is !important */
    margin-left: auto;
}

/* ---------- FC order modal: order lines ---------- */
/* Qty, Price and Status sit centred under their centred headers, on bundle lines and their parts alike
   (the bundle line was left-aligned, its parts centred, so "1" and "10" didn't line up) */
#order-products-table > tbody > tr > td[data-order],
#order-products-table > tbody > tr > td:has(> .ui-status-cell) {
    text-align: center;
}

#order-products-table .ui-status-cell {
    align-items: center;
}

/* FC order modal: every card in the body has the same quiet frame (some had a shadow, the comment
   card a border, so the column looked patched together) */
#shipOrderModal .modal-body .card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

/* Order lines: the "Bundle" tag sits after the title instead of on a line of its own; EAN/SKU and the
   weight keep their own lines */
#order-products-table .ui-cell-product .ui-item__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}

#order-products-table .ui-cell-product .ui-item__text > * {
    flex: 1 0 100%;
}

#order-products-table .ui-cell-product .ui-item__text > .ui-item__title {
    flex: 0 1 auto;
    min-width: 0;
}

#order-products-table .ui-cell-product .ui-item__text > .ui-item__tag {
    flex: 0 0 auto;
    margin: 0;
}

/* Cash drawer on wide screens: the cash overview stays a readable width instead of label and amount 1500px apart */
@media (min-width: 1400px) {
    .pos-cash-shift-panel > .pos-cash-shift-breakdown {
        max-width: 760px;
    }
}

/* ---------- Settings overview (seller + center): search, section chips, even tiles ---------- */
.ui-settings-hub > hr {
    display: none;
}
.ui-settings-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: var(--ui-space-2, 8px);
}
.ui-settings-search {
    flex: 0 1 340px;
    min-width: 220px;
}
.ui-settings-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ui-settings-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    color: var(--ui-body);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--ui-ease), background-color var(--ui-ease);
}
.ui-settings-chip:hover,
.ui-settings-chip:focus-visible {
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
}
.ui-settings-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0;
    color: var(--ui-muted);
}
.ui-settings-empty[hidden] {
    display: none;
}
.ui-settings-hub > h4 {
    margin: 28px 0 12px !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-muted);
    scroll-margin-top: 90px;
}
.ui-settings-hub > .row {
    --bs-gutter-y: 12px;
    --bs-gutter-x: 12px;
}
.ui-settings-hub > .row > [class*="col"] > :is(a, button) {
    display: block;
    height: 100%;
}
.ui-settings-hub .hover-card {
    height: 100%;
    min-height: 76px;
    gap: 14px;
    padding: 14px 16px !important;
    border: 1px solid transparent !important;
    box-shadow: var(--ui-shadow) !important;
    transform: none !important;
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}
.ui-settings-hub .hover-card:hover,
.ui-settings-hub :is(a, button):focus-visible > .hover-card,
.ui-settings-hub button.hover-card:focus-visible {
    border-color: var(--ui-primary-line) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08) !important;
}
.ui-settings-hub .hover-card > .text-secondary {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ui-primary-tint);
    color: var(--ui-primary) !important;
    font-size: 1rem !important;
}
.ui-settings-hub .hover-card > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-settings-hub .hover-card h5 {
    margin-bottom: 2px !important;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ui-text);
}
.ui-settings-hub .hover-card small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--ui-muted) !important;
}
/* a chevron says "this opens a page" */
.ui-settings-hub .hover-card::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: var(--ui-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color var(--ui-ease), transform var(--ui-ease);
}
.ui-settings-hub .hover-card:hover::after {
    background: var(--ui-primary);
    transform: translateX(2px);
}
@media (max-width: 575.98px) {
    .ui-settings-search {
        flex-basis: 100%;
    }
    .ui-settings-jump {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        scrollbar-width: none;
    }
    .ui-settings-chip {
        flex: 0 0 auto;
    }
}

/* ---------- App home (scan-first home for FC + seller employees) ---------- */
.app-home .app-home-shell {
    gap: var(--ui-space-4, 16px);
}
.app-home :is(.app-home-hero, .app-home-panel, .app-home-tasks.home-tasks-panel) {
    border: 0;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.app-home .app-home-hero {
    padding: 28px 24px 22px;
}
.app-home .app-home-hero__copy {
    margin-bottom: 18px;
}
.app-home .app-home-hero__title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.app-home .app-home-hero__subtitle {
    color: var(--ui-muted);
}
/* the scan field: one calm surface, the brand mark small, Go in the brand colour */
.app-home .app-home-search {
    min-height: 52px;
    padding: 5px;
    border: 1px solid transparent;
    background: var(--ui-subtle);
    box-shadow: none;
}
.app-home .app-home-search:focus-within {
    background: var(--ui-surface);
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
.app-home .app-home-search__brand {
    width: 42px;
    height: 42px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.app-home .app-home-search__brand img {
    width: 26px;
    height: 26px;
}
.app-home .app-home-search__input {
    font-size: 1rem;
}
.app-home .app-home-search__input::placeholder {
    color: var(--ui-placeholder);
}
.app-home .app-home-search__submit,
body[data-theme=dark] .app-home .app-home-search__submit {
    min-width: 72px;
    background: var(--ui-primary);
    color: #fff;
}
.app-home .app-home-search__submit:hover,
body[data-theme=dark] .app-home .app-home-search__submit:hover {
    background: var(--ui-primary-hover);
}
/* printer / work station: label and a compact select on one line */
.app-home .app-home-device-selects {
    max-width: 36rem;
    gap: 8px;
}
.app-home .app-home-printer {
    justify-content: center;
    gap: 10px;
}
.app-home .app-home-printer__label {
    font-size: .8rem;
    color: var(--ui-muted);
}
.app-home .app-home-printer__control {
    flex: 0 1 22rem;
}
.app-home .app-home-printer__select {
    min-height: 38px;
    font-size: .85rem;
    border-radius: var(--ui-radius-md);
    text-overflow: ellipsis;
}
/* section heads */
.app-home .app-home-section-title,
.app-home .home-tasks-panel__title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ui-text);
}
.app-home .app-home-panel {
    padding: 18px 18px 20px;
}
/* quick actions: compact tiles, icon badge + label side by side */
.app-home .app-home-actions-grid {
    gap: 10px;
}
.app-home .app-home-action {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    background: var(--ui-subtle);
    box-shadow: none;
}
.app-home .app-home-action:hover,
.app-home .app-home-action:focus-visible {
    transform: none;
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
    box-shadow: none;
}
.app-home .app-home-action__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1rem;
    background: var(--ui-surface);
    color: var(--ui-primary);
    box-shadow: var(--ui-shadow);
}
.app-home .app-home-action:hover .app-home-action__icon,
.app-home .app-home-action:focus-visible .app-home-action__icon,
body[data-theme=dark] .app-home .app-home-action:hover .app-home-action__icon {
    transform: none;
    background: var(--ui-primary);
    color: #fff;
}
.app-home .app-home-action__label {
    font-size: .85rem;
    text-align: left;
    color: var(--ui-text);
}
/* open tasks: a quiet list (rows, not boxes); colour only where it means something */
.app-home .app-home-tasks.home-tasks-panel {
    padding: 18px 18px 10px;
}
.app-home .home-tasks-panel__head {
    margin-bottom: 6px;
}
.app-home .home-tasks-panel__link {
    font-size: .8rem;
}
.app-home .home-tasks-panel__list {
    gap: 0;
}
.app-home .home-tasks-panel__list > li + li {
    border-top: 1px solid var(--ui-border);
}
.app-home .home-tasks-panel__item {
    gap: 12px;
    padding: 12px 8px;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: transparent;
}
.app-home .home-tasks-panel__item:hover,
.app-home .home-tasks-panel__item:focus-visible {
    background: var(--ui-subtle);
}
.app-home .home-tasks-panel__dot {
    width: 8px;
    height: 8px;
}
.app-home .home-tasks-panel__dot.is-in_progress {
    background: var(--ui-warning);
}
.app-home .home-tasks-panel__dot.is-waiting {
    background: var(--ui-faint);
}
.app-home .home-tasks-panel__name {
    font-size: .9rem;
    color: var(--ui-text);
}
.app-home .home-tasks-panel__meta,
.app-home .home-tasks-panel__meta.is-overdue {
    gap: 6px;
    margin-top: 3px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ui-muted);
}
.app-home .home-tasks-panel__meta-status,
.app-home .home-tasks-panel__meta.is-overdue .home-tasks-panel__meta-status,
.app-home .home-tasks-panel__meta:not(.is-overdue) .home-tasks-panel__meta-status--open {
    color: var(--ui-body);
    font-weight: 600;
}
.app-home .home-tasks-panel__meta.is-overdue .home-tasks-panel__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ui-danger-text);
    font-weight: 600;
}
.app-home .home-tasks-panel__ai {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    opacity: .85;
}
.app-home .home-tasks-panel__item:hover .home-tasks-panel__ai {
    opacity: 1;
}
@media (max-width: 767.98px) {
    .app-home .app-home-hero {
        padding: 20px 16px 16px;
    }
    .app-home .app-home-hero__title {
        font-size: 1.35rem;
    }
    .app-home .app-home-printer {
        flex-direction: row;
        align-items: center;
    }
    .app-home .app-home-printer__control {
        flex: 1 1 0;
    }
    .app-home .app-home-action {
        min-height: 56px;
    }
}

/* ---------- Tasks page: header like every other page, a real view switch, calm column heads ---------- */
.ui-tasks .tasks-toolbar,
body[data-theme=dark] .ui-tasks .tasks-toolbar {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: var(--ui-space-4, 16px);
}
.ui-tasks .tasks-toolbar-top {
    align-items: center;
    padding: 0;
}
.ui-tasks .tasks-toolbar-actions {
    gap: 10px;
}
/* board / calendar: a two-button switch with a track, the active view in the brand colour */
.ui-tasks .st-tasks-view-toggle {
    padding: 3px;
    gap: 2px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-tasks .st-tasks-view-toggle .ui-toggle__btn {
    width: 36px;
    min-height: 32px;
    border-radius: 8px;
    color: var(--ui-muted);
    font-size: .9rem;
}
.ui-tasks .st-tasks-view-toggle .ui-toggle__btn:hover {
    color: var(--ui-text);
}
.ui-tasks .st-tasks-view-toggle .ui-toggle__btn.active {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}
/* quick filters sit under the header as the page's tabs */
.ui-tasks .tasks-stats-row {
    margin-top: 18px;
    padding: 0;
    border-bottom: 1px solid var(--ui-border-strong);
}
.ui-tasks .tasks-filter-bar.is-open {
    margin-top: 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
/* column heads: status dot, name in sentence case, a quiet count; no heavy bar */
.ui-tasks .kanban-column-header,
body[data-theme=dark] .ui-tasks .kanban-column-header {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 4px;
    border-bottom: 0;
    font-size: .9rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ui-text);
}
.ui-tasks .kanban-column-header::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-faint);
}
.ui-tasks .kanban-column[data-status="open"] .kanban-column-header::before { background: var(--ui-info); }
.ui-tasks .kanban-column[data-status="in_progress"] .kanban-column-header::before { background: var(--ui-warning); }
.ui-tasks .kanban-column[data-status="waiting"] .kanban-column-header::before { background: var(--ui-faint); }
.ui-tasks .kanban-column[data-status="completed"] .kanban-column-header::before { background: var(--ui-success); }
.ui-tasks .kanban-column[data-status="cancelled"] .kanban-column-header::before { background: var(--ui-danger-soft); }
.ui-tasks .kanban-column-count,
body[data-theme=dark] .ui-tasks .kanban-column-count {
    margin-left: auto;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    color: var(--ui-body);
    font-size: .75rem;
    text-align: center;
}
/* descriptions: readable colour, clamped instead of faded (the fade greyed out short texts too) */
.ui-tasks .task-description,
body[data-theme=dark] .ui-tasks .task-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: none;
    padding-left: 0;
    color: var(--ui-muted);
}
.ui-tasks .task-description::after {
    content: none;
}
@media (max-width: 767.98px) {
    .ui-tasks .tasks-toolbar-top {
        align-items: flex-start;
    }
}
@media (max-width: 767.98px) {
    /* phone tap targets: section chips and the "All tasks" link get room */
    .ui-settings-chip {
        height: max(36px, var(--ui-tap-min, 0px));
        padding: 0 16px;
    }
    .app-home .home-tasks-panel__head {
        margin-bottom: 10px;
    }
    .app-home .home-tasks-panel__link {
        display: inline-flex;
        align-items: center;
        min-height: max(32px, var(--ui-tap-min, 0px));
    }
    .ui-page-analytics-center-warehouse :is(.wa-heat__hour, .wa-heat__day) {
        font-size: 12px;
    }
}

/* FC fulfillment requests: Accept is the one clear action, message / decline stay quiet */
.fr-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}
.fr-actions .fr-actions__label {
    margin-left: 6px;
}
.fr-actions__icon {
    width: 32px;
    padding-left: 0;
    padding-right: 0;
    color: var(--ui-muted);
}
.fr-actions__decline:hover,
.fr-actions__decline:focus-visible {
    color: var(--ui-danger);
    background: var(--ui-danger-tint);
}
.fr-desc {
    min-width: 200px;
    max-width: 320px;
    font-size: .8rem;
    color: var(--ui-muted);
}
.fr-volume {
    white-space: nowrap;
}

/* ---------- Chat (FC ↔ seller), refined ----------
   Calm surfaces, one loud button (Send), reply on hover, a composer that grows as a rounded field instead of a
   bubble squeezed between four buttons on phones. */
.ui-chat .received_withd_msg p {
    background: var(--ui-surface) !important;
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}
.ui-chat .sent_msg p {
    background: var(--ui-primary) !important;
    box-shadow: none;
}
.ui-chat .time_date {
    font-size: .72rem;
    color: var(--ui-muted);
}
.ui-chat .incoming_msg_img img,
#messages-page .incoming_msg_img img {
    object-fit: contain;
    background: var(--ui-surface);
    padding: 2px;
    box-shadow: var(--ui-shadow);
}
/* reply: shown on hover / focus on pointer devices, quiet but present on touch */
.ui-chat .message-reply-btn {
    font-size: .8rem;
    opacity: 0;
    transition: opacity var(--ui-ease), color var(--ui-ease);
}
.ui-chat :is(.incoming_msg, .outgoing_msg):hover .message-reply-btn,
.ui-chat .message-reply-btn:focus-visible {
    opacity: 1;
}
@media (hover: none) {
    .ui-chat .message-reply-btn {
        opacity: .55;
    }
}
/* composer */
.ui-chat .type_msg {
    background: var(--ui-surface);
    padding: 10px 12px;
}
.ui-chat .input_msg_write {
    align-items: flex-end;
    gap: 6px !important;
}
.ui-chat .write_msg {
    min-height: 44px;
    max-height: 160px;
    padding: 11px 16px !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 22px !important;
    background: var(--ui-subtle) !important;
    line-height: 1.4;
    resize: none;
    box-shadow: none !important;
}
.ui-chat .write_msg:focus {
    background: var(--ui-surface) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
}
.ui-chat .input_msg_write .btn-icon-only {
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.ui-chat .input_msg_write .btn-light.btn-icon-only {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ui-muted);
}
.ui-chat .input_msg_write .btn-light.btn-icon-only:hover,
.ui-chat .input_msg_write .btn-light.btn-icon-only:focus-visible,
.ui-chat .input_msg_write .btn-light.btn-icon-only.active {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary);
}
@media (max-width: 768px) {
    /* phone header: a light bar like the rest of the app, not a grey slab */
    .ui-chat .mobile-chat-header,
    body[data-theme=dark] .ui-chat .mobile-chat-header {
        padding: 6px 8px;
        background: var(--ui-surface);
        color: var(--ui-text);
        border-bottom: 1px solid var(--ui-border);
    }
    .ui-chat .mobile-back-btn {
        width: 44px;
        height: 44px;
        margin-right: 4px;
        padding: 0;
        color: var(--ui-primary);
        font-size: 1.1rem;
    }
    .ui-chat .mobile-back-btn:hover {
        background: var(--ui-primary-tint);
    }
    .ui-chat .mobile-chat-title {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* the message field gets the full width; its tools sit on one row under it, Send on the right */
    .ui-chat .input_msg_write {
        flex-wrap: wrap;
    }
    .ui-chat .input_msg_write .write_msg {
        flex: 1 0 100% !important;
        order: -1;
    }
    .ui-chat .input_msg_write .btn-icon-only {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    .ui-chat .input_msg_write #send_btn {
        margin-left: auto;
        width: 44px !important;
        height: 44px !important;
    }
}
/* follow-up bubbles from the same sender line up under the first one (the avatar slot stays reserved) */
.ui-chat .incoming_msg_img:empty {
    width: 40px !important;
    flex: 0 0 40px;
    min-height: 1px;
}
@media (max-width: 379.98px) {
    /* small phones (SE): the decorative brand mark gives its room to the scan field; tiles a little tighter */
    .app-home .app-home-search__brand {
        display: none;
    }
    .app-home .app-home-search__input {
        padding-left: 12px;
    }
    .app-home .app-home-action {
        gap: 8px;
        padding: 8px 10px;
    }
    .app-home .app-home-action__icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: .9rem;
    }
    .app-home .app-home-action__label {
        font-size: .8rem;
    }
}

/* AI home open tasks: the same quiet list as the scan home (rows, not boxes; only an overdue date is red) */
#ai-chat-page .ai-chat-home-tasks__list {
    gap: 0;
}
#ai-chat-page .ai-chat-home-tasks__list > li + li {
    border-top: 1px solid var(--ui-border);
}
#ai-chat-page .ai-chat-home-tasks__item {
    gap: 12px;
    padding: 11px 8px;
    border: 0;
    background: transparent;
}
#ai-chat-page .ai-chat-home-tasks__item:hover,
#ai-chat-page .ai-chat-home-tasks__item:focus-visible {
    background: var(--ui-subtle);
}
#ai-chat-page .ai-chat-home-tasks__dot {
    width: 8px;
    height: 8px;
}
#ai-chat-page .ai-chat-home-tasks__dot.is-in_progress {
    background: var(--ui-warning);
}
#ai-chat-page .ai-chat-home-tasks__dot.is-waiting {
    background: var(--ui-faint);
}
#ai-chat-page .ai-chat-home-tasks__meta,
#ai-chat-page .ai-chat-home-tasks__meta.is-overdue {
    color: var(--ui-muted);
    font-weight: 500;
}
#ai-chat-page .ai-chat-home-tasks__meta-status,
#ai-chat-page .ai-chat-home-tasks__meta:not(.is-overdue) .ai-chat-home-tasks__meta-status--open {
    color: var(--ui-body);
    font-weight: 600;
}
#ai-chat-page .ai-chat-home-tasks__meta.is-overdue .ai-chat-home-tasks__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ui-danger-text);
    font-weight: 600;
}

/* Subscription → AI credits: the balance on the left, the top-up packs as one even row (a grid that wraps cleanly) */
.ui-subscription .subscription-ai-credits__main {
    flex: 1 1 280px;
}
.ui-subscription .subscription-ai-credits__actions {
    flex: 1 1 520px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: stretch;
}
.ui-subscription .subscription-ai-credits__actions .ai-topup-card {
    width: auto;
    height: 100%;
}
@media (max-width: 575.98px) {
    .ui-subscription .subscription-ai-credits__actions {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* settings tiles: two per row on tablets (three made the titles break mid-word) */
    .ui-settings-hub > .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* fulfillment requests: the (mostly automatic) description steps aside so status and actions stay on screen */
    .dataTables_wrapper:has(#all-requests-products) table :is(th, td):nth-child(3) {
        display: none;
    }
    .dataTables_wrapper:has(#all-requests-products) table :is(th, td) {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .dataTables_wrapper:has(#all-requests-products) table th:is(.sorting, .sorting_asc, .sorting_desc) {
        padding-right: 22px !important;
    }
    .dataTables_wrapper:has(#all-requests-products) .fr-actions {
        gap: 4px;
    }
    .fr-actions .fr-actions__label {
        display: none;
    }
    .fr-volume {
        display: inline-flex;
        flex-direction: column;
        white-space: nowrap;
        line-height: 1.25;
    }
    .fr-actions .btn-primary {
        width: 32px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Payment methods: a grid of cards (two 350px cards missed a 718px row by 2px and stacked one per row) */
.ui-subscription .cc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.ui-subscription .cc-cards-grid > .cc-card {
    width: auto;
    max-width: 380px;
}

/* Packaging tables on tablets: headers wrap so all eight columns fit (they scrolled the price off screen) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .packaging-table.text-nowrap thead th {
        white-space: normal !important;
        vertical-align: bottom;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .packaging-table.text-nowrap :is(th, td) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Onboarding channel rows: a long status ("product import not supported for this channel") wraps inside its pill
   instead of running over the next column */
.onboarding-sc-item--channel-import .onboarding-sc-item-status-col {
    min-width: 0;
    max-width: 260px;
}
.onboarding-sc-item--channel-import .onboarding-sc-item-status {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    border-radius: 12px;
}
.onboarding-sc-item--channel-import .onboarding-sc-item-status-text {
    white-space: normal !important;
    overflow-wrap: anywhere;
}
/* in a narrow card (iPad next to the setup nav, phones) the channel keeps its name: status drops below it */
.onboarding-sc-item--channel-import {
    container-type: inline-size;
}
@container (max-width: 560px) {
    .onboarding-sc-item--channel-import .onboarding-sc-item-grid {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "channel products actions"
            "status status status";
        padding: 0.875rem 1rem;
    }
    .onboarding-sc-item--channel-import .onboarding-sc-item-channel { grid-area: channel; }
    .onboarding-sc-item--channel-import .onboarding-sc-item-products { grid-area: products; }
    .onboarding-sc-item--channel-import .onboarding-sc-item-actions { grid-area: actions; }
    .onboarding-sc-item--channel-import .onboarding-sc-item-status-col {
        grid-area: status;
        justify-content: flex-start;
        max-width: none;
    }
}
/* the column header can't line up with the stacked rows in a narrow card, so it steps aside there */
.onboarding-sc-panel:has(.onboarding-sc-table-head) {
    container-type: inline-size;
}
@container (max-width: 600px) {
    .onboarding-sc-table-head {
        display: none !important;
    }
}

/* B2B price list lines: the unit price shows in full (47px cut "11,99"); the tier field gives way on tablets */
.input-group:has(> .pl-unit-price) {
    min-width: 110px;
    flex-wrap: nowrap;
}
.pl-unit-price {
    min-width: 72px;
}
@media (max-width: 1199.98px) {
    .pl-tier-pricing {
        min-width: 0;
        width: 120px !important;
    }
    table:has(.pl-unit-price) td:first-child {
        white-space: normal;
        min-width: 160px;
    }
}
@media (max-width: 1199.98px) {
    /* the row's Save button (shown after an edit) is icon-only, so the actions column doesn't push the table wide */
    .b2b-price-list-row-actions .js-save-price-list-product {
        font-size: 0;
        width: 32px;
        padding-left: 0;
        padding-right: 0;
    }
    .b2b-price-list-row-actions .js-save-price-list-product > i {
        font-size: .8rem;
        margin: 0 !important;
    }
    .b2b-price-list-products-table :is(th, td) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .b2b-price-list-products-table__product {
        min-width: 0;
    }
}
@media (max-width: 1199.98px) {
    .b2b-price-list-products-table thead th {
        white-space: normal !important;
        vertical-align: bottom;
    }
    .b2b-price-list-products-table__product {
        white-space: normal;
    }
}
@media (max-width: 1199.98px) {
    .b2b-price-list-products-table__product {
        max-width: 190px;
    }
}
@media (max-width: 1199.98px) {
    .b2b-price-list-products-table__product,
    .b2b-price-list-products-table__product * {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .b2b-price-list-products-table__product > :not(img) {
        min-width: 0;
    }
}

/* Chat (FC + seller), integrated: on tablets and desktop the inbox is one card on the page background with the
   portal's gutters, radius and shadow instead of an edge-to-edge frame; the list and conversation share it,
   split by a single hairline. Phones keep the full-screen app layout. */
@media (min-width: 769px) {
    #messages-page.content {
        padding: var(--ui-space-5, 20px) var(--ui-space-6, 24px) var(--ui-space-6, 24px) !important;
        background: var(--ui-page);
    }
    #messages-page .inbox_msg {
        border: 0 !important;
        border-radius: var(--ui-radius);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow);
        overflow: hidden;
    }
    #messages-page :is(.inbox_people, .mesgs, .headind_srch, .type_msg) {
        background: var(--ui-surface);
    }
    #messages-page .inbox_people {
        border-right: 1px solid var(--ui-border) !important;
    }
    #messages-page .mesgs {
        background: var(--ui-page);
    }
    #messages-page .msg_history {
        background: transparent;
    }
    #messages-page .desktop-chat-header {
        background: var(--ui-surface);
        border-bottom: 1px solid var(--ui-border);
        padding: 14px 20px;
    }
    #messages-page .type_msg {
        border-top: 1px solid var(--ui-border) !important;
    }
    #messages-page .headind_srch {
        border-bottom: 1px solid var(--ui-border);
    }
    /* list rows: quieter, the active one marked by a soft fill and a brand edge */
    #messages-page .chat_list {
        border-bottom: 0 !important;
        margin: 2px 8px;
        border-radius: var(--ui-radius-md);
    }
    #messages-page .chat_list.active_chat {
        background: var(--ui-primary-tint) !important;
        box-shadow: inset 3px 0 0 var(--ui-primary);
        border-left: 0 !important;
    }
    #messages-page .chat_list:not(.active_chat):hover {
        background: var(--ui-subtle);
    }
    #messages-page .inbox_chat {
        padding-top: 6px;
    }
}
@media (min-width: 769px) {
    #messages-page #inbox_chat .chat_list {
        margin: 2px 8px !important;
        width: auto !important;
        border-radius: var(--ui-radius-md) !important;
        overflow: hidden;
    }
    #messages-page #inbox_chat .chat_list.active_chat::before {
        border-radius: 0 3px 3px 0;
    }
    #messages-page .desktop-chat-header,
    #messages-page .desktop-chat-header.is-visible {
        background: var(--ui-surface) !important;
        background-image: none !important;
    }
}

/* Task dialog sidebar (≈185px): the linked-record chip with its full-size icon and two 32px buttons left
   ~50px for "Delivery #462", which then wrapped and clipped; a compact icon and buttons give the name room */
#task-modal .cd-task-sidebar-linked .cd-task-modal-linked-chip-inner {
    gap: 0.35rem;
    padding: 0.5rem 0.5rem 0.5rem 0.6rem;
}
#task-modal .cd-task-sidebar-linked .cd-task-modal-linked-chip-body {
    gap: 0.5rem;
}
#task-modal .cd-task-sidebar-linked .cd-task-modal-linked-chip-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8rem;
    border-radius: 6px;
}
#task-modal .cd-task-sidebar-linked .cd-task-modal-linked-chip-actions {
    flex-direction: column;
    gap: 0;
}
#task-modal .cd-task-sidebar-linked .cd-task-modal-linked-chip-actions > * {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
}

/* Product dialog on desktop: style.css caps the panel at 100vh for the phone full-screen layout without a
   media query, so with the dialog's top margin the footer ("Change stock amount") fell below the screen.
   --cd-dialog-top is the pinned top of a dialog that stopped re-centring (cd-ui.js). */
@media (min-width: 768px) {
    #productModal .modal-dialog .open-order-modal-panel,
    #productModal .modal-dialog.modal-fullscreen-md-down .open-order-modal-panel {
        max-height: calc(100vh - var(--cd-dialog-top, 1.75rem) - 1.75rem);
    }
}

/* B2B price list: an inactive row dims its data cells only, so the switch and Save stay readable */
.b2b-price-list-product-row.is-inactive {
	opacity: 1;
}
.b2b-price-list-product-row.is-inactive > td:nth-child(-n+4) {
	opacity: 0.72;
}

/* B2B label dialog: weight/size fields and the method search use the standard field look, not a grey fill */
body #b2bLabelModal .b2b-label-package-metrics .form-control,
body #b2bLabelModal .b2b-label-options-search {
    background: var(--ui-surface);
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-radius-md);
}
body #b2bLabelModal .b2b-label-package-metrics .form-control {
    min-height: 38px;
}
body #b2bLabelModal .b2b-label-package-metrics .form-control:focus {
    background: var(--ui-surface);
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
body #b2bLabelModal .b2b-label-options-search:focus-within {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}
body #b2bLabelModal .b2b-label-options-search-inner {
    padding: 0 0.75rem;
    min-height: 38px;
}
body #b2bLabelModal .b2b-label-options-search-input {
    min-height: 36px;
    padding: 0;
}
body #b2bLabelModal .b2b-label-options-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* POS empty cart: the scan/search chips focus the search field */
#pos-checkout button.pos-empty-cart-tip {
    cursor: pointer;
}
#pos-checkout button.pos-empty-cart-tip:hover {
    border-color: var(--ui-primary);
}

/* Fulfillment messages: company logos are wordmarks, show them whole instead of cropping to the centre */
#messages-page .chat_img img,
#messages-page .incoming_msg_img img {
    object-fit: contain;
    background: var(--ui-surface);
    padding: 2px;
}

/* Shipment methods: carrier logos in one box size so rows keep the same height and logos look alike */
#shipmentMethodTable img.channel-img,
#shipmentMethodTable img.carrier-logo-img {
    width: 72px;
    max-width: 72px !important;
    height: 24px;
    object-fit: contain;
    object-position: left center;
}

/* Other integrations: logo tiles the same height; wordmark logos in the list readable instead of a 22px square */
.ui-page-seller-other .btn.btn-light.w-100 {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui-page-seller-other .btn.btn-light.w-100 img {
    max-height: 72px;
    width: 100%;
    object-fit: contain;
}
.ui-page-seller-other table img.ui-logo {
    width: 72px;
    height: 24px;
    object-fit: contain;
    object-position: left center;
}

/* Subscription: the AI credits block only needs its divider when something sits above it in the card */
.ui-subscription .card-body > .subscription-ai-credits:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}