/*
 * Cards, flash/banners, buttons, forms, auth, filter tabs, tables, badges, meta grids.
 * See 01_tokens.css for the load-order contract.
 */

/* --- Cards --- */

.card,
.progress-panel,
.review-panel,
.feedback-panel,
.classification-confirm-panel,
.classification-panel,
.compliance-panel,
.draft-preview,
.submission-meta,
.user-meta,
.auth-card,
.edit-section,
.form-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.progress-panel,
.review-panel,
.feedback-panel,
.classification-confirm-panel,
.classification-panel,
.compliance-panel,
.draft-preview { padding: 1.1rem 1.35rem; margin: 0 0 var(--gap-4); }

.classification-panel, .compliance-panel, .draft-preview { box-shadow: none; }

/* --- Flash + banners --- */

.flash, .banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin: 0 0 var(--gap-4);
  font-size: 0.93rem;
}
.flash::before, .banner::before { font-weight: 700; flex: none; }
.flash-notice { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.flash-notice::before { content: "✓"; }
.flash-alert { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.flash-alert::before { content: "!"; }

.banner-test { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.banner-test::before { content: "⚑"; }
.banner-info { background: var(--blue-soft); border-color: var(--blue-line); color: var(--navy); }
.banner-info::before { content: "i"; font-family: Georgia, serif; }
.banner-warning { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.banner-warning::before { content: "!"; }
.banner-error { background: var(--red-soft); border-color: var(--red); color: var(--red); font-weight: 600; }
.banner-error::before { content: "!"; }
.banner-error a { color: inherit; }
.banner ul { margin: var(--gap-1) 0 0; }

/* --- Buttons --- */

.button-primary,
.button-secondary,
.button-ghost,
.button-danger,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.button-primary, input[type="submit"] { background: var(--navy); color: var(--white); }
.button-primary:hover, input[type="submit"]:hover { background: var(--navy-dark); }
.button-secondary { background: var(--white); color: var(--navy); border-color: var(--line-strong); }
.button-secondary:hover { border-color: var(--navy); background: var(--navy-soft); }
.button-ghost { background: transparent; color: var(--navy); border-color: transparent; padding-inline: 0.6rem; }
.button-ghost:hover { background: var(--navy-soft); }
.button-danger { background: var(--white); color: var(--red); border-color: #f0b7b1; }
.button-danger:hover { background: var(--red-soft); border-color: var(--red); }
.button-small { min-height: 1.9rem; padding: 0.2rem 0.65rem; font-size: 0.85rem; }

form.button_to { display: inline; margin: 0; }

.actions { margin: 1.25rem 0 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* --- Forms --- */

.form-section {
  padding: var(--gap-4) 1.25rem var(--gap-2);
  margin: 0 0 var(--gap-4);
  border: 1px solid var(--line);
  min-width: 0;
}
/* Floating the legend takes it out of the fieldset's border notch (where browsers draw it with
   the page background showing through) and into normal flow, so it reads as the card's heading. */
.form-section legend, .edit-section legend {
  float: left;
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
}
.form-section legend + *, .edit-section legend + * { clear: both; }
.form-section > .hint:first-of-type { margin: -0.4rem 0 0.9rem; }
.hint code { font-size: 0.95em; }

.field { margin-bottom: var(--gap-4); }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.93rem; }
.field-checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; }
.field-checkbox input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--navy); }
.field-checkbox label { display: inline; margin: 0; }
.field-checkbox .hint { grid-column: 2; margin: 0; }
.field-inline { display: flex; gap: var(--gap-4); flex-wrap: wrap; }
.field-inline > .field { flex: 1 1 14rem; min-width: 0; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  max-width: 34rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
input[type="file"] { padding: 0.4rem; }
select { appearance: auto; }
textarea { max-width: 100%; min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: none; box-shadow: var(--focus); }
::placeholder { color: #98a2b3; }

.hint { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0; line-height: 1.45; }
.sub-label { font-weight: 600; margin: var(--gap-2) 0 0.3rem; font-size: 0.93rem; }

.form-errors {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  margin-bottom: var(--gap-4);
}
.form-errors p { margin: 0 0 0.3rem; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }

/* --- Auth --- */

.auth-card { max-width: 24rem; margin: 5rem auto; padding: 1.75rem; }
.auth-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--gap-4); }
.auth-brand .brand-mark { background: var(--navy); color: var(--white); width: 2rem; height: 2rem; font-size: 0.85rem; }
.auth-card h1 { font-size: 1.3rem; margin: 0; }
.auth-lede, .auth-help { color: var(--muted); font-size: 0.9rem; }
.auth-card input[type="submit"] { width: 100%; }

/* Divider between the password form and the Microsoft SSO button. The rules are drawn on
   pseudo-elements either side of the label rather than as a background-punched line, so the
   card can sit on any surface without the divider needing to know its colour. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin: var(--gap-5) 0 var(--gap-4);
  color: var(--muted);
  font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* button_to is inline everywhere else; on the auth card it has to match the full-width
   submit above it, or the secondary action reads as narrower and therefore lesser. */
.auth-card form.button_to { display: block; }
.auth-card form.button_to .button-secondary { width: 100%; }

/* --- Filter tabs --- */

.filter-tabs {
  display: flex;
  gap: var(--gap-1);
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.filter-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.filter-tabs a:hover { background: var(--white); border-color: var(--line); }
.filter-tabs a.active { background: var(--navy); color: var(--white); }
.filter-tabs .count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.07);
}
.filter-tabs a.active .count { background: rgba(255, 255, 255, 0.2); }

/* --- Data tables ---
   Column headers are duplicated into each cell as a `data-label` attribute, which is
   invisible at desktop width and becomes the key of a key/value pair when the table
   restyles into cards below 768px (06_responsive). Keeping the label on the cell rather
   than in a second set of markup means one <table> serves both widths. */

.table-wrap { overflow-x: auto; }

.submissions-table, .section-table, .edit-rows, .users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.submissions-table th, .section-table th, .edit-rows th, .users-table th {
  text-align: left;
  background: var(--wash);
  color: var(--muted);
  padding: 0.55rem 0.85rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}

.submissions-table td, .section-table td, .edit-rows td, .users-table td {
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  vertical-align: middle;
}
.submissions-table tbody tr:first-child td, .users-table tbody tr:first-child td,
.section-table tbody tr:first-child td, .edit-rows tbody tr:first-child td { border-top: 0; }

.section-table, .edit-rows { box-shadow: none; border-radius: var(--radius-sm); margin: var(--gap-1) 0; }
.section-table td, .edit-rows td { font-size: 0.9rem; vertical-align: top; }

.row-link { cursor: pointer; }
.row-link:hover td { background: var(--navy-soft); }
.row-link:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); }

