/* portal.css — the app's own layer on top of Pico.
   House rule: prefix rules with .pico so they win against
   Pico's own selectors (which all carry the .pico scope). */

/* Theme: accent color used by buttons, links, focus rings */
.pico {
  --pico-primary: #7290B2;                    /* links, accents */
  --pico-primary-hover: #5d7a9c;

  --pico-primary-background: #7290B2;         /* buttons */
  --pico-primary-border: #7290B2;
  --pico-primary-hover-background: #5d7a9c;
  --pico-primary-hover-border: #5d7a9c;

  --pico-primary-focus: rgba(114, 144, 178, 0.4);   /* focus ring glow */
}

/* Narrow centered page (login, accept-invite) — page_start('...', 'container narrow') */
.pico main.narrow {
  max-width: 26rem;
  padding-top: 8vh;
}

/* .page-title (layout.php's page_title()) — the page's own name above its
   sections, on the pages that have no opening hgroup of their own: the three
   role dashboards. Smaller than Pico's h1 so it labels the page rather than
   competing with the section headings under it. */
.pico .page-title {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Phone only. On desktop the nav row is on screen and marks the open page
   (aria-current), so the heading would just push the tables down. Hidden
   VISUALLY, not removed: the page keeps its h1 and heading order for screen
   readers at every width. Breakpoint matches .desktop-only/.mobile-only in
   portal-utils.css, i.e. exactly where the hamburger gives way to the row. */
@media (min-width: 768px) {
  .pico .page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Brand block above the login card */
.pico .brand {
  text-align: center;
  margin-bottom: 1.5rem;
}
.pico .brand p {
  color: var(--pico-muted-color);
  margin: 0;
}

/* Form feedback / flash messages */
.pico .error   { color: #b71c1c; }
.pico .success { color: #1b7a2f; }

/* Status badges (dashboard, review pages) */
.pico .badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.pico .b-gray  { background: #e8e8e6; color: #4a4a48; }
.pico .b-blue  { background: #dbe9f6; color: #1a4971; }
.pico .b-amber { background: #fdf1d6; color: #8a5a00; }
.pico .b-green { background: #dcefdc; color: #1e5b20; }
.pico .b-red   { background: #f8dede; color: #8b1f1f; }

/* Dashboard: stacked role sections breathe a bit */
.pico section + section { margin-top: 2.5rem; }

/* Desktop: buttons sized to their text, not the full column. Pico makes every
   button 100% wide, which suits phones (kept below the breakpoint) but looks
   clumsy on a wide screen. The .pico prefix is required to outrank the
   conditional build's own `.pico button` rule.
   Excluded:
     - [role=group] fieldsets — Pico joins those into one bar;
     - main.narrow (login, forgot, reset, accept-invite) — the column is
       already short, so a full-width button fits the ceremony layout.
   min-width keeps short labels (e.g. "Loo kutse") from looking tiny once the
   full-column stretch is gone; longer labels still grow past it. */
@media (min-width: 768px) {
  .pico button:not([role="group"] *, main.narrow *),
  .pico [type="submit"]:not([role="group"] *, main.narrow *),
  .pico [role="button"]:not([role="group"] *, main.narrow *) {
    width: auto;
    min-width: 10rem;
  }

  /* Button-only .grid rows (review / apply / change decisions): Pico's equal
     columns would still stretch each button to half/third of the row even with
     width:auto. Switch those rows to a flex pack so the buttons sit side by
     side at label size. Field grids (labels as children) are untouched. */
  .pico .grid:has(> :is(button, [type="submit"], [role="button"])) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .pico .grid:has(> :is(button, [type="submit"], [role="button"]))
    > :is(button, [type="submit"], [role="button"]) {
    flex: 0 1 auto;
    margin-bottom: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .pico {
    --pico-primary: #8ba7c7;
    --pico-primary-hover: #a3bcd8;
    --pico-primary-background: #7290B2;       /* buttons can often stay */
    --pico-primary-border: #7290B2;
    --pico-primary-hover-background: #8ba7c7;
    --pico-primary-hover-border: #8ba7c7;
    --pico-primary-focus: rgba(139, 167, 199, 0.4);
  }

  /* Badge variants for dark backgrounds */
  .pico .b-gray  { background: #3a3a38; color: #c9c9c6; }
  .pico .b-blue  { background: #1e3a52; color: #a8cbe8; }
  .pico .b-amber { background: #4a3a10; color: #e8c877; }
  .pico .b-green { background: #1e3b1f; color: #a3d4a5; }
  .pico .b-red   { background: #4a1f1f; color: #e8a3a3; }
}