/* ========================================
   WEIGHBRIDGE TICKET - PROFESSIONAL DESIGN
   Matches global theme system
   ======================================== */

/* Lucide icon adapter — font-size on <i> doesn't size SVGs.
   IMPORTANT: use .e-dlg-content descendant selector so the rule
   only matches icons INSIDE the dialog body, not every icon on the
   page (Syncfusion renders dialogs at document root). */
.wbt-sfdialog .e-dlg-content [data-lucide] > .lucide,
.wbt-sub-dialog [data-lucide] > .lucide,
.wbt-contract-dlg [data-lucide] > .lucide {
    width: 1em;
    height: 1em;
}

/* Global overrides for all inputs inside the dialog content */
.wbt-sfdialog .e-dlg-content input[type="text"],
.wbt-sfdialog .e-dlg-content input[type="number"],
.wbt-sfdialog .e-dlg-content input[type="date"],
.wbt-sfdialog .e-dlg-content input[type="datetime-local"],
.wbt-sfdialog .e-dlg-content select {
    caret-color: var(--text-primary) !important;
    font-size: var(--text-base) !important;
}

/* Syncfusion component text size overrides */
.wbt-sfdialog .e-input,
.wbt-sfdialog .e-input-group input.e-input,
.wbt-sfdialog .e-input-group .e-input,
.wbt-sfdialog .e-multi-select-wrapper .e-chips-collection .e-chipcontent,
.wbt-sfdialog .e-dropdownbase .e-list-item,
.wbt-sfdialog .e-ddl .e-input,
.wbt-sfdialog .e-float-text,
.wbt-sfdialog .e-multiselect .e-multi-select-wrapper .e-delim-values,
.wbt-sfdialog .e-input-group .e-float-text {
    font-size: var(--text-base) !important;
}

.wbt-sfdialog .e-input-group,
.wbt-sfdialog .e-input-group.e-control-wrapper {
    min-height: 36px !important;
}

.wbt-sfdialog .e-float-input label.e-float-text,
.wbt-sfdialog .e-float-input.e-control-wrapper label.e-float-text {
    font-size: var(--text-base) !important;
}

.wbt-sfdialog .e-input-group input.e-input,
.wbt-sfdialog .e-input-group.e-control-wrapper input.e-input {
    padding: 7px 10px !important;
    min-height: 36px !important;
    color: var(--text-primary) !important;
}

.wbt-sfdialog .e-input,
.wbt-sfdialog .e-input-group .e-input,
.wbt-sfdialog .e-ddl .e-input,
.wbt-sfdialog .e-multiselect .e-multi-select-wrapper .e-delim-values,
.wbt-sfdialog .e-dropdownbase .e-list-item {
    color: var(--text-primary) !important;
}

/* ========================================
   SFDIALOG OVERRIDES
   ======================================== */

.wbt-sfdialog .e-dlg-header-content,
.wbt-sfdialog .e-dlg-header {
    display: none !important;
}

.wbt-sfdialog .e-dlg-content {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.wbt-sfdialog.e-dialog {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xl) !important;
    border: none !important;
    font-family: var(--font-sans) !important;
}

.wbt-sfdialog.e-dialog.e-dlg-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.wbt-sfdialog.e-dialog {
    max-height: 95vh !important;
}

/* ========================================
   MODAL CONTAINER
   ======================================== */

.wbt-modal {
    background: var(--surface);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.wbt-modal-small {
    background: var(--surface);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: wbt-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    max-height: 90vh;
}

.wbt-modal-content {
    padding: var(--space-xl);
    overflow-y: auto;
    flex: 1;
}

.wbt-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-secondary);
    border-top: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

.wbt-modal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-30), transparent);
}

/* ========================================
   HEADER
   ======================================== */

.wbt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    background: var(--chrome-bg);
    border-bottom: none;
    box-shadow: var(--chrome-shadow);
    flex-shrink: 0;
    position: relative;
}

.wbt-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
}

.wbt-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wbt-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--chrome-text);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-sans);
}

.wbt-title i,
.wbt-title [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
    filter: brightness(1.2);
}

.wbt-title img {
    opacity: 0.85;
    width: 22px;
    height: 22px;
}

.wbt-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--chrome-input-border);
    background: var(--chrome-hover);
    color: var(--chrome-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    flex-shrink: 0;
}

.wbt-close-btn:hover {
    background: var(--chrome-active);
    color: var(--chrome-text);
    border-color: var(--chrome-border);
}

.wbt-close-btn [data-lucide] {
    width: 16px;
    height: 16px;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.wbt-content {
    flex: 1;
    overflow: hidden;
    padding: var(--space-md);
    background: var(--bg-secondary);
    min-height: 0;
    max-height: calc(95vh - 90px);
    display: flex;
    flex-direction: column;
}

.wbt-content::-webkit-scrollbar {
    width: 4px;
}

.wbt-content::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.wbt-content::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: var(--radius-md);
}

.wbt-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   FORM GRID
   ======================================== */

.wbt-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 100%;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* ========================================
   COLUMN CARDS
   ======================================== */

.wbt-column {
    grid-column: span 1;
    min-width: 0;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.wbt-column:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-md);
}

.wbt-column::-webkit-scrollbar {
    width: 4px;
}

.wbt-column::-webkit-scrollbar-track {
    background: transparent;
}

.wbt-column::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: var(--radius-md);
}

.wbt-column::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   SECTION DIVIDERS — line + icon + title
   ======================================== */

.wbt-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--space-md) 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.wbt-section-divider:not(:first-child) {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-secondary);
}

.wbt-section-divider i {
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--border-primary) 100%);
    border: 1px solid var(--border-secondary);
}

.wbt-section-divider [data-lucide] > .lucide {
    width: 13px;
    height: 13px;
}

.wbt-section-divider span {
    flex-shrink: 0;
}

.wbt-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-secondary) 0%, transparent 100%);
    min-width: 20px;
}

/* Legacy class alias */
.wbt-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--space-md) 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.wbt-section-title:not(:first-child) {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-primary);
}

.wbt-section-title i {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

/* ========================================
   STATUS BADGE (Customer Active/Inactive)
   ======================================== */

.wbt-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.wbt-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wbt-status-active {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-light);
}

.wbt-status-active .wbt-status-dot {
    background: var(--success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.wbt-status-inactive {
    background: var(--error-light);
    color: var(--error);
    border: 1px solid var(--error-light);
}

.wbt-status-inactive .wbt-status-dot {
    background: var(--error);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

/* ========================================
   FIELDS
   ======================================== */

.wbt-field {
    margin-bottom: var(--space-sm);
}

.wbt-field:last-child {
    margin-bottom: 0;
}

.wbt-field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.wbt-field-row:last-child {
    margin-bottom: 0;
}

.wbt-field-row .wbt-field {
    margin-bottom: 0;
}

.wbt-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
}

/* ========================================
   INPUT WRAPPER
   ======================================== */

.wbt-input-wrapper {
    position: relative;
    width: 100%;
}

.wbt-input-with-icon {
    position: relative;
}

/* ========================================
   INPUT STYLES
   ======================================== */

.wbt-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    font-family: var(--font-sans);
    min-height: 36px;
    line-height: var(--leading-normal);
}

.wbt-input:focus {
    outline: none;
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.wbt-input:read-only,
.wbt-input:disabled {
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: default;
    opacity: 1;
    border-color: var(--border-primary);
}

.wbt-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    opacity: 1;
    cursor: default;
}

.wbt-input-has-left-icon {
    padding-left: 36px;
}

/* ========================================
   LEFT ICON POSITIONING
   ======================================== */

.wbt-input-left-icon,
.wbt-input-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

/* ========================================
   INPUT HIGHLIGHT
   ======================================== */

.wbt-input-highlight {
    background: var(--bg-secondary) !important;
    border-color: var(--text-secondary) !important;
    font-weight: var(--font-bold);
    color: var(--text-primary) !important;
    font-size: var(--text-base);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Prominent fields — Ticket No, Contract No */
.wbt-input-prominent {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.01em;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    background: var(--surface) !important;
    border-color: var(--text-secondary) !important;
    border-width: 1.5px;
}

.wbt-input-prominent:read-only {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
    opacity: 1;
}

/* ========================================
   IDENTITY CARD — Ticket No, Date, Contract
   ======================================== */

.wbt-identity-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wbt-identity-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wbt-identity-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wbt-identity-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wbt-identity-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    line-height: 1.3;
}

.wbt-identity-value.wbt-identity-primary {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
}

.wbt-identity-contract {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--bg-tertiary);
}

.wbt-identity-contract-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.wbt-identity-contract-info .wbt-identity-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbt-identity-contract-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.wbt-identity-contract-btn:hover {
    background: var(--border-primary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

/* ========================================
   INFO CARD — Customer, Product row display
   ======================================== */

.wbt-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    transition: border-color 0.15s ease;
}

.wbt-info-card:hover {
    border-color: var(--border-secondary);
}

.wbt-info-card-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 7px;
    background: var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.wbt-info-card-icon [data-lucide] {
    width: 16px;
    height: 16px;
}

.wbt-info-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.wbt-info-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbt-info-card-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ========================================
   DETAIL GRID — Contract requirements flat data
   ======================================== */

.wbt-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
    background: var(--surface);
}

.wbt-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-right: 1px solid var(--bg-tertiary);
    border-bottom: 1px solid var(--bg-tertiary);
}

.wbt-detail-item:last-child {
    border-right: none;
}

.wbt-detail-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wbt-detail-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* ========================================
   DARK MODE — Identity, Info, Detail
   ======================================== */

[data-theme="dark"] .wbt-identity-card {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-identity-label {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-identity-value {
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-identity-value.wbt-identity-primary {
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-identity-contract {
    border-top-color: var(--border-primary);
}

[data-theme="dark"] .wbt-identity-contract-btn {
    background: var(--surface-elevated);
    border-color: var(--border-secondary);
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-identity-contract-btn:hover {
    background: var(--border-primary);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-info-card {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-info-card:hover {
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-info-card-icon {
    background: var(--surface-elevated);
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-info-card-title {
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-info-card-sub {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-detail-grid {
    border-color: var(--border-primary);
    background: var(--bg-secondary);
}

[data-theme="dark"] .wbt-detail-item {
    border-right-color: var(--surface-elevated);
    border-bottom-color: var(--surface-elevated);
}

[data-theme="dark"] .wbt-detail-label {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-detail-value {
    color: var(--text-secondary);
}

/* ========================================
   PRICE DISPLAY & EDIT BUTTON
   ======================================== */

/* --- Price Hero Card --- */
.wbt-price-hero {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    margin-bottom: var(--space-sm);
}

.wbt-price-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success), var(--success) 60%, transparent);
}

.wbt-price-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--border-secondary);
}

.wbt-price-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wbt-price-hero-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wbt-price-hero-label i {
    font-size: 12px;
    color: var(--success);
}

.wbt-price-hero-edit {
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
}

.wbt-price-hero-edit:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

.wbt-price-hero-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.wbt-price-hero-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--success);
}

.wbt-price-hero-value {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text-primary);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Old classes - keep for compatibility but mark as legacy */
.wbt-price-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wbt-price-display .wbt-input {
    flex: 1;
}

.wbt-price-edit-btn {
    width: 32px;
    height: 32px;
    background: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.wbt-price-edit-btn:hover {
    background: var(--text-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* --- Price Breakdown List --- */
.wbt-price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}

.wbt-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--bg-tertiary);
    transition: background 0.15s ease;
}

.wbt-price-line:last-child {
    border-bottom: none;
}

.wbt-price-line:hover {
    background: var(--bg-secondary);
}

.wbt-price-line-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.wbt-price-line-label i {
    font-size: 13px;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
}

.wbt-price-line-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
}

/* Contract Price Note */
.wbt-price-contract-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-light);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--accent-secondary);
    margin-bottom: var(--space-sm);
}

.wbt-price-contract-note i {
    color: var(--accent-secondary);
    font-size: 14px;
}

.wbt-price-contract-note strong {
    font-weight: 800;
    color: var(--accent-secondary);
}

/* Legacy price tag classes - keep for compatibility */
.wbt-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1.4;
}

.wbt-price-tag-label {
    color: var(--text-tertiary);
    font-weight: 500;
}

.wbt-price-tag-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* ========================================
   SPECIFICATION TOGGLE PILLS
   ======================================== */

.wbt-spec-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.wbt-spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-secondary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    user-select: none;
    position: relative;
    flex: 1;
    justify-content: center;
    min-width: 80px;
}

