/* =========================================================================
   result.css
   -------------------------------------------------------------------------
   Page-local rules that Tailwind utilities can't replace cleanly, plus
   the structural rules form-editor.js and the existing tab nav depend on.
   Linked from base.html so every page can opt in.

   The visual tokens (colors, spacing, fonts) come from the inlined
   tailwind.config block in base.html. The rules below cover:

     1.  Material Symbols Outlined icon font variation
     2.  High-density cell input + diff highlight (from the new design)
     3.  ceisa-tabs / ceisa-table / ceisa-cell (form-editor.js contract)
     4.  KODE DOKUMEN unknown badge + NILAI FASILITAS highlight
     5.  Layout primitives the inline section partials still use
   ========================================================================= */


/* --- 1. Material Symbols Outlined font variation ---------------------- */

/*
   The Material Symbols Outlined font is loaded via base.html's
   Google Fonts <link>. The .material-symbols-outlined class MUST
   declare font-family explicitly — otherwise the browser falls
   back to the body font (Inter) and renders the ligature text
   literally ("delete", "expand_more", ...) instead of the icon
   glyph. This is what was causing "text button delete dan
   expand_more" to appear in the goods cards / packaging cards /
   documents cards / etc.
*/
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --- 0b. Alpine.js x-cloak (prevent FOUC on x-show / x-if) -------- */

/*
   Alpine's x-cloak directive hides the element until Alpine has booted
   and processed all x-* directives on it. Without this rule, elements
   bound to x-show="false" flash visible for a frame before Alpine
   reads the directive. Alpine automatically removes the attribute once
   processing is complete.
*/
[x-cloak] { display: none !important; }


/* --- 0c. sr-only (screen-reader-only) ----------------------------- */

/*
   Tailwind ships the .sr-only utility but in CDN mode we don't get
   tree-shaking so we keep a defensive copy in the project CSS. This
   rule hides the label visually while keeping it accessible to
   screen readers — used in the documents sidebar where the visible
   row already has a meta header (KODE DOKUMEN chip) and we don't
   want to repeat the label as visible text.
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- 1b. Hide native number-input spinners ---------------------------- */

/*
   Safety net for any <input type=number> that slips into the result
   form. The goods card's JUMLAH SATUAN has been converted to a
   text-typed input (see _goods_card.html), but the qty digit needs
   every bit of horizontal real estate inside the 6-col card grid —
   the up/down arrows consume ~1.5rem and squeeze the value. Hide
   the spinners globally so any future type=number still gets the
   full input width.
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* --- 2. High-density cell input + diff highlight (new design) ---------- */

/*
   Replaces the Tailwind-equivalent utility soup from the pasted HTML
   for the table cells. Same look as the design (13px, 4px padding,
   #DFE1E6 border, #0052CC focus border, no ring) but written as a
   class so any number of <input> cells in the result table pick it
   up via the existing ``ceisa-cell`` class without forcing every
   cell to also be a high-density-input.
*/
.high-density-input,
input.ceisa-cell,
textarea.ceisa-cell {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #DFE1E6;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    line-height: 1.4;
}
.high-density-input:focus,
input.ceisa-cell:focus,
textarea.ceisa-cell:focus {
    border-color: #0052CC;
    outline: none;
    /* Box-shadow cleared so Tailwind forms' inset focus ring
       doesn't double up. The save-success/eror rules below
       re-add a coloured inset shadow when their helper class
       is active. */
    box-shadow: none;
}

/* Diff highlight (new design): green tint for added, red strikethrough
   for removed. The sidebar Verification Diff card uses these classes
   on the row's value cell; existing PDF text-diff block uses its own
   .diff-row-* classes and is unaffected. */
.diff-added {
    background-color: rgba(54, 179, 126, 0.1);
    color: #36B37E;
    padding: 0 4px;
    border-radius: 3px;
}
.diff-removed {
    background-color: rgba(255, 86, 48, 0.1);
    color: #FF5630;
    text-decoration: line-through;
    padding: 0 4px;
    border-radius: 3px;
}


