/* VolumeChangeSection — compliance badge, context panel, tanker-clean sign-off block.
   Type-badge color lives in movement-sections.css (--pp-badge-volumechange-*).
   .vc-* is a component-unique prefix (like .cf-*) so those rules need no extra scoping;
   generic names (.compliance-badge, .vc-source-header, .gain/.loss) stay scoped under
   .volume-change-section. Status colors use --pp-status-* tokens (zero-change inside
   [data-force-light]); info-text was pinned in the force-light reset in batch 5, so the
   source header now tokenizes too. */

/* Compliance context badge */
.volume-change-section .compliance-badge {
    display: inline-block;
    padding: 2px var(--pp-spacing-sm);
    background: var(--pp-status-warning-bg);
    color: var(--pp-status-warning-text);
    border: 1px solid #fcd34d;
    border-radius: var(--pp-radius-sm);
    font-size: var(--pp-font-size-xs);
    font-weight: 600;
}

/* Source column header — blue/incoming */
.volume-change-section .vc-source-header {
    background: var(--pp-status-info-bg);
    color: var(--pp-status-info-text);
}

/* Context panel (left column body) */
.vc-context-panel {
    padding: var(--pp-spacing-sm) var(--pp-spacing-md);
    font-size: var(--pp-font-size-xs);
}

.vc-context-row {
    display: flex;
    gap: var(--pp-spacing-xs);
    align-items: baseline;
    margin-bottom: 3px;
    line-height: 1.4;
}

.vc-label {
    font-weight: 700;
    white-space: nowrap;
    color: var(--pp-text-secondary);
    flex-shrink: 0;
}

.vc-lot-desc {
    font-style: italic;
    color: var(--pp-text-secondary);
    margin-bottom: 4px;
    margin-left: 2px;
}

.vc-notes {
    margin-top: var(--pp-spacing-sm);
    padding-top: var(--pp-spacing-sm);
    border-top: 1px dashed #cbd5e1;
}

.vc-note-text {
    margin: 0 0 4px 0;
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: var(--pp-font-size-xs);
    color: var(--pp-text-primary);
}

/* Tanker-clean block — wrapping container for one or more sign-off rows plus
   the screen-only "+ Add tanker" affordance. Sits between the movement columns
   and the task footer (Comments / Completed by) so the cellar fills it in
   before signing. */
.vc-tanker-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
    border-top: var(--pp-border-light);
    background: var(--pp-bg-white);
}

.vc-tanker-restore {
    padding: 4px var(--pp-spacing-lg);
}

/* Tanker-clean sign-off row — red to draw the cellar's attention */
.vc-tanker-signoff {
    display: flex;
    align-items: center;
    gap: var(--pp-spacing-lg);
    padding: 6px var(--pp-spacing-md);
    border: 1.5px solid var(--pp-status-danger-text);
    background: #fef2f2;
    color: var(--pp-status-danger-text);
    font-size: var(--pp-font-size-xs);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Per-row remove button — screen only */
.vc-tanker-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--pp-status-danger-text);
    border-radius: 3px;
    color: var(--pp-status-danger-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.vc-tanker-remove:hover {
    background: var(--pp-status-danger-text);
    color: white;
}

/* "+ Add tanker" button — screen only */
.vc-tanker-add {
    align-self: flex-start;
    padding: 3px 10px;
    background: transparent;
    border: 1px dashed var(--pp-status-danger-text);
    border-radius: 4px;
    color: var(--pp-status-danger-text);
    font-size: var(--pp-font-size-xs);
    font-weight: 600;
    cursor: pointer;
}

.vc-tanker-add:hover {
    background: #fef2f2;
}

.vc-tanker-label {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--pp-status-danger-text);
    white-space: nowrap;
}

.vc-tanker-field {
    display: inline-flex;
    align-items: center;
    gap: var(--pp-spacing-sm);
    flex: 1;
    min-width: 0;
}

.vc-tanker-field-label {
    font-weight: 700;
    color: var(--pp-status-danger-text);
    white-space: nowrap;
}

.vc-tanker-choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.vc-tanker-checkbox {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--pp-status-danger-text);
    background: var(--pp-bg-white);
    border-radius: 2px;
    flex-shrink: 0;
}

.vc-tanker-choice-label {
    font-weight: 800;
    color: var(--pp-status-danger-text);
    letter-spacing: 0.04em;
}

.vc-tanker-write-in {
    flex: 1;
    min-height: 18px;
    border-bottom: 1px solid var(--pp-status-danger-text);
    background: var(--pp-bg-white);
}

.vc-tanker-write-in--date {
    flex: 0 0 140px;
}

.volume-change-section .gain { color: var(--pp-status-success-text); }
.volume-change-section .loss { color: var(--pp-status-danger-text); }

.volume-change-section .status-text.gain { color: var(--pp-status-success-text); font-weight: 600; }
.volume-change-section .status-text.loss { color: var(--pp-status-danger-text); font-weight: 600; }

@media print {
    .volume-change-section .compliance-badge {
        background: var(--pp-status-warning-bg) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .volume-change-section .vc-source-header {
        background: var(--pp-status-info-bg) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}