.wbt-spec-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.wbt-spec-pill i {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.wbt-spec-pill:hover {
    border-color: var(--text-muted);
    background: var(--border-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.wbt-spec-pill:hover i {
    color: var(--text-primary);
}

.wbt-spec-pill-active {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.3);
}

.wbt-spec-pill-active i {
    color: var(--bg-primary) !important;
}

[data-theme="dark"] .wbt-spec-pill {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-spec-pill i {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-spec-pill:hover {
    background: var(--border-primary);
    border-color: var(--text-disabled);
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-spec-pill:hover i {
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-spec-pill-active {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    color: var(--bg-secondary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wbt-spec-pill-active i {
    color: var(--bg-secondary) !important;
}

/* Expanded specification section */
.wbt-spec-expand {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-left: 3px solid var(--border-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: wbt-spec-slide 0.2s ease;
}

@keyframes wbt-spec-slide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wbt-spec-expand .wbt-field {
    margin-bottom: 0;
}

.wbt-spec-expand .wbt-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.wbt-spec-expand .wbt-select,
.wbt-spec-expand .wbt-input {
    font-size: 12px;
    padding: 5px 8px;
    height: 32px;
}

[data-theme="dark"] .wbt-spec-expand {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-secondary);
    border-left-color: var(--accent-primary);
}

/* ========================================
   PRICE BREAKDOWN DIALOG — Dark Overlay
   ======================================== */

/* Dialog shell — dark background to stand apart */
.wbt-price-dlg.e-dialog {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 16px !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .wbt-price-dlg.e-dialog {
    background: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Override content area */
.wbt-price-dlg .e-dlg-content {
    background: transparent !important;
    padding: 0 !important;
}

/* Header */
.wbt-price-dlg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    position: relative;
}

.wbt-price-dlg-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
}

.wbt-price-dlg-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.wbt-price-dlg-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent-primary);
}

/* Close button — styled X */
.wbt-price-dlg-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--hover-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wbt-price-dlg-close:hover {
    background: var(--chrome-active);
    border-color: var(--chrome-border);
    color: var(--chrome-text);
}

/* Body */
.wbt-price-dlg-body {
    padding: 16px 20px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Total row */
.wbt-price-dlg-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
}

[data-theme="dark"] .wbt-price-dlg-total {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.wbt-price-dlg-total-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.wbt-price-dlg-total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Contract comparison */
.wbt-price-dlg-contract {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.wbt-price-dlg-contract i {
    color: var(--text-muted);
    font-size: 11px;
}

/* Section label */
.wbt-price-dlg-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

.wbt-price-dlg-section-label i {
    font-size: 10px;
    color: var(--text-muted);
}

/* Fields container */
.wbt-price-dlg-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual field */
.wbt-price-dlg-field {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.15s ease;
}

.wbt-price-dlg-field:hover {
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-price-dlg-field {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .wbt-price-dlg-field:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.wbt-price-dlg-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 72px;
    flex-shrink: 0;
    margin: 0;
}

.wbt-price-dlg-field .wbt-input {
    flex: 1;
    text-align: right;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 15px;
    border: none;
    background: transparent;
    padding: 4px 0;
    min-height: auto;
    color: var(--text-primary);
}

.wbt-price-dlg-field .wbt-input:focus {
    box-shadow: none;
    outline: none;
}

.wbt-price-dlg-field .wbt-input:read-only {
    background: transparent;
    opacity: 0.85;
}

/* Footer override */
.wbt-price-dlg .e-footer-content,
.wbt-price-dlg .e-dlg-footerbar {
    background: var(--bg-secondary) !important;
    border-top: none !important;
    padding: 10px 20px !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.wbt-price-dlg .e-footer-content::before,
.wbt-price-dlg .e-dlg-footerbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

[data-theme="dark"] .wbt-price-dlg .e-footer-content,
[data-theme="dark"] .wbt-price-dlg .e-dlg-footerbar {
    background: var(--bg-secondary) !important;
    border-color: transparent !important;
}

/* ========================================
   SELECT DROPDOWN
   ======================================== */

.wbt-select {
    width: 100%;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a4d58' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    font-family: var(--font-sans);
    min-height: 36px;
    line-height: var(--leading-normal);
}

.wbt-select:focus {
    outline: none;
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.wbt-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ========================================
   ICON BUTTON
   ======================================== */

.wbt-input-icon-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), color var(--transition-base);
}

.wbt-input-icon-btn:hover {
    background: var(--text-primary);
    color: var(--surface);
    transform: translateY(-50%) scale(1.05);
}

.wbt-input-icon-btn i {
    font-size: 13px;
}

/* ========================================
   DIVIDER
   ======================================== */

.wbt-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-xl) 0;
}

/* ========================================
   CHECKBOX STYLES
   ======================================== */

.wbt-checkbox-field {
    margin-bottom: var(--space-sm);
}

.wbt-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    transition: border-color 0.2s ease, background 0.2s ease;
    gap: 12px;
}

.wbt-checkbox:hover {
    border-color: var(--border-secondary);
    background: var(--bg-tertiary);
}

.wbt-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Toggle track */
.wbt-checkbox-mark {
    position: relative;
    height: 24px;
    width: 44px;
    min-width: 44px;
    border: none;
    border-radius: 12px;
    background: var(--border-secondary);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Toggle thumb */
.wbt-checkbox-mark::after {
    content: '';
    position: absolute;
    display: block;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: none;
    border-width: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: none;
}

/* Checked track */
.wbt-checkbox input:checked ~ .wbt-checkbox-mark {
    background: var(--success);
}

/* Checked thumb slides right */
.wbt-checkbox input:checked ~ .wbt-checkbox-mark::after {
    display: block;
    left: 23px;
    transform: none;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
}

/* Card state when checked */
.wbt-checkbox:has(input:checked) {
    border-color: var(--success-light);
    background: var(--success-light);
}

.wbt-checkbox-label {
    margin-left: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.wbt-checkbox input:checked ~ .wbt-checkbox-label {
    color: var(--success);
    font-weight: 700;
}

/* --- Transporter Panel (slides in when toggle is on) --- */
.wbt-transporter-panel {
    padding: 10px 14px;
    margin-top: -2px;
    margin-bottom: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--success-light);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    animation: wbt-panel-slide 0.2s ease;
}

@keyframes wbt-panel-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .wbt-transporter-panel {
    background: var(--surface);
    border-color: var(--success-light);
}

/* ========================================
   INLINE CHECKBOX FIELD
   ======================================== */

.wbt-inline-checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wbt-inline-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 0;
    border-radius: var(--radius-md);
    transition: background var(--transition-base), border-color var(--transition-base);
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-primary);
    background: var(--surface);
    margin-top: 0;
}

.wbt-inline-checkbox:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.wbt-inline-checkbox input:checked {
    opacity: 0;
}

.wbt-inline-checkbox input:checked + .wbt-checkbox-mark {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
}

.wbt-inline-checkbox:has(input:checked) {
    background: var(--bg-tertiary) !important;
    border-color: var(--text-secondary) !important;
}

.wbt-inline-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wbt-inline-checkbox .wbt-checkbox-mark {
    position: relative;
    display: inline-block;
    height: 32px;
    width: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    transition: background var(--transition-base);
    flex-shrink: 0;
}

.wbt-inline-checkbox input:checked ~ .wbt-checkbox-mark {
    background: var(--text-primary) !important;
}

.wbt-inline-checkbox .wbt-checkbox-mark::after {
    content: '';
    position: absolute;
    display: none;
    left: 50%;
    top: 45%;
    width: 7px;
    height: 13px;
    border: solid var(--on-accent);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.wbt-inline-checkbox input:checked ~ .wbt-checkbox-mark::after {
    display: block !important;
}

.wbt-inline-checkbox-field .wbt-select {
    flex: 1;
    min-width: 0;
}

/* ========================================
   FOOTER & BUTTON STYLES
   ======================================== */

.wbt-footer-template {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-xs) 0;
}

.wbt-sfdialog .e-footer-content,
.wbt-sfdialog .e-dlg-footerbar {
    background: var(--chrome-bg) !important;
    border-top: none !important;
    padding: var(--space-sm) var(--space-lg) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.wbt-sfdialog .e-footer-content::before,
.wbt-sfdialog .e-dlg-footerbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* ========================================
   BUTTONS
   ======================================== */

.wbt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid var(--border-primary);
    outline: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-family: var(--font-sans);
    box-shadow: var(--shadow-sm);
}

.wbt-btn i,
.wbt-btn [data-lucide] {
    width: 14px;
    height: 14px;
}

.wbt-btn-primary {
    background: var(--accent-primary);
    color: var(--on-accent) !important;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-accent-md);
}

.wbt-btn-primary i,
.wbt-btn-primary span {
    color: var(--on-accent) !important;
}

.wbt-btn-primary:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-md);
}

.wbt-btn-primary:active {
    transform: translateY(0);
}

.wbt-btn-secondary {
    background: var(--chrome-hover);
    color: var(--chrome-text-muted);
    border: 1px solid var(--chrome-input-border);
}

.wbt-btn-secondary:hover {
    background: var(--chrome-active);
    border-color: var(--chrome-border);
    color: var(--chrome-text);
}

.wbt-btn-secondary i,
.wbt-btn-secondary span {
    color: inherit;
}

.wbt-btn-success {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success-light);
    box-shadow: none;
}

.wbt-btn-success i,
.wbt-btn-success span {
    color: inherit !important;
}

.wbt-btn-success:hover {
    background: var(--success-light);
    border-color: var(--success-light);
    color: #86efac;
}

.wbt-btn-danger {
    background: var(--error-light);
    color: var(--error);
    border-color: var(--error-light);
}

.wbt-btn-danger:hover {
    background: var(--error-light);
    border-color: var(--error-light);
    color: var(--error);
}

.wbt-btn-danger i,
.wbt-btn-danger span {
    color: inherit;
}

.wbt-btn-divider {
    width: 1px;
    height: 24px;
    background: var(--chrome-border);
    margin: 0 var(--space-xs);
}

.wbt-btn-block {
    width: 100%;
    justify-content: center;
}

/* ========================================
   ACCORDION STYLES
   ======================================== */

.wbt-accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex: none;
}

.wbt-accordion-item {
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.wbt-accordion-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

.wbt-accordion-item[open] {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-md);
}

.wbt-accordion-warning {
    border-color: var(--error);
}

.wbt-accordion-warning:hover {
    border-color: var(--error);
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.15);
}

.wbt-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    list-style: none;
    user-select: none;
    transition: background var(--transition-base), color var(--transition-base);
}

.wbt-accordion-header::-webkit-details-marker {
    display: none;
}

.wbt-accordion-header:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.wbt-accordion-header i:first-child,
.wbt-accordion-header [data-lucide]:first-child {
    color: var(--text-muted);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.wbt-accordion-header span {
    flex: 1;
    font-size: var(--text-sm);
}

.wbt-accordion-icon {
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.wbt-accordion-icon [data-lucide] {
    width: 13px;
    height: 13px;
}

.wbt-accordion-item[open] .wbt-accordion-icon {
    transform: rotate(180deg);
}

.wbt-accordion-content {
    padding: var(--space-md);
    background: var(--surface);
    animation: accordionSlideDown 0.3s ease-out;
}

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

/* ========================================
   Seal Tag Input
   ======================================== */

.wbt-seal-input-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 38px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wbt-seal-input-area:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.wbt-seal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    background: var(--accent-light);
    border: 1px solid var(--accent-20);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    white-space: nowrap;
    animation: sealTagIn 0.15s ease-out;
}

@keyframes sealTagIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.wbt-seal-tag > [data-lucide]:first-child,
.wbt-seal-tag > i:first-child {
    width: 11px;
    height: 11px;
    color: var(--accent-primary);
    opacity: 0.7;
    flex-shrink: 0;
}

.wbt-seal-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.wbt-seal-tag-remove:hover {
    background: var(--error-light);
    color: var(--error);
}

.wbt-seal-tag-remove [data-lucide],
.wbt-seal-tag-remove i {
    width: 12px;
    height: 12px;
}

.wbt-seal-text-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: var(--text-primary);
    padding: 3px 0;
    font-family: inherit;
}

.wbt-seal-text-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.wbt-seal-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    padding: 0 2px;
}

.wbt-seal-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f3f3);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--border-primary);
    line-height: 1.4;
}

[data-theme="dark"] .wbt-seal-hint kbd {
    background: var(--surface-elevated);
    border-color: var(--border-secondary);
    color: var(--text-disabled);
    box-shadow: 0 1px 0 var(--border-primary);
}

/* Dark mode */
[data-theme="dark"] .wbt-seal-input-area {
    border-color: var(--border-primary);
    background: var(--bg-secondary);
}

[data-theme="dark"] .wbt-seal-input-area:focus-within {
    border-color: var(--accent-primary);
    background: var(--surface);
}

[data-theme="dark"] .wbt-seal-tag {
    background: var(--accent-10);
    border-color: var(--accent-20);
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-seal-text-input {
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-seal-text-input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-seal-tag-remove:hover {
    background: var(--error-light);
    color: var(--error);
}

/* ========================================
   Lab Details Section
   ======================================== */

.wbt-lab-status {
    font-size: 11px;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wbt-lab-status-done {
    background: var(--success-light);
    color: var(--success);
}

.wbt-lab-status-pending {
    background: var(--warning-light);
    color: var(--warning);
}

.wbt-lab-meta {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-sm) 0 var(--space-md) 0;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.wbt-lab-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wbt-lab-meta i {
    color: var(--text-muted);
    font-size: 12px;
}

.wbt-lab-tests-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.wbt-lab-test-item {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.wbt-lab-test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 4px;
}

.wbt-lab-test-header label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.wbt-lab-spec-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wbt-lab-spec-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.wbt-lab-spec-min {
    background: var(--info-light);
    color: var(--info);
}

.wbt-lab-spec-max {
    background: var(--error-light);
    color: var(--error);
}

.wbt-lab-spec-default {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-secondary);
}

.wbt-lab-test-item .wbt-input-wrapper {
    margin: 0;
}

.wbt-lab-test-item .wbt-input {
    padding: 5px 8px;
    font-size: var(--text-xs);
    height: 30px;
}

.wbt-lab-out-of-spec {
    border-color: var(--error) !important;
    background: var(--error-light) !important;
    color: var(--error) !important;
}

.wbt-lab-in-spec {
    border-color: var(--success) !important;
    background: var(--success-light) !important;
}

.wbt-lab-no-tests {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.wbt-lab-no-tests i {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .wbt-lab-tests-grid {
        grid-template-columns: 1fr;
    }
}

.wbt-field-group-label {
    margin: var(--space-lg) 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-primary);
}

.wbt-field-group-label label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ========================================
   SUMMARY SECTION
   ======================================== */

.wbt-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.wbt-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 56px;
    justify-content: center;
}

.wbt-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-secondary);
}

