/* Additions print section styles.
   Moved out of AdditionsSection.razor's inline <style>: inline <style> applies
   inconsistently for components inside the print workstation. Follows the same
   global-file pattern as movement-sections.css / bottling-section.css.
   Linked from index.html. */

/* Additions Form - uses CSS variables from tailwind.css */
.additions-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;
}

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

/* Form Header */
.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);
}

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

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

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

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

.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;
}

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

/* Reorder Controls */
.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);
}

.reorder-btn, .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;
}

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

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

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

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

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

.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;
}

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

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

.lot-section.reorder-active {
    position: relative;
    padding-left: 36px;
}

/* Lot Section */
.lot-section {
    border-bottom: var(--pp-border-light);
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
}

.lot-header {
    display: flex;
    align-items: center;
    gap: var(--pp-spacing-sm);
    flex-wrap: wrap;
    font-size: var(--pp-font-size-md);
}

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

.vessel-details {
    font-size: var(--pp-font-size-sm);
    color: var(--pp-text-secondary);
    margin-top: 2px;
    margin-left: var(--pp-spacing-lg);
}

/* Per-Vessel Dosing Table */
.dosing-table-wrapper {
    margin-top: var(--pp-spacing-sm);
    margin-left: var(--pp-spacing-lg);
}

.dosing-table {
    width: auto;
    border-collapse: collapse;
    font-size: var(--pp-font-size-xs);
}

.dosing-table th,
.dosing-table td {
    border: 1px solid #666;
    padding: 2px var(--pp-spacing-sm);
    text-align: center;
}

.dosing-table th {
    background: #e8e8e8;
    font-weight: 600;
    font-size: 9px;
    white-space: nowrap;
}

.dosing-table td:first-child,
.dosing-table .size-col {
    text-align: left;
    white-space: nowrap;
}

.dosing-table .vessel-col {
    font-weight: 700;
}

.dosing-table .additive-col {
    min-width: 60px;
}

.dosing-table .rate-col {
    white-space: nowrap;
    font-weight: 600;
}

.dosing-table .current-gal-suffix {
    margin-left: var(--pp-spacing-xs);
    font-weight: 600;
}

/* Editable per-vessel current-gallons column. Tanks prefill their synced current
   volume (dose calculates off it, not capacity); barrels/kegs prefill their full
   capacity (a per-full-vessel addition). The crew can correct a stale/empty vessel
   and the dose recalculates. The input rides on .added-input, so it prints as plain
   cell text. */
.dosing-table .current-col {
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}

.dosing-table .current-gal-input {
    width: 42px;
    text-align: center;
}

/* Empty tank: a subtle (not alarming) warning so the crew enters gallons before dosing. */
.dosing-table .current-col.current-empty {
    background: var(--pp-status-warning-bg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.current-empty .current-gal-input {
    border-color: var(--pp-status-warning);
}

.current-empty-msg {
    display: block;
    max-width: 56px;
    font-size: 8px;
    font-style: italic;
    color: var(--pp-status-warning-text);
    margin-top: 1px;
}

/* Dose cell when the row has no volume to compute against (empty tank). */
.dose-empty {
    color: var(--pp-text-muted);
}

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

/* Additives Table */
.additives-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pp-font-size-sm);
}

.additives-table th,
.additives-table td {
    border: 1px solid #000;
    padding: var(--pp-spacing-xs) var(--pp-spacing-sm);
    text-align: left;
    vertical-align: top;
}

.additives-table th {
    background: #e0e0e0;
    font-weight: bold;
    font-size: var(--pp-font-size-xs);
}

.additives-table td.highlight-yellow {
    background: var(--pp-bg-highlight);
    font-weight: bold;
}

.checkbox-col {
    width: 40px;
    text-align: center;
}

/* Batch ID (2nd column) — give the cellar room to hand-write a long batch number.
   The additive-name column (1st) yields the space and wraps as needed. */
.additives-table th:nth-child(2),
.additives-table td:nth-child(2) {
    min-width: 150px;
}

.sign-off-cell {
    text-align: center;
    vertical-align: middle;
}

