/* ============================================================================
   Secure Report Host — app chrome styles, on the Go Nimbly design system.
   ----------------------------------------------------------------------------
   Loaded LAST, after (in order):
     gonimbly-tokens.css   — the var(--gn-*) palette / type / spacing / radii
     gonimbly-base.css     — element defaults + .gn-* components + focus ring
     gonimbly-web-style.css — website look (Faculty Glyphic headings, ink text)
   So everything here builds on those tokens and only adds the app-specific
   pieces the design system doesn't ship, plus a few deliberate overrides for an
   internal admin tool (smaller headings than the marketing scale).
   No hardcoded palette, no drop shadows (flat — borders + tonal tints).
   ========================================================================== */

:root {
  /* App tokens layered on the GN system.
     AA fix: the brand's gray-500 (#909090) is ~3.4:1 on paper — below WCAG AA
     for body-size copy (the brand's own contrast note flags this) — so muted
     helper text uses a darker gray that clears 4.5:1. */
  --app-text-muted: #6b6b6b;
  --app-overlay: rgba(31, 29, 30, 0.55); /* ink-based modal backdrop */
  --page-max: 80rem;     /* wide enough for the GN-sized components + data tables */
  --field-max: 42rem;    /* cap single-line inputs so wide cards stay readable */

  /* AA-safe shades of the brand link/error colors for small body text. The GN
     tokens (#0082f3 link, #ea384c error) are tuned for large/nav use and fall
     below WCAG AA (4.5:1) at 12–14px; these darker shades stay on-brand and
     pass. The focus ring keeps the exact brand blue (UI element, 3:1 is enough). */
  --app-link: #0066cc;   /* ~5.5:1 on paper */
  --app-danger: #c4152a; /* ~6:1 on paper, and white-on-danger ~6:1 for hover */
  /* Caution amber for consequential-but-reversible actions (unpublish, reset
     password). The brand's Yellow Medium (#ff9523) fails AA as text on white,
     so this is an AA-safe dark amber in the same warm family. */
  --app-warning: #b45309; /* ~5:1 on paper; white-on-warning ~6:1 for hover */
}

/* ---- Headings: keep the web-look Faculty Glyphic face, but at utilitarian
   sizes. The GN scale (h1 = 48→90px) is tuned for marketing pages and is far
   too large for an admin tool. ----------------------------------------------- */
h1 { font-size: var(--gn-text-h6); }        /* 24 → 32px */
h2 { font-size: var(--gn-text-subhead-1); } /* 24px      */
h3 { font-size: var(--gn-text-subhead-2); } /* 20px      */

/* In-content links at body/small sizes: darker brand blue that clears AA. */
a { color: var(--app-link); }

/* ---- Skip link (a11y) ----------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--gn-space-3);
  top: -4rem;
  z-index: 1100;
  padding: var(--gn-space-2) var(--gn-space-4);
  background: var(--gn-color-brand);
  color: var(--gn-color-black);
  border: var(--gn-border-width) solid var(--gn-color-black);
  border-radius: var(--gn-radius-2);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--gn-space-3); }

/* ---- Masthead (global GN brand bar) --------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  height: var(--gn-nav-height);
  padding: 0 var(--gn-site-margin);
  background: var(--gn-color-paper);
  border-bottom: var(--gn-border-width) solid var(--gn-color-gray-300);
}
.masthead-brand { display: inline-flex; align-items: center; text-decoration: none; }
.masthead-brand img { height: 1.5rem; width: auto; display: block; }

/* ---- Page container & footer ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--gn-space-7) var(--gn-site-margin) var(--gn-section-sm);
}

.site-footer {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gn-site-margin) var(--gn-space-8);
}
.site-footer p {
  margin: 0;
  font-family: var(--gn-font-mono);
  font-size: var(--gn-text-label-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
}

/* ---- Topbar (per-page title + nav actions) -------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--gn-space-6);
}
.topbar h1 { margin: 0; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  flex-wrap: wrap;
}

/* ---- Card (flat — matches .gn-card) --------------------------------------- */
.card {
  background: var(--gn-color-white);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-3);
  padding: var(--gn-space-6);
  margin-bottom: var(--gn-space-6);
}

.muted { color: var(--app-text-muted); }
.emphasis { font-weight: var(--gn-weight-medium); }