.wbt-summary-card.wbt-summary-highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid var(--success);
    position: relative;
}

.wbt-summary-card.wbt-summary-highlight:hover {
    box-shadow: var(--shadow-md);
}

.wbt-summary-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--leading-normal);
}

.wbt-summary-label i {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.wbt-summary-highlight .wbt-summary-label {
    color: var(--success);
}

.wbt-summary-highlight .wbt-summary-label i {
    color: var(--success);
}

.wbt-summary-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: var(--leading-tight);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
}

.wbt-summary-highlight .wbt-summary-value {
    color: var(--success);
    font-size: 1.35rem;
    font-weight: 900;
}

/* ========================================
   SUMMARY
   ======================================== */

.wbt-sum-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* ---- Mass In / Mass Out — side by side row ---- */
.wbt-sum-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--border-primary);
}

.wbt-sum-block {
    padding: 10px 12px;
    position: relative;
}

.wbt-sum-row-pair .wbt-sum-block:first-child {
    border-right: 1px solid var(--border-primary);
}

.wbt-sum-block-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.wbt-sum-block-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wbt-sum-block-date {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wbt-sum-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.wbt-sum-block-in .wbt-sum-icon { color: var(--info); }
.wbt-sum-block-in .wbt-sum-block-title { color: var(--info); }

.wbt-sum-block-out .wbt-sum-icon { color: #8b5cf6; }
.wbt-sum-block-out .wbt-sum-block-title { color: #8b5cf6; }

.wbt-sum-block-body {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.wbt-sum-block-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    font-family: var(--font-numeric, var(--font-sans));
}

.wbt-sum-unit {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.wbt-sum-block-detail {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---- Nett before FM — subdued row ---- */
.wbt-sum-block-nett-before {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
}

.wbt-sum-block-nett-before .wbt-sum-icon { color: var(--text-muted); }
.wbt-sum-block-nett-before .wbt-sum-block-title { color: var(--text-muted); }

.wbt-sum-block-nett-before .wbt-sum-block-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ---- FM strip ---- */
.wbt-sum-fm-strip {
    padding: 0;
}

.wbt-sum-fm-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-dim);
    border-bottom: 1px solid var(--accent-light);
    border-top: 1px solid var(--accent-light);
    padding: 6px 12px;
}

.wbt-sum-fm-icon {
    width: 12px;
    height: 12px;
    color: var(--accent-secondary);
    flex-shrink: 0;
}

.wbt-sum-fm-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-secondary);
    font-variant-numeric: tabular-nums;
}

.wbt-sum-fm-amount {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}

/* ---- Nett mass — final result ---- */
.wbt-sum-block-nett {
    background: var(--success-light);
    padding: 10px 12px;
    border-radius: 0 0 6px 6px;
}

.wbt-sum-block-nett .wbt-sum-icon { color: var(--success); }
.wbt-sum-block-nett .wbt-sum-block-title { color: var(--success); }

.wbt-sum-nett-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #15803d;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    font-family: var(--font-numeric, var(--font-sans));
}

.wbt-sum-nett-value .wbt-sum-unit {
    font-size: 0.75rem;
    color: var(--success);
}

