/* Public-facing area — Politrauma */

:root {
    --nav-bg: #123a5e;
    --nav-fg: #ffffff;
    --nav-active-bg: #1d5991;
    --accent: #123a5e;
    --text: #23232b;
    --muted: #6a6a76;
    --rule: #d9d9e0;
    --page-bg: #f6f6f9;
    --max-width: 1100px;

    /* Footer palette. #091e42 is the footer background used on the beneficiary's
       official site (urgentafloreasca.ro). Contrast ratios against it, verified:
       text 8.93:1, muted 6.82:1, links 9.17:1 — all above the WCAG AA 4.5:1
       threshold for normal-size text. */
    --footer-bg: #091e42;
    --footer-text: #afc0dc;
    --footer-muted: #93a8cb;
    --footer-link: #9ec5f0;
    --footer-rule: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    /* Trebuchet is the primary font of the Programul Sănătate templates; the rest of
       the stack stays within the fonts recommended for use alongside the EU emblem
       (MIV-PS §8.1: Arial, Auto, Calibri, Garamond, Trebuchet, Tahoma, Verdana, Ubuntu). */
    font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
    line-height: 1.6;
}

/* --- Header: three logos, equal columns, each logo centered --- */

.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem 1rem;
}

.logo-row {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    /* The Guvern seal requires clear space of at least one shield-width on each side
       (MIV-PS §5.1.2). At a 64px seal the shield is ~13px, so this 24px gap clears it. */
    gap: 1.5rem;
}

.logo-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* COMPLIANCE — do not "balance" these logos by capping the EU emblem.
   MIV-PS §1.7 / §5.1.1: where other logos appear alongside it, the EU emblem must be
   AT LEAST the size of the largest of them, measured in height OR width. Equal heights
   satisfy that on the height limb. The EU banner is ~5x wider than the two roundels by
   design; narrowing it to look balanced would risk non-compliance.
   Minimum emblem height is 1 cm (~38px at 96dpi) — 64px and the 48px narrow-screen
   value both clear it. Do not go below 38px. */
.logo-cell img {
    height: 64px;
    width: auto;
    max-width: 100%;
}

/* --- Admin area heading (/guarded/admin/**) ---
   Reuses .site-header (white background, bottom rule) but carries no MIV
   logos: the visual-identity rules bind the public area, not the
   authenticated backoffice. */
