/* Topping section — print-oriented topping form (drains/fills, sign-off, vessel sizes).
   Moved out of ToppingSection.razor inline <style> (global file is the reliable home for
   print-composed components; scoped .razor.css does not reach them). This is a verbatim
   relocation: no recipe color swaps apply (its indigo type-badge has no --pp-badge-topping
   token; every other color is already a token or a non-mapping sky/slate/yellow literal).

   All rules are SCOPED under the .topping-form root because generic class names (.form-header,
   .type-badge, .status-label/.status-text, .section-indicator, .reorder-*, .vessel-info,
   .highlight-yellow, .separator) collide with Custom/Analysis sections and the already-global
   workorder-header.css/custom-section.css. Scoping keeps behavior identical. */

.topping-form {
    background: var(--pp-bg-white);
    border: var(--pp-border-heavy);
    font-family: Arial, sans-serif;
    font-size: var(--pp-font-size-sm);
    page-break-inside: avoid;
}

.topping-form .topping-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pp-spacing-xl);
    color: var(--pp-text-muted);
}

/* Form Header */
.topping-form .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--pp-bg-header);
    border-bottom: var(--pp-border);
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
}

.topping-form .job-label {
    display: flex;
    align-items: center;
    gap: var(--pp-spacing-sm);
    font-size: var(--pp-font-size-md);
}

.topping-form .type-badge {
    display: inline-block;
    padding: 2px var(--pp-spacing-sm);
    background: #e0e7ff;
    color: #3730a3;
    border-radius: var(--pp-radius-sm);
    font-size: var(--pp-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.topping-form .section-title-text {
    color: var(--pp-text-secondary);
    font-weight: normal;
}

/* Reorder Controls */
.topping-form .reorder-controls {
    display: flex;
    align-items: center;
    gap: var(--pp-spacing-sm);
    padding: var(--pp-spacing-xs) var(--pp-spacing-lg);
    background: #f0f9ff;
    border-bottom: var(--pp-border-light);
}

.topping-form .reorder-btn,
.topping-form .reset-btn {
    padding: 4px 10px;
    font-size: var(--pp-font-size-xs);
    font-weight: 600;
    border: 1px solid #0ea5e9;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.topping-form .reorder-btn {
    background: #0ea5e9;
    color: white;
}

.topping-form .reorder-btn:hover {
    background: #0284c7;
}

.topping-form .reset-btn {
    background: white;
    color: #0ea5e9;
}

.topping-form .reset-btn:hover {
    background: #f0f9ff;
}

.topping-form .reorder-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.topping-form .arrow-btn {
    width: 24px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    background: #e0e7ff;
    border: 1px solid #6366f1;
    border-radius: 3px;
    cursor: pointer;
    color: #4338ca;
    transition: background 0.15s;
}

.topping-form .arrow-btn:hover:not(:disabled) {
    background: #c7d2fe;
}

.topping-form .arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.topping-form .source-lot.reorder-active,
.topping-form .sign-off-row.reorder-active {
    position: relative;
    padding-left: 36px;
}

.topping-form .status-label {
    font-size: var(--pp-font-size-md);
}

.topping-form .status-text {
    color: var(--pp-text-secondary);
}

.topping-form .section-indicator {
    margin-left: var(--pp-spacing-md, 8px);
    padding: 2px 8px;
    background: #e2e8f0;
    color: #475569;
    font-size: var(--pp-font-size-xs, 11px);
    font-weight: 600;
    border-radius: 4px;
}

.topping-form .checkbox {
    font-size: var(--pp-font-size-lg);
    margin-left: 2px;
}

.topping-form .checkbox-small {
    font-size: var(--pp-font-size-sm);
}

/* Top From Section */
.topping-form .top-from-section {
    border-bottom: var(--pp-border);
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
}

.topping-form .section-title {
    font-size: var(--pp-font-size-md);
    font-weight: bold;
    margin-bottom: var(--pp-spacing-xs);
    text-transform: uppercase;
}

.topping-form .source-lot {
    margin-left: var(--pp-spacing-lg);
    margin-bottom: var(--pp-spacing-sm);
    padding: var(--pp-spacing-xs) var(--pp-spacing-sm);
    border: var(--pp-border-light);
}

.topping-form .lot-row,
.topping-form .vessel-row,
.topping-form .desc-row {
    margin-bottom: 2px;
    line-height: 1.4;
}

.topping-form .highlight-yellow {
    background: var(--pp-bg-highlight);
    padding: 1px var(--pp-spacing-xs);
    font-weight: bold;
    color: #000;
}

.topping-form .blank-line {
    border-bottom: 1px solid #000;
    display: inline-block;
    min-width: 120px;
    margin-left: var(--pp-spacing-xs);
}

.topping-form .blank-line-short {
    border-bottom: 1px solid #000;
    display: inline-block;
    min-width: 80px;
    margin: 0 2px;
}

.topping-form .blank-line-long {
    border-bottom: 1px solid #000;
    display: inline-block;
    min-width: 250px;
    margin-left: var(--pp-spacing-xs);
}

/* TO Section */
.topping-form .to-section {
    border-bottom: var(--pp-border);
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
}

.topping-form .pilcrow {
    font-size: var(--pp-font-size-md);
    margin-left: 2px;
}

.topping-form .to-content {
    display: flex;
    gap: var(--pp-spacing-lg);
    margin-top: var(--pp-spacing-xs);
    align-items: flex-start;
}

/* Sign-off rows */
.topping-form .sign-off-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pp-spacing-sm);
}

.topping-form .sign-off-row {
    padding: var(--pp-spacing-xs);
    border: var(--pp-border-light);
    background: transparent;
}

.topping-form .row-header {
    display: flex;
    align-items: center;
    gap: var(--pp-spacing-xs);
    margin-bottom: 2px;
}

.topping-form .row-number {
    font-weight: bold;
    min-width: 16px;
}

.topping-form .arrow {
    color: var(--pp-text-muted);
    font-size: var(--pp-font-size-xs);
}

.topping-form .vessel-info {
    margin-left: 24px;
    color: var(--pp-text-muted);
    font-size: var(--pp-font-size-xs);
    font-style: italic;
    margin-bottom: 2px;
}

.topping-form .location-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 24px;
    font-size: var(--pp-font-size-xs);
}

.topping-form .separator {
    margin: 0 var(--pp-spacing-xs);
    color: var(--pp-text-faint);
}


/* Instructions */
.topping-form .instructions-section {
    border-top: var(--pp-border);
    border-bottom: var(--pp-border);
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
    background: var(--pp-bg-instructions);
}

.topping-form .record-num {
    margin-left: var(--pp-spacing-lg);
}

/* Footer */
.topping-form .form-footer {
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pp-spacing-xs);
}

.topping-form .comments-row,
.topping-form .completed-row {
    display: flex;
    align-items: center;
}

/* Print styles */
@media print {
    .topping-form {
        border: 3px solid #000 !important;
        page-break-inside: avoid;
    }

    .topping-form .form-header {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .topping-form .highlight-yellow {
        background: #ffeb3b !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .topping-form .instructions-section {
        background: #fffde7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .topping-form .type-badge {
        background: #e0e7ff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}