/* ============ Summary dark mode ============ */
[data-theme="dark"] .wbt-sum-row-pair {
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .wbt-sum-row-pair .wbt-sum-block:first-child {
    border-right-color: var(--border-primary);
}

[data-theme="dark"] .wbt-sum-block-title { color: var(--text-tertiary); }
[data-theme="dark"] .wbt-sum-block-date { color: var(--text-muted); }
[data-theme="dark"] .wbt-sum-block-value { color: var(--text-primary); }
[data-theme="dark"] .wbt-sum-unit { color: var(--text-muted); }
[data-theme="dark"] .wbt-sum-block-detail { color: var(--text-muted); }

[data-theme="dark"] .wbt-sum-block-in .wbt-sum-icon,
[data-theme="dark"] .wbt-sum-block-in .wbt-sum-block-title { color: #60a5fa; }

[data-theme="dark"] .wbt-sum-block-out .wbt-sum-icon,
[data-theme="dark"] .wbt-sum-block-out .wbt-sum-block-title { color: #a78bfa; }

[data-theme="dark"] .wbt-sum-block-nett-before {
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .wbt-sum-block-nett-before .wbt-sum-block-value { color: var(--text-muted); }
[data-theme="dark"] .wbt-sum-block-nett-before .wbt-sum-icon,
[data-theme="dark"] .wbt-sum-block-nett-before .wbt-sum-block-title { color: var(--text-tertiary); }

[data-theme="dark"] .wbt-sum-fm-bar {
    background: var(--accent-light);
    border-color: var(--accent-20);
}

[data-theme="dark"] .wbt-sum-fm-icon { color: #f59e0b; }
[data-theme="dark"] .wbt-sum-fm-label { color: #fbbf24; }
[data-theme="dark"] .wbt-sum-fm-amount { color: #f59e0b; }

[data-theme="dark"] .wbt-sum-block-nett {
    background: rgba(21, 128, 61, 0.12);
}

[data-theme="dark"] .wbt-sum-block-nett .wbt-sum-icon,
[data-theme="dark"] .wbt-sum-block-nett .wbt-sum-block-title { color: #4ade80; }
[data-theme="dark"] .wbt-sum-nett-value { color: #4ade80; }
[data-theme="dark"] .wbt-sum-nett-value .wbt-sum-unit { color: #22c55e; }

/* ========================================
   TIMELINE — stacked block layout
   ======================================== */

.wbt-tl {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* Each stage block */
.wbt-tl-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wbt-tl-block:hover {
    border-color: var(--border-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.wbt-tl-block-final {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: var(--success);
}

.wbt-tl-block-final:hover {
    border-color: #86efac;
}

/* Icon circle */
.wbt-tl-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    transition: background 0.15s ease;
}

.wbt-tl-block:hover .wbt-tl-icon {
    background: var(--border-secondary);
}

.wbt-tl-icon-final {
    background: #dcfce7 !important;
    color: var(--success) !important;
}

.wbt-tl-block-final:hover .wbt-tl-icon-final {
    background: var(--success-light) !important;
}

/* Info text */
.wbt-tl-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.wbt-tl-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.wbt-tl-block-final .wbt-tl-name {
    color: var(--success);
}

.wbt-tl-date {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* Down arrow connector between blocks */
.wbt-tl-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    color: var(--border-secondary);
    font-size: 14px;
}

.wbt-tl-arrow i {
    color: var(--text-muted);
    font-size: 12px;
}

/* Duration pill next to arrow */
.wbt-tl-dur {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 9999px;
    padding: 1px 8px;
    line-height: 1.4;
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
}

/* ---- Dark Mode Timeline ---- */
[data-theme="dark"] .wbt-tl-block {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-tl-block:hover {
    border-color: var(--border-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .wbt-tl-block-final {
    background: #0a1a10;
    border-color: var(--success-light);
}

[data-theme="dark"] .wbt-tl-icon {
    background: var(--border-primary);
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-tl-block:hover .wbt-tl-icon {
    background: var(--border-secondary);
}

[data-theme="dark"] .wbt-tl-icon-final {
    background: var(--success-light) !important;
    color: var(--success) !important;
}

[data-theme="dark"] .wbt-tl-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-tl-block-final .wbt-tl-name {
    color: var(--success);
}

[data-theme="dark"] .wbt-tl-date {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-tl-arrow i {
    color: var(--text-disabled);
}

[data-theme="dark"] .wbt-tl-dur {
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

/* ========================================
   FLAT TEXT DISPLAY
   ======================================== */

.wbt-flat-text-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-top: var(--space-xs);
}

.wbt-flat-text-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.wbt-flat-text-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
    min-height: 42px;
}

.wbt-flat-text-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

.wbt-flat-text-label {
    font-size: 0.65rem;
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    line-height: var(--leading-normal);
    font-family: var(--font-sans);
}

.wbt-nett-mass-container {
    padding: 8px 12px;
}

.wbt-nett-mass-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.wbt-flat-text-value {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    word-wrap: break-word;
    font-family: var(--font-sans);
}

.wbt-flat-text-value:empty::before {
    content: '\2014';
    color: var(--text-muted);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.wbt-column-wide {
    grid-column: span 2;
}

.wbt-column-full {
    grid-column: 1 / -1;
}

.wbt-column-compact {
    min-width: 280px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (min-width: 1800px) {
    .wbt-form-grid {
        gap: var(--space-lg);
    }

    .wbt-column {
        padding: var(--space-lg);
    }
}

@media (max-width: 1199px) {
    .wbt-form-grid {
        grid-template-columns: 1fr 1fr;
        flex: none;
        min-height: auto;
    }

    .wbt-content {
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
    }

    .wbt-column {
        overflow-y: visible;
        overflow-x: visible;
    }

    .wbt-column:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 899px) {
    .wbt-form-grid {
        gap: var(--space-sm);
    }

    .wbt-header {
        padding: var(--space-sm) var(--space-md);
    }

    .wbt-content {
        padding: var(--space-sm);
    }
}

@media (max-width: 699px) {
    .wbt-form-grid {
        grid-template-columns: 1fr;
    }

    .wbt-content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .wbt-column {
        overflow-y: visible;
        overflow-x: visible;
    }

    .wbt-column-wide {
        grid-column: span 1;
    }

    .wbt-title {
        font-size: var(--text-lg);
    }

    .wbt-sfdialog .e-dlg-footerbar {
        padding: var(--space-sm) var(--space-md);
    }

    .wbt-btn {
        padding: 8px 16px;
        font-size: var(--text-xs);
    }

    .wbt-field-row {
        grid-template-columns: 1fr;
    }

    .wbt-summary-grid {
        grid-template-columns: 1fr;
    }

    .wbt-flat-text-row {
        grid-template-columns: 1fr;
    }

    .wbt-identity-row {
        grid-template-columns: 1fr;
    }

    .wbt-info-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wbt-info-card .wbt-status-badge {
        margin-left: 0 !important;
    }

    .wbt-detail-grid {
        grid-template-columns: 1fr;
    }

    .wbt-detail-item {
        border-right: none;
    }

    .wbt-spec-toggles {
        flex-direction: column;
    }

    .wbt-price-hero-value {
        font-size: 1.3rem;
    }

    .wbt-tl-block {
        padding: 10px 12px;
    }

    .wbt-tl-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .wbt-header {
        padding: var(--space-xs) var(--space-sm);
    }

    .wbt-title {
        font-size: var(--text-base);
    }

    .wbt-title img {
        display: none;
    }

    .wbt-content {
        padding: var(--space-xs);
    }

    .wbt-column {
        padding: var(--space-sm);
    }

    .wbt-tl-name {
        font-size: 0.8rem;
    }

    .wbt-tl-date {
        font-size: 0.68rem;
    }

    .wbt-footer-template {
        gap: var(--space-xs);
        flex-wrap: wrap;
        justify-content: center;
    }

    .wbt-btn span {
        display: none;
    }

    .wbt-btn {
        padding: 8px 12px;
    }

    .wbt-btn-divider {
        display: none;
    }
}

/* ========================================
   NEXT-LEVEL POLISH
   ======================================== */

/* Animated pulse on status dot */
.wbt-status-active .wbt-status-dot {
    animation: wbt-pulse-green 2s ease-in-out infinite;
}

@keyframes wbt-pulse-green {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.8), 0 0 4px rgba(34, 197, 94, 0.4); }
}

/* Staggered column entrance animation */
.wbt-form-grid .wbt-column:nth-child(1) { animation: wbt-col-enter 0.4s ease-out both; animation-delay: 0.05s; }
.wbt-form-grid .wbt-column:nth-child(2) { animation: wbt-col-enter 0.4s ease-out both; animation-delay: 0.12s; }
.wbt-form-grid .wbt-column:nth-child(3) { animation: wbt-col-enter 0.4s ease-out both; animation-delay: 0.19s; }

@keyframes wbt-col-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section divider icon — subtle gradient background */
.wbt-section-divider i {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--border-primary) 100%);
}

/* Section divider line — gradient fade-out */
.wbt-section-divider::after {
    background: linear-gradient(90deg, var(--border-secondary) 0%, transparent 100%);
}

/* Accordion container flush at column top */
.wbt-column > .wbt-accordion-container:first-child {
    margin-top: 0;
}

/* Accordion header icon — subtle color shift on open */
.wbt-accordion-item[open] .wbt-accordion-header i:first-child {
    color: var(--accent-primary);
}

/* Price tag row layout */
.wbt-price-tag + .wbt-price-tag {
    margin-top: 0;
}

/* Column inner shadow top-line accent */
.wbt-column::before {
    content: '';
    display: block;
    height: 2px;
    margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md) calc(-1 * var(--space-md));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(90deg, var(--accent-primary) 0%, transparent 70%);
    opacity: 0.5;
}

/* Field focus ring */
.wbt-input:focus,
.wbt-select:focus {
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.18);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes wbt-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   DARK MODE — CONTRAST & VISIBILITY
   Cards, inputs, labels, sections all need
   clear visual separation on dark backgrounds
   ======================================== */

/* Darken the content area behind the cards */
[data-theme="dark"] .wbt-content {
    background: var(--bg-primary);
}

/* Column cards — lift them off the background */
[data-theme="dark"] .wbt-column {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .wbt-column:hover {
    border-color: var(--border-secondary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Column top accent stripe — slightly brighter in dark */
[data-theme="dark"] .wbt-column::before {
    opacity: 0.7;
}

/* ---- INPUTS: must be clearly lighter than the card ---- */
[data-theme="dark"] .wbt-input {
    background: var(--surface-elevated);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-15);
}

[data-theme="dark"] .wbt-input:read-only,
[data-theme="dark"] .wbt-input:disabled {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-input-highlight {
    background: var(--accent-dim) !important;
    border-color: var(--accent-30) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .wbt-input-prominent {
    background: var(--surface-elevated) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .wbt-input-prominent:read-only {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .wbt-select {
    background-color: var(--surface-elevated);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .wbt-select:disabled {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-muted);
}

/* ---- LABELS: higher contrast ---- */
[data-theme="dark"] .wbt-field label {
    color: var(--text-tertiary);
}

/* ---- SECTION DIVIDERS: more visible ---- */
[data-theme="dark"] .wbt-section-divider {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-section-divider i {
    background: var(--surface-elevated);
    border-color: var(--border-secondary);
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-section-divider::after {
    background: linear-gradient(90deg, var(--border-secondary) 0%, transparent 100%);
}

[data-theme="dark"] .wbt-section-divider:not(:first-child) {
    border-top-color: var(--border-primary);
}

/* ---- ACCORDIONS: visible headers & content ---- */
[data-theme="dark"] .wbt-accordion-item {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-accordion-item:hover {
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-accordion-item[open] {
    border-color: var(--border-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wbt-accordion-header {
    background: var(--surface);
}

[data-theme="dark"] .wbt-accordion-header:hover {
    background: var(--surface-elevated);
}

[data-theme="dark"] .wbt-accordion-content {
    background: var(--bg-secondary);
}

/* ---- PRICE HERO ---- */
[data-theme="dark"] .wbt-price-hero {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-price-hero:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-price-hero-label {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-price-hero-edit {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-price-hero-edit:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-price-hero-currency {
    color: var(--success);
}

[data-theme="dark"] .wbt-price-hero-value {
    color: var(--text-primary);
}

/* ---- PRICE BREAKDOWN ---- */
[data-theme="dark"] .wbt-price-breakdown {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-price-line {
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .wbt-price-line:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .wbt-price-line-label {
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-price-line-label i {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-price-line-value {
    color: var(--text-secondary);
}

[data-theme="dark"] .wbt-price-contract-note {
    background: #1a1a10;
    border-color: #444420;
    color: #ccaa44;
}

[data-theme="dark"] .wbt-price-contract-note i {
    color: #ccaa44;
}

[data-theme="dark"] .wbt-price-contract-note strong {
    color: #eedd88;
}

/* ---- PRICE TAGS (legacy) ---- */
[data-theme="dark"] .wbt-price-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

/* ---- FLAT TEXT ITEMS (Check-In grid, etc) ---- */
[data-theme="dark"] .wbt-flat-text-container {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-flat-text-item {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-flat-text-item:hover {
    background: var(--surface-elevated);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-flat-text-label {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-flat-text-value {
    color: var(--text-secondary);
}

/* ---- SUMMARY CARDS ---- */
[data-theme="dark"] .wbt-summary-card {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-summary-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-summary-label {
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-summary-label i {
    color: var(--text-muted);
}

[data-theme="dark"] .wbt-summary-value {
    color: var(--text-primary);
}

[data-theme="dark"] .wbt-summary-card.wbt-summary-highlight {
    background: #0a1a10;
    border-color: var(--success);
}

[data-theme="dark"] .wbt-summary-highlight .wbt-summary-label {
    color: var(--success);
}

[data-theme="dark"] .wbt-summary-highlight .wbt-summary-label i {
    color: var(--success);
}

[data-theme="dark"] .wbt-summary-highlight .wbt-summary-value {
    color: var(--success);
}

/* ---- TIMELINE ---- */
/* Old timeline dark mode overrides removed — now in .wbt-tl section */

/* ---- CHECKBOX / TOGGLE ---- */
[data-theme="dark"] .wbt-checkbox {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-checkbox:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .wbt-checkbox-mark {
    background: var(--border-secondary);
}

[data-theme="dark"] .wbt-checkbox-mark::after {
    background: var(--text-secondary);
}

[data-theme="dark"] .wbt-checkbox input:checked ~ .wbt-checkbox-mark {
    background: var(--success);
}

[data-theme="dark"] .wbt-checkbox input:checked ~ .wbt-checkbox-mark::after {
    background: var(--surface);
}

[data-theme="dark"] .wbt-checkbox:has(input:checked) {
    border-color: var(--success-light);
    background: var(--success-light);
}

[data-theme="dark"] .wbt-checkbox-label {
    color: var(--text-tertiary);
}

[data-theme="dark"] .wbt-checkbox input:checked ~ .wbt-checkbox-label {
    color: var(--success);
}

/* ---- SPEC EXPAND BOXES ---- */
[data-theme="dark"] .wbt-spec-expand {
    background: var(--surface);
    border-color: var(--border-primary);
}

/* ---- PACKAGE-BASED DISPLAY ---- */
[data-theme="dark"] .wbt-package-calc-display {
    background: var(--surface);
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-package-calc-row {
    border-color: var(--border-primary);
}

[data-theme="dark"] .wbt-package-info-bar {
    background: var(--surface);
    border-color: var(--border-primary);
}

/* ---- LAB TEST ITEMS ---- */
[data-theme="dark"] .wbt-lab-test-item {
    background: var(--surface);
    border-color: var(--border-primary);
}

/* ---- FIELD GROUP LABELS ---- */
[data-theme="dark"] .wbt-field-group-label {
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .wbt-field-group-label label {
    color: var(--text-muted);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .wbt-close-btn,
    .wbt-footer-template,
    .wbt-sfdialog .e-dlg-footerbar {
        display: none !important;
    }

    .wbt-sfdialog.e-dialog {
        box-shadow: none !important;
    }
}

/* ========================================
   SUB-DIALOGS (Security, Silo, Contract, Price, Return)
   Shared styling to match main ticket dialog.
   NOTE: Sub-dialogs render inside the main dialog DOM.
   The main dialog's transform creates a new containing block
   that traps position:fixed overlays. We force the overlay
   and dialogs to use high z-index so they layer correctly.
   ======================================== */

/* Backdrop overlay for ALL sub-dialogs inside the weighbridge ticket.
   The main dialog's transform creates a new containing block, trapping
   position:fixed children. We style any Syncfusion overlay rendered
   as a sibling or inside the main dialog, AND we use ::before on the
   sub-dialog itself as a bulletproof fallback backdrop. */

/* Style any Syncfusion-generated overlay element */
.wbt-sfdialog .e-dlg-overlay,
.wbt-sub-dialog ~ .e-dlg-overlay,
.wbt-price-dlg ~ .e-dlg-overlay,
.wbt-return-reason-dlg ~ .e-dlg-overlay,
.wbt-contract-dlg ~ .e-dlg-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .wbt-sfdialog .e-dlg-overlay,
[data-theme="dark"] .wbt-sub-dialog ~ .e-dlg-overlay,
[data-theme="dark"] .wbt-price-dlg ~ .e-dlg-overlay,
[data-theme="dark"] .wbt-return-reason-dlg ~ .e-dlg-overlay,
[data-theme="dark"] .wbt-contract-dlg ~ .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Fallback: CSS-generated backdrop via ::before on the sub-dialog.
   This guarantees a dark overlay even if Syncfusion doesn't render
   its .e-dlg-overlay element for nested modals. */
.wbt-sub-dialog.e-dialog.e-dlg-modal::before {
    content: '';
    position: fixed;
    inset: -200vh -200vw;
    width: 500vw;
    height: 500vh;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
    pointer-events: none;
}

[data-theme="dark"] .wbt-sub-dialog.e-dialog.e-dlg-modal::before {
    background: rgba(0, 0, 0, 0.7);
}

.wbt-sub-dialog.e-dialog {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05) !important;
    border: none !important;
    font-family: var(--font-sans) !important;
    z-index: 100001 !important;
}

.wbt-sub-dialog.e-dialog.e-dlg-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 100001 !important;
}

/* Hide default Syncfusion header chrome */
.wbt-sub-dialog .e-dlg-header-content {
    padding: 0 !important;
    border: none !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.wbt-sub-dialog .e-dlg-header {
    width: 100% !important;
    color: var(--text-primary) !important;
}

.wbt-sub-dialog .e-dlg-header-content *,
.wbt-sub-dialog .e-dlg-header * {
    color: inherit;
}

.wbt-sub-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    display: none !important;
}

/* Custom header bar — dark chrome */
.wbt-sub-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

.wbt-sub-dialog-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
}

.wbt-sub-dialog-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    font-family: var(--font-serif);
}

.wbt-sub-dialog-header-content i,
.wbt-sub-dialog-header-content [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
    filter: brightness(1.2);
}

/* Content area */
.wbt-sub-dialog .e-dlg-content {
    padding: 0 !important;
    background: var(--bg-primary) !important;
    overflow: auto !important;
}

.wbt-sub-dialog-content {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.wbt-sub-dialog-grid-content {
    padding: var(--space-md);
}

/* Hint text */
.wbt-sub-dialog-hint {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
}

.wbt-sub-dialog-hint i {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

/* Security dialog — ticket info panel */
.wbt-sec-ticket-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-tertiary, #f8f8f8);
    border: 1px solid var(--border-soft, #e5e5e5);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

.wbt-sec-info-row {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06));
}

.wbt-sec-info-row:last-child { border-bottom: none; }

.wbt-sec-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    border-right: 1px solid var(--border-soft, rgba(0,0,0,0.06));
    min-width: 0;
    flex: 1;
}

.wbt-sec-info-item:last-child { border-right: none; }
.wbt-sec-info-full { flex: 1 1 100%; }

.wbt-sec-info-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted, #888);
}

.wbt-sec-info-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.3;
}

.wbt-sec-info-highlight {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Kill dialog animations — instant open */
.wbt-no-anim.e-dialog,
.wbt-no-anim .e-dlg-content {
    animation: none !important;
    transition: none !important;
}

/* Security dialog — enhanced input fields */
.wbt-sub-dialog .wbt-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.wbt-sub-dialog .wbt-input {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wbt-sub-dialog .wbt-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-15);
    background: var(--accent-dim);
}

.wbt-sub-dialog .wbt-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Security dialog — enhanced buttons */
.wbt-sub-dialog .wbt-btn-primary {
    background: var(--accent-primary);
    color: var(--on-accent);
    border-color: var(--accent-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 8px;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.wbt-sub-dialog .wbt-btn-primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.wbt-sub-dialog .wbt-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.wbt-sub-dialog .wbt-btn-secondary {
    background: transparent;
    color: var(--chrome-text-muted);
    border: 1px solid var(--chrome-border);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wbt-sub-dialog .wbt-btn-secondary:hover {
    background: var(--chrome-hover);
    color: var(--chrome-text);
    border-color: var(--chrome-border);
}

/* Security dialog — header shield icon amber */
.wbt-sub-dialog-header-content [data-lucide="shield"] {
    color: var(--accent-primary);
    filter: none;
}

/* ========================================
   PACKAGE-BASED CONTRACT STYLES
   ======================================== */
.wbt-input-package {
    background: var(--warning-light);
    border-color: var(--warning);
    font-weight: var(--font-bold);
}

.wbt-input-package:focus {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px var(--warning-light);
}

.wbt-package-info-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--warning);
    margin: var(--space-xs) 0;
}

.wbt-package-info-bar i {
    color: var(--warning);
    font-size: 12px;
}

.wbt-package-security-badge {
    margin-left: auto;
    background: var(--warning-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-semibold);
    font-size: 11px;
}

.wbt-package-security-badge i {
    color: var(--warning);
    font-size: 10px;
}

/* Package calculation display */
.wbt-package-calc-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin: var(--space-xs) 0 var(--space-sm) 0;
}

.wbt-package-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.wbt-package-calc-row + .wbt-package-calc-row {
    border-top: 1px solid var(--border-primary);
    margin-top: 4px;
    padding-top: 8px;
}

.wbt-package-calc-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wbt-package-calc-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.wbt-package-calc-total .wbt-package-calc-label {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.wbt-package-calc-total .wbt-package-calc-value {
    font-size: var(--text-base);
    color: var(--accent-primary);
    font-weight: var(--font-bold);
}

/* Footer bar — dark chrome */
.wbt-sub-dialog .e-footer-content,
.wbt-sub-dialog .e-dlg-footerbar {
    background: var(--bg-secondary) !important;
    border-top: none !important;
    padding: var(--space-sm) var(--space-lg) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.wbt-sub-dialog .e-footer-content::before,
.wbt-sub-dialog .e-dlg-footerbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.wbt-sub-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
}

/* Syncfusion dialog buttons on dark footer */
.wbt-sub-dialog .e-footer-content .e-btn,
.wbt-price-dlg .e-footer-content .e-btn,
.wbt-return-reason-dlg .e-footer-content .e-btn {
    background: var(--chrome-hover) !important;
    color: var(--chrome-text) !important;
    border: 1px solid var(--chrome-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    transition: background 0.15s ease !important, border-color 0.15s ease !important, color 0.15s ease !important;
}

.wbt-sub-dialog .e-footer-content .e-btn:hover,
.wbt-price-dlg .e-footer-content .e-btn:hover,
.wbt-return-reason-dlg .e-footer-content .e-btn:hover {
    background: var(--chrome-active) !important;
    border-color: var(--chrome-border) !important;
    color: var(--chrome-text) !important;
}

.wbt-sub-dialog .e-footer-content .e-btn.e-primary,
.wbt-price-dlg .e-footer-content .e-btn.e-primary,
.wbt-return-reason-dlg .e-footer-content .e-btn.e-primary {
    background: var(--accent-primary) !important;
    color: var(--on-accent) !important;
    border-color: var(--accent-primary) !important;
}

.wbt-sub-dialog .e-footer-content .e-btn.e-primary:hover,
.wbt-price-dlg .e-footer-content .e-btn.e-primary:hover,
.wbt-return-reason-dlg .e-footer-content .e-btn.e-primary:hover {
    filter: brightness(1.1) !important;
}

/* Input overrides for sub-dialogs */
.wbt-sub-dialog .wbt-input {
    color: var(--text-primary);
}

.wbt-sub-dialog .e-input,
.wbt-sub-dialog .e-input-group input.e-input,
.wbt-sub-dialog .e-input-group .e-input {
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
}

/* Grid styling inside sub-dialogs */
.wbt-sub-dialog .e-grid {
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    font-family: var(--font-sans) !important;
}

.wbt-sub-dialog .e-grid .e-headercell {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
}

.wbt-sub-dialog .e-grid .e-rowcell {
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
}

.wbt-sub-dialog .e-grid .e-row:hover .e-rowcell {
    background: var(--accent-light) !important;
}

.wbt-sub-dialog .e-grid .e-selectionbackground .e-rowcell {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    font-weight: var(--font-semibold) !important;
}

.wbt-sub-dialog .e-toolbar {
    border-bottom: 1px solid var(--border-primary) !important;
    background: var(--surface) !important;
}

.wbt-sub-dialog .e-grid .e-pager {
    border-top: 1px solid var(--border-primary) !important;
    background: var(--bg-secondary) !important;
    font-size: var(--text-xs) !important;
}

/* Contract click styling */
.wbt-sub-dialog #contract-name,
.wbt-sub-dialog #contract-name2 {
    cursor: pointer;
    color: var(--accent-primary);
    font-weight: var(--font-semibold);
    transition: color var(--transition-base);
}

.wbt-sub-dialog #contract-name:hover,
.wbt-sub-dialog #contract-name2:hover {
    text-decoration: underline;
}

.wbt-sub-dialog #contract-name3 {
    color: var(--text-muted);
    font-style: italic;
}

.wbt-sub-dialog #contract-name4 {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

/* ========================================
   SELECT CONTRACT DIALOG — V2
   ======================================== */

/* Dialog sizing */
.wbt-contract-dlg.e-dialog.e-dlg-modal {
    width: min(1600px, 96vw) !important;
    height: auto !important;
    max-height: 92vh !important;
}

.wbt-contract-dlg .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(92vh - 52px) !important;
}

/* ---- Header bar — seamless black ---- */
.wbt-ct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-primary);
    gap: 16px;
}

.wbt-ct-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.wbt-ct-header-left i,
.wbt-ct-header-left [data-lucide] {
    color: var(--accent-primary);
    width: 16px;
    height: 16px;
}

.wbt-ct-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--chrome-text-muted);
    background: var(--chrome-active);
    padding: 2px 10px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}

.wbt-ct-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search */
.wbt-ct-search {
    display: flex;
    align-items: center;
    background: var(--chrome-input-bg);
    border: 1px solid var(--chrome-input-border);
    border-radius: 6px;
    padding: 0 12px;
    height: 32px;
    min-width: 260px;
    transition: background .15s ease, border-color .15s ease;
}

.wbt-ct-search:focus-within {
    background: var(--chrome-active);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99,102,241,.18);
}

.wbt-ct-search i { color: var(--chrome-text-dim); font-size: 12px; margin-right: 8px; flex-shrink: 0; }

.wbt-ct-search-input {
    background: none; border: none; outline: none;
    color: var(--chrome-text); font-size: 13px; font-family: var(--font-sans);
    width: 100%; height: 100%;
}
.wbt-ct-search-input::placeholder { color: var(--chrome-text-dim); }

.wbt-ct-search-clear {
    background: none; border: none; color: var(--chrome-text-dim);
    cursor: pointer; padding: 4px; font-size: 11px;
    display: flex; align-items: center; transition: color .12s;
}
.wbt-ct-search-clear:hover { color: var(--chrome-text); }

/* Pending toggle — mini switch */
.wbt-ct-pending-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.wbt-ct-pending-toggle input { display: none; }

.wbt-ct-pending-track {
    width: 28px; height: 16px;
    background: var(--chrome-active);
    border-radius: 8px;
    position: relative;
    transition: background .15s;
}
.wbt-ct-pending-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: var(--chrome-text-dim);
    border-radius: 50%;
    transition: transform .15s, background .15s;
}
.wbt-ct-pending-toggle input:checked ~ .wbt-ct-pending-track {
    background: var(--accent-primary);
}
.wbt-ct-pending-toggle input:checked ~ .wbt-ct-pending-track .wbt-ct-pending-thumb {
    left: 14px;
    background: var(--surface);
}
.wbt-ct-pending-label {
    font-size: 11px; color: var(--chrome-text-dim);
    font-family: var(--font-sans); font-weight: 500;
}

/* ---- Body ---- */
.wbt-ct-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

/* Loading & empty */
.wbt-contract-loading, .wbt-contract-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px; height: 100%; min-height: 250px;
    color: var(--text-muted); font-size: 14px;
}
.wbt-contract-loading i { font-size: 28px; color: var(--accent-primary); }
.wbt-contract-empty i { font-size: 36px; opacity: .25; }

/* ---- Table scroll ---- */
.wbt-ct-table-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}
.wbt-ct-table-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.wbt-ct-table-scroll::-webkit-scrollbar-track { background: var(--bg-primary); }
.wbt-ct-table-scroll::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 3px; }
.wbt-ct-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Table ---- */
.wbt-ct-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 13px;
}

/* Headers — black, seamless with dialog header */
.wbt-ct-tbl thead { position: sticky; top: 0; z-index: 10; }

.wbt-ct-tbl thead th {
    background: var(--bg-primary);
    color: var(--chrome-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--chrome-border);
    white-space: nowrap;
}
.wbt-ct-tbl thead th:first-child { padding-left: 16px; }
.wbt-ct-r { text-align: right !important; }

/* Rows */
.wbt-ct-tr { transition: background .1s ease; }
.wbt-ct-tr td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 12.5px;
}
.wbt-ct-tr td:first-child { padding-left: 16px; }

.wbt-ct-tr:nth-child(even) { background: var(--bg-secondary); }
.wbt-ct-tr-click { cursor: pointer; }
.wbt-ct-tr-pending td { opacity: .5; }
.wbt-ct-tr-off td { opacity: .35; }

/* Type column — narrow, centered */
.wbt-ct-tbl thead th:first-child,
.wbt-ct-tr td:first-child { width: 72px; text-align: center; padding-left: 10px; padding-right: 4px; }

/* Contract number — always dark/black */
.wbt-ct-cc { display: flex; align-items: center; gap: 8px; }
.wbt-ct-cn {
    font-weight: 600;
    font-family: var(--font-mono, 'Cascadia Code', monospace);
    font-size: 12.5px;
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.wbt-ct-cn-sale { color: var(--text-primary); }
.wbt-ct-cn-purchase { color: var(--text-primary); }
.wbt-ct-cn-toll { color: var(--text-primary); }
.wbt-ct-cn-pend { color: var(--text-muted) !important; font-style: italic; }
.wbt-ct-cn-dead { color: var(--text-muted) !important; text-decoration: line-through; opacity: .6; }

/* Package badge */
.wbt-ct-pkg {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600;
    color: var(--accent-secondary); background: var(--accent-light);
    border: 1px solid var(--accent-light);
    padding: 1px 7px; border-radius: 10px;
    white-space: nowrap; font-family: var(--font-sans);
}
.wbt-ct-pkg i { font-size: 9px; }

/* Period */
.wbt-ct-per { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* Dual-line (company/product) */
.wbt-ct-dl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wbt-ct-m {
    font-size: 12.5px; font-weight: 500; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.wbt-ct-s { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono, monospace); }

/* Type pills — bolder, more readable, first column */
.wbt-ct-tp {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    padding: 3px 10px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .05em;
    min-width: 52px; text-align: center;
}
.wbt-ct-tp-sale    { background: var(--success-light); color: var(--success); }
.wbt-ct-tp-purchase { background: var(--accent-light); color: var(--accent-primary); }
.wbt-ct-tp-toll    { background: #312e81; color: #c7d2fe; }

/* Row left accent border by type */
.wbt-ct-tr td:first-child { border-left: 3px solid transparent; }
.wbt-ct-tr:has(.wbt-ct-tp-sale) td:first-child { border-left-color: var(--success); }
.wbt-ct-tr:has(.wbt-ct-tp-purchase) td:first-child { border-left-color: var(--warning); }
.wbt-ct-tr:has(.wbt-ct-tp-toll) td:first-child { border-left-color: #818cf8; }
.wbt-ct-tr-pending td:first-child,
.wbt-ct-tr-off td:first-child { border-left-color: transparent !important; }

/* Numeric cells */
.wbt-ct-num {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
}

.wbt-ct-neg { color: var(--error); font-weight: 600; }

/* Hover row glow */
.wbt-ct-tr-click:hover td { background: rgba(99,102,241,.05); }
.wbt-ct-tr-click:hover td:first-child { background: rgba(99,102,241,.08); }

/* ---- Dark mode ---- */
[data-theme="dark"] .wbt-ct-tbl thead th { background: var(--bg-primary); }
[data-theme="dark"] .wbt-ct-tr:nth-child(even) { background: rgba(255,255,255,.02); }
[data-theme="dark"] .wbt-ct-tr-click:hover td { background: rgba(99,102,241,.1); }
[data-theme="dark"] .wbt-ct-tr-click:hover td:first-child { background: rgba(99,102,241,.14); }
[data-theme="dark"] .wbt-ct-m { color: var(--text-primary); }
[data-theme="dark"] .wbt-ct-s { color: var(--text-muted); }
[data-theme="dark"] .wbt-ct-per { color: var(--text-muted); }

/* ---- Sortable headers ---- */
.wbt-ct-sortable {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.wbt-ct-sortable:hover { color: var(--accent-primary); }
[data-theme="dark"] .wbt-ct-sortable:hover { color: var(--accent-primary); }

/* ---- Loading overlay ---- */
.wbt-ct-loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* ---- Pagination ---- */
.wbt-ct-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
[data-theme="dark"] .wbt-ct-pager {
    border-top-color: var(--border-primary);
    background: var(--surface-inset);
}
.wbt-ct-pager-info {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}
[data-theme="dark"] .wbt-ct-pager-info { color: var(--text-muted); }
.wbt-ct-pager-total {
    color: var(--text-muted);
    font-weight: 400;
}
[data-theme="dark"] .wbt-ct-pager-total { color: var(--text-muted); }
.wbt-ct-pager-btns {
    display: flex;
    gap: 6px;
}
.wbt-ct-pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wbt-ct-pg-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-dim);
}
.wbt-ct-pg-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wbt-ct-pg-btn [data-lucide] > .lucide,
.wbt-ct-pg-btn i {
    width: 14px;
    height: 14px;
}
[data-theme="dark"] .wbt-ct-pg-btn {
    background: var(--surface);
    border-color: var(--border-secondary);
    color: var(--text-disabled);
}
[data-theme="dark"] .wbt-ct-pg-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-light);
}

/* ---- Responsive ---- */
@media (max-width: 899px) {
    .wbt-contract-dlg.e-dialog.e-dlg-modal { width: 98vw !important; max-height: 95vh !important; }
    .wbt-ct-search { min-width: 160px; }
    .wbt-ct-m { max-width: 130px; }
    .wbt-ct-pending-label { display: none; }
}

@media (max-width: 699px) {
    .wbt-ct-search { min-width: 120px; }
    .wbt-ct-badge { display: none; }
    .wbt-ct-tbl { font-size: 11px; }
    .wbt-ct-tr td { padding: 5px 8px; }
    .wbt-ct-pending-label { display: none; }
}

/* ========================================
   LARGER DIALOG OVERRIDE
   ======================================== */

.wbt-sfdialog.e-dialog.e-dlg-modal {
    width: min(1640px, 97vw) !important;
    height: auto !important;
    max-width: none !important;
    max-height: 96vh !important;
}

/* ========================================
   INFO LABEL ROWS (read-only data)
   ======================================== */

.wbt-info-card {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-sm);
    border: 1px solid var(--border-primary);
    margin-top: var(--space-sm);
}

.wbt-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--border-primary);
    gap: var(--space-sm);
    min-height: 26px;
}

.wbt-info-row:last-child {
    border-bottom: none;
}

.wbt-info-label {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.wbt-info-value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.wbt-info-highlight {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.02em;
}

.wbt-info-badge {
    font-size: 10px;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wbt-badge-blue   { background: var(--info-light); color: var(--info); }
.wbt-badge-orange { background: var(--warning-light); color: var(--warning); }
.wbt-badge-green  { background: var(--success-light); color: var(--success); }
.wbt-badge-purple { background: #ede9fe; color: #7c3aed; }
.wbt-badge-grey   { background: var(--bg-tertiary); color: var(--text-muted); }

/* ========================================
   WEIGHT HUB
   ======================================== */

.wbt-weight-hub {
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--surface) 100%);
    border-radius: var(--radius-md);
    padding: 14px var(--space-lg);
    margin-bottom: var(--space-md);
    text-align: center;
    border: 1px solid var(--border-secondary);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}

.wbt-weight-device-label {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.wbt-weight-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 6px 0;
    transition: color 0.4s ease;
}

.wbt-weight-value {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-disabled);
    letter-spacing: 3px;
    transition: color 0.4s ease;
}

.wbt-weight-unit {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.4s ease;
    align-self: flex-end;
    padding-bottom: 4px;
}

.wbt-weight-reading .wbt-weight-value  { color: var(--warning); }
.wbt-weight-reading .wbt-weight-unit   { color: var(--warning); }
.wbt-weight-stable  .wbt-weight-value  { color: var(--success); }
.wbt-weight-stable  .wbt-weight-unit   { color: var(--success); }
.wbt-weight-nosignal .wbt-weight-value { color: var(--text-secondary); }

/* ========================================
   STABILIZATION BAR
   ======================================== */

.wbt-stab-container { margin-top: 4px; }

.wbt-stab-track {
    height: 5px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.wbt-stab-fill {
    height: 100%;
    background: var(--warning);
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.5s ease;
}

.wbt-stab-fill.wbt-stab-complete { background: var(--success); }

.wbt-stab-status {
    font-size: 11px;
    font-weight: var(--font-medium);
    text-align: center;
    min-height: 16px;
}

.wbt-stab-ready    { color: var(--success); }
.wbt-stab-waiting  { color: var(--warning); }
.wbt-stab-nosignal { color: var(--text-secondary); }

/* ========================================
   CONFIRMATION OVERLAY
   ======================================== */

.wbt-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbt-fade-in 0.2s ease;
}

@@keyframes wbt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wbt-confirm-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 440px;
    max-width: 95vw;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: wbt-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border-top: 3px solid var(--text-primary);
}

.wbt-confirm-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
}

.wbt-confirm-header i { color: var(--text-secondary); font-size: 20px; }

.wbt-confirm-body { padding: var(--space-xl); }

.wbt-confirm-prompt {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 var(--space-lg) 0;
}

.wbt-weights-summary {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-primary);
}

.wbt-weight-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border-primary);
}

.wbt-weight-confirm-row:last-child { border-bottom: none; }

.wbt-weight-confirm-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

.wbt-weight-confirm-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.wbt-weight-confirm-net .wbt-weight-confirm-label,
.wbt-weight-confirm-net .wbt-weight-confirm-value {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 700;
}

.wbt-confirm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    background: var(--bg-secondary);
    border-top: none;
    position: relative;
}

.wbt-confirm-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.wbt-btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--on-accent) !important;
}

.wbt-btn-success:hover:not(:disabled) {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

.wbt-btn-success:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ========================================
   DATA LABEL ROWS  (read-only info display)
   ======================================== */

.wbt-data-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    margin-top: var(--space-xs);
}

.wbt-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
    border-bottom: 1px dashed var(--border-primary);
    gap: var(--space-sm);
    min-height: 26px;
}

.wbt-data-row:last-child {
    border-bottom: none;
}

.wbt-data-lbl {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.wbt-data-val {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.wbt-data-num {
    font-family: 'Courier New', monospace;
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
}

.wbt-data-hi {
    color: var(--accent-primary);
    font-weight: var(--font-bold);
}

.wbt-data-muted {
    color: var(--text-muted);
    font-style: italic;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */

.wbt-sec-div {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

/* ========================================
   PENDING SECTION TITLE
   ======================================== */

.wbt-sec-pending {
    color: var(--error) !important;
}

/* ========================================
   STATUS PILLS
   ======================================== */

.wbt-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.wbt-pill-ok {
    background: var(--success-light);
    color: var(--success);
}

.wbt-pill-warn {
    background: var(--warning-light);
    color: var(--warning);
}

/* ========================================
   SILO MASS GRID (two inputs side by side)
   ======================================== */

.wbt-silo-mass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* ========================================
   RETURN REASON DIALOG
   (placed AFTER .wbt-sub-dialog to override)
   ======================================== */

.wbt-return-reason-dlg.e-dialog {
    background: var(--surface) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

.wbt-return-reason-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.wbt-return-reason-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wbt-return-reason-header-icon i {
    color: var(--accent-primary);
    font-size: 16px;
}

.wbt-return-reason-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.wbt-return-reason-header-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.wbt-return-reason-dlg .e-dlg-header-content {
    padding: 16px 20px 12px !important;
    background: var(--bg-secondary) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.wbt-return-reason-dlg .e-dlg-header-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--accent-primary) 0%,
        var(--accent-secondary) 40%,
        transparent 100%);
    opacity: 0.7;
}

.wbt-return-reason-body {
    padding: 8px 4px;
}

.wbt-return-reason-dlg .e-dlg-content {
    padding: 0 !important;
    background: var(--surface) !important;
    overflow-y: auto !important;
    max-height: 60vh !important;
}

/* ═══ Categorized Return Reason Content ═══ */
.wbt-rr-content {
    padding: 16px 20px 12px;
}

.wbt-rr-section { margin-bottom: 4px; }

.wbt-rr-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wbt-rr-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.wbt-rr-step-sec {
    background: var(--hover-bg);
    color: var(--text-tertiary);
}

.wbt-rr-optional {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-tertiary);
}

.wbt-rr-sub-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-primary);
    background: var(--accent-light);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.wbt-rr-collapse {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.wbt-rr-collapse:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.wbt-rr-collapse [data-lucide],
.wbt-rr-collapse i { width: 14px; height: 14px; }

/* Category groups */
.wbt-rr-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wbt-rr-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wbt-rr-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--hover-bg);
    border-bottom: 1px solid var(--border-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
}

.wbt-rr-group-head [data-lucide],
.wbt-rr-group-head i { width: 11px; height: 11px; opacity: 0.5; }

.wbt-rr-group-count {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Reason row */
.wbt-rr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--border-primary);
    user-select: none;
}

.wbt-rr-row:last-child { border-bottom: none; }
.wbt-rr-row:hover { background: var(--hover-bg); }

.wbt-rr-row-active { background: var(--accent-light) !important; }

.wbt-rr-row-text {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Custom radio */
.wbt-rr-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.wbt-rr-radio.on { border-color: var(--accent-primary); }

.wbt-rr-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: wbt-rr-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wbt-rr-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Custom checkbox */
.wbt-rr-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wbt-rr-check.on {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
}

.wbt-rr-check.on [data-lucide],
.wbt-rr-check.on i {
    width: 10px;
    height: 10px;
    color: white;
    stroke-width: 3;
}

.wbt-rr-row-checked { background: var(--accent-dim); }
.wbt-rr-row-checked:hover { background: var(--accent-light); }

/* Other textarea */
.wbt-rr-other {
    padding: 4px 12px 8px 38px;
}

/* Divider */
.wbt-rr-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 14px 0;
}

/* Add additional reasons button */
.wbt-rr-add-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: 1px dashed var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wbt-rr-add-sub:hover {
    background: var(--hover-bg);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

.wbt-rr-add-sub [data-lucide],
.wbt-rr-add-sub i {
    width: 15px;
    height: 15px;
    color: var(--accent-primary);
    opacity: 0.7;
}

.wbt-rr-add-sub .wbt-rr-optional {
    margin-left: auto;
}

.wbt-rr-sub { gap: 6px; }
.wbt-rr-sub .wbt-rr-group { border-color: var(--border-primary); }
.wbt-rr-sub .wbt-rr-row { padding: 6px 12px; }
.wbt-rr-sub .wbt-rr-row-text { font-size: 12px; }

.wbt-return-reason-dlg .e-footer-content,
.wbt-return-reason-dlg .e-dlg-footerbar {
    background: var(--bg-secondary) !important;
    border-top: none !important;
    padding: 10px 20px !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.wbt-return-reason-dlg .e-footer-content::before,
.wbt-return-reason-dlg .e-dlg-footerbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.06) 100%);
}

/* Dark mode overrides */
[data-theme="dark"] .wbt-return-reason-dlg.e-dialog {
    background: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .wbt-return-reason-dlg .e-dlg-header-content {
    background: var(--bg-secondary) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .wbt-return-reason-dlg .e-dlg-content {
    background: var(--surface) !important;
}

[data-theme="dark"] .wbt-return-reason-dlg .e-footer-content,
[data-theme="dark"] .wbt-return-reason-dlg .e-dlg-footerbar {
    background: var(--bg-secondary) !important;
    border-color: transparent !important;
}

/* ========================================
   RETURN REASON CHIP (inline indicator)
   ======================================== */

.wbt-return-reason-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 16px 8px 16px;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.08), rgba(251, 146, 60, 0.05));
    border: 2px solid rgba(234, 88, 12, 0.35);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.wbt-return-reason-chip:hover {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(251, 146, 60, 0.09));
    border-color: rgba(234, 88, 12, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
}

.wbt-return-reason-chip > i:first-child {
    color: #ea580c;
    font-size: 14px;
    flex-shrink: 0;
}

.wbt-return-reason-label {
    font-size: 11px;
    font-weight: 800;
    color: #9a3412;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.wbt-return-reason-text {
    font-size: 13px;
    font-weight: 600;
    color: #c2410c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.wbt-return-edit-icon {
    color: #ea580c;
    font-size: 12px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.wbt-return-reason-chip:hover .wbt-return-edit-icon {
    opacity: 1;
}

/* Unset state — no reason specified */
.wbt-return-reason-chip.wbt-reason-unset {
    border-style: dashed;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.04), rgba(251, 146, 60, 0.02));
}

.wbt-return-reason-text.wbt-reason-none {
    font-style: italic;
    opacity: 0.7;
    font-weight: 500;
}

/* Dark mode */
[data-theme="dark"] .wbt-return-reason-chip {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.12), rgba(251, 146, 60, 0.06));
    border-color: rgba(234, 88, 12, 0.4);
}

[data-theme="dark"] .wbt-return-reason-chip:hover {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(251, 146, 60, 0.1));
    border-color: rgba(234, 88, 12, 0.6);
    box-shadow: 0 2px 12px rgba(234, 88, 12, 0.2);
}

[data-theme="dark"] .wbt-return-reason-label {
    color: #fb923c;
}

[data-theme="dark"] .wbt-return-reason-text {
    color: #fdba74;
}

[data-theme="dark"] .wbt-return-reason-chip > i:first-child,
[data-theme="dark"] .wbt-return-edit-icon {
    color: #fb923c;
}

/* Secondary return reason tags */
.wbt-return-reason-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 2px;
}

.wbt-return-sub-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-secondary);
    background: rgba(234, 88, 12, 0.08);
    border: 1px solid rgba(234, 88, 12, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

[data-theme="dark"] .wbt-return-sub-tag {
    color: #fdba74;
    background: rgba(234, 88, 12, 0.1);
    border-color: rgba(234, 88, 12, 0.25);
}

/* ========================================
   FULL-SCREEN OVERLAY DIALOG (no Syncfusion)
   Always dark — positioned below topbar (60px)
   ======================================== */

/* z-index 9999 ensures the overlay + dialog float ABOVE the sidebar
   (z-index ~200-300), the header (z-index 300), and every other element
   in the app. The backdrop covers the entire viewport including the sidebar. */
.wbt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbt-overlay-in 0.2s ease;
    outline: none;
}

@keyframes wbt-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wbt-dialog {
    width: 1600px;
    max-width: 96vw;
    height: 96vh;
    max-height: 96vh;
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px var(--accent-15),
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: wbt-dialog-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
}

@keyframes wbt-dialog-in {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header ───────────────────────────────────────────────── */
.wbt-dialog .wbt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--chrome-bg);
    border-bottom: none;
    flex-shrink: 0;
    position: relative;
    gap: 16px;
    color: var(--chrome-text);
}

.wbt-dialog .wbt-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

/* Header text inherits chrome color */
.wbt-dialog .wbt-header .wbt-title,
.wbt-dialog .wbt-header .wbt-subtitle {
    color: var(--chrome-text);
}

.wbt-dialog .wbt-header .wbt-subtitle strong {
    color: var(--accent-primary);
}

.wbt-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wbt-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-primary);
}

.wbt-header-icon [data-lucide] { width: 18px; height: 18px; }

.wbt-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wbt-dialog .wbt-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.wbt-subtitle {
    font-size: 12px;
    color: var(--chrome-text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbt-subtitle strong {
    color: var(--text-primary);
    font-weight: 800;
}

.wbt-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Badges ────────────────────────────────────────────────── */
.wbt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wbt-badge-pink {
    background: var(--accent-15);
    color: var(--accent-primary);
    border: 1px solid var(--accent-30);
}

.wbt-badge-white {
    background: var(--chrome-active);
    color: var(--chrome-text);
    border: 1px solid var(--chrome-border);
}

.wbt-badge-yellow {
    background: var(--accent-15);
    color: var(--accent-primary);
    border: 1px solid var(--accent-30);
}

.wbt-badge-green {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-light);
}

.wbt-badge-blue {
    background: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
}

/* ── Content area ──────────────────────────────────────────── */
.wbt-dialog .wbt-content {
    flex: 1;
    overflow: hidden;
    padding: 14px;
    background: var(--bg-secondary);
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-height: none;
}

.wbt-dialog .wbt-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
}

/* Each column is a distinct card — visible border, solid background,
   subtle shadow so they look like real panels on the bg-secondary canvas. */
.wbt-dialog .wbt-column {
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wbt-dialog .wbt-column:hover {
    border-color: var(--accent-20);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 4th column (action/weighing) — stronger accent left border */
.wbt-column-action {
    border-left: 3px solid var(--accent-primary) !important;
}

/* Dark mode column cards */
[data-theme="dark"] .wbt-dialog .wbt-column,
[data-theme="wa-dark"] .wbt-dialog .wbt-column,
[data-theme="meta-dark"] .wbt-dialog .wbt-column,
[data-theme="spotify"] .wbt-dialog .wbt-column {
    background: var(--surface);
    border-color: var(--chrome-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wbt-dialog .wbt-content,
[data-theme="wa-dark"] .wbt-dialog .wbt-content,
[data-theme="meta-dark"] .wbt-dialog .wbt-content,
[data-theme="spotify"] .wbt-dialog .wbt-content {
    background: var(--bg-primary);
}

/* ── Section titles (inside dialog) ────────────────────────── */
.wbt-dialog .wbt-section-title {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wbt-dialog .wbt-section-title:not(:first-child) {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--surface);
}

.wbt-dialog .wbt-section-title i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--surface-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    flex-shrink: 0;
}

.wbt-dialog .wbt-section-title [data-lucide] > .lucide {
    width: 13px;
    height: 13px;
    color: var(--accent-primary);
}

/* ── Info card (ticket info, company, product) ─────────────── */
.wbt-dialog .wbt-info-card {
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

.wbt-dialog .wbt-info-card:hover {
    border-color: var(--surface-elevated);
}

.wbt-dialog .wbt-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--surface);
}

.wbt-dialog .wbt-info-row:last-child {
    border-bottom: none;
}

.wbt-dialog .wbt-info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wbt-dialog .wbt-info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.wbt-dialog .wbt-info-highlight {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 15px;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    font-family: var(--font-numeric, monospace);
    font-variant-numeric: tabular-nums;
}

/* ── Data card (weigh-in, check-in, contract) ──────────────── */
.wbt-dialog .wbt-data-card {
    background: var(--bg-primary);
    border: 1px solid var(--surface);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 0;
}

.wbt-dialog .wbt-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--surface);
}

.wbt-dialog .wbt-data-row:last-child {
    border-bottom: none;
}

.wbt-dialog .wbt-data-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.wbt-dialog .wbt-data-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.wbt-dialog .wbt-data-num {
    font-family: var(--font-numeric, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.wbt-dialog .wbt-data-hi {
    color: var(--accent-primary);
    font-weight: 800;
    font-size: 15px;
    text-shadow: 0 0 10px var(--accent-20);
}

.wbt-dialog .wbt-data-muted {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ── Pills (Active, Open, Pending, etc.) ──────────────────── */
.wbt-dialog .wbt-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wbt-dialog .wbt-pill-ok {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-light);
}

.wbt-dialog .wbt-pill-warn {
    background: var(--accent-10);
    color: var(--accent-primary);
    border: 1px solid var(--accent-20);
}

.wbt-dialog .wbt-sec-pending .wbt-section-title,
.wbt-dialog .wbt-sec-pending {
    color: var(--accent-primary) !important;
}

/* ── Inputs inside dialog ──────────────────────────────────── */
.wbt-dialog .wbt-field {
    margin-bottom: 0;
}

.wbt-dialog .wbt-field-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.wbt-dialog .wbt-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--surface-elevated);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans, inherit);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 38px;
}

