/* ============================================================
   LendingWise Design System — components with NO Metronic equivalent
   Hand-maintained translation of the React reference implementations in
   .claude/skills/lw-design/components/ into plain CSS classes for the PHP/jQuery monolith.
   Source hashes (sha256, first 12) at translation time — `scripts/design-system/lw-design-manifest.sh --check`
   fails when the vendored .jsx no longer match, which means this file needs a review:
     StatusPill.jsx=afa9252aaff3 Table.jsx=1589b095e81c Dropzone.jsx=98d7922e4cb2
   Consumes ONLY --lw-* tokens (public/assetsNew/css/lw-tokens.css, loaded before this file),
   so every class renders correctly in light and under body.dark-mode with no extra rules.
   The two production sheets this has to coexist with:
     - dark-mode.css: its broad `body.dark-mode span:not(...)` colour reset excludes [class*="lw-"].
     - custom.css:    `.dropzone { border: 0 !important; padding: … !important }` — the dropzone rules
                      below carry !important on those two properties so `class="dropzone lw-dropzone"` works.
   Icons: the Metronic head ships Font Awesome 5.15.1 (`fas fa-…`). The legacy OpenHead pages ship
   Font Awesome 4.7 — there use `fa fa-clock-o`, `fa fa-check-circle`, `fa fa-times-circle`,
   `fa fa-minus-circle`, `fa fa-cloud-upload`, `fa fa-exclamation-circle`.
   Markup recipes and states: .claude/skills/lw-design/component-map.md
   ============================================================ */

/* ---- StatusPill ------------------------------------------------------------
   <span class="lw-pill lw-pill--pass"><i class="fas fa-check-circle" aria-hidden="true"></i> Passed</span>
   Status  : lw-pill--pending (default) | lw-pill--pass | lw-pill--fail | lw-pill--disabled
   Variant : soft (default: tint + ink) | lw-pill--solid (fill + on-label) | lw-pill--dot (ink dot + text)
   Size    : md (default) | lw-pill--sm
   Icons   : fa-clock (pending) · fa-check-circle (pass) · fa-times-circle (fail) · fa-minus-circle (disabled)
   RULE: status colour lives on this small element only — never on the cell or the row. */
.lw-pill {
  --lw-pill-fill: var(--lw-status-pending-fill);
  --lw-pill-on:   var(--lw-text-on-warning);
  --lw-pill-tint: var(--lw-status-pending-tint);
  --lw-pill-ink:  var(--lw-status-pending-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--lw-font-sans);
  font-weight: var(--lw-fw-medium);
  font-size: var(--lw-fs-sm);
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.65rem;
  color: var(--lw-pill-ink);
  background: var(--lw-pill-tint);
  border-radius: var(--lw-radius-pill);
  white-space: nowrap;
  vertical-align: middle;
}
.lw-pill--pending { /* explicit form of the default, so markup can always name its status */
  --lw-pill-fill: var(--lw-status-pending-fill);
  --lw-pill-on:   var(--lw-text-on-warning);
  --lw-pill-tint: var(--lw-status-pending-tint);
  --lw-pill-ink:  var(--lw-status-pending-ink);
}
.lw-pill--pass {
  --lw-pill-fill: var(--lw-status-pass-fill);
  --lw-pill-on:   var(--lw-text-on-success);
  --lw-pill-tint: var(--lw-status-pass-tint);
  --lw-pill-ink:  var(--lw-status-pass-ink);
}
.lw-pill--fail {
  --lw-pill-fill: var(--lw-status-fail-fill);
  --lw-pill-on:   var(--lw-text-on-danger);
  --lw-pill-tint: var(--lw-status-fail-tint);
  --lw-pill-ink:  var(--lw-status-fail-ink);
}
.lw-pill--disabled {
  --lw-pill-fill: var(--lw-status-disabled-fill);
  --lw-pill-on:   var(--lw-text-on-disabled);
  --lw-pill-tint: var(--lw-status-disabled-tint);
  --lw-pill-ink:  var(--lw-status-disabled-ink);
}
.lw-pill > i {
  font-size: 0.95em;
  line-height: 1;
  color: inherit;
}
.lw-pill--sm {
  font-size: var(--lw-fs-xs);
  padding: 0.3rem 0.5rem;
}
.lw-pill--solid {
  color: var(--lw-pill-on);
  background: var(--lw-pill-fill);
}
.lw-pill--dot {
  gap: 0.4rem;
  padding: 0;
  background: none;
  border-radius: 0;
  font-weight: var(--lw-fw-normal);
  font-size: var(--lw-fs-md);
  letter-spacing: 0;
  line-height: inherit;
  color: var(--lw-text-secondary);
}
.lw-pill--dot.lw-pill--sm {
  font-size: var(--lw-fs-sm);
}
.lw-pill--dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lw-pill-ink);
  flex-shrink: 0;
}
.lw-pill--dot > i {
  display: none; /* the dot replaces the icon */
}

/* ---- Table row status accent (pairs with a StatusPill cell) ------------------
   <tr class="lw-row-status--pass"> … </tr>  → the FIRST cell shows a 3px left accent in the status ink.
   Drawn as an inset box-shadow, not a border, so it survives `.table-bordered td { border … !important }`
   (style.bundle.css) and `body.dark-mode .table td { border-color … !important }` (dark-mode.css), takes
   no layout space (no first-column shift between accented and plain rows) and needs no reservation on
   unaccented rows. Cells keep their surface colour. Replaces the .chkRed / .chkPurp / .chkYellow /
   .bg-light-green floods and the inline tenant background floods — remove those when you add this. */
