/* Lucrarea 3 — SOLUȚIA de referință (pentru titular).
   Disciplina Tehnologii Web (LAI 4 B F 03), Universitatea Valahia din Târgoviște.

   Aceeași pagină ca la lucrarea 2, cu marcajul NEATINS. Tot ce urmează este
   foaie de stil. Ordinea straturilor de mai jos este ordinea de putere: o
   regulă din `componente` bate orice regulă din `baza`, indiferent cât de
   complicat ar fi scris selectorul. Aceasta este singura proprietate pentru
   care merită învățate straturile. */

@layer reset, baza, aspect, componente, utilitare;

/* ---------------------------------------------------------------- jetoane */
/* Singurul loc în care apar culori și dimensiuni concrete. Orice altă regulă
   le folosește prin nume — de aceea trecerea la tema întunecată nu atinge
   nicio componentă, iar verificarea de contrast are ce citi. */

:root {
  color-scheme: light dark;

  --c-fundal:         light-dark(#ffffff, #14181f);
  --c-suprafata:      light-dark(#f4f6fa, #1c222c);
  --c-margine:        light-dark(#c9d2e0, #38414f);
  --c-text:           light-dark(#14181f, #e8ecf2);
  --c-text-slab:      light-dark(#4a5464, #a8b2c1);
  --c-indisponibil:   light-dark(#4a5464, #a8b2c1);
  --c-accent:         light-dark(#14446b, #8fbede);
  /* Bara de sus are pereche proprie: în tema întunecată, textul alb pe
     accentul deschis ar coborî sub prag. Verificat cu aceeași formulă. */
  --c-bara:           light-dark(#14446b, #1c222c);
  --c-bara-text:      light-dark(#ffffff, #e8ecf2);
  --c-bara-legatura:  light-dark(#dfeaf4, #8fbede);

  /* Fiecare stare are o pereche text/fundal verificată la contrast. */
  --c-normal:         light-dark(#1f5c2e, #7bc98d);
  --c-normal-fundal:  light-dark(#e8f4ea, #16301c);
  --c-atentie:        light-dark(#7a4a00, #f0b357);
  --c-atentie-fundal: light-dark(#fdf3e2, #33240a);
  --c-alarma:         light-dark(#8a1418, #f79aa0);
  --c-alarma-fundal:  light-dark(#fdeced, #34141a);

  /* Scară de spațiere, pe multipli de 4 px. Nicio valoare în afara ei. */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-6: 1.5rem; --sp-8: 2rem;

  /* Tipografie fluidă: crește cu fereastra, între două limite. Unitățile
     sunt relative, deci textul răspunde la setarea din browser — criteriul
     WCAG 1.4.4 cere mărire până la 200 % fără pierdere de conținut. */
  --f-mic:     clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --f-baza:    clamp(0.94rem, 0.90rem + 0.2vw, 1.05rem);
  --f-titlu:   clamp(1.35rem, 1.15rem + 1.0vw, 1.85rem);
  --f-valoare: clamp(1.45rem, 1.20rem + 1.2vw, 2.10rem);

  --raza: 6px;
  --grosime-focus: 3px;
}

/* ------------------------------------------------------------------ reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p, ul, ol, figure { margin: 0; }
  ul[class] { padding: 0; list-style: none; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }

  /* Cine a cerut mai puțină mișcare o primește. Criteriul WCAG 2.3.3.
     Sunt singurele două declarații marcate ca importante din toată foaia:
     ele trebuie să bată orice animație scrisă mai târziu, de oricine. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ------------------------------------------------------------------- bază */

@layer baza {
  body {
    font-family: system-ui, "Segoe UI", sans-serif;
    font-size: var(--f-baza);
    line-height: 1.55;
    background: var(--c-suprafata);
    color: var(--c-text);
  }

  h1 { font-size: var(--f-titlu); color: var(--c-accent); }
  h2 { font-size: calc(var(--f-baza) * 1.25); color: var(--c-accent);
       margin-block: var(--sp-6) var(--sp-2); }
  p  { margin-block-end: var(--sp-2); }

  a { color: var(--c-accent); }

  /* Focalizarea trebuie să se VADĂ. Fără această regulă, ordinea corectă la
     tastatură din lucrarea 2 nu ajută pe nimeni. Criteriul WCAG 2.4.7. */
  :focus-visible {
    outline: var(--grosime-focus) solid var(--c-atentie);
    outline-offset: 2px;
  }
}

/* ----------------------------------------------------------------- aspect */

@layer aspect {
  header {
    background: var(--c-bara);
    color: var(--c-bara-text);
    padding: var(--sp-3) var(--sp-6);
  }

  header a { color: var(--c-bara-legatura); }

  main, footer { max-inline-size: 62rem; margin-inline: auto; padding: var(--sp-6); }

  /* Grila fără praguri scrise de mână: numărul de coloane rezultă din
     lățimea disponibilă, nu dintr-o listă de dimensiuni de ecran. */
  .grila {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    container-type: inline-size;
  }

  .cauta { display: flex; gap: var(--sp-2); align-items: end; margin-block: var(--sp-4); }
}

/* ------------------------------------------------------------- componente */

@layer componente {
  nav ul { display: flex; gap: var(--sp-4); margin-block-start: var(--sp-1);
           list-style: none; padding: 0; }
  nav a { text-decoration: none; }
  nav a:hover, nav a:focus-visible { text-decoration: underline; }

  .card {
    background: var(--c-fundal);
    border: 1px solid var(--c-margine);
    border-inline-start: 4px solid var(--c-indisponibil);
    border-radius: var(--raza);
    padding: var(--sp-2) var(--sp-3);
  }

  .card output { display: block; font-size: var(--f-valoare); font-weight: 700; }
  .card span { font-size: var(--f-mic); color: var(--c-text-slab); }

  /* Starea dă și bordura, și fundalul, și culoarea valorii — toate din
     jetoane, deci toate verificate deodată la contrast. */
  [data-stare="normal"]  { border-inline-start-color: var(--c-normal);
                           background: var(--c-normal-fundal); }
  [data-stare="atentie"] { border-inline-start-color: var(--c-atentie);
                           background: var(--c-atentie-fundal); }
  [data-stare="alarma"]  { border-inline-start-color: var(--c-alarma);
                           background: var(--c-alarma-fundal); }

  [data-stare="normal"] output  { color: var(--c-normal); }
  [data-stare="atentie"] output { color: var(--c-atentie); }
  [data-stare="alarma"] output  { color: var(--c-alarma); }

  /* Cartela se adaptează la CONTAINERUL ei, nu la fereastră: aceeași
     componentă arată altfel într-o coloană îngustă și în una largă, fără
     să știe nimic despre pagina în care a fost pusă. */
  @container (min-inline-size: 15rem) {
    .card { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
    .card output { font-size: var(--f-titlu); }
  }

  table { border-collapse: collapse; background: var(--c-fundal);
          margin-block-start: var(--sp-4); }
  th, td { padding: var(--sp-1) var(--sp-3); text-align: start;
           border-block-end: 1px solid var(--c-margine); }
  caption { text-align: start; padding: var(--sp-1) var(--sp-3);
            font-weight: 600; color: var(--c-text-slab); }

  button {
    background: var(--c-bara);
    color: var(--c-bara-text);
    border: 0;
    border-radius: var(--raza);
    padding: var(--sp-1) var(--sp-4);
  }

  input { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-margine);
          border-radius: var(--raza); background: var(--c-fundal); }

  footer { color: var(--c-text-slab); font-size: var(--f-mic); }
}

/* --------------------------------------------------------------- utilitare */

@layer utilitare {
  /* Legătura de salt: ascunsă vizual, prezentă în document și în ordinea de
     parcurgere. Devine vizibilă exact când primește focalizarea. */
  .sari {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .sari:focus {
    position: static;
    inline-size: auto; block-size: auto;
    clip-path: none;
    display: inline-block;
    padding: var(--sp-2);
    background: var(--c-fundal);
  }
}

/* Lucrarea 8 — formulare: erori și confirmări.
   Culoarea NU este singurul semnal: eroarea are și text, iar câmpul are
   aria-invalid. Regula din lucrarea 2, aplicată la intrare. */
.eroare {
  display: block;
  margin-top: .25rem;
  color: var(--c-alarma-text, #8a1c1c);
  font-weight: 600;
}
.reusita {
  padding: .6rem .9rem;
  border-inline-start: 4px solid var(--c-normal-bord, #2e7d32);
  background: var(--c-normal-fond, #eef7ee);
  color: var(--c-normal-text, #1b4d20);
}
[aria-invalid="true"] {
  border: 2px solid var(--c-alarma-bord, #a52a2a);
}

/* Lucrarea 8 — formulare de configurare.
   Clasa .cauta din lucrarea 3 așază câmpurile pe un rând, ceea ce este bine
   pentru o căutare de un câmp și rău pentru un formular de trei. Formularele
   care SCRIU își primesc propria clasă: câmpurile unul sub altul, cu eticheta,
   ajutorul și eroarea în aceeași coloană cu câmpul. */
.formular {
  display: grid;
  gap: 1rem;
  max-width: 32rem;
  margin-block: 1rem 1.5rem;
}
.formular p { margin: 0; display: grid; gap: .3rem; }
.formular input[type="text"],
.formular select,
.formular input[type="file"] { width: 100%; }
.formular button { justify-self: start; }

/* Lucrarea 9 — bara de identitate din antet.
   Formularul de ieșire stă în antet pentru că ieșirea se face prin POST, nu
   printr-o legătură: o adresă cerută cu GET nu are voie să schimbe starea. */
.iesire {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 0;
  font-size: .9rem;
}
.iesire button {
  padding: .2rem .7rem;
  font-size: .85rem;
}