.wbt-dialog .wbt-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-10);
}

.wbt-dialog .wbt-input::placeholder {
    color: var(--text-tertiary);
}

.wbt-dialog .wbt-input-error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.wbt-dialog input[type="password"] {
    letter-spacing: 4px;
    font-size: 16px;
}

/* ── Operator code emphasis ────────────────────────────────── */
.wbt-dialog .wbt-field-operator {
    position: relative;
    background: var(--hover-bg);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}

.wbt-dialog .wbt-field-operator .wbt-field-label {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.wbt-dialog .wbt-field-operator .wbt-input {
    border-color: var(--border-secondary);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.wbt-dialog .wbt-field-operator .wbt-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-20), 0 0 16px var(--accent-light);
}

.wbt-dialog .wbt-field-operator .wbt-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ── Editable field highlight (registration, packages, etc.) ── */
.wbt-dialog .wbt-field-editable {
    position: relative;
    background: var(--hover-bg);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}

.wbt-dialog .wbt-field-editable .wbt-field-label {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
}

.wbt-dialog .wbt-field-editable .wbt-input {
    border-color: var(--border-secondary);
    background: var(--bg-primary);
}

.wbt-dialog .wbt-field-editable .wbt-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-15);
}

/* ── Close button ─────────────────────────────────────────── */
.wbt-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--chrome-hover);
    border: 1px solid var(--chrome-input-border);
    color: var(--chrome-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.wbt-close-btn [data-lucide] { width: 16px; height: 16px; }

.wbt-close-btn:hover {
    background: var(--error-light);
    border-color: var(--error-light);
    color: var(--error);
}

/* ── Silo mass grid ────────────────────────────────────────── */
.wbt-dialog .wbt-silo-mass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* ── Weight hub ────────────────────────────────────────────── */
.wbt-dialog .wbt-weight-hub {
    background: var(--bg-primary);
    border: 1px solid var(--surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.wbt-dialog .wbt-weight-device-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.wbt-dialog .wbt-weight-device-label [data-lucide] {
    width: 12px; height: 12px;
}

.wbt-dialog .wbt-weight-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 16px 0;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--surface);
    transition: border-color 0.4s ease;
}

.wbt-dialog .wbt-weight-value {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-numeric, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
}

.wbt-dialog .wbt-weight-unit {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.5;
}

/* Weight states */
.wbt-dialog .wbt-weight-nosignal {
    border-color: var(--surface-elevated);
}
.wbt-dialog .wbt-weight-nosignal .wbt-weight-value {
    color: var(--text-tertiary);
}

.wbt-dialog .wbt-weight-reading {
    border-color: var(--accent-30);
}
.wbt-dialog .wbt-weight-reading .wbt-weight-value {
    color: var(--accent-primary);
}

.wbt-dialog .wbt-weight-stable {
    border-color: var(--success-light);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.08), inset 0 0 30px rgba(34, 197, 94, 0.03);
}
.wbt-dialog .wbt-weight-stable .wbt-weight-value {
    color: var(--success);
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
}

