/* Shared refinements for every dashboard page. Load it right after dashboard.css.
   Brings the dashboard closer to the sign-in and reset pages: Georgia for display type, Inter for everything else.
   Everything here is cosmetic, so no page markup has to change. */

:root {
  --serif: var(--font-serif, Georgia, 'Times New Roman', serif);
}

/* Page titles */
.topbar h1 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.topbar .sub { font-size: 13.5px; }

/* Panels: a little rounder, with a serif title */
.panel { border-radius: 22px; box-shadow: var(--shadow-sm); }
.panel-head { padding: 20px 24px 16px; }
.panel-head h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.panel-body { padding: 20px 24px; }

/* Top nav icon buttons (help, notifications) were showing the browser's default button border */
.tn-iconbtn { border: 0; background: transparent; cursor: pointer; }

/* Phones: the top bar was wider than the screen. Drop the wordmark and the help button, and let the org chip shrink. */
@media (max-width: 520px) {
  .tn-shell .tn-brand > div { display: none; }
  .tn-shell #topbarHelpBtn { display: none; }
  .tn-shell .tn-org { flex: 1 1 auto; min-width: 0; max-width: none; }
  .tn-shell .tn-spacer { display: none; }
}

/* Controls: same focus ring as the registration pages */
.field input[type=text]:focus,
.field input[type=email]:focus,
.field input[type=number]:focus,
.field input[type=date]:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Tables: quieter header, sentence case */
thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
}

/* Shared pieces used by several pages */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tinted stage with the registration pages' dot grid (page headers that carry one key element) */
.page-stage {
  position: relative; overflow: hidden;
  border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, #EEF0FF 0%, #F5F3FF 48%, #FAF5FF 100%);
}
.page-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(79, 70, 229, .16) 1px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.page-stage > * { position: relative; }

/* Status pill: add one of is-invited / is-pending / is-completed / is-expired */
.pill {
  --ring: rgba(100, 116, 139, .20);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px;
  background: #F1F5F9; color: #64748B;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.is-invited   { background: #EEF2FF; color: #4338CA; --ring: rgba(67, 56, 202, .18); }
.pill.is-pending   { background: #FEF3C7; color: #B45309; --ring: rgba(180, 83, 9, .20); }
.pill.is-completed { background: #ECFDF5; color: #047857; --ring: rgba(4, 120, 87, .18); }
.pill.is-expired   { background: #F1F5F9; color: #64748B; --ring: rgba(100, 116, 139, .20); }

@media (max-width: 860px) {
  .topbar h1 { font-size: 27px; }
  .panel-head { padding: 16px 18px 14px; }
  .panel-body { padding: 16px 18px; }
}