/* File: wwwroot/css/form.css
 * Purpose: Visual language for the CAF/BPM pages (create + detail) — deliberately
 *          different from the app shell: this is a printed, filed legal document;
 *          the shell (Dashboard/Records/Approvers) is a daily work tool. See
 *          PLAN.md Track D ("two deliberately different visual languages") and
 *          Track D6 (this file closes that item).
 * Owner: Andhika Chandra Gulpa
 * Created: 2026-09-16
 * Task: D6 — restyle CAF/BPM pages to mirror _ref/CAF_Form_2.html / BPM_Form_6.html
 * AI-Assisted: Yes (Claude Code)
 * Part of: LSH Ecosystem — LSH Business Partner Onboarding
 *
 * Colors reuse this app's own --lsh-* tokens (site.css) rather than new hex values,
 * even though the source reference defines its own near-identical green palette
 * (--green:#1e7a34 vs this app's --lsh-primary:#177419 — close enough to keep one
 * brand green, not two).
 *
 * Deliberately UNLAYERED (no @layer wrapper) so it reliably wins over Tailwind's
 * own <input>/<table>/<button> resets regardless of selector specificity — a
 * layered sheet loses that fight no matter how specific its selectors are (see
 * reference_blazor_dotnet_gotchas.md #6, a real bug this app already hit once on
 * site.css). Being unlayered is safe here ONLY because every rule below is scoped
 * under .form-page — nothing here can leak onto Dashboard/Records/Approvers.
 */

.form-page {
  max-width: 960px;
  margin: 24px auto;
  background: var(--lsh-surface);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.form-page > h1 {
  margin: 0;
  padding: 22px 28px 4px;
  font-size: 20px;
  color: var(--lsh-primary-dark);
}

.form-page > .subtitle {
  margin: 0 0 4px;
  padding: 0 28px 16px;
  border-bottom: 4px solid var(--lsh-primary);
}

.form-page .card {
  margin: 0;
  padding: 22px 28px;
  border: none;
  border-bottom: 1px solid var(--lsh-line);
  border-radius: 0;
  box-shadow: none;
  background: var(--lsh-surface);
}

.form-page .card:last-child { border-bottom: none; }

/* A green left-accent bar + uppercase heading — the section-title treatment
 * every card on these pages gets, whether it's a numbered form section
 * ("Section 1 — ...") or one of this app's own additions (fill link,
 * attachments, audit trail) that has no equivalent in the paper form. */
.form-page .card > h2 {
  margin: 0 0 16px !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--lsh-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-left: 14px;
  border-left: 4px solid var(--lsh-primary);
}

.form-page .card > h3 {
  color: var(--lsh-primary-dark);
}

/* var(--lsh-ink), not a literal hex — the source form's own `color:#333` for
 * labels has no dark-mode variant (Suci's page never needed one); copying it
 * verbatim made every field label nearly unreadable in dark mode (found via
 * this task's own Playwright verification, not assumed correct on the first
 * pass). --lsh-ink already carries both theme values (site.css). */
.form-page .field label { color: var(--lsh-ink); }

.form-page input[type="text"],
.form-page input[type="email"],
.form-page input[type="tel"],
.form-page input[type="url"],
.form-page input[type="date"],
.form-page input[type="number"],
.form-page input[type="password"],
.form-page select,
.form-page textarea {
  background: var(--lsh-surface-alt);
  border: 1px solid var(--lsh-line);
}

.form-page input:focus,
.form-page select:focus,
.form-page textarea:focus {
  border-color: var(--lsh-primary);
  box-shadow: 0 0 0 3px rgba(23, 116, 25, 0.12);
}

/* Dashed-border tinted callout — matches Suci's declaration-box/info-box.
 * Marker class added alongside the pre-existing `card` + inline
 * `background:var(--lsh-paper)` on the ~3 nested panels that need this
 * (declaration boxes, bank-reference sub-blocks) rather than restyling
 * every nested .card, which would also catch unrelated ones. */
.form-page .form-info-box {
  border: 1px dashed var(--lsh-primary);
  border-radius: 8px;
}

.form-page .notice.warn {
  border: 1px dashed var(--lsh-warn);
}

.form-page .checklist th {
  background: var(--lsh-success-soft);
  color: var(--lsh-primary-dark);
  text-transform: uppercase;
  font-size: 11px;
}

.form-page .actions {
  padding: 20px 28px 28px;
  background: var(--lsh-surface-alt);
  border-top: 1px solid var(--lsh-line);
}

.form-page .btn-primary {
  padding: 11px 24px;
  font-size: 14px;
}