/* Stabilisation bar */
.wbt-dialog .wbt-stab-container {
    margin-top: 12px;
}

.wbt-dialog .wbt-stab-track {
    height: 4px;
    background: var(--surface);
    border-radius: 2px;
    overflow: hidden;
}

.wbt-dialog .wbt-stab-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.wbt-dialog .wbt-stab-complete {
    background: linear-gradient(90deg, var(--success), var(--success)) !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.wbt-dialog .wbt-stab-status {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
}

.wbt-dialog .wbt-stab-status [data-lucide] {
    width: 12px; height: 12px;
    display: inline;
    vertical-align: -2px;
    margin-right: 4px;
}

.wbt-dialog .wbt-stab-nosignal { color: var(--text-tertiary); }
.wbt-dialog .wbt-stab-waiting  { color: var(--accent-primary); }
.wbt-dialog .wbt-stab-ready    { color: var(--success); }

/* ── Footer ────────────────────────────────────────────────── */
.wbt-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    background: var(--chrome-bg);
    border-top: none;
    flex-shrink: 0;
    position: relative;
}

.wbt-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

/* ── Buttons ───────────────────────────────────────────────── */
.wbt-dialog .wbt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    border: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.wbt-dialog .wbt-btn [data-lucide] {
    width: 14px; height: 14px;
}