/* Per-additive instructions row */
.additive-instructions-row td {
    background: #fef3c7 !important;
    padding: var(--pp-spacing-xs) var(--pp-spacing-sm) !important;
    border-top: none !important;
}

.additive-instructions {
    font-size: var(--pp-font-size-xs);
    color: #92400e;
    font-style: italic;
}

/* KMBS inline styles for additives table */
.kmbs-rate-cell {
    background: #ecfdf5 !important;
    padding: var(--pp-spacing-xs) !important;
    min-width: 118px;
}

.kmbs-ppm-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #065f46;
    white-space: nowrap;
}

.kmbs-ppm-input {
    width: 56px;
    padding: 2px 4px;
    border: 2px solid #10b981;
    border-radius: 3px;
    font-size: var(--pp-font-size-sm);
    font-weight: 700;
    text-align: center;
    background: white;
    color: #065f46;
}

.kmbs-ppm-input:focus {
    outline: 2px solid #34d399;
    outline-offset: 1px;
}

/* Generic additive rate entry — Innovint left the structured rate blank, so the
   crew sets rate + unit. Mirrors .kmbs-rate-cell / .kmbs-ppm-input in the amber
   highlight-yellow family (the rate input itself reuses .kmbs-ppm-input). */
.generic-rate-cell {
    background: #fefce8 !important;
    padding: var(--pp-spacing-xs) !important;
    white-space: nowrap;
    min-width: 130px;
}

.generic-rate-unit {
    margin-left: 4px;
    padding: 2px 4px;
    border: 2px solid #ca8a04;
    border-radius: var(--pp-radius-sm);
    font-size: var(--pp-font-size-sm);
    font-weight: 700;
    background: white;
    color: #713f12;
}

.generic-rate-unit:focus {
    outline: 2px solid #eab308;
    outline-offset: 1px;
}

.kmbs-total-cell {
    white-space: nowrap;
}

.kmbs-total {
    font-weight: 700;
    font-size: var(--pp-font-size-md);
}

.kmbs-water {
    font-size: var(--pp-font-size-xs);
    color: #047857;
    font-weight: normal;
    margin-left: 4px;
}

/* KMBS unit toggle (g/lbs) */
.kmbs-unit-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--pp-spacing-xs) var(--pp-spacing-lg);
    background: #f0fdf4;
    border-bottom: var(--pp-border-light);
}

.toggle-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.toggle-btn:hover {
    background: #059669;
}

.toggle-label {
    font-size: 11px;
    color: #6b7280;
}

/* Liquid SO2 inline styles for additives table */
.so2-rate-cell {
    background: #eff6ff !important;
    padding: var(--pp-spacing-xs) !important;
    /* Keep PPM and % SO₂ side by side on ONE line; the additive-name column
       yields the width (wraps instead). nowrap forces the column wide enough. */
    white-space: nowrap;
    min-width: 180px;
}

.so2-ppm-inline {
    /* inline-flex so the PPM group and the % SO₂ group sit on the same line */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #1e40af;
    white-space: nowrap;
}

.so2-ppm-input {
    width: 45px;
    padding: 2px 4px;
    border: 2px solid #3b82f6;
    border-radius: 3px;
    font-size: var(--pp-font-size-sm);
    font-weight: 700;
    text-align: center;
    background: white;
    color: #1e40af;
}

.so2-ppm-input:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

/* Concentration group sits to the RIGHT of the PPM group, same line */
.so2-conc-inline {
    margin-left: 10px;
}

.so2-conc-input {
    width: 52px;
}

/* Keep the cell as a real table-cell (NOT display:flex) so it stretches to the
   row's full height and participates in normal column sizing — a flex table cell
   stops behaving as a table-cell, which left the yellow box short and misaligned.
   Stack the two lines with block children instead. */
.so2-total-cell {
    white-space: nowrap;
}

.so2-total {
    display: block;
    font-weight: 700;
    font-size: var(--pp-font-size-md);
}

.so2-concentration {
    display: block;
    font-size: var(--pp-font-size-xs);
    color: #3b82f6;
    font-weight: normal;
}

.kmbs-prep-row td {
    background: #ecfdf5 !important;
    padding: var(--pp-spacing-xs) var(--pp-spacing-sm) !important;
    border-top: none !important;
}