.admin-heading-title {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* --- Project title band (between the logo header and the nav bar) --- */

.project-banner {
    background: #ffffff;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem 1rem;
    text-align: center;
}

.project-name {
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
}

/* The acronym gets its own line with extra size and weight; the descriptive part of
   the official title follows beneath it. The hyphen that joins the two in the contract
   text is dropped here — the line break does that job visually. */
.project-acronym {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.project-logo {
    height: 40px;
    width: auto;
}

.project-subtitle {
    display: block;
    /* The official title must not be abbreviated; balanced wrapping keeps it from
       leaving a single orphaned word on the last line. */
    text-wrap: balance;
}

.project-smis {
    margin: 0.5rem auto 0;
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.project-contract {
    max-width: var(--max-width);
    margin: 0.35rem auto 0;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-wrap: balance;
}

/* --- Navigation --- */

.site-nav {
    background: var(--nav-bg);
}

.site-nav > ul {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* Fără asta (implicit: stretch), fiecare <li> se întinde pe toată
       înălțimea rândului, iar butoanele-iconiță (lacăt/deconectare), care nu
       au propriul lor display:flex pe <li>, rămân lipite de partea de sus a
       acelui <li> întins în loc să stea centrate pe rând ca restul. */
    align-items: center;
}

/* Shared by both element types: the active item renders as <span>, the rest as <a>. */
.nav-item {
    display: block;
    padding: 0.85rem 1.25rem;
    color: var(--nav-fg);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

a.nav-item:hover,
a.nav-item:focus {
    background: var(--nav-active-bg);
}

span.nav-item.is-active {
    background: var(--nav-active-bg);
    border-bottom-color: #ffffff;
    cursor: default;
}

/* --- Submeniu (dropdown) ---
   Fără JavaScript: se deschide la :hover și la :focus-within. Vezi comentariul din
   publicPage.tag pentru care elementul-părinte trebuie să rămână focusabil. */

.has-submenu {
    position: relative;
}

.nav-toggle {
    cursor: default;
    user-select: none;
}

.caret {
    margin-left: 0.45rem;
    font-size: 0.75em;
    line-height: 1;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--nav-active-bg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
    display: block;
}

.subnav-item {
    display: block;
    padding: 0.7rem 1.25rem;
    color: var(--nav-fg);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

a.subnav-item:hover,
a.subnav-item:focus {
    background: var(--nav-bg);
}

span.subnav-item.is-active {
    background: var(--nav-bg);
    cursor: default;
}

/* Legătura spre zona restricționată — ultimul element din bara de navigare, împins
   la marginea din dreapta. .site-nav > ul este deja un container flex, deci un
   margin-left: auto pe acest <li> îl împinge fără nicio schimbare la container. */
.nav-guarded {
    margin-left: auto;
}

.nav-guarded-link {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    color: var(--nav-fg);
}

.nav-guarded-link:hover,
.nav-guarded-link:focus {
    background: var(--nav-active-bg);
}

/* --- Admin nav bar: „Contul meu", aliniat la dreapta ---
   Aceeași tehnică ca la .nav-guarded: .site-nav > ul e deja flex, deci un
   margin-left: auto pe ultimul <li> îl împinge la marginea din dreapta. */
.nav-account {
    margin-left: auto;
}

/* „Verificare email" e un <button> într-un <form>, nu un <a>, pentru că
   trimite un e-mail (efect secundar) — dar trebuie să arate identic cu
   celelalte intrări din submeniu. */
.subnav-button {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* „Deconectare" — iconiță în bara de navigare, imediat după „Contul meu".
   Fără margin-left: auto propriu — .nav-account e deja împins la dreapta,
   iar acesta e doar următorul element din același rând flex, deci vine
   automat lipit de el. Butonul reia exact stilul .nav-guarded-link, cu
   resetul de <button> peste (fără chenar/fundal implicit). */
.nav-logout-link {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border: 0;
    background: none;
    color: var(--nav-fg);
    font: inherit;
    cursor: pointer;
}

.nav-logout-link:hover,
.nav-logout-link:focus {
    background: var(--nav-active-bg);
}

/* --- Title section --- */

.page-title {
    background: #ffffff;
    border-bottom: 1px solid var(--rule);
}

.page-title h1 {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.75rem 1rem;
    font-size: 1.9rem;
    color: var(--accent);
}

.page-date {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.page-date svg { flex-shrink: 0; }

.page-date + h1 { padding-top: 0.35rem; }

/* --- Traseu de navigare (breadcrumb) --- */

.breadcrumb {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
}

.breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Separatorul este desenat cu ::before tocmai ca să rămână pur decorativ. */
.breadcrumb li + li::before {
    content: "›";
    margin: 0 0.5rem;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    text-decoration: underline;
}

/* Titlul urcă mai aproape de traseu atunci când acesta există. */
.breadcrumb + h1 {
    padding-top: 0.5rem;
}

/* --- Body --- */

.page-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1rem 3.5rem;
}

/* --- Content blocks (used by the project description page) --- */

.content-block {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.content-block:last-child { margin-bottom: 0; }

.content-block h2 {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 1.25rem;
}

.content-block p { margin: 0 0 0.85rem; }
.content-block p:last-child { margin-bottom: 0; }

.lead {
    font-size: 1.08rem;
    line-height: 1.65;
}

.note {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Fact list — label/value pairs. Two columns on wide screens, stacked when narrow. */
.fact-list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: 0.6rem 1.5rem;
}

.document-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 2rem;
}

.fact-list dt {
    font-weight: 700;
    color: var(--accent);
}

.fact-list dd {
    margin: 0;
}

/* Previzualizarea corpului de email (emailuri-detaliu.jsp) — izolată de
   restul paginii într-un <iframe sandbox>, vezi comentariul din JSP. */
.mail-preview {
    display: block;
    width: 100%;
    height: 60vh;
    margin-top: 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: #ffffff;
}

/* --- Ecranul „Log" (log.jsp) --- */
.log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.log-ranges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* .icon-button carries a fixed height (see its own rule) for its usual job of
   compact per-row table actions. That fixed height opts it out of flexbox's
   default cross-axis stretch, so next to the auto-height .button-secondary
   range pills it renders both shorter and top-aligned instead of matching
   the row. Let it stretch here so command buttons on this bar share one
   height. */
.log-ranges .icon-button {
    height: auto;
    align-self: stretch;
}

.log-view {
    max-height: 70vh;
    margin: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.plain-list {
    margin: 0 0 0.85rem;
    padding-left: 1.25rem;
}

.plain-list li { margin-bottom: 0.4rem; }

/* Expected results — numbered, each with a short label above its description. */
.results-list {
    margin: 0;
    padding-left: 1.5rem;
}

.results-list li {
    margin-bottom: 1rem;
}

.results-list li:last-child { margin-bottom: 0; }

.result-label {
    display: block;
    font-weight: 700;
    color: var(--accent);
}

/* Budget figures. Wrapped for horizontal scroll on very narrow screens rather than
   letting the page body scroll sideways. */
.budget-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.85rem;
}

.budget-table caption {
    text-align: left;
    color: var(--muted);
    font-size: 0.9rem;
    padding-bottom: 0.6rem;
}

.budget-table th,
.budget-table td {
    border-bottom: 1px solid var(--rule);
    padding: 0.65rem 0.5rem 0.65rem 0;
    text-align: left;
    vertical-align: top;
}

.budget-table th { font-weight: 600; }

.budget-table td {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--accent);
}

/* --- Home page project widget (MIV-PS §4.6.1) ---
   Deliberately the most prominent element in the page body: the manual requires the
   home page to carry a short project description linking to the full one. */

.project-widget {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-left: 5px solid var(--accent);
    border-radius: 6px;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.project-widget h2 {
    margin: 0 0 0.85rem;
    color: var(--accent);
    font-size: 1.35rem;
}

.project-widget p { margin: 0 0 0.85rem; }

.widget-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.widget-meta span { white-space: nowrap; }

.widget-cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.4rem;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
}

.widget-cta:hover,
.widget-cta:focus {
    background: var(--nav-active-bg);
    text-decoration: none;
}

.announcement-row {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.announcement-widget {
    flex: 1 1 0;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-left: 5px solid var(--accent);
    border-radius: 6px;
    padding: 1.75rem;
}

.announcement-widget h2 {
    margin: 0 0 0.85rem;
    color: var(--accent);
    font-size: 1.15rem;
}

.announcement-widget p { margin: 0 0 0.85rem; }

.widget-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.widget-date svg { flex-shrink: 0; }

.under-construction {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 3rem 1.5rem;
    text-align: center;
}

.under-construction h2 {
    margin: 0 0 0.5rem;
    color: var(--accent);
}

.under-construction p {
    margin: 0;
    color: var(--muted);
}

/* --- Footer --- */

.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}

/* --- Beneficiary identification (MIV-PS §5.1.4) --- */

.footer-beneficiary {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.beneficiary-block {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* The mark is two-tone (one half blue, one half white) and sits directly on the dark
   footer with its transparency intact — both halves read against #091e42, which is
   the treatment used on the beneficiary's own site. Do NOT put it back on a light
   background without a light-background variant of the artwork: the white half
   disappears. Height is held below the EU emblem's 64px — §1.7 requires the emblem to
   be at least as large as the largest other logo ON THE SAME PAGE, footer included. */
.beneficiary-logo {
    height: 56px;
    width: auto;
}

.beneficiary-details p {
    margin: 0;
    color: var(--footer-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.beneficiary-details .beneficiary-name {
    font-weight: 700;
    color: #ffffff;
}

.beneficiary-details .sep { color: var(--footer-rule); }

/* --- Project social presence, mirrored opposite the beneficiary block --- */

.footer-social {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.social-links a {
    display: inline-flex;
    color: var(--footer-link);
}

.social-links a:hover,
.social-links a:focus {
    color: #ffffff;
}

/* Round badge on a light ground; kept below the beneficiary logo's 56px so the
   EU emblem (§1.7) stays the largest mark on the page. */
.social-logo {
    height: 48px;
    width: auto;
}

.footer-links {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem 1rem 0.75rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.site-footer a {
    color: var(--footer-link);
    text-decoration: none;
    font-size: 0.9rem;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* Mandatory EU funding notice (MIV-PS §4.6.1). */
.footer-ue {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1rem 1.5rem;
    color: var(--footer-muted);
    font-size: 0.85rem;
}

/* The separator is drawn as an inset pseudo-element rather than a border-top on
   .footer-ue itself. A border would span the full max-width box, overhanging by
   1rem on each side the text that sits inside the same box's padding. Insetting
   it by the gutter keeps it flush with the content column at every width. */
.footer-ue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    border-top: 1px solid var(--footer-rule);
}

.footer-ue a {
    color: var(--footer-link);
    text-decoration: underline;
    font-size: inherit;
    word-break: break-word;
}

/* --- Semn de build (publicPage.tag, adminPage.tag, guardedPage.tag) ---
   Deliberat aproape invizibil: nu e conținut pentru vizitatori, e un semnal
   pentru cine trebuie să confirme ce rulează pe un mediu dat (preview,
   producție) fără acces la pipeline. Stă întotdeauna pe fundalul deschis de
   la finalul paginii (după .site-footer, care e închis la culoare), deci un
   singur stil ajunge pentru toate cele trei layout-uri. */
.build-info {
    margin: 0;
    padding: 0.3rem 1rem;
    text-align: center;
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.55;
}

/* --- Watermark de mediu (envWatermark.tag) ---
   Suprapunere fixă, peste tot conținutul, dar netă la interacțiune
   (pointer-events: none) și la citirea de ecran (aria-hidden pe element).
   Imaginea de fundal (SVG cu textul PREVIEW/DEVELOPMENT) vine inline, per
   pagină, din envWatermark.tag — aici stă doar poziționarea/repetarea. */
.env-watermark {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background-repeat: repeat;
}

/* --- Narrow viewports --- */

@media (max-width: 720px) {
    .logo-cell img { height: 48px; }
}

/* Fallback pentru atingere (touch) și ecrane înguste. Panoul suprapus se deschide
   doar la :hover / :focus-within, iar hover nu există pe touch — pe un dispozitiv
   tactil lat (iPad: 768px portret, 1024px peisaj) submeniul ar deveni inaccesibil.
   De aceea condiția nu este doar lățimea, ci și absența capabilității de hover. */
@media (max-width: 720px), (hover: none) {
    .site-nav > ul {
        display: block;
    }

    .submenu {
        display: block;
        position: static;
        background: transparent;
        box-shadow: none;
    }

    .subnav-item {
        padding-left: 2.5rem;
    }

    a.subnav-item:hover,
    a.subnav-item:focus,
    span.subnav-item.is-active {
        background: var(--nav-active-bg);
    }

    .caret {
        display: none;
    }
}

@media (max-width: 520px) {
    .logo-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .page-title h1 { font-size: 1.45rem; }
    .project-name { font-size: 0.95rem; }
    .project-acronym { font-size: 1.4rem; }
    .content-block { padding: 1.25rem 1rem; }
    /* Stack the label/value pairs — two columns are unusable at this width. */
    .fact-list {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .fact-list dd { margin-bottom: 0.6rem; }
    .document-columns {
        grid-template-columns: 1fr;
    }
    .announcement-row {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ---------------------------------------------------------------- Înscrieri */

.intro {
    max-width: 60ch;
    color: var(--muted);
    margin: 0 0 2rem;
}

.course-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.course-card {
    display: block;
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule);
    border-radius: 6px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* :focus-visible alături de :hover — fără JavaScript, indicația de
   selectabilitate trebuie să funcționeze identic la tastatură și la mouse. */
.course-card:hover,
.course-card:focus-visible {
    background: #eef3f9;
    border-color: var(--accent);
    border-left-color: var(--accent);
    outline: none;
}

.course-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--accent);
}

.course-card p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.course-card-cta {
    font-weight: 600;
    color: var(--accent);
}

.wizard-progress {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.enrollment-form { max-width: 40rem; }

.form-field { margin-bottom: 1.25rem; }

.form-field label,
.form-field legend {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font: inherit;
    background: #ffffff;
}

.form-field textarea {
    resize: vertical;
}

/* Corpul HTML al unui anunț (anunt-form.jsp) — cod lipit, nu proză, deci
   monospațiat și suficient de înalt cât să nu fie nevoie de derulare pentru
   fiecare rând. */
.form-field textarea.code {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.875rem;
    min-height: 18rem;
}

/* Câmpurile care se stochează cu majuscule, ca pe actul de identitate. Doar
   afișare: valoarea trimisă rămâne cum a fost tastată, iar majusculele reale le
   pune serverul (EnrollmentDrafts.mergeStep). Rolul lui este să nu existe
   surpriză între ce se vede în câmp și ce ajunge în recapitulare. */
.form-field input.uppercase { text-transform: uppercase; }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.form-field fieldset { border: 0; margin: 0; padding: 0; }

.form-field .radio,
.form-field .check {
    display: block;
    font-weight: 400;
    margin-bottom: 0.3rem;
}

.form-field .radio input,
.form-field .check input { margin-right: 0.5rem; }

.field-help {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

/* Eroarea nu este semnalată doar prin culoare: are și o bordură stânga groasă
   și un text explicit, pentru cine nu distinge roșul. */
.field-error {
    margin: 0.3rem 0 0;
    color: #a4262c;
    font-size: 0.875rem;
    font-weight: 600;
}

.form-field.has-error input,
.form-field.has-error select {
    border-color: #a4262c;
    border-left-width: 4px;
}

.form-errors {
    background: #fdf3f4;
    border: 1px solid #a4262c;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.form-errors p { margin: 0 0 0.5rem; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: 1.25rem; }
.form-errors li + li { margin-top: 0.25rem; }
.form-errors a { color: #a4262c; }

/* Numele câmpului, ca ochiul să găsească linia căutată fără să citească tot. */
.form-errors .error-field { font-weight: 600; }

/* Confirmare după o acțiune reușită (salvare, trimitere email de test) —
   variantă „verde" a .form-errors, cu aceeași structură. */
.form-success {
    background: #f0f9f1;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #1e4b21;
    font-weight: 600;
}

/* --- Iconiță status înscriere (enrollmentStatusIcon.tag) ---
   'accepted'/'rejected' folosesc un verde/roșu mai viu decât
   .form-success/.form-errors — acolo culoarea e doar un accent lângă text,
   aici E conținutul, deci trebuie să iasă în evidență la dimensiunea mică a
   unei iconițe de 16px. 'pending'/'draft' au propriul gri, mai deschis decât
   var(--muted) (folosit pe tot situl pentru text secundar) — nu sunt nici o
   reușită, nici o eroare, doar un pas intermediar, și un gri prea apăsat le-ar
   apropia vizual de starea de eroare. */
.status-icon {
    display: inline-flex;
    vertical-align: middle;
}

.status-icon-accepted { color: #16a34a; }
.status-icon-pending { color: #aeaeb8; }
.status-icon-rejected { color: #dc2626; }
.status-icon-draft { color: #aeaeb8; }

.status-icon-label {
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* --- Tabele administrative (conturi, configurare, emailuri trimise) --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.admin-table th {
    background: var(--page-bg);
    color: var(--accent);
    font-weight: 700;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }

/* Înscrieri „Documente primite" (inscrieri.jsp) — încă în așteptarea
   validării personalului, deci trebuie să iasă în evidență printre rândurile
   deja decise. */
.row-pending td { font-weight: 700; }

.admin-table .actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Butoane-iconiță pentru comenzile de la finalul rândului (Editare/Ștergere)
   — pătrate, compacte, ca să lase loc pentru restul coloanelor. Numele
   acțiunii nu dispare: rămâne accesibil prin aria-label/title (tooltip). */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #ffffff;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.icon-button:hover,
.icon-button:focus-visible {
    border-color: var(--accent);
    background: var(--page-bg);
}

/* Invalidarea unui document (ecranul de validare a înscrierilor) — aceeași
   nuanță roșie ca .status-icon-rejected, ca să citească drept "elimină",
   spre deosebire de neutrul .icon-button folosit pentru Editare/Ștergere. */
.icon-button-danger {
    color: #dc2626;
}

.icon-button-danger:hover,
.icon-button-danger:focus-visible {
    border-color: #dc2626;
    background: #fef2f2;
}

.admin-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Variantă aliniată la stânga (emailuri.jsp: reîmprospătare + filtru), spre
   deosebire de .admin-table-toolbar simplu (conturi/anunțuri/configurare),
   care rămâne la dreapta pentru butonul „nou". */
.admin-table-toolbar-start {
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
}

/* Câmpul de filtru cu un „×" suprapus la capătul din dreapta, pentru
   golire — vezi emailuri.jsp. Padding-right pe input face loc butonului
   fără să-l suprapună peste textul tastat. */
.text-input-clear {
    position: relative;
    display: inline-flex;
}

.text-input-clear input[type="text"] {
    width: 16rem;
    padding: 0.55rem 2rem 0.55rem 0.65rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font: inherit;
    background: #ffffff;
}

.text-input-clear input[type="text"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.text-input-clear-btn {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
}

.text-input-clear-btn:hover,
.text-input-clear-btn:focus-visible {
    color: var(--muted);
}

/* Coloana de dată/oră a jurnalului de emailuri: un singur șir („18.08.2026,
   10:46"), niciodată despărțit pe două rânduri la virgulă. */
.admin-table td.nowrap {
    white-space: nowrap;
}

/* table-layout: fixed doar pe tabelul emailurilor (nu pe conturi/configurare,
   care nu au nevoie de lățimi procentuale pe coloane) — fără el, width % pe
   <td> și max-width: 0 pentru elipsă nu au efect: layout-ul implicit al
   tabelului crește coloanele după conținut, nu după cele declarate. */
.admin-table-fixed {
    table-layout: fixed;
}

/* Trunchiere pe lățimea coloanei (CSS), independentă de trunchierea pe
   număr de caractere făcută de server (vezi AdminMailLogController) — cele
   două acoperă cazuri diferite: un șir scurt dar care tot nu încape la o
   lățime de coloană mică, respectiv un șir foarte lung pe orice lățime.
   title="..." pe <td> arată valoarea întreagă la hover, ca substitut pentru
   ce s-a tăiat vizual. */
.admin-table td.truncate {
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table td.truncate-email { width: 22%; }
/* Subiect nu are lățime proprie: sub table-layout: fixed, o coloană fără
   width declarat ia tot ce rămâne din lățimea tabelului — vezi
   .admin-table-fixed mai jos pentru celelalte coloane, toate cu lățimi
   fixe (rem), dimensionate după conținutul lor real, nu procentual. */

.admin-table-fixed .col-date { width: 15%; }
/* Status: un singur cuvânt, cel mai lung fiind „În așteptare". */
.admin-table-fixed .col-status { width: 7rem; }
/* Reîncercări: valoarea e maximum 2 cifre; lățimea rămâne totuși suficientă
   cât să nu forțeze antetul „Reîncercări" pe mai multe rânduri. */
.admin-table-fixed .col-retries { width: 6.5rem; }
.admin-table-fixed .col-actions { width: 3rem; }

/* --- Paginare (emailuri trimise) --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pagination-status {
    color: var(--muted);
    font-size: 0.9rem;
}

.pagination .is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 2rem;
    /* Pagina de confirmare are trei acțiuni; pe ecran îngust trebuie să treacă
       pe rândul următor, nu să iasă din pagină. */
    flex-wrap: wrap;
}

/* Blocul de confirmare este centrat, deci și acțiunile din el. */
.under-construction .form-actions { justify-content: center; }

.button-primary,
.button-secondary {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.button-primary {
    background: var(--accent);
    color: #ffffff;
    border: 1px solid var(--accent);
}

.button-primary:hover { background: var(--nav-active-bg); }

.button-secondary {
    background: #ffffff;
    color: var(--accent);
    border: 1px solid var(--rule);
}

.button-secondary:hover { border-color: var(--accent); }

.wizard-note {
    max-width: 40rem;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.recap-group {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    max-width: 40rem;
}

.recap-group h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--accent);
}

.recap-edit { font-size: 0.875rem; font-weight: 400; }

.recap-group dl { margin: 0; }
.recap-group dt { font-weight: 600; font-size: 0.875rem; color: var(--muted); }
.recap-group dd { margin: 0 0 0.75rem; }

/* --- Documentele semnate: un formular, câte un rând per document cerut --- */

.upload-list {
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    max-width: 40rem;
}

.upload-row {
    display: flex;
    justify-content: space-between;
    /* flex-start, nu center: titlul și comanda trebuie să ancoreze la același
       loc indiferent dacă rândul are sau nu a doua linie (numele fișierului).
       Cu 'center' cele două s-ar recentra vertical împreună de fiecare dată
       când linia aceea apare sau dispare — exact mișcarea de evitat. */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
}

.upload-row:first-child { border-top: none; }

.upload-row-name { font-weight: 600; font-size: 0.9375rem; flex: 1 1 14rem; }

/* Etichetă pentru documentele opționale la TTT (certificat de specialist,
   certificat de formator etc.) — nu blochează „Trimite documentele", deci
   rândul trebuie să spună asta, nu doar să lipsească din numărătoarea de
   validare pe care participantul n-o vede. */
.upload-row-optional {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: var(--rule);
    color: var(--muted);
    font-weight: 400;
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Coloană, nu rând: comanda de alegere stă mereu pe primul loc, la aceeași
   poziție; numele fișierului (dacă există) vine dedesubt, aliniat la aceeași
   margine dreaptă — nu împinge sau mută comanda. */
.upload-row-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 0.375rem;
}

/* Fără JS: input-ul brut al browserului rămâne vizibil și e singurul control.
   Declanșatorul stilizat există DOAR ca să înlocuiască vizual acel input, deci
   e ascuns implicit — documente-upload.js îl arată doar dacă chiar rulează. */
.upload-row-trigger { display: none; }

.js-enhanced .upload-row-trigger { display: inline-block; }

/* Ascuns vizual, nu 'display:none': rămâne clickabil (declanșatorul îl
   deschide) și accesibil de la tastatură chiar și după ce JS l-a „înlocuit". */
.js-enhanced .upload-row-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.upload-row-filename { font-size: 0.9375rem; color: var(--muted); }

/* Fără nume, fără linie: un rând fără fișier ales rămâne pe un singur rând,
   nu lasă un spațiu gol sub comandă. Reapare singur, prin CSS, în clipa în
   care JS pune text (documente-upload.js) sau la reîncărcare cu un nume
   venit din model. */
.upload-row-filename:empty { display: none; }

/* „Trimite documentele" stă opus lui „Încarcă", pe același rând — vezi
   2026-08-11-documente-trimitere-finala-design.md. */
.upload-list .form-actions { justify-content: space-between; }

/* Mesaj arătat doar de documente-upload.js cât timp trimiterea (POST-ul
   multipart) e în curs — vezi comentariul de-acolo. */
.upload-status {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent);
}

/* Popover-ul de confirmare: element HTML obișnuit, randat de browser în top
   layer, dar stilizat integral de noi — nu fereastra nativă window.confirm().
   Deschiderea/închiderea sunt atributele HTML popovertarget /
   popovertargetaction, fără JavaScript. */
.confirm-popover {
    max-width: 26rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.confirm-popover p { margin: 0 0 1.25rem; font-size: 0.9375rem; }

.confirm-popover .form-actions { margin-top: 0; }

.confirm-popover::backdrop { background: rgba(18, 58, 94, 0.45); }

.button-primary:disabled,
.button-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* .review-note a fost șters odată cu blocul intern de pe pagina documentelor,
   după review-ul din 04.08.2026. */