.wbt-dialog .wbt-btn-primary {
    background: var(--accent-primary);
    color: var(--on-accent);
    box-shadow: 0 2px 12px rgba(255, 0, 131, 0.3);
}

.wbt-dialog .wbt-btn-primary:hover:not(:disabled) {
    background: var(--accent-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 0, 131, 0.4);
}

.wbt-dialog .wbt-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.wbt-dialog .wbt-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
}

.wbt-dialog .wbt-btn-secondary:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.wbt-dialog .wbt-btn-success {
    background: var(--success);
    color: var(--on-accent);
}

.wbt-dialog .wbt-btn-success:hover:not(:disabled) {
    background: var(--success);
}

.wbt-dialog .wbt-btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wbt-dialog .wbt-btn-divider {
    width: 1px;
    height: 20px;
    background: var(--surface-elevated);
}

/* ── Seal chips ────────────────────────────────────────────── */
.wbt-seal-container {
    margin-top: 8px;
}

.wbt-seal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.wbt-seal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.02em;
}

.wbt-seal-remove {
    background: none;
    border: none;
    color: rgba(255, 0, 131, 0.5);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.wbt-seal-remove:hover {
    color: var(--accent-primary);
}

.wbt-seal-input-row {
    display: flex;
    gap: 6px;
}

/* ========================================
   SILO SELECTION OVERLAY
   ======================================== */

.wbt-silo-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wbt-overlay-in 0.15s ease;
}

.wbt-silo-dialog {
    width: 900px;
    max-width: 95vw;
    max-height: 80vh;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--accent-dim);
    animation: wbt-dialog-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wbt-silo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(180deg, var(--surface-inset) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-primary);
    position: relative;
}

.wbt-silo-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 60%);
}

.wbt-silo-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.wbt-silo-header-left [data-lucide] {
    width: 18px; height: 18px;
    color: var(--accent-primary);
}

.wbt-silo-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--hover-bg);
    border-bottom: 1px solid var(--border-primary);
}

.wbt-silo-search {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    outline: none;
}

.wbt-silo-search::placeholder {
    color: var(--text-tertiary);
}

.wbt-silo-table-wrap {
    flex: 1;
    overflow-y: auto;
    max-height: 500px;
}

.wbt-silo-table-wrap::-webkit-scrollbar {
    width: 4px;
}

.wbt-silo-table-wrap::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.wbt-silo-table-wrap::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

.wbt-silo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wbt-silo-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
    z-index: 1;
}

.wbt-silo-table tbody td {
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
    font-weight: 500;
}

.wbt-silo-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.wbt-silo-row:hover {
    background: var(--accent-light);
}

.wbt-silo-row:hover td {
    color: var(--text-primary);
}

.wbt-silo-row:active {
    background: var(--accent-15);
}

/* ========================================
   TOAST NOTIFICATION SYSTEM
   ======================================== */

.wbt-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}

.wbt-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--surface-elevated);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: wbt-toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: all;
    min-width: 280px;
}

.wbt-toast-exit {
    animation: wbt-toast-out 0.3s ease forwards;
}

@keyframes wbt-toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes wbt-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

.wbt-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wbt-toast-icon [data-lucide] {
    width: 14px; height: 14px;
}

.wbt-toast-error .wbt-toast-icon {
    background: var(--error-light);
    color: var(--error);
}
.wbt-toast-error {
    border-color: var(--error-light);
}

.wbt-toast-warning .wbt-toast-icon {
    background: var(--accent-light);
    color: var(--warning);
}
.wbt-toast-warning {
    border-color: var(--accent-light);
}

.wbt-toast-success .wbt-toast-icon {
    background: var(--success-light);
    color: var(--success);
}
.wbt-toast-success {
    border-color: var(--success-light);
}

.wbt-toast-info .wbt-toast-icon {
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
}
.wbt-toast-info {
    border-color: rgba(37, 99, 235, 0.25);
}

.wbt-toast-body {
    flex: 1;
    min-width: 0;
}

