/* ==========================================================================
   Sporometrics Client Portal — portal-only additions.
   Load order: fonts.min.css -> tokens.css -> components.css -> portal.css

   tokens.css and components.css are VENDORED VERBATIM from the WordPress
   theme (wp-content/themes/sporometrics/css/). Do not edit them here —
   re-fetch to update, and put every portal-specific rule in this file.

   The portal is a data application, not a marketing page. Design Guide §5
   describes a 16px marketing type scale; the jobs grid is a 10-column table
   that must not wrap a row. So the chrome takes the design language whole,
   and the grid takes a restrained dialect: brand type, silver header, brand
   pills — at the grid's existing density.
   ========================================================================== */

/* ---- Portal extension tokens -------------------------------------------
   §15 permits exactly one action colour (orange) and reserves green for
   identity. Status pills are neither — they are semantic state, and the
   brand greens are too light to carry white 11px text at AA. These are
   the only portal-added colours; all are darkened from brand tokens.      */
:root {
  --portal-ok:      #4F7D1F;   /* from --green-lo, darkened to 4.6:1 on white */
  --portal-info:    #4D4D4D;   /* --n-600, reused for in-progress states     */
  --portal-muted:   #9B9B9B;   /* --text-muted, for draft / absent states    */
  --portal-grid-fs: 12px;      /* the grid's load-bearing density            */
  --portal-seam:    rgba(0,0,0,.10);
}

/* ---- Data grid ----------------------------------------------------------
   Silver gradient header (replacing the tan #efeae0 LIMS header), hairline
   seams, brand hover. Density is deliberately unchanged from the original.  */
.portal-grid { width: 100%; border-collapse: collapse; }
.portal-grid th,
.portal-grid td {
  font-family: var(--font-body);
  font-size: var(--portal-grid-fs);
  white-space: nowrap;
}
.portal-grid th {
  background: var(--grad-silver);
  border: 1px solid var(--portal-seam);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  padding: 6px 8px;
  text-align: left;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--heading-grey);
}
.portal-grid th[data-sort] { cursor: pointer; user-select: none; }
.portal-grid th[data-sort]:hover { filter: brightness(1.04); }
.portal-grid th[data-sort]:hover .sort-arrow { color: var(--chevron-hover); }
.portal-grid .sort-arrow {
  margin-left: 4px; font-size: 9px; color: var(--chevron);
  transition: color var(--mo-hover);
}
.portal-grid td {
  border: 1px solid var(--border-divider);
  padding: 6px 8px;
  color: var(--text-body);
}
/* Project / site is the only free-text column — let it wrap rather than
   forcing the whole table wide. (Preserved from the original grid.)
   The uppercase headers of the dialect are wider than the old sentence-case
   ones, which squeezed this column to ~200px and pushed most titles onto
   three lines; the min-width buys it back. .table-scroll absorbs any
   resulting overflow. */
.portal-grid td.proj { white-space: normal; min-width: 240px; }
.portal-grid tbody tr:hover td { background: rgba(248,158,22,.06); }

/* The 10-column grid is wider than a phone. Horizontal scroll keeps the
   page layout intact — the user swipes the table sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Status pills ------------------------------------------------------- */
.status-pill {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-input);
  color: var(--text-onbrand);
  font: var(--fw-bold) var(--portal-grid-fs)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--tr-label);
  white-space: nowrap;
}
.pill-paid,
.pill-issued   { background: var(--portal-ok); }
.pill-sent     { background: var(--portal-info); }
.pill-draft    { background: var(--portal-muted); }
.pill-noreport { background: var(--portal-muted); }

/* ---- Forms --------------------------------------------------------------
   Recessed inputs echo the nav search field (§5) without the near-black
   fill, which would be unreadable in a light form.                         */
.portal-field {
  width: 100%;
  font: var(--fw-regular) var(--fs-base)/1.4 var(--font-body);
  color: var(--text-body);
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: var(--r-input);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
  padding: var(--sp-3) var(--sp-3);
}
.portal-field:focus {
  outline: 0;
  border-color: var(--orange-rim);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08), 0 0 0 3px rgba(248,158,22,.25);
}
.portal-label {
  display: block; margin-bottom: var(--sp-2);
  font: var(--fw-bold) var(--fs-sm) var(--font-body);
  text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--heading-grey);
}

/* Secondary / disabled action states. .spo-btn covers the primary case. */
.spo-btn[disabled],
.spo-btn.is-disabled {
  background: var(--n-300); border-color: var(--n-300);
  box-shadow: none; text-shadow: none;
  pointer-events: none; opacity: .8;
}
.spo-btn--quiet {
  background: var(--grad-silver);
  border-color: var(--portal-seam);
  color: var(--heading-grey);
  text-shadow: none;
}

/* ---- Messages ----------------------------------------------------------- */
.portal-note,
.portal-error {
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.portal-note  { background: rgba(140,198,62,.12); border: 1px solid var(--green-lo); color: var(--text-body); }
.portal-error { background: rgba(200,94,18,.10);  border: 1px solid var(--orange-shade); color: var(--orange-shade); }
.portal-empty { color: var(--text-muted); font-style: italic; padding: var(--sp-4) 0; }

/* ---- Accessibility (§15) ------------------------------------------------ */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--heading-orange);
  outline-offset: 2px;
}

/* ---- Responsive (§16.7 breakpoints) ------------------------------------- */
@media (max-width: 640px) {
  .table-scroll {
    border: 1px solid var(--portal-seam);
    border-radius: var(--r-tab);
  }
}