/* Movement vessel table — print-packet movement section row table.
   Moved out of MovementVesselTable.razor inline <style> (global file is the reliable home for
   print-composed components; scoped .razor.css does not reach them). Status colors use
   --pp-status-* tokens from tailwind.css; the table renders inside the [data-force-light] sheet,
   so those tokens resolve to their light values (zero behavior change). Selectors are unique to
   this component (.movement-vessel-table / .col-* / .row-*), so kept verbatim — no scoping needed. */

.movement-vessel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pp-font-size-xs);
}

.movement-vessel-table th {
    text-align: center;
    padding: 3px 6px;
    background: var(--pp-bg-header);
    border: 1px solid #000;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: bottom;
}

.movement-vessel-table td {
    padding: 2px 6px;
    border: var(--pp-border-light);
    white-space: nowrap;
}

.movement-vessel-table tr:nth-child(even) {
    background: var(--pp-bg-subheader);
}

/* Column widths */
.col-initials { width: 18px; font-size: 7px; text-align: center; }
.col-tank { width: 10%; text-align: center; }
.col-lot { width: 16%; white-space: normal; }
.col-group-header { text-align: center; font-size: 9px; border-bottom: none; }
.col-before { width: 13%; text-align: right; font-family: monospace; }
.col-dip { width: 10%; text-align: right; font-family: monospace; }
.col-after { width: 13%; text-align: right; font-family: monospace; }
.col-gallons { width: 14%; text-align: right; font-family: monospace; }

/* Grouped vessel display (barrels/kegs aggregated) */
.grouped-vessel {
    font-weight: 600;
    font-size: var(--pp-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: normal;
    line-height: 1.3;
}

/* System values: slightly muted on screen to distinguish from hand-written data */
.pp-computed-value {
    color: var(--pp-text-secondary);
}

/* Write-in cell for manual entry */
.write-in {
    background: var(--pp-bg-white);
}

/* Blank rows added via "+ Add Row" match the typical populated-row height so
   there's enough vertical room to hand-write a tank/lot entry on the printed
   form. Populated rows are tall because col-lot wraps to ~2 lines; empty cells
   would otherwise collapse to padding-only. */
.movement-vessel-table tr.added-row {
    height: 32px;
}

/* Lot ditto marks */
.ditto {
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-text-secondary);
    display: block;
    text-align: center;
}

.vessel-table-empty {
    padding: var(--pp-spacing-md);
    color: var(--pp-text-muted);
    font-style: italic;
    text-align: center;
}

/* Summary row for collapsed small-format vessels */
.vessel-summary-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--pp-bg-subheader);
    border: var(--pp-border-light);
    font-size: var(--pp-font-size-sm);
}

.vessel-summary-row .summary-text {
    font-weight: 600;
    color: var(--pp-text-primary);
}

/* Add Row button - screen only */
.add-row-btn {
    display: block;
    width: 100%;
    padding: 4px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-top: none;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

/* Phase 3 — drag handle + drop highlight */
.col-drag-handle {
    width: 18px;
    text-align: center;
    cursor: grab;
    user-select: none;
    color: var(--pp-text-muted);
}

.col-drag-handle:active {
    cursor: grabbing;
}

.drag-handle-glyph {
    font-size: 12px;
    line-height: 1;
    color: var(--pp-text-secondary);
}

/* Dragging row: dim the source so the user sees what's being moved */
.movement-vessel-table tr.row.dragging {
    opacity: 0.4;
}

/* Drop insertion lines — drawn as box-shadow on the row to avoid layout shift.
   "above" puts the line on the row's top edge, "below" on the bottom edge.
   Color uses the existing print-packet accent token so the indicator looks native. */
.movement-vessel-table tr.row.drop-target-above {
    box-shadow: inset 0 2px 0 0 var(--pp-text-primary, #2563eb);
}

.movement-vessel-table tr.row.drop-target-below {
    box-shadow: inset 0 -2px 0 0 var(--pp-text-primary, #2563eb);
}

/* Phase 4 — row-action affordances cluster at right edge of the gallons cell.
   Not a new column; absolute-flow within col-gallons keeps print output unaffected. */
.gallons-cell-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.movement-vessel-table tr.row:hover .row-actions,
.movement-vessel-table tr.row:focus-within .row-actions {
    opacity: 1;
}

.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.1s ease;
}

.row-action-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

.row-delete-btn:hover {
    background: var(--pp-status-danger-bg);
    border-color: #f87171;
    color: #b91c1c;
}

.row-copy-btn { font-weight: 700; }

/* Phase 4 — SuppressDitto toggle next to the lot cell. */
.lot-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.row-suppress-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s ease, all 0.1s ease;
    margin-left: auto;
}

.movement-vessel-table tr.row:hover .row-suppress-btn,
.movement-vessel-table tr.row:focus-within .row-suppress-btn,
.row-suppress-btn.active {
    opacity: 1;
}

.row-suppress-btn.active {
    background: var(--pp-status-warning-bg);
    border-color: #f59e0b;
    color: var(--pp-status-warning-text);
}

.row-suppress-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

/* Phase 4 — between-row insert handle. Thin row, hover-revealed "+" centered. */
.row-insert-handle td {
    padding: 0;
    border: none;
    background: transparent;
    height: 4px;
    position: relative;
}

.row-insert-handle:hover td {
    height: auto;
}

.row-insert-btn {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: transparent;
    cursor: pointer;
    line-height: 0;
    height: 4px;
    transition: all 0.1s ease;
    border-top: 1px dashed transparent;
}

.row-insert-handle:hover .row-insert-btn,
.row-insert-handle:focus-within .row-insert-btn {
    color: #0284c7;
    background: #e0f2fe;
    border-top: 1px dashed #7dd3fc;
    height: 18px;
    line-height: 16px;
}

.row-insert-glyph {
    font-size: 14px;
    font-weight: 700;
}

/* Phase 4 — inline editor for user rows (TankText / LotText / Gallons / Initials). */
.row-inline-editor td {
    background: #f0f9ff;
    padding: 8px 10px;
    border-top: 1px solid #38bdf8;
    border-bottom: 1px solid #38bdf8;
}

.inline-editor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.inline-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 120px;
    min-width: 100px;
}