/* Screen-reader-only text (e.g. labels for action-column headers). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Forms ---------------------------------------------------------------- */
label {
  display: block;
  font-weight: var(--gn-weight-medium);
  margin: var(--gn-space-3) 0 var(--gn-space-1);
}

input[type="text"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  max-width: var(--field-max);
  padding: var(--gn-space-3) var(--gn-space-4);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-2);
  background: var(--gn-color-white);
  color: var(--gn-color-ink);
  font-family: var(--gn-font-body);
  font-size: var(--gn-text-body);
  line-height: var(--gn-leading-normal);
}
input::placeholder,
textarea::placeholder { color: var(--gn-color-gray-500); }

fieldset {
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-2);
  margin: var(--gn-space-3) 0 0;
  padding: var(--gn-space-2) var(--gn-space-4) var(--gn-space-4);
}
/* Accessible disabled state (replaces the old opacity:0.5 hack, which dropped
   contrast below AA). Tokens keep legend/label text readable. */
fieldset:disabled { border-color: var(--gn-color-gray-200); }
fieldset:disabled legend,
fieldset:disabled label { color: var(--app-text-muted); }

legend { font-weight: var(--gn-weight-medium); padding: 0 var(--gn-space-1); }

fieldset label,
label > input[type="checkbox"],
label > input[type="radio"] {
  font-weight: var(--gn-weight-regular);
  margin-right: var(--gn-space-1);
}
/* Checkboxes/radios keep native sizing (the width:100% rule above is type-scoped). */

.field-error {
  color: var(--app-danger);
  font-size: var(--gn-text-body-sm);
  margin-top: var(--gn-space-1);
}

/* Styled file picker: native input is visually hidden (opacity), label drives it. */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  margin-top: var(--gn-space-1);
  flex-wrap: wrap;
}
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-button {
  display: inline-block;
  margin: 0;
  padding: var(--gn-space-2) var(--gn-space-4);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-2);
  background: var(--gn-color-paper);
  color: var(--gn-color-ink);
  font-weight: var(--gn-weight-medium);
  cursor: pointer;
}
.file-button:hover { background: var(--gn-color-gray-100); }

/* GN buttons carry no default margin, so a form's primary submit hugs the field
   above it. Separate the submit (or its actions row) from the stacked fields —
   scoped to forms that are a direct child of a card, so inline mini-forms in
   table cells (delete, publish, the note editor) are unaffected. */
.card > form > button[type="submit"],
.card > form > .topbar-actions { margin-top: var(--gn-space-5); }

/* ---- Button modifiers layered on .gn-btn (base ships .gn-btn / --secondary /
   --ghost). App adds a small size and a destructive variant — destructive is
   NOT lime; the lime stays the single primary action per card. ------------- */
.gn-btn--sm {
  height: auto;
  padding: 0.3rem var(--gn-space-3);
  font-size: var(--gn-text-body-sm);
}
.gn-btn--danger {
  background: var(--gn-color-white);
  border-color: var(--app-danger);
  color: var(--app-danger);
}
.gn-btn--danger:hover { background: var(--app-danger); color: var(--gn-color-white); }
/* Caution: solid amber by default, fading to a soft amber tint on hover. For
   consequential, reversible actions. Both states clear WCAG AA. */
.gn-btn--warning {
  background: var(--app-warning);
  border-color: var(--app-warning);
  color: var(--gn-color-white);
}
.gn-btn--warning:hover {
  background: #fbe8d3;   /* soft amber tint ("blurry") */
  color: #8a4300;        /* dark amber — AA on the tint */
}

/* ---- Alerts (semantic; tints used sparingly, text stays near-black) ------- */
.alert {
  border: var(--gn-border-width) solid transparent;
  border-radius: var(--gn-radius-2);
  padding: var(--gn-space-3) var(--gn-space-4);
}
.alert-error {
  background: var(--gn-color-white);
  border-color: var(--gn-color-error);
  color: var(--gn-color-text);
}
/* White fill + green border (matches the error pattern). Keeps color as a
   signal rather than a large green block, per the brand "no large blocks of
   colour" rule — the created card can be tall (it embeds a preview). */
.alert-success {
  background: var(--gn-color-white);
  border-color: var(--gn-color-green);
  color: var(--gn-color-text);
}

