/* ============================================================================
   Required Docs table — State System (UX-1, CU-868kdbx35)
   AI Result states are the fixed semantic PILL system below. Document Status
   color is TENANT-CONFIGURED (docStatusArray) and — per PO feedback (UX-1
   revert) — fills the Document Status cell (#docStatus_N_td) and the
   upload/row-start cell, with a luminance-matched text color; all other cells
   stay white. The revert block at the bottom of this file blends the inner
   controls so those two cells read as the full status color while keeping the
   new dropzone component, the right-aligned meta icons, and the AI Result column.
   ========================================================================== */

:root {
    --lw-status-pending: #FFA800;
    --lw-status-pending-soft: #FFF4DE;
    --lw-status-pass: #1BC5BD;
    --lw-status-pass-soft: #C9F7F5;
    --lw-status-fail: #F64E60;
    --lw-status-fail-soft: #FFE2E5;
    /* human_review is a first-class verdict, not an error (system extension —
       Deep Orange per design default; single-token flip to #8950FC/#EEE5FF) */
    --lw-status-review: #E9730C;
    --lw-status-review-soft: #FDEBDB;
    --lw-status-na: #B5B5C3;
    --lw-status-na-soft: #EEF0F5;
    --lw-neutral-text: #3F4254;
    --lw-muted-text: #7E8299;
    --lw-placeholder: #B5B5C3;
    --lw-border: #E4E6EF;
    --lw-border-soft: #EBEDF3;
    --lw-border-strong: #D1D3E0;
    --lw-bg: #F3F6F9;
    --lw-primary: #3699FF;
    --lw-primary-light: #E1F0FF;
    --lw-radius: 0.42rem;
    --lw-radius-sm: 0.28rem;
    --lw-radius-pill: 2rem;
}

@keyframes lwSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lwPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes lwFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- StatusPill set (AI Result column) — min-width 122px, one size ------- */
.lw-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 122px;
    padding: 5px 9px;
    border-radius: var(--lw-radius-pill);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.35;
}
.lw-pill i { font-size: 11px; }
/* -ink / -tint, not the bare name and -soft. The :root block at the top of this
   file redeclares `--lw-status-pass` and `--lw-status-pass-soft` (and the pending
   and fail equivalents) with light-theme hex and ships no dark-mode counterpart,
   so any rule reading those names keeps light ink on a light tint inside a dark
   table. The -ink / -tint pair is NOT shadowed there, so it resolves to the real
   design-system token and flips with the theme.

   All seven pill modifiers are switched together on purpose: repointing only the
   three that were reported would leave one column rendering half its chips in the
   right theme and half in the wrong one, which is harder to read than uniform
   breakage and looks like a rendering fault rather than a known gap. The shadowed
   :root block itself is still deliberately untouched — retiring it affects every
   other style in this file and is its own task. */
.lw-pill--pending    { color: var(--lw-status-pending-ink); background: var(--lw-status-pending-tint); }
.lw-pill--processing { color: var(--lw-status-pending-ink); background: var(--lw-status-pending-tint); }
.lw-pill--processing i { animation: lwSpin 1s linear infinite; }
.lw-pill--pass       { color: var(--lw-status-pass-ink); background: var(--lw-status-pass-tint); }
.lw-pill--fail       { color: var(--lw-status-fail-ink); background: var(--lw-status-fail-tint); }
/* These three took their colour from the :root block above, which is this file's
   own private copy and has no dark-mode counterpart — so under body.dark-mode the
   chips kept their light-theme ink on a light-theme tint while the table around
   them went dark. They now use design-system tokens, which flip with the theme.
   Only the three that were broken are repointed; the rest of that block is left
   alone deliberately.

   Needs Review shares the amber hue with Pending BY DESIGN-SYSTEM RULE, not by
   accident: the DS ships four statuses (pending/pass/fail/disabled) and folds Human
   Review into the pending family ('"Human Review" is shown in amber', readme.md:270),
   and status is never purple ('info-purple is reserved for rare informational
   accents, not status', readme.md:126). The two are told apart by their ICON and
   LABEL, which is how the DS intends statuses to be distinguished. A fifth status
   hue is a design-system change, not a defect fix.

   --lw-warning-* would do exactly the same thing here: it is an alias of the same
   values in both themes (#FFA800 / #FFF4DE / #9A6600), so switching to it would
   change nothing rendered. The -tint/-ink pair is the one that matters, because
   unlike --lw-status-pending / -soft it is NOT shadowed by the :root block above
   and therefore still flips under body.dark-mode. */