.inline-field-narrow { flex: 0 1 70px; min-width: 60px; }

.inline-field-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.05em;
}

.inline-field-input {
    padding: 3px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
    color: #0f172a;
    width: 100%;
}

.inline-field-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 1px #7dd3fc;
}

.inline-editor-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.inline-save-btn,
.inline-cancel-btn {
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: #f8fafc;
}

.inline-save-btn {
    background: #0284c7;
    border-color: #0369a1;
    color: #fff;
}

.inline-save-btn:hover { background: #0369a1; }

.inline-cancel-btn:hover { background: #e2e8f0; }

/* Phase 4 — bottom toolbar containing both paper-only "+ Add Row" and the layout-tracked
   "+ Insert row". Both intents kept distinct (plan section 4.7). */
.vessel-table-actions {
    display: flex;
    flex-direction: column;
}

.insert-row-btn {
    display: block;
    width: 100%;
    padding: 4px;
    background: #eff6ff;
    border: 1px dashed #93c5fd;
    border-top: none;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.insert-row-btn:hover {
    background: var(--pp-status-info-bg);
    border-color: #60a5fa;
    color: var(--pp-status-info-text);
}

/* Phase 4C — User-row provenance badges in the INIT column.
   Letters (not dots) so they're grayscale-resilient: the cellar may print B&W and the
   form must still communicate "this row was authored, not Innovint-sourced." Backgrounds
   are forced via print-color-adjust so the page prints with the tint even on color-managed
   printers. Compact: 16x16 fits inside the 18px col-initials cell. */
.row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-weight: 700;
    font-size: 9px;
    border-radius: 2px;
    line-height: 1;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.row-badge-inserted {
    background: var(--pp-status-info-bg); /* blue-100 */
    color: var(--pp-status-info-text);    /* blue-800 */
}

.row-badge-copied {
    background: var(--pp-status-warning-bg); /* amber-100 */
    color: var(--pp-status-warning-text);    /* amber-800 */
}

@media print {
    .movement-vessel-table th {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pp-computed-value {
        color: #374151 !important;
    }

    /* Badges PRINT (cellar-form-visible) — re-assert exact color so background tint survives
       grayscale toggles + color-managed drivers. The .row-badge rule already declares
       print-color-adjust: exact, but repeating inside @media print catches printers that
       reset color-adjust at the media boundary. */
    .row-badge,
    .row-badge-inserted,
    .row-badge-copied {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Defensive: the drag-drop highlight classes (drop-target-above/below) live on tr.row
       and aren't no-print, but a print can't happen mid-drag in practice. Strip the
       box-shadow defensively so a stale class doesn't leak ink onto the paper. */
    .movement-vessel-table tr.row.drop-target-above,
    .movement-vessel-table tr.row.drop-target-below {
        box-shadow: none !important;
    }

    .no-print {
        display: none !important;
    }
}