/*
 * Task F4.E6.T1 - base stylesheet: global elements only (body, typography,
 * headings, links, forms, buttons, tables, :focus-visible).
 *
 * Scope is deliberately limited to bare HTML elements, not a component
 * vocabulary (Zalacznik E's "app-" prefixed component classes - cards,
 * badges, alerts - are F4.E6.T2/T3's own scope, not this task's), with one
 * measured exception below: ".validation-message" (line ~142), a
 * FRAMEWORK-owned class Blazor's own EditForm/InputBase already emits since
 * scaffold (not part of Zalacznik E's "app-" component vocabulary) - this
 * file only supplies that class's own "color" (see that rule's own
 * remarks for why, and task F4.E6.T1b/docs/tech-debt.md for the collision
 * this exception's OTHER copy, in wwwroot/app.css, used to cause). Nothing
 * here is a CSS framework: no utility classes, no reset library import - a
 * short, hand-written base layer reading the custom properties from
 * tokens.css. Light-only (Zalacznik E: "dark mode (przyszlosc)" - no
 * "prefers-color-scheme" query anywhere in this file).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Session UI1 (finding Z-12): pages shorter than the viewport had no
   vertical scrollbar and pages longer than it did, so every navigation
   between the two shifted the whole document sideways by the scrollbar
   width (measured on production: the "Aktywna organizacja" heading at
   x=1170 on one page and x=1184 on the next). "stable" reserves the
   gutter on both kinds of page, so the content box is the same width
   everywhere. Declared on the root element deliberately: the scrollport
   here is the DOCUMENT (task F4.E6.T2 (retry) measured the shell panel
   as scrollHeight === clientHeight on eight route/viewport pairs, i.e.
   the panel grows and the document scrolls), so this is the element
   that owns the gutter. */
html {
  color-scheme: light;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-950);
  background-color: var(--color-paper-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Task F4.E6.T3: was "font-weight: 600" - a weight fonts.css never ships a
   face for (Space Grotesk is self-hosted at 500 and 700 only, per that
   file's own remarks). Measured against the CSS Fonts Module Level 4
   font-matching algorithm (desired weight > 500: check heavier weights
   ascending before lighter ones descending), a request for 600 resolves to
   the 700 face, not 500 - so every heading rendered BOLD, not the "used
   sparingly" medium weight fonts.css's own comment documents as the
   intended display weight. Set to the exact 500 that face exists at. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-ink-950);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1.125rem;
}

h4,
h5,
h6 {
  font-size: 1rem;
}

p {
  margin: 0 0 var(--space-4);
}

/* Blazor's own scaffold rule (wwwroot/app.css) already suppresses the
   default focus outline the router puts on <h1> when it auto-focuses a
   page's own heading for screen-reader announcement after navigation - that
   is not a keyboard-focus concern (see app.css's own remarks), so it is left
   untouched there rather than duplicated here. */

a {
  color: var(--color-teal-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-teal-500);
}

/* Zalacznik E: ":focus-visible outline 2px teal-500 wszedzie" - one rule,
   every interactive element, matching app-nis2-www's own global.css
   ":focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }"
   verbatim (same color token, same width, same offset). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}

label {
  display: block;
  font-weight: 600;
  color: var(--color-ink-900);
  margin-bottom: var(--space-1);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink-950);
  background-color: var(--color-white);
  border: 1px solid var(--color-paper-200);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  /* Zalacznik E: "cele dotykowe >= 40px". */
  min-height: 2.5rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Session UI1 (finding Z-3). The rule above is written for a TEXT-shaped
   control and Zalacznik E genuinely binds its "min-height" ("cele dotykowe
   >= 40px", see that declaration's own comment) - but it also matched
   input[type=radio] and input[type=checkbox], which are not text-shaped at
   all. Measured on production 2026-08-22, "/organization-profile":
   computed height 40px against a 13px native control, the circle sitting
   14px above the middle of its own label text, a one-line <label> 49px
   tall, on 26 of 26 controls on that page (and the supplier-register filter
   checkbox the same way).

   The touch target is NOT dropped, it MOVES: the box comes off the 13px
   control and the 2.5rem minimum goes onto the <label> that wraps it, which
   is the element a pointer or finger actually has to hit (an implicitly
   associated label activates its control anywhere in its own box). So
   Zalacznik E's 40px still holds - on a bigger, correctly shaped area than
   before.

   ":where()" carries zero specificity, so the reset below wins over the rule
   above by source order alone; the "label:has()" selector matches only a
   label with such a control as its DIRECT child, and never the "label wraps
   a text input or a select" filter markup the register lists use.
   "accent-color" is Zalacznik E's one accent ("JEDEN akcent teal"), applied
   to the checked state the browser otherwise paints in its own blue.

   Reach, as a closed census rather than an example: ELEVEN controls in six
   files, every one of them a direct child of its own label -
   OrganizationProfile (4), DocumentWizard (2), DocumentUpgrade (2),
   QuizExam (1), RegisterSupplierForm (1), RegisterSuppliersList (1). Two of
   those six are wizards, whose fieldset/legend grouping this session
   deliberately does NOT touch - but their radio LABELS are restyled by the
   rule below all the same, and that is intended: the geometry defect was
   never specific to one screen.

   THE WHOLE THING IS GATED ON ":has()", and that is the load-bearing part.
   The reset and the compensating touch target are two halves of one repair:
   the reset takes the 40px box off a 13px control, and only the "label:has()"
   rule puts a 40px target back. A browser that does not parse ":has()"
   (Firefox before 121, Safari before 15.4) would apply the first half and
   drop the second, leaving a 13px touch target - i.e. it would BREAK
   Zalacznik E's "cele dotykowe >= 40px" in exactly the browsers nobody
   tests on. Inside "@supports selector(...)" both halves appear together or
   neither does, and "neither" is the pre-UI1 look: ugly, and still 40px.
   Same reasoning, and same construct, as the "@supports"
   gate in MainLayout.razor.css that keeps the navigation reachable on a
   browser without "::details-content". */
@supports selector(label:has(> input)) {
  input:where([type="radio"], [type="checkbox"]) {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    accent-color: var(--color-teal-600);
  }

  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Zalacznik E: "cele dotykowe >= 40px" - the same 2.5rem the control
       itself used to carry, now on the area that is actually clickable. */
    min-height: 2.5rem;
    margin-bottom: 0;
    cursor: pointer;
  }
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-slate-400);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 1px var(--color-teal-500);
}

/* Blazor's own EditForm validation classes (InputBase/ValidationMessage) -
   already present in wwwroot/app.css since scaffold, left there unchanged;
   this file only adds the brick-toned message copy asked for by Zalacznik E
   ("blad brick z komunikatem pod polem"). */
.validation-message {
  display: block;
  color: var(--color-brick-600);
  font-size: 0.875rem;
  margin-top: var(--space-1);
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-paper-50);
  background-color: var(--color-teal-600);
  border: 1px solid var(--color-teal-600);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  /* Zalacznik E: "cele dotykowe >= 40px". */
  min-height: 2.5rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

button:hover {
  background-color: var(--color-teal-500);
  border-color: var(--color-teal-500);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-paper-200);
}

th {
  font-weight: 600;
  background-color: var(--color-paper-100);
}

tbody tr:hover {
  background-color: var(--color-paper-100);
}

/* Data - identifiers, dates, signatures, amounts, codes (Zalacznik E
   typography rule for IBM Plex Mono). Bare elements only here - the
   component-level "which table columns are data" vocabulary (Zalacznik E's
   "app-" prefixed class system) belongs to F4.E6.T2/T3, not this task. */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}