.lw-pill--review     { color: var(--lw-status-pending-ink); background: var(--lw-status-pending-tint); }
.lw-pill--na         { color: var(--lw-status-disabled-ink); background: var(--lw-status-disabled-tint); }
.lw-pill--noconfig   { color: var(--lw-status-disabled-ink); background: var(--lw-status-disabled-tint); }

/* Muted meta icons: AI-disabled robot, status-timestamp clock */
.lw-meta-icon { color: var(--lw-placeholder); font-size: 14px; cursor: default; }

/* Cross-validation ⇄ badge, folded into the single AI Result cell (CU-868kdbx35).
   Compact, quieter than a verdict pill; color echoes the cross-check outcome. */
.lw-xval {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--lw-radius-pill);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}
.lw-xval i { font-size: 10px; }
.lw-xval--pass   { color: var(--lw-status-pass);   background: var(--lw-status-pass-soft); }
.lw-xval--review { color: var(--lw-status-review); background: var(--lw-status-review-soft); }

/* ---- Row accent: 3px left chip in the TENANT Document-Status color ------- */
/* Every checklist row carries --lw-doc-accent (set inline at render from
   docStatusArray, updated live on dropdown change). The AI verdict is NOT the
   accent anymore — it lives entirely in the AI Result column. Cells stay white;
   no full-cell flood. */
/* Scope to real doc rows (data-docid) so the grouped-view folder header rows
   (.condGroupHeader.bg-gray-100, no data-docid) keep their gray background. */
#fileCheckListTableId > tbody > tr[data-docid] > td { background: #FFFFFF; }
#fileCheckListTableId > tbody > tr[data-docid]:hover > td { background: #F2F2F2; }
#fileCheckListTableId > tbody > tr[data-docid] > td:first-child { box-shadow: inset 3px 0 0 var(--lw-doc-accent, var(--lw-border)); }

/* Kill the legacy full-cell floods inside this table only (colors move to the
   accent + pills + tenant swatch). Legacy classes stay untouched elsewhere. */
#fileCheckListTableId td.chkPurp,
#fileCheckListTableId td.chkRed,
#fileCheckListTableId td.chkYellow,
#fileCheckListTableId td.bg-light-green,
#fileCheckListTableId .chkPurp,
#fileCheckListTableId .chkRed,
#fileCheckListTableId .chkYellow,
#fileCheckListTableId .bg-light-green {
    background: #FFFFFF !important;
    border-color: var(--lw-border-soft) !important;
}

/* Alignment discipline */
#fileCheckListTableId > tbody > tr > td { vertical-align: middle; min-height: 58px; }

/* ---- Dropzone: quiet by default, intensifies on dragover ----------------- */
#fileCheckListTableId .dropzone.dropzoneClass,
.lw-dropzone-quiet {
    border: 1px dashed var(--lw-border-strong) !important;
    border-radius: var(--lw-radius-sm) !important;
    background: var(--lw-bg) !important;
    color: var(--lw-muted-text) !important;
    font-size: 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#fileCheckListTableId .dropzone.dropzoneClass .dz-message,
#fileCheckListTableId .dropzone.dropzoneClass .dz-default { margin: 0; color: inherit; font-size: 10px; text-align: center; }
/* The default message text lives inside a <button class="dz-button"> which does
   NOT inherit font/color from the flex container — reset it so the centered,
   muted style + the cloud icon (injected via dictDefaultMessage) render. */
#fileCheckListTableId .dropzone.dropzoneClass .dz-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 1.3;
    cursor: pointer;
}
#fileCheckListTableId .dropzone.dropzoneClass .dz-button i { color: var(--lw-placeholder); }
#fileCheckListTableId .dropzone.dropzoneClass.dz-drag-hover,
.lw-dropzone-quiet.dz-drag-hover {
    border-color: var(--lw-primary) !important;
    background: var(--lw-primary-light) !important;
    color: var(--lw-primary) !important;
}
#fileCheckListTableId .dropzone.dropzoneClass.dz-drag-hover .dz-button i { color: var(--lw-primary); }

