/*
 * Bulk Mapping Import + Audit Import -- brings the two import screens onto the same
 * visual language as the Plans / Formularies screens (design logs N and P). Scoped under
 * `.formulary-import-page`; Bootstrap's `.badge`/`.btn`/`.card` are never redefined
 * globally. Colors are the mockup's literal hex, commented with its var name -- the same
 * convention as formularies.css, and deliberately not a `:root` block (see ADR 0011:
 * a token nobody else reads is the speculative half of a refactor).
 */

/* The shared layout wraps every page in a white, padded .site-contents panel, which would
 * merge these pages' own cards into that outer panel. Neutralize it and give .main-content
 * a grey ground instead. `.main-content` is in the selector purely for specificity --
 * application.css's `body > .main-content > .site-contents` scores the same as a bare
 * body-class selector and loads later, so the tie would go to the white panel. */
body.plan-formulary-imports .main-content,
body.formulary-override-audit-imports .main-content {
  background-color: #f2f3f6; /* --bg */
}

body.plan-formulary-imports .main-content .site-contents,
body.formulary-override-audit-imports .main-content .site-contents {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.formulary-import-page h1 {
  font-size: 21px;
  font-weight: 700;
  color: #1c2130; /* --ink */
  margin-bottom: 4px;
}

/* Audit Import leads with a one-line explanation of the override semantics (log P). */
.formulary-import-page .formulary-import-subtitle {
  font-size: 12.5px;
  color: #6b7183; /* --muted */
  margin-bottom: 16px;
}

.formulary-import-card {
  background: #fff;
  border: 1px solid #e3e5ec; /* --line */
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.formulary-import-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1c2130; /* --ink */
  margin: 0 0 12px;
}

/* Filter row for the export panel: selects and the export button share a baseline. */
.formulary-import-frow {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.formulary-import-fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.formulary-import-fld label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b7183; /* --muted */
  margin: 0;
}

.formulary-import-page select.formulary-import-select {
  appearance: none;
  font-size: 12px;
  font-weight: 600;
  color: #1c2130; /* --ink */
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7183' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  /* gray-65, not the mockup's #cfd3de: that value is 1.50:1 on white and fails WCAG
   * 1.4.11's 3:1 minimum for non-text controls. ADR 0011 records the same defect and
   * points at ideon-ui's gray-65 (3.54:1) as the replacement. */
  border: 1px solid #85879a;
  border-radius: 8px;
  padding: 6px 28px 6px 13px;
  min-width: 150px;
}

/* ---- Upload ---- */

.formulary-import-uploadrow {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.formulary-import-drop {
  display: block;
  flex: 1;
  min-width: 240px;
  /* Dashed borders read lighter than solid at the same value, but this is still a
   * non-text control boundary -- same gray-65 as the selects above. */
  border: 2px dashed #85879a;
  border-radius: 10px;
  padding: 18px 22px;
  text-align: center;
  color: #6b7183; /* --muted */
  font-size: 12.5px;
  background: #fbfbfd;
  cursor: pointer;
  margin: 0;
}

.formulary-import-drop.is-dragover {
  background: #f4ecf7;
  border-color: #7d219c; /* --purple */
}

.formulary-import-drop b {
  color: #7d219c; /* --purple */
}

/* Selected state. The border goes solid because a dashed box reads as "drop target,
 * still empty" however much text is in it -- the shape is what signals emptiness, not
 * the words. */
.formulary-import-drop.is-selected {
  border-style: solid;
  border-color: #7d219c; /* --purple */
  background: #faf6fc;
  color: #1c2130; /* --ink */
}

.formulary-import-drop__chosen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.formulary-import-drop__icon {
  color: #7d219c; /* --purple */
  flex: none;
}

.formulary-import-drop__name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #1c2130; /* --ink */
  overflow-wrap: anywhere;
}

.formulary-import-drop__meta {
  font-size: 11.5px;
  color: #6b7183; /* --muted */
}

.formulary-import-drop__meta b {
  font-weight: 600;
}

.formulary-import-uploadmeta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.formulary-import-mini {
  font-size: 11px;
  color: #6b7183; /* --muted */
}

.formulary-import-csvspec {
  background: #fbfbfd;
  border: 1px solid #e3e5ec; /* --line */
  border-radius: 8px;
  padding: 8px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  margin: 0;
}

/* The upload contract for Audit Import (log P) -- long-form, so it reads as prose
 * rather than sitting on one line beside the drop zone. */
.formulary-import-contract {
  font-size: 11.5px;
  line-height: 1.55;
  color: #6b7183; /* --muted */
  margin: 8px 0 0;
  max-width: 46ch;
}

.formulary-import-contract code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #1c2130; /* --ink */
}

/* ---- Runs table ---- */

.formulary-import-card.formulary-import-runs {
  padding: 8px 10px;
}

.formulary-import-runs h3 {
  padding: 10px 8px 0;
}

.formulary-import-runs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.formulary-import-runs thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b7183; /* --muted */
  padding: 8px;
  border-bottom: 2px solid #e3e5ec; /* --line */
  white-space: nowrap;
}

.formulary-import-runs tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid #e3e5ec; /* --line */
  color: #1c2130; /* --ink */
  vertical-align: top;
}

.formulary-import-runs tbody tr:nth-child(even) {
  background: #fafafc;
}

.formulary-import-num {
  font-variant-numeric: tabular-nums;
}

.formulary-import-page a.formulary-import-plink {
  color: #8b2fa8; /* --link */
  text-decoration: none;
}

.formulary-import-page a.formulary-import-plink:hover {
  text-decoration: underline;
}

.formulary-import-filelink {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
}

/* Status / result pills. Three states only -- the models expose exactly
 * processing/complete/failed. */
.formulary-import-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.formulary-import-pill.is-ok {
  background: #e2f4e8; /* --ok-bg */
  color: #1c7c40; /* --ok */
}

/* The mockup's --warn #8a6d00 on --warn-bg measures 4.39:1, under WCAG 1.4.3's 4.5:1 for
 * normal text -- and this pill is 11px, so it is normal text, not large. Darkened to
 * 5.35:1. Same class of defect as the mockup's control border recorded in ADR 0011: the
 * palette was not contrast-checked at these sizes. (The ok and bad pills measure 4.58:1
 * and 6.12:1, so they pass as-is -- ok only just.) */
.formulary-import-pill.is-warn {
  background: #fdf1d6; /* --warn-bg */
  color: #7a6000; /* --warn, darkened for contrast */
}

.formulary-import-pill.is-bad {
  background: #fbe3e6; /* --bad-bg */
  color: #a41e34; /* --bad */
}

/* Results is one metric per line once the run completes (log P). */
.formulary-import-metrics {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.6;
  white-space: nowrap;
}

.formulary-import-metrics b {
  font-variant-numeric: tabular-nums;
}

.formulary-import-pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 6px 2px;
  font-size: 11.5px;
  color: #6b7183; /* --muted */
}

.formulary-import-empty {
  padding: 18px 8px;
  font-size: 12.5px;
  color: #6b7183; /* --muted */
}