.kmbs-prep-text {
    font-size: var(--pp-font-size-xs);
    color: #047857;
}

.kmbs-barrel-info {
    color: #6b7280;
    font-style: italic;
}

.kmbs-error-row td {
    background: #fef2f2 !important;
    padding: var(--pp-spacing-xs) var(--pp-spacing-sm) !important;
    border-top: none !important;
    margin-top: var(--pp-spacing-xs);
}

.kmbs-barrel-count {
    font-style: italic;
}

.kmbs-error-msg {
    color: #dc2626;
    font-size: var(--pp-font-size-xs);
    font-style: italic;
}

.tag-organic {
    display: inline-block;
    font-size: var(--pp-font-size-xs);
    padding: 1px var(--pp-spacing-xs);
    margin-left: var(--pp-spacing-xs);
    background: #dcfce7;
    color: #166534;
    border-radius: var(--pp-radius-sm);
    font-weight: 600;
}

/* Section Notes */
.section-notes {
    padding: var(--pp-spacing-sm) var(--pp-spacing-lg);
    background: var(--pp-bg-instructions);
    border-top: 1px solid #fde68a;
    font-size: var(--pp-font-size-sm);
    color: #78350f;
}

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

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

    .highlight-yellow,
    .additives-table td.highlight-yellow {
        background: #ffeb3b !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .additives-table th {
        background: #e0e0e0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tag-organic {
        background: #dcfce7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

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

    .additive-instructions-row td {
        background: #fef3c7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kmbs-rate-cell,
    .kmbs-prep-row td {
        background: #ecfdf5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kmbs-ppm-input {
        border: 2px solid #000 !important;
    }

    .generic-rate-cell {
        background: #fefce8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .generic-rate-unit {
        border: 2px solid #000 !important;
    }

    /* Amount/Total is hand-filled by the cellar on the printed sheet: hide the
       on-screen calc and leave a blank white box (the cell's own border is the box).
       Placed after the .highlight-yellow rule so the white background wins on print. */
    .additives-table td.amount-total-cell {
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        height: 36px;
    }

    .additives-table td.amount-total-cell .amt-value {
        display: none !important;
    }

    /* User-added cells: on print the inputs read as plain cell text (no box).
       Blank ones leave the cell empty for hand entry. */
    .added-input {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
}

/* On screen the Amount/Total shows the calculated guide; .amt-value uses
   display:contents so wrapping it never disturbs the on-screen layout
   (e.g. the SO₂ cell's flex column). It is hidden only when printing. */
.amt-value {
    display: contents;
}

/* KMBS placeholder rate — blank input + red warning so crew looks up target PPM */
.placeholder-warning {
    background: #fef2f2 !important;
}

.placeholder-input {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
}

.placeholder-input::placeholder {
    color: #dc2626;
    font-weight: 700;
}

.placeholder-msg {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
    margin-top: 2px;
}

.placeholder-msg-small {
    display: block;
    font-size: 8px;
    color: #9ca3af;
    font-style: italic;
}

.placeholder-amount {
    text-align: center;
    color: #9ca3af;
}

/* ===== Paper-only "add blank row / column" affordances (screen) ===== */

/* Editable write-in inputs in the dosing + summary tables. Dashed box on screen
   signals "type here"; print CSS above strips the box so it reads as cell text. */
.added-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed #cbd5e1;
    background: #fff;
    font: inherit;
    font-size: var(--pp-font-size-xs);
    padding: 1px 3px;
    color: #000;
}

.added-input:focus {
    outline: 2px solid #93c5fd;
    outline-offset: -1px;
}

.added-head-input {
    font-weight: 600;
    text-align: center;
}

.dosing-table .added-col {
    min-width: 60px;
}

/* Bottom toolbar under each table holding the "+ Add" buttons. */
.table-add-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    margin-left: var(--pp-spacing-lg);
}

.add-row-btn {
    padding: 3px 10px;
    font-size: var(--pp-font-size-xs);
    font-weight: 600;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-row-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0284c7;
}

.remove-row-btn {
    margin-left: 4px;
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    font-size: var(--pp-font-size-xs);
    line-height: 1;
}

.remove-row-btn:hover {
    color: #991b1b;
}