tr.lw-row-status--pending > td:first-child,
tr.lw-row-status--pending > th:first-child { box-shadow: inset 3px 0 0 0 var(--lw-status-pending-ink); }
tr.lw-row-status--pass > td:first-child,
tr.lw-row-status--pass > th:first-child { box-shadow: inset 3px 0 0 0 var(--lw-status-pass-ink); }
tr.lw-row-status--fail > td:first-child,
tr.lw-row-status--fail > th:first-child { box-shadow: inset 3px 0 0 0 var(--lw-status-fail-ink); }
tr.lw-row-status--disabled > td:first-child,
tr.lw-row-status--disabled > th:first-child { box-shadow: inset 3px 0 0 0 var(--lw-status-disabled-ink); }

/* ---- Dropzone (quiet) ---------------------------------------------------------
   Two ways to use it — same look, same states:
   A) Native, no JavaScript: a <label> wraps the file input, so a click opens the picker by itself.
      <label class="lw-dropzone">
        <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
        <span class="lw-dropzone__label">Drag files here or click to upload</span>
        <span class="lw-dropzone__hint">PDF, JPG, PNG, DOCX · up to 25 MB</span>
        <input type="file" multiple name="files[]">
      </label>
   B) Bound to Dropzone.js (the app's upload library): keep the library's `dropzone` class so its own
      preview / progress / message rules (all scoped under .dropzone in plugins.bundle.css) still apply;
      Dropzone.js toggles `dz-drag-hover`, which is honoured here as the dragover state.
      <div class="dropzone lw-dropzone" id="myDropzone">
        <div class="dz-message"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
          <span class="lw-dropzone__label">Drag files here or click to upload</span>
          <span class="lw-dropzone__hint">PDF, JPG, PNG, DOCX · up to 25 MB</span></div>
      </div>
   Error line (either form): <span class="lw-dropzone__error" role="alert"><i class="fas fa-exclamation-circle" aria-hidden="true"></i> File exceeds 25 MB</span>
   Modifier : lw-dropzone--compact (tighter padding, hint hidden — inline / table use)
   States   : .is-dragover (or Dropzone.js's .dz-drag-hover) · .is-error · .is-disabled / [aria-disabled="true"]
              (disabled zones do not light up on dragover; do not give them tabindex).
   Quiet by default (dashed input border, muted icon); intensifies to primary blue + primary TINT only while
   dragging over. Never a saturated fill. Deprecates the magenta .dropzone rules in custom.css. */
.lw-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  min-height: 0;
  padding: 1.75rem 1.5rem !important;            /* !important: custom.css .dropzone { padding … !important } */
  font-family: var(--lw-font-sans);
  font-weight: var(--lw-fw-normal);
  border: 2px dashed var(--lw-input-border) !important;   /* !important: custom.css .dropzone { border: 0 !important } */
  border-radius: var(--lw-radius);
  background: var(--lw-input-bg);
  color: var(--lw-text-muted);
  cursor: pointer;
  transition: border-color var(--lw-transition-fast), background var(--lw-transition-fast);
}
.lw-dropzone > i,
.lw-dropzone .dz-message > i {
  font-size: 1.6rem;
  color: var(--lw-text-muted);
  transition: color var(--lw-transition-fast);
}
.lw-dropzone__label {
  display: block;
  font-size: var(--lw-fs-md);
  font-weight: var(--lw-fw-medium);
  color: var(--lw-text);
}
.lw-dropzone__hint {
  display: block;
  font-size: var(--lw-fs-sm);
  color: var(--lw-text-muted);
}
.lw-dropzone > input[type="file"] {
  display: none;
}
.lw-dropzone .dz-message {                        /* Dropzone.js message wrapper: lay it out like the native form */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.lw-dropzone--compact {
  gap: 0.35rem;
  padding: 1rem !important;
}
.lw-dropzone--compact > i,
.lw-dropzone--compact .dz-message > i {
  font-size: 1.2rem;
}
.lw-dropzone--compact .lw-dropzone__hint {
  display: none;
}
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).is-dragover,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).dz-drag-hover {
  border-color: var(--lw-primary) !important;
  background: var(--lw-primary-tint);
}
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).is-dragover > i,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).dz-drag-hover > i,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).is-dragover .dz-message > i,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).dz-drag-hover .dz-message > i,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).is-dragover .lw-dropzone__label,
.lw-dropzone:not(.is-disabled):not([aria-disabled="true"]).dz-drag-hover .lw-dropzone__label {
  color: var(--lw-primary-ink);
}
.lw-dropzone.is-error {
  border-color: var(--lw-input-border-error) !important;
}
.lw-dropzone.is-disabled,
.lw-dropzone[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}
.lw-dropzone:focus-visible {
  outline: 2px solid var(--lw-focus-ring-inner);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--lw-focus-ring-outer);
}
.lw-dropzone__error {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-family: var(--lw-font-sans);
  font-size: var(--lw-fs-sm);
  color: var(--lw-danger-ink);
}