/* --- 3. ceisa-tabs / ceisa-table / ceisa-cell (form-editor.js contract) */

/*
   The Goods / Documents / Packaging tabs are still a horizontal nav
   with a bottom-border indicator on the active tab. form-editor.js
   and the tab-switcher inline script in result_form.html both look
   for .ceisa-tab[data-tab] + .tab-panel[id^="panel-"], so the class
   names and the [hidden] attribute behavior must stay stable.
*/
.ceisa-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.ceisa-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ceisa-tab:hover { color: #2c3e50; }

.ceisa-tab:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
    border-radius: 3px;
}

.ceisa-tab-active {
    color: #2c3e50;
    border-bottom-color: #3498db;
}

.ceisa-tab-count {
    background: #e9ecef;
    color: #495057;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}

.ceisa-tab-active .ceisa-tab-count {
    background: #3498db;
    color: #fff;
}

/* Tab panel hide/show — both [hidden] and [data-tab-panel][hidden] so
   any new card-style panel that opts in via data-tab-panel gets the
   same behavior. */
.tab-panel[hidden],
[data-tab-panel][hidden] {
    display: none;
}


/* --- 4. ceisa-table layout (sticky thead, hover row, col widths) ------- */

.ceisa-table-wrap {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
}

.ceisa-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.ceisa-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f3f5;
    color: #2c3e50;
    text-align: left;
    font-weight: 600;
    padding: 0.6rem 0.6rem;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #e9ecef;
    white-space: nowrap;
}

.ceisa-table thead th:last-child { border-right: none; }

.ceisa-table tbody td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #f1f3f5;
    vertical-align: top;
}

