/* Rocky Mountain Reserve — brand restyle of the portal prototype.
 *
 * Builds ALONGSIDE static/styles.css (imported below, never modified). To
 * preview, point a template's <link> at styles.rmr.css instead of styles.css.
 *
 * The prototype is already token-driven, so re-branding is mostly a :root
 * override. Brand values VERIFIED 2026-06-29 from rockymountainreserve.com via
 * the chrome-devtools MCP (computed styles):
 *   - Typeface:      Open Sans (headings, body, UI)
 *   - Action green:  #2E8B57   (buttons / interactive)
 *   - Deep green:    #096843   (promo bar / brand headings)
 *   - Body text:     #333333
 *   - Hairline:      #DDDDDD
 *   - Off-white:     #FAFAFA
 */
@import url('./styles.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --fg: #333333;            /* RMR body text */
  --muted: #6b7280;
  --accent: #2e8b57;        /* RMR primary action green (verified) */
  --accent-soft: #e9f4ee;   /* light sea-green tint */
  --accent-deep: #096843;   /* RMR deep brand green (verified) */
  --border: #dddddd;        /* RMR hairline */
  --surface: #fafafa;       /* RMR off-white */
  --warn: #b1591a;          /* referenced by .pill-issued but undefined in the prototype */
  --bad:  #9b1c1c;          /* referenced by .pill-overdue but undefined in the prototype */
}

html, body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The prototype's <button> doesn't inherit the body font (unlike its inputs,
   which set `font: inherit`), so brand it explicitly. */
button { font-family: inherit; }

/* Brand greens for the interactive states the prototype hard-codes */
.btn:hover  { background: #1f764a; }
.btn:active { background: var(--accent-deep); }

.stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(46, 139, 87, 0.12);
}

/* Current section in the top nav (set by the base.html enhancement script). */
.topnav a.active {
  color: var(--accent);
  font-weight: 600;
}

/* The role pill now carries a humanized label ("Company Admin"); the
   prototype lowercased it, so let the real casing through. */
.pill-role {
  text-transform: none;
}

/* NDT census drill-in: gently tint rows for flagged individuals (HCE / key /
   owner) so the contributing populations stand out against rank-and-file. */
.lines-table tbody tr.row-flagged {
  background: var(--accent-soft);
}

/* Collapsed technical/internal detail (e.g. document hash + id). */
.tech-details {
  margin-top: 20px;
}
.tech-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
}
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary::before { content: "▸ "; }
.tech-details[open] > summary::before { content: "▾ "; }
.tech-details > summary:hover { color: var(--fg); }
.tech-details .meta { margin-top: 10px; }

/* Dashboard "needs your attention" action items. */
.action-items { margin: 0 0 28px; }
.action-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
}
.action-item.action-urgent { border-left-color: var(--bad); }
.action-item .btn-secondary { padding: 6px 12px; font-size: 13px; }

/* Honest "demo" notice on the invoice pay action. */
.pay-demo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}

/* "Showing N …" row above list tables. */
.list-count { margin: 0 0 10px; }

/* Inline per-field error (e.g. client-side file validation). */
.field-error {
  color: var(--bad);
  font-size: 13px;
  margin: 4px 0 0;
}

/* Sortable column headers. */
.cases-table th .sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.cases-table th .sort-link:hover { color: var(--accent); text-decoration: none; }
.cases-table th .sort-link.sort-active { color: var(--accent); }

/* ===================== Elegance / layout polish ===================== */

/* Data tables: middle-aligned cells, roomier rows, subtle row hover, and a
   clean last-row edge. Applies to cases/documents/invoices (.cases-table),
   invoice line items (.lines-table), and the dev event log (.events-table). */
.cases-table th,
.cases-table td,
.lines-table th,
.lines-table td,
.events-table th,
.events-table td {
  vertical-align: middle;
}
.cases-table th,
.cases-table td {
  padding: 12px 14px;
}
.cases-table tbody tr {
  transition: background 0.1s ease-in-out;
}
.cases-table tbody tr:hover {
  background: var(--surface);
}
.cases-table tbody tr:last-child td {
  border-bottom: 0;
}
/* Right-align numeric columns and render figures with even, tabular widths so
   money lines up cleanly down a column (e.g. the Account Summary report). */
.cases-table th.num,
.cases-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lines-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Definition lists (invoice meta, plan fields, document meta): top-align the
   labels so they line up with the first line of a multi-line value, with a
   touch more row spacing. */
dl.meta {
  gap: 9px 22px;
}
dl.meta dt {
  align-self: start;
}

/* Plan cards: equal-height in a row, with the "recorded" note pinned to the
   bottom instead of floating in the middle of a short card. */
.plan-card {
  display: flex;
  flex-direction: column;
}
.plan-card .plan-fields {
  margin-bottom: 14px;
}
.plan-recorded {
  margin-top: auto;
  margin-bottom: 0;
}

/* A little more breathing room in the chrome. */
.topbar {
  padding-top: 14px;
  padding-bottom: 14px;
}
.topbar-user {
  gap: 14px;
}
.page-head {
  padding-bottom: 18px;
  margin-bottom: 28px;
}

/* "Demo data" callout — e.g. NDT runs computed against a seeded sample census,
   so a reader never mistakes one for a real certified compliance result. */
.demo-banner {
  margin: 0 0 24px;
  padding: 11px 16px;
  background: #fdf4e8;
  border: 1px solid var(--warn);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  color: #7c3d0f;
  font-size: 14px;
}

/* Inline notices on forms (e.g. the NDT census upload success / parse error).
   A neutral base with success/error accents; the census provenance line is a
   quiet muted note shown in place of the demo banner on a real run. */
.callout {
  margin: 0 0 20px;
  padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border, #d7dbe0);
  font-size: 14px;
}
.callout-success,
.callout-ok {
  background: #e7f3ec;
  border-color: #1c6b3f;
  border-left: 3px solid #1c6b3f;
  color: #1c6b3f;
}
.callout-error {
  background: #fdecec;
  border-color: #b42318;
  border-left: 3px solid #b42318;
  color: #8a1c14;
}
.form-section {
  margin-top: 28px;
}
.provenance-line {
  margin: 0 0 24px;
}

/* Status pills for the secure file exchange (and a base .pill the earlier
   prototype relied on but never defined in the RMR sheet). */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  background: #eef0f3;
  color: var(--muted);
}
.pill-fx-received   { background: var(--accent-soft); color: var(--accent-deep); }
.pill-fx-processing { background: #fdf4e8; color: #7c3d0f; }
.pill-fx-processed  { background: #e7f3ec; color: #1c6b3f; }
.pill-fx-error      { background: #fbecec; color: var(--bad); }

/* Two-column inbox / outbox split on the file-exchange page. */
.fx-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 900px) {
  .fx-columns { grid-template-columns: 1fr; }
}
.fx-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
}