.cell-primary { font-weight: 600; color: var(--navy); }
.cell-muted { color: var(--muted); }
.cell-nowrap { white-space: nowrap; }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem var(--gap-4);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* --- Status pills --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--navy-soft);
  color: var(--navy);
  white-space: nowrap;
  text-decoration: none;
}
.badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge-plain::before, .badge-test::before, .rag-red::before, .rag-amber::before, .rag-green::before { display: none; }

/* In-flight submission and report states share the navy pill with a pulsing dot. */
.state-uploaded::before, .state-extracting::before, .state-cleansing::before,
.state-structuring::before, .state-sanitising::before, .state-rendering::before,
.state-approved::before, .state-filing::before, .state-classifying::before,
.state-drafting::before, .state-mapping::before, .state-compliance_checking::before {
  animation: pulse 1.4s ease-in-out infinite;
}

.badge-test { background: var(--amber-soft); color: var(--amber); margin-left: var(--gap-1); }
.badge-inactive { background: #f0f1f4; color: var(--muted); }

.state-completed, .state-ready { background: var(--green-soft); color: var(--green); }
.state-failed { background: var(--red-soft); color: var(--red); }
.state-in_review, .state-awaiting_classification { background: var(--amber-soft); color: var(--amber); }

.rag-red { background: var(--red-soft); color: var(--red); }
.rag-amber { background: var(--amber-soft); color: var(--amber); }
.rag-green { background: var(--green-soft); color: var(--green); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- Meta grids --- */

.submission-meta, .user-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem 1.25rem;
  padding: var(--gap-4) 1.25rem;
  margin: 0 0 var(--gap-4);
  box-shadow: none;
}
.submission-meta > div, .user-meta > div { min-width: 0; }
.submission-meta dt, .user-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.submission-meta dd, .user-meta dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }

/* Older inline dl markup (classification panels) still renders as a two-column list. */
.classification-panel .submission-meta,
.classification-confirm-panel .submission-meta {
  grid-template-columns: max-content 1fr;
  gap: 0.35rem var(--gap-4);
  padding: var(--gap-3) var(--gap-4);
  margin: var(--gap-2) 0 var(--gap-3);
  background: #fafbfd;
}
.classification-panel .submission-meta dt,
.classification-confirm-panel .submission-meta dt { text-transform: none; letter-spacing: 0; font-size: 0.9rem; }