/* Status cell: control + meta icons on one aligned row (no stray <br> stack) */
.lw-status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* ---- Document Status control: neutral select + TENANT color swatch ------- */
/* The swatch background is set inline by PHP from the tenant's Doc Status
   config (docStatusArray) — this file styles shape only, never color values. */
.lw-status-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 128px;
    padding: 3px 8px 3px 6px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-sm);
    background: #FFFFFF;
    white-space: nowrap;
}
.lw-status-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.lw-status-select-wrap select {
    border: none !important;
    background: transparent !important;
    font-size: 11px !important;
    color: var(--lw-neutral-text) !important;
    padding: 3px 0 !important;
    max-width: 150px;
}
.lw-status-select-wrap select:focus { outline: none; box-shadow: none; }

/* ---- Neutral info toast (upload with no AI configuration) ---------------- */
.lw-toast-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid var(--lw-border);
    border-left: 3px solid var(--lw-status-na);
    color: var(--lw-neutral-text);
    border-radius: var(--lw-radius);
    padding: 10px 14px;
    font-size: 12px;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
}
.lw-toast-info i { color: var(--lw-muted-text); }

/* Legacy AI summary bits restyled where markup persists between phases */
.ai-result-summary .ai-status-disabled,
.ai-result-summary-cross .ai-status-disabled { font-style: normal; }
.ai-processing-loader .ai-spinner {
    border: 2px solid var(--lw-status-pending-soft);
    border-top-color: var(--lw-status-pending);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: lwSpin 1s linear infinite;
    display: inline-block;
}
.ai-processing-loader .ai-processing-text { color: var(--lw-status-pending); font-size: 11px; font-weight: 500; }

/* ============================================================================
   UX-1 (CU-868kdbx35): the Document Status cell (#docStatus_N_td, .lw-status-td)
   and the upload/row-start cell (first-child) carry the full tenant status-color
   flood — getStyle() paints them inline (bg + luminance-matched text, !important).
   Option B (PO): the status control sits ON the colored cell as a distinct WHITE
   bordered pill with the tenant-color dot restored (not blended). The dropzone
   component, the right-aligned meta icons, and the AI column are all kept.
   ========================================================================== */
/* Status cell — full color flood + a distinct white bordered pill with the dot */
#fileCheckListTableId td.lw-status-td .lw-status-select-wrap {
    background: #FFFFFF !important;
    border: 1px solid var(--lw-border-strong) !important;
}
#fileCheckListTableId td.lw-status-td .lw-status-swatch { display: inline-block !important; }
/* dark text inside the white pill (don't inherit the cell's contrast color); reserve
   room on the right so the native dropdown caret never overlaps long status labels */
#fileCheckListTableId td.lw-status-td .lw-status-select-wrap select {
    color: var(--lw-neutral-text) !important;
    padding-right: 18px !important;
}
#fileCheckListTableId td.lw-status-td .lw-meta-icon { color: inherit !important; opacity: 0.8; }
/* Upload/row-start cell — show the inline status color through the dropzone box,
   keep the cloud icon + short copy (text inherits the cell's contrast color) */
#fileCheckListTableId > tbody > tr[data-docid] > td:first-child .dropzone.dropzoneClass {
    background: transparent !important;
}
#fileCheckListTableId > tbody > tr[data-docid] > td:first-child .dropzone.dropzoneClass .dz-message,
#fileCheckListTableId > tbody > tr[data-docid] > td:first-child .dropzone.dropzoneClass .dz-button,
#fileCheckListTableId > tbody > tr[data-docid] > td:first-child .dropzone.dropzoneClass .dz-button i {
    color: inherit !important;
}