/* Investor Data Room - admin action / pill / link styling.
 *
 * Plain CSS (no Tailwind utilities) so it renders regardless of what unfold's
 * compiled CSS happens to ship - the same guarantee the previous inline styles
 * gave - while adding what inline styles CANNOT express: :focus-visible rings
 * (WCAG 2.4.7), :hover states, comfortable hit targets, and dark-mode parity.
 *
 * Brand: unfold injects the Tyrian/rose primary as space-separated RGB
 * (--color-primary-600 = "138 40 100"); we consume it via rgb(var(...)) with a
 * literal fallback so the brand still reads if the var is ever absent. White on
 * 600 = 8.2:1, on 700 = 11.5:1 - both clear AAA.
 *
 * Loaded site-wide via UNFOLD["STYLES"]; every selector is `ir-`-prefixed so it
 * can never collide with another admin's markup.
 */

/* ---- import form (label + bordered input + help) -------------------------- */
/* The hub-import page renders its fields by hand (NOT form.as_p, which carries
 * no styling under unfold) so each field gets a clear label, a bordered input,
 * a brand focus ring (WCAG 2.4.7), and dark-mode parity. */

.ir-form-card {
  max-width: 760px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark .ir-form-card {
  background: rgb(var(--color-base-900, 17 24 39));
  border-color: rgb(var(--color-base-800, 31 41 55));
}

.ir-field { margin: 0; }

.ir-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
html.dark .ir-label { color: rgb(var(--color-base-200, 229 231 235)); }

.ir-input,
.ir-textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ir-textarea {
  min-height: 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: vertical;
}
.ir-input::placeholder,
.ir-textarea::placeholder { color: #9ca3af; }
.ir-input:focus,
.ir-textarea:focus {
  outline: none;
  border-color: rgb(var(--color-primary-600, 138 40 100));
  box-shadow: 0 0 0 3px rgb(var(--color-primary-600, 138 40 100) / 0.18);
}
html.dark .ir-input,
html.dark .ir-textarea {
  background: rgb(var(--color-base-950, 8 11 18));
  color: rgb(var(--color-base-100, 243 244 246));
  border-color: rgb(var(--color-base-700, 55 65 81));
}
html.dark .ir-input::placeholder,
html.dark .ir-textarea::placeholder { color: rgb(var(--color-base-500, 107 114 128)); }

/* Native file input: style the file-selector button to match .ir-btn--neutral. */
.ir-file {
  display: block;
  width: 100%;
  font-size: 13px;
  color: #374151;
}
.ir-file::file-selector-button {
  margin-right: 12px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.ir-file::file-selector-button:hover { background: #e5e7eb; }
html.dark .ir-file { color: rgb(var(--color-base-300, 209 213 219)); }
html.dark .ir-file::file-selector-button {
  background: rgb(var(--color-base-800, 31 41 55));
  color: rgb(var(--color-base-200, 229 231 235));
  border-color: rgb(var(--color-base-700, 55 65 81));
}
html.dark .ir-file::file-selector-button:hover { background: rgb(var(--color-base-700, 55 65 81)); }

.ir-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}
html.dark .ir-help { color: rgb(var(--color-base-400, 156 163 175)); }
.ir-help code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
html.dark .ir-help code { background: rgb(var(--color-base-800, 31 41 55)); }

.ir-errors {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
}
html.dark .ir-errors { color: #fca5a5; }

/* "or" divider between the three mutually-exclusive sources. */
.ir-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
}
.ir-or::before,
.ir-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
html.dark .ir-or { color: rgb(var(--color-base-500, 107 114 128)); }
html.dark .ir-or::before,
html.dark .ir-or::after { background: rgb(var(--color-base-800, 31 41 55)); }

/* ---- import diff: new / updated / archived stat cards --------------------- */
/* Same semantic palette as the status pills, with dark-mode parity (the old
 * inline hex backgrounds were light-only and washed out on a dark page). */

.ir-stat { border-radius: 10px; padding: 12px 14px; }
.ir-stat__label { font-size: 12px; font-weight: 600; }
.ir-stat__count { font-size: 20px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.ir-stat__key {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ir-stat--new      { background: #dcfce7; color: #166534; }
.ir-stat--updated  { background: #fef9c3; color: #854d0e; }
.ir-stat--archived { background: #fee2e2; color: #991b1b; }
html.dark .ir-stat--new      { background: rgba(34, 197, 94, 0.15);  color: #86efac; }
html.dark .ir-stat--updated  { background: rgba(234, 179, 8, 0.15);  color: #fde047; }
html.dark .ir-stat--archived { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; }

/* ---- buttons -------------------------------------------------------------- */

.ir-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ir-actions form {
  margin: 0;
  display: inline-flex;
}

.ir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;            /* > WCAG 2.5.8 AA target floor (24px) */
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease;
}
.ir-btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary-600, 138 40 100));
  outline-offset: 2px;
}
/* Leading Material Symbol inside a button. Unfold ships the font + the
   .material-symbols-outlined family; we only size + weight it for a 12px button. */
.ir-btn__icon {
  font-size: 15px;
  line-height: 1;
  margin-left: -2px;
  font-variation-settings: "opsz" 20, "wght" 500;
}

/* Primary - filled brand. Used for the single prominent CTA (e.g. Copy link). */
.ir-btn--primary {
  background: rgb(var(--color-primary-600, 138 40 100));
  color: #fff;
  border-color: rgb(var(--color-primary-600, 138 40 100));
}
.ir-btn--primary:hover {
  background: rgb(var(--color-primary-700, 110 15 72));
  border-color: rgb(var(--color-primary-700, 110 15 72));
}

/* Neutral - quiet default for the common, non-destructive row action. */
.ir-btn--neutral {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.ir-btn--neutral:hover { background: #e5e7eb; }

/* Success - soft green tint (constructive: grant access). */
.ir-btn--success {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.ir-btn--success:hover { background: #dcfce7; }

/* Danger - soft red tint (reversible removal: revoke). */
.ir-btn--danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.ir-btn--danger:hover { background: #fee2e2; }

/* Ghost - de-emphasised; reveals destructive intent only on hover (hard delete:
   we steer operators toward Revoke, which keeps the audit row). */
.ir-btn--ghost {
  background: transparent;
  color: #4b5563;
  border-color: transparent;
}
.ir-btn--ghost:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* ---- status pills --------------------------------------------------------- */

.ir-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ir-pill--active   { background: #dcfce7; color: #166534; }   /* + published */
.ir-pill--invited  { background: #fef9c3; color: #854d0e; }   /* + draft     */
.ir-pill--pending  { background: #e5e7eb; color: #374151; }   /* + archived  */
.ir-pill--revoked  { background: #fee2e2; color: #991b1b; }

/* ---- links + copyable activation link ------------------------------------- */

.ir-link {
  color: rgb(var(--color-primary-700, 110 15 72));
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.ir-link:hover { text-decoration: underline; }
.ir-link:focus-visible {
  outline: 2px solid rgb(var(--color-primary-600, 138 40 100));
  outline-offset: 2px;
}

.ir-copy-input {
  width: min(560px, 70%);
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.ir-copy-input:focus-visible {
  outline: 2px solid rgb(var(--color-primary-600, 138 40 100));
  outline-offset: 1px;
  border-color: rgb(var(--color-primary-600, 138 40 100));
}
.ir-copy-btn { margin-left: 6px; }

/* ---- analytics dashboard: tables, bars, timeline --------------------------- */

/* Visually-hidden but screen-reader-readable (table captions, bar-column
 * header). The standard clip-rect recipe; display:none would hide it from AT. */
.ir-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared analytics table chrome (replaces the old per-cell inline styles so
 * header/data cells stay consistent and th[scope] carries no visual cost). */
.ir-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.ir-table th,
.ir-table td { padding: 8px 12px; text-align: left; }
.ir-table thead th { padding: 10px 12px; font-weight: 600; }
.ir-table .ir-table__num { text-align: right; }
.ir-table .ir-table__rowhead { font-weight: 500; }

/* Section-engagement proportional bar (the numbers live in sibling cells; the
 * bar is aria-hidden decoration, so contrast rules don't apply to it). */
.ir-table__bar-col { width: 220px; min-width: 120px; }
.ir-bar {
  display: block;
  height: 10px;
  min-width: 2px;
  border-radius: 9999px;
  background: rgb(var(--color-primary-600, 138 40 100));
}
html.dark .ir-bar { background: rgb(var(--color-primary-400, 198 120 164)); }

/* 30-day activity strip: one flex row, each day a bottom-aligned bar with its
 * count above and a (sparse) date label below. Numbers + dates are in every
 * bar's aria-label/title, so the visual encoding is redundant, not load-bearing. */
.ir-timeline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ir-timeline__day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.ir-timeline__count {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: #6b7280;
}
html.dark .ir-timeline__count { color: rgb(var(--color-base-400, 156 163 175)); }
/* Fixed-height track the % bar fills from the bottom, so a 100% day can never
 * overflow the card and every day's baseline aligns. */
.ir-timeline__track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 72px;
}
.ir-timeline__bar {
  width: 100%;
  max-width: 22px;
  border-radius: 3px 3px 0 0;
  background: rgb(var(--color-primary-600, 138 40 100));
}
html.dark .ir-timeline__bar { background: rgb(var(--color-primary-400, 198 120 164)); }
.ir-timeline__bar--zero {
  height: 2px !important;            /* keep a baseline tick for empty days */
  background: #e5e7eb;
}
html.dark .ir-timeline__bar--zero { background: rgb(var(--color-base-800, 31 41 55)); }
.ir-timeline__label {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.2;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
html.dark .ir-timeline__label { color: rgb(var(--color-base-500, 107 114 128)); }
/* Date labels would collide at 30-up on narrow screens: show roughly weekly. */
.ir-timeline__day:not(:nth-child(7n + 1)) .ir-timeline__label { visibility: hidden; }

/* ---- dark mode (unfold toggles `.dark` on <html>) ------------------------- */

html.dark .ir-btn--neutral {
  background: rgb(var(--color-base-800, 31 41 55));
  color: rgb(var(--color-base-200, 229 231 235));
  border-color: rgb(var(--color-base-700, 55 65 81));
}
html.dark .ir-btn--neutral:hover {
  background: rgb(var(--color-base-700, 55 65 81));
}
html.dark .ir-btn--success {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.30);
}
html.dark .ir-btn--success:hover { background: rgba(34, 197, 94, 0.25); }
html.dark .ir-btn--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.30);
}
html.dark .ir-btn--danger:hover { background: rgba(239, 68, 68, 0.25); }
html.dark .ir-btn--ghost { color: rgb(var(--color-base-400, 156 163 175)); }
html.dark .ir-btn--ghost:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .ir-pill--active   { background: rgba(34, 197, 94, 0.18);  color: #86efac; }
html.dark .ir-pill--invited  { background: rgba(234, 179, 8, 0.18);  color: #fde047; }
html.dark .ir-pill--pending  { background: rgba(148, 163, 184, 0.20); color: #cbd5e1; }
html.dark .ir-pill--revoked  { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }

html.dark .ir-link { color: rgb(var(--color-primary-300, 224 160 196)); }
html.dark .ir-copy-input {
  background: rgb(var(--color-base-900, 17 24 39));
  color: rgb(var(--color-base-100, 243 244 246));
  border-color: rgb(var(--color-base-700, 55 65 81));
}