/* ---- Credentials (label/value pairs) -------------------------------------- */
.credentials {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--gn-space-1) var(--gn-space-4);
  align-items: center; /* align the label with its (taller) value row */
  margin: var(--gn-space-3) 0 0;
}
.credentials dt {
  font-family: var(--gn-font-mono);
  font-size: var(--gn-text-label-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
}
.credentials dd { margin: 0; word-break: break-all; }

code, kbd, samp {
  background: var(--gn-color-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--gn-radius-2);
  font-family: var(--gn-font-mono);
  font-size: 0.95em;
}

/* ---- Tables (mirrors .gn-table) ------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }
/* Keep dense tables at a readable minimum: rather than squeezing columns when
   the GN-sized controls don't fit, the wrapper scrolls horizontally. */
.table-wrap > table { min-width: 46rem; }
/* Extra separation between the upload form and the version list. */
.versions-table { margin-top: var(--gn-space-5); }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--gn-space-3);
  font-size: var(--gn-text-body-sm);
}
th, td {
  text-align: left;
  padding: var(--gn-space-3) var(--gn-space-4);
  border-bottom: var(--gn-border-width) solid var(--gn-color-gray-300);
  vertical-align: middle;
}
th {
  font-family: var(--gn-font-mono);
  font-size: var(--gn-text-label-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* AA-safe: gray-500 (#909090) is only ~3.2:1 at this 12px size. */
  color: var(--app-text-muted);
}
tbody tr:hover { background: var(--gn-color-gray-100); }

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  flex-wrap: nowrap;       /* keep row actions inline (Settings + Delete, etc.) */
  white-space: nowrap;
}

/* Inline note editor in the versions table: field + Save on one line, so the
   row stays a single line height and the row divider runs straight across. */
.note-form { display: flex; align-items: center; gap: var(--gn-space-2); }
.note-form input { flex: 1 1 auto; width: auto; max-width: 22rem; min-width: 7rem; }
.note-form .gn-btn { flex: 0 0 auto; }

/* ---- Badges (mirrors .gn-tag) --------------------------------------------- */
.badge {
  display: inline-block;
  padding: var(--gn-space-1) var(--gn-space-3);
  border-radius: var(--gn-radius-pill);
  background: var(--gn-color-gray-100);
  color: var(--gn-color-ink);
  font-size: var(--gn-text-label-2);
  font-weight: var(--gn-weight-medium);
  white-space: nowrap;
}
.badge-live { background: var(--gn-color-green-light); }
/* Smaller pill for dense columns (dashboard Access, versions Version). */
.badge--sm { padding: 0.1rem 0.45rem; font-size: 0.625rem; }

/* Dashboard Version column: "2 total" stacks under "v2 live". */
.version-total { display: block; font-size: var(--gn-text-body-xs); }
/* Versions table Version column: smaller version label. */
.version-cell { font-size: var(--gn-text-body-xs); }

/* ---- Filters (landing) ---------------------------------------------------- */
.filters { margin-top: var(--gn-space-4); }
.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gn-space-3);
}
.filters-field { display: flex; flex-direction: column; }
.filters-field.filters-grow { flex: 1 1 14rem; }
.filters label { margin: 0 0 var(--gn-space-1); font-size: var(--gn-text-body-sm); }
.filters-actions { flex-direction: row; align-items: center; gap: var(--gn-space-3); }
/* Match the filter controls to the Apply button height (48px). */
.filters input[type="search"],
.filters select {
  height: var(--gn-button-height-md);
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- Share-link row + copy control ---------------------------------------- */
.share-link { display: flex; align-items: center; gap: var(--gn-space-2); flex-wrap: wrap; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gn-space-1);
  background: transparent;
  color: var(--app-text-muted);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-2);
  cursor: pointer;
}
.icon-button:hover { background: var(--gn-color-gray-100); color: var(--gn-color-ink); }
.copy-status { font-size: var(--gn-text-body-sm); color: var(--app-text-muted); }

/* Inline preview of an uploaded report. */
.preview-frame {
  width: 100%;
  height: 24rem;
  margin-top: var(--gn-space-3);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-2);
  background: var(--gn-color-white);
}

/* ---- Custom confirmation dialog (flat, token-based, no shadow) ------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gn-space-4);
  background: var(--app-overlay);
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--gn-color-white);
  border: var(--gn-border-width) solid var(--gn-color-gray-300);
  border-radius: var(--gn-radius-3);
  padding: var(--gn-space-5);
  max-width: 24rem;
  width: 100%;
}
.modal-message { margin: 0 0 var(--gn-space-4); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--gn-space-3); }