.ceisa-table tbody td:last-child { border-right: none; }
.ceisa-table tbody tr:last-child td { border-bottom: none; }
.ceisa-table tbody tr:hover { background: #f8f9fa; }

/* Column widths — the partials set these <col> classes in a fixed
   order, so the widths match the column count exactly. */
.ceisa-table .col-action  { width: 56px; text-align: center; }
.ceisa-table .col-seri    { width: 60px; }
.ceisa-table .col-hs      { width: 110px; }
.ceisa-table .col-kode    { width: 130px; }
.ceisa-table .col-satuan  { width: 110px; }
.ceisa-table .col-jumlah  { width: 110px; }
.ceisa-table .col-berat   { width: 100px; }
.ceisa-table .col-harga   { width: 140px; }
.ceisa-table .col-nomor   { width: 200px; }
.ceisa-table .col-tanggal { width: 130px; }
.ceisa-table .col-uraian  { min-width: 220px; }

/* Goods table has 14 cols (col-action, col-seri, col-hs, col-kode,
   col-uraian, col-satuan, col-jumlah, col-kemasan, col-jumlah, col-berat x2,
   col-harga x3, col-tarif). Documents table overrides col-kode to 220px
   below; we keep the goods-specific narrow kode here. */
table[data-section="goods"] .col-kode    { width: 130px; }
table[data-section="goods"] .col-kemasan { width: 110px; }
table[data-section="goods"] .col-tarif   { width: 120px; }

table[data-section="documents"] .col-kode { width: 220px; }


/* --- 5. ceisa-cell — base editable cell styling ----------------------- */

.ceisa-cell {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.35rem 0.45rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: inherit;
    border-radius: 3px;
    box-sizing: border-box;
}

.ceisa-cell:hover { border-color: #dee2e6; }

.ceisa-cell:focus {
    outline: none;
    border-color: #3498db;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

.ceisa-cell-textarea {
    resize: vertical;
    min-height: 1.8rem;
    line-height: 1.3;
}

/* Read-only cell (e.g. SERI column, computed NILAI FASILITAS). */
.ceisa-cell-readonly {
    display: inline-block;
    min-height: 1.6rem;
    min-width: 6ch;
    padding: 0.35rem 0.45rem;
    color: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    cursor: not-allowed;
}

.ceisa-cell-seri {
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
    cursor: default;
}


/* --- 6. KODE DOKUMEN unknown badge ------------------------------------ */

/* form-editor.js adds .is-unknown to a KODE DOKUMEN cell whose value
   is not in the curated set ({40, 217, 370, 380, 640}). The visual
   cue is amber background + " ?" suffix. */
.ceisa-cell-kode { font-variant-numeric: tabular-nums; text-align: center; }
.ceisa-cell-kode.is-unknown {
    background: #fff7e6;
    border-color: #f0c674;
}
.ceisa-cell-kode.is-unknown::after {
    content: " ?";
    color: #b08000;
    font-weight: 700;
}


/* --- 7. NILAI FASILITAS / tarif highlight ------------------------------ */

/* The computed NILAI FASILITAS cell is read-only; soft yellow flag
   reminds the operator that the value is system-managed. */
.tarif-group {
    background: #fff8e1;
    color: #6b5400;
    border-bottom-color: #f0d97b !important;
}

.ceisa-table tbody td.tarif-cell { background: #fffbef; }
.ceisa-table tbody tr:hover td.tarif-cell { background: #fff5d0; }


/* --- 8. Transient row placeholder (add-row optimistic UI) ------------ */

tr.ceisa-row-placeholder td {
    background: #f0f8ff;
    opacity: 0.6;
    font-style: italic;
}


/* --- 9. Inline status message (Saved / Saving… / Error) ---------------- */

/*
   Save feedback swaps the field's border colour briefly:
   green for success, red for error. The helper class is removed
   via setTimeout in the Alpine store so the input returns to its
   idle / focus state without further JS.

   Focus rule: the input border is blue (#0052CC) while focused,
   grey (#DFE1E6) when idle. The save-success/eror rules replace
   that border (and Tailwind forms' inset box-shadow) with green
   or red for ~1.5s, then transition back smoothly.

   Two crucial constraints forced the implementation choices below:

   1. Tailwind plugin (@tailwindcss/forms via CDN) draws the input
      border via ``box-shadow: inset 0 0 0 1px rgb(...)`` rather
      than the native ``border-color`` property. Overriding only
      border-color would leave Tailwind's inset ring visible — so
      we override both border-color AND box-shadow with matching
      colours so the swap reads as a single clean border change.

   2. The :focus rule sets box-shadow: none (so Tailwind's inset
      focus ring doesn't double up). save-success/eror re-add a
      coloured inset shadow with !important to win this conflict
      while their helper class is active.
*/
input,
textarea,
select {
    border-color: #DFE1E6 !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #0052CC !important;
    outline: none !important;
    /* Intentionally do NOT reset box-shadow here — Tailwind forms
       draws the focus ring via inset box-shadow; the save halo
       below layers cleanly on top because both use the same
       box-shadow property and the animation is short. */
}

/*
   Save feedback replaces the field's border colour for ~1.5s:
   - border #0052CC (focus blue) or #DFE1E6 (idle grey)
     → border #36B37E (save-success green) on debounce 500ms + 2xx reply
     → back to focus blue / idle grey when the Alpine store clears
       the helper class at 1700ms (1.5s linger + 200ms transition tail).

   Why border-color instead of the previous halo box-shadow:
   the user wants the focus blue border to be REPLACED by the save
   green briefly, not stacked with a green halo on top. The
   border-color transition (0.2s ease) gives a smooth swap into
   and out of green without flashing. !important is required to
   beat the Tailwind forms plugin's inset border drawing — and we
   also override Tailwind's inset box-shadow with our own colour so
   the green reads cleanly even on inputs the forms plugin styles.
*/
input.save-success,
textarea.save-success,
select.save-success {
    border-color: #36B37E !important;
    box-shadow: inset 0 0 0 1px #36B37E !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input.save-error,
textarea.save-error,
select.save-error {
    border-color: #FF5630 !important;
    box-shadow: inset 0 0 0 1px #FF5630 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/*
   The legacy text span is kept (display: none) so any straggler
   server-rendered status doesn't show as broken UI.
*/
.field-update-status { display: none; }
.field-update-status.error { color: #dc3545; }


/* --- 10. Add / remove row buttons -------------------------------------- */

.ceisa-row-actions {
    margin-top: 1rem;
    text-align: right;
}

.ceisa-row-actions .btn-danger,
button.btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.ceisa-row-actions .btn-danger:hover,
button.btn-danger:hover { background: #c82333; }

.ceisa-row-actions .btn-primary,
button.btn-primary {
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.ceisa-row-actions .btn-primary:hover,
button.btn-primary:hover { background: #2c80b4; }


/* --- 11. Empty state placeholder -------------------------------------- */

.empty-section-msg {
    color: #6c757d;
    font-style: italic;
    padding: 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #ced4da;
    border-radius: 4px;
}


/* --- 12. PDF text diff block (legacy, kept for backward compatibility) */

.pdf-diff-card,
.debug-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.diff-summary {
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.diff-file-block { margin-bottom: 1.5rem; }
.diff-file-block h4 { margin: 0 0 0.5rem; color: #2c3e50; }
.diff-file-meta { color: #6c757d; font-size: 0.85rem; margin: 0 0 0.75rem; }
.diff-file-meta code { background: #f8f9fa; padding: 1px 4px; border-radius: 3px; }

.diff-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.diff-tag-changed { background: #fff3cd; color: #856404; }
.diff-tag-same    { background: #d1e7dd; color: #0f5132; }


/* --- 13. Result page layout containers -------------------------------- */

.result-container {
    max-width: 1440px;
    margin: 1.5rem auto;
    padding: 1.5rem 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.job-token {
    font-family: monospace;
    font-size: 0.9rem;
    color: #666;
    word-break: break-all;
}

.download-button {
    background: #28a745;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}
.download-button:hover { background: #218838; }

.placeholder-message {
    padding: 2rem;
    text-align: center;
    color: #666;
    background: #f8f9fa;
    border-radius: 4px;
    margin-top: 1rem;
}


/* --- 14. Multi-AJU outer tab nav -------------------------------------- */

/*
   The multi-AJU result page has one button per shipment (driven by
   .aju-info-list from result_form_multi_aju.html) plus a per-shipment
   panel (.aju-tab-panel) containing the inner section tabs and
   editable forms. The inner section tabs reuse .ceisa-tab / .tab-panel
   above; these rules only style the outer shipment nav.
*/
.aju-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.aju-tab-btn {
    padding: 0.75rem 1.25rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    min-width: 180px;
    text-align: left;
}
.aju-tab-btn:hover { background: #e9ecef; }
.aju-tab-btn.active {
    background: #fff;
    border-color: #3498db;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
    box-shadow: 0 -2px 4px rgba(52, 152, 219, 0.1);
}
.aju-tab-btn .invoice-number {
    font-weight: 600;
    color: #2c3e50;
    display: block;
}
.aju-tab-btn .aju-info {
    font-size: 0.8rem;
    color: #6c757d;
    display: block;
    margin-top: 0.25rem;
}
.aju-tab-btn .barang-count {
    font-size: 0.75rem;
    color: #adb5bd;
    display: block;
}

.aju-tab-panel { display: none; }
.aju-tab-panel.active { display: block; }


/* --- 15. Job status page ------------------------------------------------ */

/*
   Status-specific layout: white card with status badge, dark log
   container with monospaced entry lines, error/info banner styles.
   Lifted from the inlined <style> block of the old status.html.
*/
.job-status-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.job-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.job-state {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 0.5rem;
}
.job-state.queued     { background: #fff3cd; color: #856404; }
.job-state.running    { background: #cfe2ff; color: #084298; }
.job-state.succeeded  { background: #d1e7dd; color: #0f5132; }
.job-state.failed     { background: #f8d7da; color: #842029; }
.job-state.cancelled  { background: #e2e3e5; color: #41464b; }

.log-container {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    max-height: 600px;
    overflow-y: auto;
    margin-top: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-entry {
    margin: 0.25rem 0;
    line-height: 1.4;
}

.error-message {
    background: #f8d7da;
    color: #842029;
    padding: 1rem;
    border-radius: 4px;
    border-left: 4px solid #842029;
    margin-top: 1rem;
}

.info-message {
    background: #cfe2ff;
    color: #084298;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border-left: 4px solid #084298;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- 16. Goods card layout (single-AJU new design) ------------------ */

/*
   Most layout primitives (flex, grid, spacing, color, hover,
   focus) are applied as Tailwind utility classes on the .goods-card
   markup in _goods_card.html. This CSS file only carries:

     1. The Tailwind grid-cols-6 default with a responsive
        breakpoint override (Tailwind's grid-cols-* utilities are
        static per breakpoint; the design needs a 2-col fallback
        below 768px which we set with a media query).
     2. Field-label typography that the design wants on every label
        inside a goods-card-field (uppercase 10px label-cap — same
        rule is reused by packaging-card-field / documents-card-meta).
     3. Hover-reveal of .goods-card-delete / .goods-card-toggle.
        Tailwind's group-hover: works, but we keep these selectors
        here so the "destroy action hidden until hover" rule is
        documented in one place.

   The Tailwind utilities applied on the markup include:
     - bg-white, border, border-border-subtle, rounded-xl, p-4,
       gap-3, transition-colors, hover:border-primary
     - flex items-start, gap-4, mb-4 (header layout)
     - inline-flex items-center justify-center w-8 h-8 bg-surface-container
       rounded font-bold text-primary tabular-nums (SERI badge)
     - text-danger, opacity-0, transition-opacity, group-hover:opacity-100
       (delete / toggle reveal)
     - grid grid-cols-6 gap-3 (field grid)
     - flex flex-col gap-1 (field column)
     - text-label-caps text-on-surface-variant (label typography)
*/
@media (max-width: 768px) {
    .goods-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.goods-card-field label,
.packaging-card-field label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #434654;
    line-height: 1.2;
}

.goods-card-delete,
.goods-card-toggle,
.packaging-card-delete,
.documents-card-delete {
    opacity: 0;
    transition: opacity 0.15s;
}
.goods-card:hover .goods-card-delete,
.goods-card:hover .goods-card-toggle { opacity: 1; }

/*
   Collapsible "all fields" sub-section. grid-cols-4 default,
   collapse to 2-col on mobile. .hidden drives display: none.
*/
.goods-card-extra .ceisa-cell-readonly {
    background: #fffbef;
    color: #6b5400;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .goods-card-extra { grid-template-columns: repeat(2, 1fr); }
}


/* --- 16b. Packaging card layout (single-AJU) ------------------------ */

/*
   Most layout primitives for the packaging card are applied as
   Tailwind utility classes inline in packaging_section.html. This
   file only carries:
     - The mobile breakpoint override (the 2-col field grid needs
       to collapse to 1-col on small screens).
     - The label typography (shared rule with .goods-card-field
       above — same uppercase 10px label-cap).
     - The hover-reveal of .packaging-card-delete (shared with
       .goods-card-delete).
*/
@media (max-width: 768px) {
    .packaging-card-grid { grid-template-columns: 1fr; }
}

.packaging-card-delete {
    opacity: 0;
    transition: opacity 0.15s;
}
.packaging-card:hover .packaging-card-delete { opacity: 1; }


/* --- 17. Documents card layout (single-AJU sidebar) ----------------- */

/*
   Most layout primitives for the documents card are applied as
   Tailwind utility classes inline in documents_section_cards.html.
   This file only carries:
     - The hover-reveal of .documents-card-delete (shared rule with
       .goods-card-delete / .packaging-card-delete).
     - The vendor-prefixed ::-webkit-calendar-picker-indicator
       opacity rule for the date picker (cannot be expressed as a
       Tailwind utility — pseudo-elements with vendor prefixes).
*/
.documents-card-delete { opacity: 0; transition: opacity 0.15s; }
.documents-card:hover .documents-card-delete { opacity: 1; }

input[type="date"] {
    cursor: pointer;
}

.documents-card .documents-card-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}
.documents-card .documents-card-date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* --- 18. Verification Diff empty state ------------------------------ */

.diff-empty-row td {
    text-align: center;
    color: #737685;
    font-style: italic;
    padding: 1rem;
}