.wbt-toast-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.wbt-toast-message {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wbt-toast-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.wbt-toast-close:hover {
    color: var(--text-primary);
}

/* ========================================
   INFO BADGE (progress badges)
   ======================================== */
.wbt-dialog .wbt-info-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wbt-dialog .wbt-badge-blue {
    background: rgba(37, 99, 235, 0.12);
    color: var(--info);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.wbt-dialog .wbt-badge-orange {
    background: var(--accent-10);
    color: var(--accent-primary);
    border: 1px solid var(--accent-20);
}

.wbt-dialog .wbt-badge-green {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-light);
}

.wbt-dialog .wbt-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.wbt-dialog .wbt-badge-grey {
    background: var(--hover-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

/* ========================================
   DIVIDER
   ======================================== */
.wbt-dialog .wbt-divider {
    height: 0;
    margin: 0;
}

.wbt-dialog .wbt-sec-div {
    height: 0;
    margin: 0;
}

/* ========================================
   SCROLLBAR (dark chrome)
   ======================================== */
.wbt-dialog .wbt-column::-webkit-scrollbar {
    width: 4px;
}

.wbt-dialog .wbt-column::-webkit-scrollbar-track {
    background: transparent;
}

.wbt-dialog .wbt-column::-webkit-scrollbar-thumb {
    background: var(--surface-elevated);
    border-radius: 2px;
}

.wbt-dialog .wbt-column::-webkit-scrollbar-thumb:hover {
    background: var(--border-primary);
}

/* ========================================
   RESPONSIVE — smaller screens
   ======================================== */
@media (max-width: 1400px) {
    .wbt-dialog {
        width: 98vw;
    }
    .wbt-dialog .wbt-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .wbt-dialog .wbt-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile: topbar is 56px */
@media (max-width: 768px) {
    .wbt-overlay {
        top: 56px;
    }
    .wbt-dialog {
        max-height: calc(100vh - 68px);
    }
    .wbt-silo-overlay {
        top: 56px;
    }
    .wbt-toast-container {
        top: 72px;
    }
}

/* ========================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
    .wbt-sfdialog.e-dialog {
        width: 95% !important;
        max-width: 95% !important;
    }

    .wbt-sum-row-pair {
        flex-direction: column;
    }

    .wbt-sum-row-pair .wbt-sum-block:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
    }
}

/* ========================================
   RESPONSIVE — Mobile (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .wbt-sfdialog.e-dialog {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .wbt-column {
        flex-direction: column;
        min-width: 0;
    }

    .wbt-dialog .wbt-column {
        flex: 1 1 100%;
        width: 100%;
    }

    .wbt-form-grid {
        grid-template-columns: 1fr !important;
    }

    .wbt-sum-row-pair {
        flex-direction: column;
    }

    .wbt-sum-row-pair .wbt-sum-block:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
    }

    .wbt-footer-template {
        flex-wrap: wrap;
        gap: 6px;
    }

    .wbt-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* ========================================
   WEIGH DIALOG — Scoped overrides (.wbt-weigh-dlg)
   Fixes icon sizes, tightens layout, and polishes
   every element specifically inside the Weigh.razor
   SfDialog so nothing leaks to WeighbridgeTicket.razor.
   ======================================== */

/* ── Global icon size reset — prevent 1em inheritance ── */
.wbt-weigh-dlg .e-dlg-content [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content [data-lucide] svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

/* ── Dialog shell ── */
.wbt-weigh-dlg.e-dialog {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.wbt-weigh-dlg.e-dialog.e-dlg-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.wbt-weigh-dlg .e-dlg-header-content {
    display: none !important;
}

.wbt-weigh-dlg .e-dlg-content {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* ── Header bar — dark chrome ── */
.wbt-weigh-dlg .e-dlg-content .wbt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--chrome-bg);
    flex-shrink: 0;
    position: relative;
    gap: 14px;
    border-bottom: none;
}

.wbt-weigh-dlg .e-dlg-content .wbt-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

.wbt-weigh-dlg .e-dlg-content .wbt-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-header-icon [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-header-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: var(--accent-primary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--chrome-text);
    margin: 0;
    line-height: 1.2;
}

.wbt-weigh-dlg .e-dlg-content .wbt-subtitle {
    font-size: 12px;
    color: var(--chrome-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbt-weigh-dlg .e-dlg-content .wbt-subtitle strong {
    color: var(--accent-primary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-badge {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-badge [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-badge svg {
    width: 10px !important;
    height: 10px !important;
}

.wbt-weigh-dlg .e-dlg-content .wbt-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: var(--chrome-hover);
    color: var(--chrome-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-close-btn:hover {
    background: var(--error-light);
    color: var(--error);
}

.wbt-weigh-dlg .e-dlg-content .wbt-close-btn [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-close-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ── Content area ── */
.wbt-weigh-dlg .e-dlg-content .wbt-content {
    flex: 1;
    overflow: hidden;
    padding: 12px;
    background: var(--bg-secondary);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wbt-weigh-dlg .e-dlg-content .wbt-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}

/* ── Column cards ── */
.wbt-weigh-dlg .e-dlg-content .wbt-column {
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s;
}

.wbt-weigh-dlg .e-dlg-content .wbt-column:hover {
    border-color: var(--accent-20);
}

.wbt-weigh-dlg .e-dlg-content .wbt-column::-webkit-scrollbar { width: 4px; }
.wbt-weigh-dlg .e-dlg-content .wbt-column::-webkit-scrollbar-track { background: transparent; }
.wbt-weigh-dlg .e-dlg-content .wbt-column::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

.wbt-weigh-dlg .e-dlg-content .wbt-column-action {
    border-left: 3px solid var(--accent-primary) !important;
}

/* ── Section titles ── */
.wbt-weigh-dlg .e-dlg-content .wbt-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-section-title [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-section-title svg {
    width: 12px !important;
    height: 12px !important;
    color: var(--accent-primary);
}

/* ── Ticket hero card (top of column 1) ── */
.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero {
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent-primary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero-num {
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero-contract {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
    word-break: break-word;
}

.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

.wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-disabled);
    flex-shrink: 0;
}

[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-ticket-hero {
    background: var(--chrome-hover);
    border-color: var(--chrome-border);
    border-left-color: var(--accent-primary);
}

/* ── Info cards (ticket info, company, product) ── */
.wbt-weigh-dlg .e-dlg-content .wbt-info-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 2px 0;
    margin-bottom: 6px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    gap: 8px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-info-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wbt-weigh-dlg .e-dlg-content .wbt-info-highlight {
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Data cards (contract, check-in, weigh details) ── */
.wbt-weigh-dlg .e-dlg-content .wbt-data-card {
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 2px 0;
    margin-bottom: 6px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    gap: 8px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-data-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-data-val {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

.wbt-weigh-dlg .e-dlg-content .wbt-data-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Status pills ── */
.wbt-weigh-dlg .e-dlg-content .wbt-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wbt-weigh-dlg .e-dlg-content .wbt-pill-ok {
    background: var(--success-light);
    color: var(--success);
}

.wbt-weigh-dlg .e-dlg-content .wbt-pill-warn {
    background: var(--warning-light);
    color: var(--warning);
}

/* ── Dividers ── */
.wbt-weigh-dlg .e-dlg-content .wbt-divider,
.wbt-weigh-dlg .e-dlg-content .wbt-sec-div {
    height: 1px;
    background: var(--border-primary);
    margin: 8px 0;
}

/* ── Form inputs ── */
.wbt-weigh-dlg .e-dlg-content .wbt-input,
.wbt-weigh-dlg input[type="text"],
.wbt-weigh-dlg input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.wbt-weigh-dlg .e-dlg-content .wbt-input:focus,
.wbt-weigh-dlg input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-10);
}

.wbt-weigh-dlg .e-dlg-content .wbt-input::placeholder,
.wbt-weigh-dlg input::placeholder {
    color: var(--text-muted);
}

/* ── Select silo button ── */
.wbt-weigh-dlg .e-dlg-content .wbt-btn-silo {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: var(--accent-primary);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.15s;
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-silo:hover {
    filter: brightness(1.1);
}

/* ── Weight hub display ── */
.wbt-weigh-dlg .e-dlg-content .wbt-weight-hub {
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-hub-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-digits {
    font-size: 32px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: 2px;
    line-height: 1;
    margin: 6px 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 4px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-status {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Stabilisation progress ── */
.wbt-weigh-dlg .e-dlg-content .wbt-stab-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--border-primary);
    overflow: hidden;
    margin-top: 8px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-fill {
    height: 100%;
    background: var(--success);
    border-radius: 999px;
    transition: width 0.3s;
}

/* ── Operator section ── */
.wbt-weigh-dlg .e-dlg-content .wbt-operator-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ── Footer ── */
.wbt-weigh-dlg .e-dlg-content .wbt-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    background: var(--chrome-bg);
    flex-shrink: 0;
    position: relative;
}

.wbt-weigh-dlg .e-dlg-content .wbt-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%);
}

/* ── Buttons ── */
.wbt-weigh-dlg .e-dlg-content .wbt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: var(--font-sans);
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-primary {
    background: var(--accent-primary);
    color: var(--on-accent);
    box-shadow: 0 2px 8px var(--accent-20);
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-secondary {
    background: var(--chrome-hover);
    color: var(--chrome-text);
    border: 1px solid var(--chrome-border);
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-secondary:hover {
    background: var(--chrome-active);
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-success {
    background: var(--success);
    color: #fff;
}

.wbt-weigh-dlg .e-dlg-content .wbt-btn-divider {
    width: 1px;
    height: 24px;
    background: var(--chrome-border);
}

/* ── Mass summary ── */
.wbt-weigh-dlg .e-dlg-content .wbt-sum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-block {
    background: var(--surface-inset);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-block-full {
    grid-column: 1 / -1;
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-value-accent {
    color: var(--accent-primary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-sum-value-neg {
    color: var(--error);
}

/* ── Weight hub (device label, display, stabilisation) ── */
.wbt-weigh-dlg .e-dlg-content .wbt-weight-device-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-device-label [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-weight-device-label svg {
    width: 12px !important;
    height: 12px !important;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 16px 0;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    transition: border-color 0.4s, box-shadow 0.4s;
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-value {
    font-size: 44px;
    font-weight: 900;
    font-family: var(--font-numeric, var(--font-sans));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--text-secondary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-unit {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.5;
}

/* Weight states */
.wbt-weigh-dlg .e-dlg-content .wbt-weight-nosignal {
    border-color: var(--border-primary);
}
.wbt-weigh-dlg .e-dlg-content .wbt-weight-nosignal .wbt-weight-value {
    color: var(--text-disabled);
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-reading {
    border-color: var(--accent-30);
}
.wbt-weigh-dlg .e-dlg-content .wbt-weight-reading .wbt-weight-value {
    color: var(--accent-primary);
}

.wbt-weigh-dlg .e-dlg-content .wbt-weight-stable {
    border-color: var(--success);
    box-shadow: 0 0 20px var(--success-light);
}
.wbt-weigh-dlg .e-dlg-content .wbt-weight-stable .wbt-weight-value {
    color: var(--success);
}

/* Stabilisation bar */
.wbt-weigh-dlg .e-dlg-content .wbt-stab-container {
    margin-top: 10px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-track {
    height: 4px;
    background: var(--border-primary);
    border-radius: 999px;
    overflow: hidden;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-complete {
    background: var(--success) !important;
    box-shadow: 0 0 8px var(--success);
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-status {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-status [data-lucide] > .lucide,
.wbt-weigh-dlg .e-dlg-content .wbt-stab-status svg {
    width: 12px !important;
    height: 12px !important;
    display: inline;
    vertical-align: -2px;
    margin-right: 4px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-stab-nosignal { color: var(--text-disabled); }
.wbt-weigh-dlg .e-dlg-content .wbt-stab-waiting  { color: var(--accent-primary); }
.wbt-weigh-dlg .e-dlg-content .wbt-stab-ready    { color: var(--success); }

/* ── Field labels and editable fields ── */
.wbt-weigh-dlg .e-dlg-content .wbt-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: block;
}

.wbt-weigh-dlg .e-dlg-content .wbt-field-editable {
    margin-bottom: 12px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-field-operator {
    margin-bottom: 0;
}

.wbt-weigh-dlg .e-dlg-content .wbt-input-error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px var(--error-light) !important;
}

/* ── Silo inputs ── */
.wbt-weigh-dlg .e-dlg-content .wbt-silo-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-silo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wbt-weigh-dlg .e-dlg-content .wbt-silo-field label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Lab required badge ── */
.wbt-weigh-dlg .e-dlg-content .wbt-lab-required {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* ── Dark mode ── */
[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-column,
[data-theme="wa-dark"] .wbt-weigh-dlg .e-dlg-content .wbt-column,
[data-theme="meta-dark"] .wbt-weigh-dlg .e-dlg-content .wbt-column,
[data-theme="spotify"] .wbt-weigh-dlg .e-dlg-content .wbt-column {
    background: var(--surface);
    border-color: var(--chrome-border);
}

[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-info-card,
[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-data-card,
[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-weight-hub,
[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-sum-block,
[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-weight-display {
    background: var(--chrome-hover);
    border-color: var(--chrome-border);
}

[data-theme="dark"] .wbt-weigh-dlg .e-dlg-content .wbt-content {
    background: var(--bg-primary);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .wbt-weigh-dlg .e-dlg-content .wbt-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wbt-weigh-dlg .e-dlg-content .wbt-form-grid {
        grid-template-columns: 1fr;
    }

    .wbt-weigh-dlg .e-dlg-content .wbt-header {
        padding: 10px 14px;
    }
}