/* Orar USV – the common style. The colours are defined only once, as variables. */

:root {
    --blue: #00338d;
    --light-blue: #e8eef9;
    --blue-hover: #002670;
    --text: #1c2433;
    --secondary-text: #5b6577;
    --background: #f4f6fa;
    --surface: #ffffff;
    --border: #dde3ec;
    --yellow: #fff4c2;
    /* the outline buttons: giving up (neutral) and deleting (red) */
    --cancel: #475467;
    --cancel-border: #98a2b3;
    --cancel-hover: #f2f4f7;
    --danger: #b42318;
    --danger-hover: #fef3f2;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --radius: 10px;
    /* the common border of all the slots with activities, 2px instead of the former 3px (PROMPT-SAPTAMANI.md, W8,
       changed by the user on 2026-10-12 from 2.25px, which browsers draw as 2px anyway: a border is snapped down to
       whole device pixels), used by every slot box and by print, with no width written separately */
    --slot-border: #3b4252;
    --slot-border-width: 2px;
    --max-width: 1200px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--background);
}

* { box-sizing: border-box; }

/* the hidden attribute always hides, even if the element's style gives it another `display` (e.g. buttons) */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    line-height: 1.45;
}

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    /* on the pages with a timetable, as wide as the page's content (--content-width, measured in app.js) */
    max-width: var(--content-width, var(--max-width));
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px 16px;
    /* on a computer one row: if room is short, only the menu wraps, inside its own box ("Ieșire" never drops alone) */
    flex-wrap: nowrap;
}
/* the logo, "Vezi ca", "Ieșire" and the archive's semester keep their width */
.site-header__inner > * { flex: none; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    margin-right: auto;
}

.brand img { display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__text strong { color: var(--blue); font-size: 1.1rem; }
.brand__text small { color: var(--secondary-text); font-size: .8rem; }

/* on one row while it fits; otherwise on two (e.g. a 6-item menu with "Vezi ca" on a small laptop): the page never
   scrolls sideways */
.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 1 auto; min-width: 0; }

.menu a {
    /* (narrow enough for the general administrator's 6 items, "Vezi ca" and "Ieșire" on one row in 1200px, with the
       week's parity under the logo: see "Vezi ca" below; the evaluation's and the timetable's administrators' menus have
       6 items too, since "Evaluare" became "Contul meu › Evaluarea mea", and no menu has more) */
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--secondary-text);
    /* 600, not 500: the system fonts have no medium weight in Firefox (it showed the menu thinner than Chrome) */
    font-weight: 600;
    white-space: nowrap;
}

.menu a:hover { background: var(--background); color: var(--text); }
.menu a[aria-current="page"] { background: var(--blue); color: #fff; }

/* "Contul meu" (decision Î12): on a computer its entries (Orarul meu, Evaluarea mea, Setările mele) are a list under the
   item, opened by a click or from the keyboard (app.js: Enter or Space opens it, Escape closes it, a click elsewhere
   closes it); without the script it opens while the pointer or the focus is on the item. On a tablet or a phone the
   item's link opens /cont, whose pages show the entries as tabs (.account-tabs, below); app.js reads --submenu-mode to
   know which of the two the screen has */
.menu__group { position: relative; display: flex; --submenu-mode: list; }
.menu__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 11;
    min-width: 100%;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
}
/* (the 4px above the list stay hoverable: the list's own ::before fills them) */
.menu__submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.menu__group.is-open > .menu__submenu,
html:not(.js) .menu__group:hover > .menu__submenu,
html:not(.js) .menu__group:focus-within > .menu__submenu { display: block; }
.menu__submenu a { display: block; }
.menu__submenu li + li { margin-top: 2px; }
/* the tabs of "Contul meu"'s pages: only on a tablet or a phone (the header's list on a computer) */
.account-tabs {
    display: none;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    max-width: 100%;
    overflow-x: auto;
}
.account-tabs a {
    padding: 8px 16px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--secondary-text);
    font-weight: 600;
    white-space: nowrap;
}
.account-tabs a:hover { background: var(--background); color: var(--text); }
.account-tabs a[aria-current="page"] { background: var(--blue); color: #fff; }

/* "Vezi ca": short enough to keep the header on one row on a laptop (the long role names are in the list). 170px: on a
   timetable page narrower than the window the header is 1200px wide (--content-width); the 6 items of the longest menus
   (the application's, the evaluation's and the timetable's administrators), "Vezi ca" and "Ieșire" next to the longest
   line under the logo, "Semestrul II (hibrid) · Săptămână impară (13)", still fit there (210px did not). The options
   read "Vezi rolul: <rol>" since stage C of CONTACT-ORAR, 3 characters longer than the former "Vezi ca: <rol>".
   Measured in Chrome on Windows (Segoe UI, .85rem; the width of a select sized to its one option): "Vezi ca: cadru
   didactic" needed exactly 170px, "Vezi rolul: cadru didactic" needs 184px; widened to 186px (the coordinator's
   choice of 2026-10-14, the user being away, marked "de confirmat"; the browser suite checks that the header still
   fits on one row and the menu stays on one row; if not, back to 170px with the cut label). A cut label stays whole in
   the open list */
.period-selector.role-selector select { max-width: 186px; text-overflow: ellipsis; } /* (more specific than the 260px below) */
/* the instructions for a mouse, or for a touch screen */
@media (hover: none) and (pointer: coarse) { .only-pointer { display: none !important; } }
@media not all and (hover: none) and (pointer: coarse) { .only-touch { display: none !important; } }
.period-selector select {
    font: inherit;
    font-size: .85rem;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    max-width: 260px;
}

.archive-banner {
    background: var(--yellow);
    border-bottom: 1px solid #ecd97a;
    padding: 8px 16px;
    text-align: center;
    font-size: .9rem;
}
/* "Vezi ca" on a faculty: the faculty is chosen in the banner (12.3), after "Revenire"; on a phone it wraps under the text */
.role-view-faculty { display: inline-block; margin: 0 0 0 8px; }
.role-view-faculty select {
    font: inherit;
    font-size: .85rem;
    padding: 2px 6px;
    border: 1px solid #ecd97a;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    max-width: 100%;
}

/* ---------- Content ---------- */

.content {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* the pages with a timetable (years of study, teachers, rooms, subgroups, the editors, also the visual editor of the
   columns) and the administration's tables (teachers, rooms…): as wide as the timetable needs, up to the whole window, never narrower than the usual width, centred; only
   the timetable's table (or the columns' grid) decides the width (the other elements - titles, notes, the legend, the
   lists under it - are left out of the measure and follow it; only the block elements, which fill the width anyway:
   a button, a dialog, the editor's fixed selection bar or the tabs of "Contul meu" on a tablet, sized by their content,
   would shrink to nothing and scroll) */
.content:has(.timetable-container, .columns-editor__container, .admin-table-container, .modular-table-container) {
    max-width: 100%;
    width: fit-content;
    min-width: min(100%, var(--max-width));
}
:is(.content, .content :has(.timetable-container, .columns-editor__container, .admin-table-container, .modular-table-container)):has(.timetable-container, .columns-editor__container, .admin-table-container, .modular-table-container)
    > :is(div, p, section, nav, header, h1, h2, h3, ul, ol, form, table):not(.timetable-container, .columns-editor__container, .admin-table-container, .modular-table-container):not(:has(.timetable-container, .columns-editor__container, .admin-table-container, .modular-table-container)):not(.selection-bar):not(.account-tabs) {
    contain: inline-size;
}
/* the faculty administrators' rights: the whole window, so the specializations' checkboxes fill more columns (the home
   page and the intermediate pages, e.g. the timetables' lists, keep the usual width) */
.content:has(.rights-faculty) { max-width: 100%; }

.page-title { font-size: 1.5rem; margin: 0 0 20px; }

.breadcrumbs { font-size: .9rem; color: var(--secondary-text); margin-bottom: 6px; }
.breadcrumbs a { text-decoration: none; }

.footer {
    text-align: center;
    padding: 16px;
    color: var(--secondary-text);
    font-size: .85rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}
/* a card keeps 16px from what is above it (a title, a subtitle, a message, another card); in the grids the gap does it */
* + .card { margin-top: 16px; }
:is(.card-grid, .two-columns, .account-grid, .admin-grid, .timetable-list-grid) > .card { margin-top: 0; }
/* the first and the last element of a card do not add to its padding */
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card__subtitle { margin: 0 0 12px; font-size: 1rem; }

.card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.card-grid > li { display: flex; }

.card--link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .15s;
}

.card--link:hover { border-color: var(--blue); transform: translateY(-1px); color: var(--text); }
.card__label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--blue); text-transform: uppercase; }
.card__title { font-weight: 600; }
.card--external .card__label { color: var(--secondary-text); }
/* an extra link with several choices: the card opens them */
.card--choices { cursor: pointer; }
.card--choices summary { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.card--choices summary::-webkit-details-marker { display: none; }
.card--choices summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.card--choices[open] { border-color: var(--blue); transform: none; }
.card__choices { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.card__choices a {
    display: block; padding: 8px 10px; border-radius: 8px; background: var(--light-blue); color: var(--blue);
    font-weight: 600; text-decoration: none;
}
.card__choices a:hover { background: var(--blue); color: #fff; }

.two-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.empty { color: var(--secondary-text); }

.badge {
    display: inline-block;
    font-size: .7rem;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--light-blue);
    color: var(--blue);
    vertical-align: middle;
}

/* ---------- Lists ---------- */

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-bottom: 1px solid var(--border); }
.link-list li:last-child { border-bottom: 0; }

.link-list a {
    display: inline-block;
    padding: 9px 2px;
    text-decoration: none;
    color: var(--text);
}

.link-list a:hover { color: var(--blue); text-decoration: underline; }

.link-list--compact { max-height: 60vh; overflow-y: auto; }

.link-list--columns { columns: 3 260px; column-gap: 24px; }
.link-list--columns li { break-inside: avoid; }

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.pill-list a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
}

.pill-list a:hover { border-color: var(--blue); color: var(--blue); }

/* The lists of links with a text filter (app.js, data-filter; PROMPT-CONTACT-ORAR, K-H): the active link, the one Enter
   opens, has the choice lists' highlight (.choice__list li.active) and an outline drawn inside its box (a list that
   scrolls by itself, the subgroups, would clip one drawn outside), within the link's own padding: the active link
   keeps the box of the others, so nothing moves when the mark does. In the forced colours (high contrast) the
   background goes, the outline stays, in the system's colour, and the text is underlined. */
.link-filter a.link-active {
    background: var(--light-blue);
    color: var(--blue);
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}
.pill-list a.link-active { border-color: var(--blue); }
@media (forced-colors: active) {
    .link-filter a.link-active { outline: 2px solid Highlight; outline-offset: -2px; text-decoration: underline; }
}

.groups { display: flex; flex-direction: column; gap: 18px; }
.group__title { font-size: .95rem; margin: 0 0 8px; color: var(--secondary-text); }

.search { display: block; margin-bottom: 12px; }

.search input {
    width: 100%;
    font: inherit;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.search--large input { font-size: 1.05rem; padding: 12px 14px; }
.result-count { margin: 0 0 8px; color: var(--secondary-text); font-size: .9rem; }

/* ---------- Tabs (Licență / Master / Postuniversitar) ---------- */

.tabs__buttons {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.tabs__buttons button {
    font: inherit;
    border: 0;
    background: none;
    padding: 8px 16px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--secondary-text);
    font-weight: 500;
}

.tabs__buttons button[aria-selected="true"] { background: var(--blue); color: #fff; }

/* without JavaScript: all the panels are visible, with titles (!important: stronger than the general [hidden] rule) */
html:not(.js) .tabs__buttons { display: none; }
html:not(.js) .tabs__panel[hidden] { display: block !important; }
.js .js-hidden { display: none; }
.tabs__panel h2 { font-size: 1.1rem; }

/* ---------- Text ---------- */

.text h2 { font-size: 1.1rem; margin: 20px 0 8px; }
.text h2:first-child { margin-top: 0; }

.error-details {
    white-space: pre-wrap;
    font-size: .8rem;
    background: var(--background);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}

/* ---------- Timetables ---------- */

/* the activity types' colours (background / border) */
.type-1 { --type-background: #fff3c4; --type-border: #e6c84f; }  /* seminar */
.type-2 { --type-background: #fde0cc; --type-border: #e99a63; }  /* lab */
.type-3 { --type-background: #d5e6ff; --type-border: #6d9eea; }  /* course */
.type-4 { --type-background: #d3eedd; --type-border: #6cbf8a; }  /* project */
.type-0 { --type-background: #eceff3; --type-border: #a9b2c0; }  /* non-teaching */
.type-other { --type-background: var(--type-color, #eee); --type-border: #999; }

.timetable-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.page-title--timetable { margin-bottom: 4px; }
.title-info { font-size: .95rem; font-weight: 400; color: var(--secondary-text); }
.title-prefix { font-weight: 400; }
.subtitle { margin: 0 0 16px; color: var(--secondary-text); }
/* (in the timetable's and the administration's headers the header itself keeps the distance) */
:is(.timetable-header, .admin-header) .subtitle { margin-bottom: 0; }
.section-title { font-size: 1.15rem; margin: 28px 0 12px; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.icon-button {
    font: inherit;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.icon-button:hover { border-color: var(--blue); }
.icon-button[aria-pressed="true"] { background: var(--yellow); border-color: #e6c84f; }
.star { font-size: 1.1em; line-height: 1; }

/*
 * the timetable table: vertically only the page scrolls (a single scrollbar); horizontally the table
 * scrolls inside its box, with the hours column fixed. The header (the days) stays visible under the menu bar
 * through a fixed copy, the "floating header" (see app.js).
 */
.timetable-container {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    touch-action: pan-x pan-y; /* two fingers on the timetable resize only the table (app.js), not the page */
    /* an activity reached with Tab is scrolled into view beside the fixed hours column, not under it (the column is
       at most about 5.8rem wide at the table's .99rem: a year's timetable, whose header cell is wider than "00:00") */
    scroll-padding-left: 6rem;
}
/* after pinching: the way back to the normal size */
.timetable-zoom-reset {
    display: block;
    margin: 0 0 6px auto;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
}
.timetable-zoom-reset[hidden] { display: none; }

/* after a save that reloads the page: the content stays hidden until its former place is put back (layout.php) */
html.position-pending .content { visibility: hidden; }

/* Administrare › Backup */
.backup-rules { margin: 0 0 14px; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
.backup-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
/* the progress of the backup being written, and the backup just made, highlighted in the list */
.backup-progress { margin-top: 14px; max-width: 640px; }
.backup-progress__bar { height: 14px; border-radius: 999px; background: #e4e7ec; overflow: hidden; }
.backup-progress__fill { width: 0; height: 100%; border-radius: 999px; background: var(--blue, #1d4ed8); transition: width .6s ease; }
.backup-progress .note { margin: 6px 0 0; }
.backup-progress--failed .backup-progress__fill { background: #d92d20; }
.backup-progress--failed .note { color: #b42318; }
.admin-table tr.backup-new td { background: #e7f8ef; font-weight: 600; }
.backup-drive { color: #067647; font-weight: 600; white-space: nowrap; }

.timetable-table {
    border-collapse: collapse;
    width: 100%;
    /* a larger text (.9rem + 10%) with a tighter line spacing; not below 1.1, where the diacritics above and below
       (Ă, Ș) touch between rows. The texts inside (the overlap message, the parity label, the names and "Modifică"
       under an overlap) are relative (em), so they follow it on screen and in print */
    font-size: .99rem;
    line-height: 1.1;
}

.timetable-table th, .timetable-table td {
    border: 1px solid var(--border);
    padding: 0;
    vertical-align: top;
}

.timetable-table thead { background: #f7f9fc; }

.timetable-table thead th {
    background: #f7f9fc;
    padding: 6px 4px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    /* the bottom border is visible also when the header "floats" over the table */
    box-shadow: inset 0 -1px 0 var(--border);
}

/* the hours column stays fixed when scrolling horizontally */
.timetable-table .hour-column {
    position: sticky;
    left: 0;
    z-index: 2;
}
.timetable-table thead .hour-column { z-index: 4; }

/* the header's copy, fixed under the menu bar while the table passes beneath it */
.floating-header {
    position: fixed;
    z-index: 9; /* under the menu bar (.site-header) */
    overflow: hidden;
    background: #f7f9fc;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 0 3px 6px rgba(16, 24, 40, .12);
}
.floating-header[hidden] { display: none; }

/* the horizontal scrollbar fixed at the bottom (when the table's own bar is below the screen's edge) */
.floating-scrollbar {
    position: fixed;
    bottom: 0;
    z-index: 9;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(244, 246, 250, .92);
    border-top: 1px solid var(--border);
}
.floating-scrollbar[hidden] { display: none; }
.floating-scrollbar > div { height: 1px; }
/* on touch screens the table scrolls with the finger, and the scrollbars take no space */
@media (pointer: coarse) {
    .floating-scrollbar { display: none !important; }
}
.floating-header .timetable-table, .floating-header .admin-table { margin: 0; }

.timetable-table thead th a { text-decoration: none; }

/* the subgroups in the header: oval pills, so it is obvious they lead to the subgroup's timetable */
.timetable-table thead .subgroup-link {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--blue);
    border-radius: 999px;
    background: var(--surface);
    color: var(--blue);
    font-weight: 600;
    line-height: 1.3;
    transition: background-color .15s, color .15s;
}
.timetable-table thead .subgroup-link:hover,
.timetable-table thead .subgroup-link:focus-visible {
    background: var(--blue);
    color: #fff;
}
.timetable-table thead th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

.timetable-table .hour-column {
    width: 1%;
    padding: 4px 6px;
    background: #f7f9fc;
    color: var(--secondary-text);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* with the hours' 1% the widths add up to 100%: above it, the browsers take the excess from the last day */
.timetable-table--weekly td { width: calc(99% / var(--days, 6)); }
/* on narrow screens the table does not shrink: it scrolls horizontally, with the hours column fixed */
.timetable-table--weekly { min-width: 760px; }
.timetable--editable .timetable-table--weekly { min-width: 1080px; } /* the staff plan, number and type fit in the cells */
.timetable-table--weekly { --row-height: 2.6rem; }
.timetable-table--group { --row-height: 2.2rem; }
.timetable-table tbody tr { height: var(--row-height); }
.timetable-table--group td { min-width: 5.5rem; }

.timetable-table tr.odd-row td.free { background: #fbfcfe; }
/* An occupied cell is given the height of the rows it spans (--rows, set in the page): its activity fills it with
   min-height: 100%. Firefox computes the percentage from the cell's declared height (the old "height: 1px" trick made
   the activities collapse to their borders there); Chrome and Safari from the final height. The rows (and the
   activity) still grow when the text needs more room. */
.timetable-table td.occupied { padding: 2px; height: calc(var(--row-height) * var(--rows, 1)); }

.timetable-day__title th {
    background: var(--blue);
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    font-size: .85rem;
    letter-spacing: .02em;
}
/* the day's name stays visible on the left when the table is scrolled horizontally */
.timetable-day__name { position: sticky; left: 10px; }

.day-off { padding: 8px 10px !important; color: var(--secondary-text); font-style: italic; }

/* the activity (card) */
.activity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    min-height: 100%;
    font: inherit;
    text-align: center;
    padding: 4px 5px;
    border: var(--slot-border-width) solid var(--slot-border);
    border-radius: 5px;
    background: var(--type-background);
    color: var(--text);
    cursor: pointer;
    justify-content: center;
}

/* explicit centering of each row: some browsers (e.g. Safari) do not apply flex styles to buttons */
.timetable-table .activity { align-items: center; text-align: center; padding: 2px 5px; } /* small padding: room for the larger text */
.timetable-table .activity > span { display: block; width: 100%; text-align: center; }
/* as in the classic timetable, the rows do not wrap: the table grows horizontally (and scrolls), its height stays
   constant - an activity has as many text rows as the display mode gives it */
.timetable-table .activity > span { white-space: nowrap; overflow-wrap: normal; }
.activity__title-suffix { font-weight: 400; }
.activity + .activity { margin-top: 2px; }
.activity:hover { filter: brightness(.97); outline: 2px solid var(--blue); outline-offset: -1px; }
.activity:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.activity__title { font-weight: 700; overflow-wrap: anywhere; }
.activity__row { color: #2f3a4d; overflow-wrap: anywhere; }
.activity__time { font-weight: 600; font-size: .8em; color: var(--secondary-text); }
/* a group of overlapping activities: the first activity, with its colour, plus the "suprapunere" message */
.activity__overlap {
    margin-top: 2px;
    font-size: .9em; /* relative to the table's text, so it follows it on screen and in print */
    color: var(--secondary-text);
}

.overlap-note { margin: 0 0 12px; color: var(--secondary-text); font-size: .9rem; }
.overlap-member {
    border: 1px solid var(--slot-border);
    background: var(--type-background);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 10px;
}
.overlap-member h3 { margin: 0 0 6px; font-size: .95rem; }
/* the editable timetables: a non-teaching activity of the group is modified / deleted from the details dialog */
.overlap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* cells with different activities in the odd / even weeks */
/* a single border for the whole interval; the dotted line separates the odd weeks from the even ones */
.parities {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: var(--slot-border-width) solid var(--slot-border);
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface);
}
.parity { flex: 1; display: flex; flex-direction: column; position: relative; }
/* the week without an activity: only as high as its "—" row; the other week's activity fills the slot (K-G: three
   columns, the left one empty, the "—" centred, the sign on its right, as at the semestru-nou tag; a long sign wraps
   inside the right column, never touching the dash, even in the narrow columns; the side columns are never narrower
   than their content, so a short sign is never cut: see the free half's grid below) */
.parity--free {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
    column-gap: .3em;
}
/* the odd / even separator: a thin dashed line, with long dashes and large gaps */
.parity + .parity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--slot-border) 0 8px, transparent 8px 14px);
    z-index: 1;
}
.parity .activity {
    flex: 1;
    border: 0;
    border-radius: 0;
}
.parity .activity + .activity { margin-top: 0; }
/* the half's sign (W17, K-G), the same on screen and in print, in two forms decided from the set (HalfLabels), never
   cut and never covering the text (T4 a); its whole text form for the screen readers in the hidden text next to it
   (_cell.php) and in its title */
.parity__label {
    font-size: .75em; /* relative to the table's text, so it follows it on screen and in print */
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* the short signs ("impar", "par", the two halves of the semester: "S 1–7", "S 8–14"): exactly as at the semestru-nou
   tag (tests/fixtures/css/semestru-nou-parity.css, CssParityContractTest): in the top right corner, over the card, on
   its colour, untouched by the mouse (C6 a: a click there opens the card); the card leaves the room for it above its
   text, so the cell keeps the semestru-nou height */
.parity__label--short {
    position: absolute;
    top: 1px;
    right: 3px;
    pointer-events: none;
}
.parity__label--short ~ .activity,
.parity__label--short ~ .editable-activity > .activity {
    /* room for the label above the text: relative, about the label's height (.75em) with its spacing */
    padding-top: 1.1em;
}
/* the long signs ("S 1–7, 9", "S 1, 3, 5–14"): a row of their own, the first one inside the card's coloured box (in the
   button, or before it in a card with controls), aligned right, wrapping when it does not fit; the text under it; the
   help text in the title, for the mouse */
.parity__label--long {
    display: block;
    padding: 1px 3px 0;
    text-align: right;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* in the button (padding 2px 5px): the same corner as a short sign; it beats the centred, unwrapped rows of the card
   (also on phones), and the card's text stays centred in the room under it */
.timetable-table .activity > .parity__label--long {
    align-self: stretch;
    width: auto;
    margin: -1px -2px auto;
    padding: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}
.timetable-table .activity > .parity__label--long ~ :last-child { margin-bottom: auto; }
.parity__free {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    min-height: 1.6rem;
}
/* the free half's grid: the "—" in the middle column, the sign of either form in the right one, at its top right */
.parity--free .parity__free { grid-column: 2; grid-row: 1; }
.parity--free .parity__label {
    grid-column: 3;
    grid-row: 1;
    position: static;
    justify-self: end;
    align-self: start;
    padding: 1px 3px 0 0;
    text-align: right;
}
/* a long sign wraps inside its column, never wider than it */
.parity--free .parity__label--long { min-width: 0; max-width: 100%; }
/* a short sign on one line, as at the semestru-nou tag, with its automatic minimum width: its column is never narrower
   than it, so it is never cut; its invisible twin (the half's data-free-sign, HalfLabels::freeTwin) keeps the left column
   as wide, so the "—" stays centred; in a column too narrow for both, the table's column grows (as it does for the text
   of the cards, which never wraps either) */
.parity--free .parity__label--short { white-space: nowrap; }
.parity--free[data-free-sign]::after {
    content: attr(data-free-sign);
    grid-column: 1;
    grid-row: 1;
    visibility: hidden; /* only its width: not seen, not read */
    padding: 1px 3px 0 0;
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 14px 2px 0;
    font-size: .85rem;
    color: var(--secondary-text);
}

.legend__item { display: inline-flex; align-items: center; gap: 6px; }

.legend__color {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--type-background);
    border: var(--slot-border-width) solid var(--slot-border);
}

.legend__parity {
    font-size: .7rem;
    padding: 1px 5px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    text-transform: uppercase;
}

/* the modular activities' table */
.modular-table-container {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modular-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .9rem; } /* on phones: horizontal scrolling */
.modular-table th, .modular-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.modular-table thead th { background: #f7f9fc; font-size: .8rem; color: var(--secondary-text); text-transform: uppercase; letter-spacing: .03em; }
/* the grouping by weeks: each week's title row */
.modular-table .modular-week__title th {
    background: var(--light-blue); color: var(--text); font-size: .9rem; font-weight: 700;
    text-transform: none; letter-spacing: 0; border-top: 2px solid #c5d3ee; padding: 7px 10px;
}
.modular-week__days { margin-left: 10px; font-weight: 400; color: var(--secondary-text); }
.modular-week__add { margin-left: 14px; font-size: .85rem; }
.modular-table .modular-week__empty td { color: var(--secondary-text); font-style: italic; }
.modular-table td[rowspan] { border-right: 1px solid var(--border); }
.modular-table--admin tr[data-edit-modular] { cursor: pointer; }
option.wrong-option { color: #b42318; }
.modular-table--admin tr[data-edit-modular]:hover td:not([rowspan]) { background: var(--light-blue); }
.modular-table .date { display: block; color: var(--secondary-text); font-size: .85em; }
/* U14: the public timetables' passed dates (the zones "Activități încheiate" of the modular activities and of "Alte
   activități desfășurate modular", and a batch's passed dates in the modular list): the text and the links grey,
   readable (--secondary-text: about 5.9 : 1 on the rows' white), with the word "încheiată" under the date (not only the
   colour); the types' dots keep their colour; the links (the teacher, the room), grey like the text, are underlined so
   that they still differ from it (WCAG 1.4.1) */
.modular-table tr.modular-past td, .modular-table tr.modular-past a,
.punctual-table tr.modular-past td, .punctual-table tr.modular-past a { color: var(--secondary-text); }
.modular-table tr.modular-past a, .punctual-table tr.modular-past a { text-decoration: underline; }
/* every activity of a list over: on paper (where the zone is left out) a short line says so under the section's title;
   hidden on the screen, like .prepared-semester-print */
.previous-activities-print { display: none; }
.modular-past__mark { display: block; font-size: .8em; font-style: italic; }
/* the zones "Activități încheiate (N)" (_previous-activities.php): closed by default, a native details / summary (a
   click, Enter or Space opens it; screen readers announce the state); its title a touch target of at least 44 px.
   U14b: the zone stands at the top of its section, above the list of the coming activities; opened, a wider gap keeps
   its table apart from that list (whose own header then starts the coming ones), not two tables stuck together */
.previous-activities { margin: 0 0 12px; }
.previous-activities[open] { margin-bottom: 22px; }
.previous-activities__title {
    cursor: pointer; min-height: 44px; padding: 11px 4px; box-sizing: border-box;
    font-weight: 600; color: var(--blue);
}
.previous-activities__title:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.previous-activities[open] > .previous-activities__title { margin-bottom: 8px; }

/* the punctual activities under a teacher's or a room's timetable (non-teaching, on a date) */
.punctual__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.punctual__header .section-title { margin-bottom: 8px; }
.punctual-table-container { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.punctual-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9rem; } /* on phones: horizontal scrolling */
.punctual-table th, .punctual-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.punctual-table thead th { background: #f7f9fc; font-size: .8rem; color: var(--secondary-text); text-transform: uppercase; letter-spacing: .03em; }
.punctual-table tbody tr:last-child td { border-bottom: 0; }
.punctual-table__date { white-space: nowrap; }
.punctual-table .date { color: var(--secondary-text); }
.punctual-table__empty td { color: var(--secondary-text); font-style: italic; }
.punctual-table--editable tr[data-edit-punctual] { cursor: pointer; }
.punctual-table--editable tr[data-edit-punctual]:hover td, .punctual-table--editable tr[data-edit-punctual]:focus td { background: var(--light-blue); }
.modular-table a { text-decoration: none; }
/* in the account: the staff plan column (the same controls as in the timetable's cells) */
.modular-table--editable { min-width: 1100px; }
.modular-table td.modular-staff-plan { width: 250px; padding: 4px 8px; vertical-align: middle; }
.modular-staff-plan .staff-plan { border-top: 0; padding: 0; }

.type-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--type-border);
    vertical-align: baseline;
}

/* the tooltip shown when the mouse passes over an activity */
.activity-tooltip {
    position: fixed;
    z-index: 50;
    max-width: 360px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .2);
    font-size: .85rem;
    pointer-events: none;
}
.activity-tooltip[hidden] { display: none; }
.activity-tooltip__title { display: block; margin-bottom: 6px; font-size: .95rem; }
.activity-tooltip .details { gap: 3px 10px; }
.activity-tooltip .details a { color: inherit; text-decoration: none; }
.activity-tooltip .overlap-note { margin-bottom: 6px; }
.activity-tooltip .overlap-member { margin-top: 6px; padding: 6px 8px; }
.activity-tooltip .overlap-member h3 { font-size: .85rem; }
/* the tooltip copies the details: their buttons only in the dialog */
.activity-tooltip .overlap-actions { display: none; }

/* the details dialog */
.dialog {
    border: 0;
    border-radius: 14px;
    padding: 0;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
    color: var(--text);
}

.dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dialog__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 0; }
.dialog__header h2 { font-size: 1.1rem; margin: 0; }
.dialog__close { font: inherit; font-size: 1.5rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--secondary-text); padding: 0 4px; }
.dialog__content { padding: 12px 18px 18px; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.details dt { color: var(--secondary-text); font-size: .9rem; }
.details dd { margin: 0; }
/* the transition page's long labels (Administrare › Trecerea la semestrul următor): the columns may shrink and the words
   wrap, so the semesters and the procedures' counts never widen the page; on a phone each value sits under its label */
.transition-semesters, .transition-counts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.transition-semesters dt, .transition-semesters dd, .transition-counts dt, .transition-counts dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .transition-semesters, .transition-counts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .transition-semesters dd, .transition-counts dd { margin-bottom: 6px; }
}

.saved-list { list-style: none; margin: 0; padding: 0; }
.saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.saved-list li:last-child { border-bottom: 0; }
.saved-list a { flex: 1; padding: 12px 2px; text-decoration: none; color: var(--text); }
.saved-list a small { display: block; color: var(--secondary-text); }
.saved-list button { font: inherit; font-size: .85rem; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 5px 10px; cursor: pointer; color: #b42318; }

/* ---------- Forms and the teacher's account ---------- */

.narrow-form { max-width: 440px; margin: 0 auto; }
.narrow-form--wide { max-width: 640px; }
/* the login's note (PROMPT-UPDATE-2026-10-26, U2): whom the login is for, in the warnings' red (about 6.6 : 1 on white) */
.login-audience { color: var(--danger); }

.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.field > span { font-size: .9rem; font-weight: 600; }
.field input, .field select, .staff-plan-table select, .number-field {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    width: 100%;
}
.field input:focus, .field select:focus, .staff-plan-table select:focus, .number-field:focus {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    border-color: var(--blue);
}
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { min-width: 150px; }

.primary-button, .secondary-button, .cancel-button, .danger-button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--blue);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.primary-button { background: var(--blue); color: #fff; }
.primary-button:hover { background: var(--blue-hover); color: #fff; }
.secondary-button { background: var(--surface); color: var(--blue); }
.secondary-button:hover { background: var(--light-blue); }
/* outline, without a background: "Renunță…" and "Șterge…" */
.cancel-button { background: transparent; color: var(--cancel); border-color: var(--cancel-border); }
.cancel-button:hover { background: var(--cancel-hover); color: var(--text); }
.danger-button { background: transparent; color: var(--danger); border-color: var(--danger); }
.danger-button:hover { background: var(--danger-hover); }
.cancel-button--small, .danger-button--small { padding: 4px 12px; font-size: .9rem; }
.form .primary-button { align-self: flex-start; }

.text-button {
    font: inherit;
    font-size: .9rem;
    border: 0;
    background: none;
    color: var(--blue);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.text-button--danger { color: var(--danger); }
/* a disabled button (a question that must stay, a form already sent by data-submit-once) looks inactive, without hover */
.primary-button:disabled, .secondary-button:disabled, .cancel-button:disabled, .danger-button:disabled, .text-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.text-button:disabled { text-decoration: none; }
.primary-button:disabled:hover { background: var(--blue); }
.secondary-button:disabled:hover { background: var(--surface); }
.cancel-button:disabled:hover { background: transparent; color: var(--cancel); }
.danger-button:disabled:hover { background: transparent; }
.logout-form { margin: 0; }
.site-header .logout-form .text-button { color: var(--secondary-text); text-decoration: none; padding: 8px 4px; }
.site-header .logout-form .text-button:hover { color: var(--text); }

.form-actions { display: flex; gap: 16px; align-items: center; margin: 16px 0 0; }

.note { color: var(--secondary-text); font-size: .9rem; }

.alert { position: relative; padding: 10px 40px 10px 14px; border-radius: 8px; margin: 0 0 14px; border: 1px solid; }
.alert__close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}
.alert__close:hover, .alert__close:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
.alert--error { background: #fef3f2; border-color: #fda29b; color: #912018; }
.alert--success { background: #ecfdf3; border-color: #75e0a7; color: #085d3a; }
.alert--warning { background: #fffaeb; border-color: #fec84b; color: #7a4d06; }

.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.account-grid .card__subtitle:not(:first-child) { margin-top: 20px; }

.activity-list { list-style: none; margin: 0 0 12px; padding: 0; }
.activity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.activity-list li > div:first-child { display: flex; flex-direction: column; }
.activity-list__actions { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.activity-list__actions form { margin: 0; }

.staff-plan-table select { min-width: 150px; padding: 6px 8px; }
.staff-plan-table .number-field { width: 5.5rem; padding: 6px 8px; }
.staff-plan-table td { vertical-align: middle; }

/* "Contul meu": the editable timetable */
.editable-activity {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: var(--slot-border-width) solid var(--slot-border);
    border-radius: 5px;
    background: var(--type-background);
    overflow: hidden;
}
/* the button takes only the remaining space, so the staff plan below is always visible */
.editable-activity > .activity { border: 0; border-radius: 0; background: transparent; flex: 1 1 auto; height: auto; min-height: 0; }
.parity .editable-activity { border: 0; border-radius: 0; flex: 1; }
.timetable--editable .activity[data-edit] { cursor: pointer; }
.timetable--editable .activity[data-edit]:hover { outline-style: dashed; }

/* the staff plan, the position and the type on a single row, under the activity's data */
.staff-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;
    padding: 0 5px 5px;
    font-size: .75rem;
}
.staff-plan select, .staff-plan input {
    font: inherit;
    min-width: 0;
    padding: 2px 3px;
    border: 1px solid rgba(59, 66, 82, .35);
    border-radius: 4px;
    background: rgba(255, 255, 255, .85);
    color: var(--text);
}
.staff-plan [data-staff-plan="department"] { flex: 1 1 0; }
.staff-plan [data-staff-plan="position"] { flex: 0 0 2.9rem; width: 2.9rem; }
.staff-plan [data-staff-plan="type"] { flex: 0 1 4.3rem; }
.staff-plan--incomplete select, .staff-plan--incomplete input { border-color: #d92d20; background: #fff5f4; }
/* the "salvat ✓" message appears on the next row only while it is shown */
.staff-plan__status { flex-basis: 100%; color: var(--secondary-text); font-size: .7rem; }
.staff-plan__status:empty { display: none; }
.staff-plan__status--ok { color: #067647; }
.staff-plan__status--error { color: #b42318; }
/* a group of overlapping activities (_overlap.php): in a chained group, the name above the staff plan of a kept
   activity other than the one shown; the entry that opens the top one for editing when it is non-teaching (both
   relative to the table's text) */
.overlap-entry { display: block; padding: 2px 5px 0; font-size: .75em; font-weight: 600; text-align: center; white-space: nowrap; }
.overlap-edit {
    display: block; width: 100%; font: inherit; font-size: .75em; text-align: center; white-space: nowrap;
    padding: 1px 5px 4px; border: 0; background: none; color: var(--blue); text-decoration: underline; cursor: pointer;
}
.overlap-edit:hover { color: var(--blue-hover); }
.overlap-edit:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.add-activity {
    width: 100%;
    height: 100%;
    min-height: 2.2rem;
    border: 0;
    background: none;
    color: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none; /* dragging with the mouse selects the interval; on touch screens dragging scrolls the table */
}
.add-activity:hover, .add-activity:focus-visible, .add-activity.selected { background: var(--light-blue); color: var(--blue); }
.add-activity.selected { box-shadow: inset 2px 0 0 var(--blue), inset -2px 0 0 var(--blue); }
.timetable-table td.free:has(.add-activity) { padding: 0; cursor: pointer; user-select: none; }

.faz { margin-bottom: 18px; }
.faz__form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.faz__form label { font-weight: 600; }
.faz__form select {
    font: inherit;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}
.faz__form button { padding: 6px 16px; }
.faz__results { margin: 12px 0 0; }
.account-section { margin-bottom: 24px; }
.account-section__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 10px; }
.account-section__header .note { margin: 0; flex: 1; min-width: 260px; }
.dialog--form { width: min(620px, calc(100vw - 32px)); }

/* the searchable choice lists (searchable-select.js, requirement 17): a search field, and a list that opens over the
   content under it (above it near the screen's bottom; placed by the script), about 5 visible items; the items busy in
   the chosen interval in red */
.choice-host { position: relative; }
.choice__search {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
    max-width: 100%;
}
.choice__search--open { border-radius: 8px 8px 0 0; }
.choice__search--open.choice__search--open-up { border-radius: 0 0 8px 8px; }
.choice__search:disabled { background: var(--light-gray, #f2f4f7); color: var(--secondary-text); cursor: not-allowed; }
.choice__search:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.choice__list {
    position: absolute;
    z-index: 9; /* over the tables' sticky headers, under the menu bar (.site-header) */
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 9.5rem;
    max-width: calc(100vw - 16px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .15);
    font-weight: 400;
    text-align: left;
}
.choice__list[hidden] { display: none; }
.choice__list--up { border-top: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; }
/* placed on the screen (data-choice-placement="fixed"): the narrow cells of a table that scrolls would clip it */
.choice__list--fixed { position: fixed; width: max-content; max-width: min(24rem, calc(100vw - 16px)); }
/* an optgroup's name (e.g. the faculty): a header, not a choice */
.choice__list li.choice__group {
    cursor: default; font-size: .75rem; font-weight: 700; color: var(--secondary-text);
    text-transform: uppercase; letter-spacing: .02em; background: var(--surface); padding-top: 7px;
}
.choice__list li.choice__group:hover { background: var(--surface); }
/* the visible empty choice of an optional field ("(niciunul)") */
.choice__list li.choice__item--empty .choice__name { font-style: italic; color: var(--secondary-text); }
.choice__list li.choice__no-results { cursor: default; font-style: italic; color: var(--secondary-text); }
.choice__list li.choice__no-results:hover { background: none; }
.choice__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 12px;
    padding: 5px 11px;
    cursor: pointer;
    font-size: .9rem;
}
.choice__list li[hidden] { display: none; }
.choice__list li:hover, .choice__list li.active { background: var(--light-blue); }
.choice__list li[aria-selected="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.choice__list li.busy { color: #b42318; font-weight: 700; }
/* a room only booked without a teacher (e.g. "Masterat"): not an activity, often kept for the modular programmes */
.choice__list li.reserved { color: #b54708; }
.choice__list li.reserved .choice__status { font-style: italic; }
.choice__list li.busy:hover, .choice__list li.busy.active { background: #fef3f2; }
.choice__status { margin-left: auto; font-size: .8rem; text-align: right; }
/* the teachers / rooms used for the chosen discipline, put first (with a caption above them and a line after them) */
.choice__list li.suggested { background: #f3f8f1; }
.choice__list li.suggested:hover, .choice__list li.suggested.active { background: var(--light-blue); }
.choice__list li.suggested--last { border-bottom: 1px solid var(--border); }
.choice__list li[data-suggested]::before {
    content: attr(data-suggested);
    flex-basis: 100%;
    font-size: .72rem; font-weight: 400; color: var(--muted, #667085);
}
/* touch screens: items big enough for a finger (the fields' 16px, below the narrow places' rules) */
@media (pointer: coarse) {
    .choice__list li[role="option"] { min-height: 40px; align-items: center; }
}
/* the search fields where the lists sit in narrow places: a timetable cell's staff plan (the field takes the select's
   share of the row; `.staff-plan input` gives it the row's look), a table cell's inline save, the choice of the teacher
   or room above an editable timetable, a column of the timetable's columns editor */
.staff-plan .choice__search { flex: 1 1 0; }
.inline-save .choice__search { flex: 1 1 12rem; max-width: 360px; padding: 6px 10px; }
.resource-choice .choice__search { font-weight: 400; padding: 6px 10px; min-width: min(18rem, 100%); }
.columns-cell .choice__search {
    font-size: .85rem; width: 100%; min-width: 0; flex: 1 1 0; padding: 4px 6px; border-radius: 6px; background: #fff;
}
/* touch screens: every search field at 16px, also in the narrow places above (`.staff-plan input` and the columns
   editor's .85rem would otherwise win, and iOS would zoom the page on the focus); after them, and as specific */
@media (pointer: coarse) {
    .choice-host .choice__search, .staff-plan .choice__search, .columns-cell .choice__search { font-size: 16px; }
}
.delete-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

.file-list { margin: 0; padding-left: 18px; }
.file-list li { margin: 4px 0; }

/* ---------- Administration (D7: the timetable's heavy pages for the desktop; the Administrare hub and the evaluation's
   pages – the codes, the results, the reports, the synthesis – also on a phone) ---------- */

.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-header .subtitle { max-width: 70ch; }
/* the semester the administration works on: always the current one, for information */
.admin-semester { margin: 0; font-size: .9rem; color: var(--secondary-text); }
.admin-semester strong { color: var(--text); }
/* the general administrator chooses the semester (an earlier one for corrections in the past) */
/* the choice shrinks with the page: a closed select is as wide as its longest option (" (pregătit, nepublic)") */
.admin-semester--choice { max-width: 100%; }
.admin-semester--choice label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.admin-semester--choice select { max-width: 100%; min-width: 0; font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
/* while an earlier semester is chosen: on every administration page, with the way back */
.semester-warning { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
/* while the prepared semester is chosen (requirement 11, D4): the band, with the way back; its short line is printed only (S8) */
.prepared-semester-band { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; border-left-width: 6px; }
.prepared-semester-print { display: none; }
/* "Orarele cadrelor" / "Orarele sălilor": the choice of the teacher or room, above the editable timetable */
.resource-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; font-weight: 600; font-size: .9rem; }
.resource-choice select { font: inherit; font-weight: 400; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 18rem; }
.resource-choice .note { font-weight: 400; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
/* Administrare of the administrators of all the faculties (AdministrationHome): titled sections, each a grid of cards */
.admin-sections > .admin-section:first-child > .section-title { margin-top: 4px; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.admin-list li:last-child { border-bottom: 0; }
.admin-list a { font-weight: 600; text-decoration: none; }
.admin-list a:hover { text-decoration: underline; }
.admin-list__count { margin-left: auto; color: var(--secondary-text); font-variant-numeric: tabular-nums; }

/* the tables' toolbar: wraps at every width (the teachers' one, with the role filter, is wider than a laptop's window
   less than about 1100 px wide); its buttons and the count never break inside */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.admin-bar > a, .admin-bar > button, .admin-bar > [data-visible-count] { white-space: nowrap; }
.admin-bar .primary-button { margin-left: auto; }
.admin-search { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.admin-search input { font: inherit; font-weight: 400; width: 320px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
/* the teachers' table (general administrator): the role filter, next to the search */
.admin-search select, .admin-account__role select {
    font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
/* one height for the search and the filter (each browser sizes a select its own way) */
.admin-search input, .admin-search select { height: 2.5rem; }
/* with the filter, a narrower search: the whole toolbar stays on one row from about 1100 px */
@media (min-width: 721px) {
    .admin-bar--with-filter .admin-search input { width: 240px; }
}

.admin-table-container { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-table { border-collapse: collapse; width: 100%; font-size: .85rem; }

/* the faculty administrators' rights: one form per administrator, the specializations' years as checkboxes */
.rights-faculty { margin-bottom: 18px; }
.rights-form { padding: 12px 0; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.rights-form:first-of-type { border-top: 0; }
.rights-form__header { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rights-form__name { font-size: 1rem; margin: 0; }
.rights-form__choices {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 18px;
    border: 0; padding: 0; margin: 0 0 10px; font-size: .9rem;
}
.rights-form__choice { white-space: nowrap; }
.rights-note a { font-weight: 600; }
/* the inactive teachers */
.inactive-teachers__actions { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
/* the cumulated activities' journal */
.journal-search { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.journal-search .field { flex: 0 1 420px; min-width: 240px; margin: 0; }
.journal-table__time { white-space: nowrap; }
.journal-table__label { color: var(--secondary-text); font-size: .9em; }
.journal-table__deleted td { color: var(--danger); }
/* Conturi, roluri și decani: the small forms of a row (a faculty's dean, a department's faculty, a delegation taken back) */
.accounts-roles { margin-bottom: 24px; }
.inline-save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.inline-save select { max-width: 360px; }
.inline-save.sending { opacity: .6; pointer-events: none; }
.field-error { color: var(--danger); }
.admin-table th, .admin-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-table thead th {
    background: #f7f9fc;
    font-size: .75rem;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* the rows that open the add / edit dialog (the editable table, #admin-table) */
.admin-table tbody tr[data-id] { cursor: pointer; }
/* zebra stripes: by position; in the searched tables (the editable one, the administration journal), with JavaScript,
   by the rows left after searching (app.js) */
.admin-table tbody tr:nth-child(even), html.js #admin-table tbody tr.alternate-row,
html.js .admin-table--searchable tbody tr.alternate-row { background: #f1f4f9; }
html.js #admin-table tbody tr:nth-child(even):not(.alternate-row),
html.js .admin-table--searchable tbody tr:nth-child(even):not(.alternate-row) { background: none; }
/* more specific than the zebra stripes, so they also show on the alternate rows; the row the page returned to after
   saving, then the row under the mouse or with the focus */
html.js #admin-table tbody tr[data-id].highlighted { background: var(--yellow); }
.admin-table tbody tr[data-id]:hover, .admin-table tbody tr[data-id]:focus,
html.js #admin-table tbody tr[data-id]:hover, html.js #admin-table tbody tr[data-id]:focus { background: var(--light-blue); }
.admin-table tbody tr[data-id]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* a row to check (e.g. a migration count that differs, a recalculated report) */
.admin-table tr.row--warning td { background: #fffaeb; color: #7a4d06; font-weight: 600; }
.admin-table__id { color: var(--secondary-text); font-variant-numeric: tabular-nums; width: 1%; }
.admin-table__yes-no { text-align: center !important; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
.admin-table__account { white-space: nowrap; }
.account-label, .inactive-label { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.account-label { background: var(--light-blue); color: var(--blue); }
.account-label--delegate { background: #ecfdf3; color: #085d3a; }
.inactive-label { background: #fef3f2; color: #b42318; }

.dialog--admin { width: min(820px, calc(100vw - 32px)); }
.dialog--admin.sending { cursor: progress; }
.dialog--admin.sending form, .dialog--admin.sending .admin-account { opacity: .6; pointer-events: none; }
.admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.admin-fields .field--wide { grid-column: 1 / -1; }
.field__help { color: var(--secondary-text); font-size: .8rem; }
.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.checkbox-field input { width: 18px; height: 18px; }
.form-actions__right { margin-left: auto; }
.admin-account { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.admin-account h3 { margin: 0 0 6px; font-size: 1rem; }
.admin-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.admin-account__role { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.admin-account h3.admin-account__subtitle { margin-top: 18px; }
.admin-account__delegations { list-style: none; margin: 6px 0; padding: 0; }
.admin-account__delegations li { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-weight: 600; }
/* "Schimbă rolul" while the chosen role is the account's own */
.admin-account .secondary-button:disabled { opacity: .45; cursor: not-allowed; background: var(--surface); }

/* the formation timetable editor: the cell selection, the action bar, the activity dialog */
.timetable-editor td.selectable { cursor: cell; }
/* the activity being moved: its cells can be chosen too (e.g. to keep only one of its subgroups) */
.timetable-editor td.moving, .timetable-editor td.moving .activity { cursor: cell; }
.timetable-editor td.moving .activity { outline: 2px dashed var(--error, #c62828); outline-offset: -3px; opacity: .75; }
.timetable-editor td.free.selectable:hover { background: var(--light-blue); }
/* the selection: a semi-transparent red rectangle over the chosen interval × columns (also over the activities of the
   other parity); dashed when the choice cannot be used (the bar says why) */
.timetable-editor .timetable-container { position: relative; }
.selection-mask {
    position: absolute;
    background: rgba(217, 45, 32, .2);
    border: 2px solid #d92d20;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}
.selection-mask--error { background: rgba(217, 45, 32, .08); border-style: dashed; }
/* a dragged activity's place: blue where it can go, red where it cannot, with its name */
.selection-mask--drop {
    background: rgba(37, 99, 235, .18); border: 2px solid var(--blue, #2563eb);
    padding: 2px 6px; overflow: hidden; font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--text);
}
.selection-mask--drop.selection-mask--error { background: rgba(217, 45, 32, .35); border: 2px solid #d92d20; color: #7a271a; }
.selection-mask--drop.selection-mask--same { background: rgba(102, 112, 133, .08); border: 2px dashed #98a2b3; }
.timetable-editor .activity { cursor: grab; }
.timetable-editor .activity.dragged { opacity: .4; }
body.dragging-activity, body.dragging-activity * { cursor: grabbing !important; user-select: none; }
body.dragging-activity--copy, body.dragging-activity--copy * { cursor: copy !important; }
.selection-bar__undo { margin-left: auto; }
/* "Intervale libere": where the activity's formations, teacher and room are all free (under the selection's masks) */
.free-slot {
    position: absolute; z-index: 1; pointer-events: none;
    background: rgba(18, 183, 106, .22); border: 2px solid #12b76a; border-radius: 4px;
}
/* the short hints above the timetable editor (dragging, undoing) */
.editor-tips { margin: 0 0 12px; padding-left: 1.2rem; font-size: .88rem; color: var(--muted, #667085); }
.editor-tips li + li { margin-top: 2px; }
/* requirement 7: what a timetable lacks for a new activity (the modular and the formation editors), in a warning without
   a close button; not printed (.editor-note, below) */
.structure-note { padding-right: 14px; }
.structure-note p { margin: 0; }
.structure-note p + p { margin-top: 6px; }
.selection-bar {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40;
    /* as wide as its content (left: 50% alone would limit it to half of the window), all the buttons on one row */
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: max-content; max-width: calc(100vw - 32px);
    padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18); font-size: .9rem;
}
.selection-bar--error { border-color: #fda29b; color: #912018; }
.timetable-editor__clipboard { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alert--info { background: var(--light-blue); border-color: #c5d3ee; color: var(--text); }
#timetable-activity-dialog { width: min(820px, calc(100vw - 32px)); }
/* the choice among overlapping activities (the editor of a year of study's timetable) */
#timetable-overlap-dialog { width: min(560px, calc(100vw - 32px)); }
.overlap-choices { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.overlap-choice {
    width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; cursor: pointer;
    padding: 10px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
.overlap-choice:hover { border-color: var(--blue); background: var(--light-blue); }
.overlap-choice strong { color: var(--blue); }
.overlap-choice span { font-size: .85rem; color: var(--secondary-text); }
#timetable-activity-dialog.sending { cursor: progress; }
/* requirement 16: "Se aplică la", one box per record of a united activity (its columns, other timetables, staff plan) */
.applies-to { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 4px; margin: 0 0 12px; min-width: 0; }
.applies-to legend { padding: 0 4px; font-weight: 600; font-size: .9rem; }
.applies-to__list { display: flex; flex-direction: column; gap: 6px; }
.applies-to__record { align-items: flex-start; }
.applies-to__record input { flex: none; margin-top: 2px; }
.applies-to__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.applies-to__details { font-size: .8rem; color: var(--secondary-text); }
.applies-to .note { margin: 6px 0 4px; }
/* the weeks of "personalizat" (PROMPT-SAPTAMANI.md, S1): one box per week 1…N, wrapping, never wider than the dialog */
.weeks-boxes { display: flex; flex-wrap: wrap; gap: 4px 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
    margin: 0 0 12px; min-width: 0; }
.weeks-boxes__week { min-width: 3.2em; }
/* the modular editor's two modes (PROMPT-SAPTAMANI.md, S2): one activity (week and date) or a batch (weekday and weeks),
   fieldsets that look like the rows around them */
.dialog-mode { border: 0; margin: 0; padding: 0; min-width: 0; }
.dialog-mode:not(.field-row) { display: flex; flex-direction: column; gap: 14px; }
.dialog-mode .weeks-boxes { margin: 0; }
/* a batch's summary from the server: its lines wrapped, never wider than the dialog */
.batch-summary { margin: 0; min-width: 0; }
.batch-summary p { margin: 0; }
.batch-summary__section { margin: 8px 0 0; }
.batch-summary__title { font-weight: 600; }
.batch-summary__list { margin: 4px 0 0; padding-left: 20px; min-width: 0; overflow-wrap: anywhere; }
/* a dialog's buttons that wrap on a narrow screen (the modular editor: up to five buttons) */
.form-actions--wrap { flex-wrap: wrap; }
.form-actions--wrap .form-actions__right { flex-wrap: wrap; }
/* Administrare › Săptămâni scrise doar în text (W22): a pair's two activities side by side (one under the other on a
   narrow screen), the texts of "Alte informații" wrapped, never cut */
.weeks-in-text__pair { border-top: 1px solid var(--border); padding: 16px 0 8px; }
.weeks-in-text__pair-title { font-size: 1rem; margin: 0 0 8px; }
.weeks-in-text__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 24px; }
.weeks-in-text__side { min-width: 0; }
.weeks-in-text__activity, .weeks-in-text__current { margin: 0 0 8px; }
.weeks-in-text__text { overflow-wrap: anywhere; }
.weeks-in-text__subtitle { font-size: 1rem; margin: 16px 0 8px; }
.field--choice { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* the width is shared only on rows with two fields (in the form, which is a column, it would become height) */
.field-row .field--choice { flex: 1 1 300px; }
.field-row--choices { align-items: flex-start; }
.field-row .field--wide { flex: 1 1 320px; }
.form-actions__right { display: inline-flex; gap: 8px; margin-left: auto; }

/* the overlap report: a group of overlapping activities = a <tbody>, separated from the next one */
.overlaps__sections { margin: 0 0 16px; }
.overlaps { margin-bottom: 20px; }
.overlap-table tbody.overlap-group { border-top: 2px solid var(--border); }
.overlap-table tbody.overlap-group th { text-align: left; vertical-align: top; font-weight: 600; }
.overlap-table td { vertical-align: top; }
.overlap-table__time { white-space: nowrap; }
/* no zebra inside a group (its name and day span the rows): every second group is tinted instead */
.overlap-table tbody tr:nth-child(even) { background: none; }
.overlap-table tbody.overlap-group:nth-of-type(even) { background: #f1f4f9; }
@media (max-width: 720px) {
    /* on phones a group is a card: the resource on its first line, then one line per activity (day · interval · weeks · …) */
    .overlap-table thead { display: none; }
    .overlap-table, .overlap-table tbody.overlap-group, .overlap-table tr { display: block; }
    .overlap-table tbody.overlap-group { padding: 8px 10px; }
    .overlap-table tr { padding: 3px 0; background: none !important; }
    .overlap-table tr > * { display: inline; padding: 0; border: 0; }
    .overlap-table td:empty { display: none; }
    .overlap-table td + td::before { content: ' · '; color: var(--secondary-text); }
    /* the card's first line: "Name · Day" (a group is one resource on one day), then one line per activity */
    .overlap-table tbody.overlap-group th { display: inline; margin: 0; }
    .overlap-table td.overlap-table__day { font-weight: 600; }
    .overlap-table td.overlap-table__day::before { content: ' · '; color: var(--secondary-text); font-weight: 400; }
    .overlap-table td.overlap-table__day::after { content: '\A'; white-space: pre; }
    .overlap-table td.overlap-table__day + td::before { content: none; }
}
.overlaps__shared { margin-top: 14px; }
.overlaps__shared summary { cursor: pointer; color: var(--secondary-text); font-size: .9rem; margin-bottom: 8px; }

/* the timetable columns editor */
.admin-list__highlighted { flex-wrap: wrap; }
.admin-list__highlighted .note { flex-basis: 100%; } /* every description on its own line, under its link */
.timetable-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.timetable-list-grid .pill-list a { font-size: .85rem; padding: 4px 10px; }
/* the name, the year and "Vezi orarul salvat": on one row while they fit, the link under them on a phone (the page
   never scrolls sideways) */
.columns-editor__name { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.columns-editor__name .field { flex: 0 0 220px; }
.columns-editor__name .columns-editor__year { flex-basis: 70px; }
.columns-editor__container { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.columns-editor__grid { display: grid; gap: 4px; align-items: stretch; width: max-content; position: relative; }
/* where a dragged subgroup will go: a vertical bar between two columns, with the group and the final position */
.columns-insert-marker {
    position: absolute;
    width: 4px;
    margin-left: -2px;
    background: var(--blue);
    border-radius: 2px;
    pointer-events: none;
    z-index: 3;
}
.columns-insert-marker[hidden] { display: none; }
.columns-insert-marker::before, .columns-insert-marker::after {
    content: "";
    position: absolute;
    left: -4px;
    border: 6px solid transparent;
}
.columns-insert-marker::before { top: -6px; border-top-color: var(--blue); }
.columns-insert-marker::after { bottom: -6px; border-bottom-color: var(--blue); }
.columns-insert-marker__label {
    position: absolute;
    top: 2px;
    left: 8px;
    white-space: nowrap;
    background: var(--blue);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
/* at the end of a group the label stays on the group's side, to the left of the bar */
.columns-insert-marker--end .columns-insert-marker__label { left: auto; right: 8px; }
.columns-insert-marker--invalid { background: #d92d20; }
.columns-insert-marker--invalid::before { border-top-color: #d92d20; }
.columns-insert-marker--invalid::after { border-bottom-color: #d92d20; }
.columns-insert-marker--invalid .columns-insert-marker__label { background: #d92d20; }
.columns-label { position: sticky; left: -10px; z-index: 2; background: var(--surface); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: .75rem; font-weight: 600; color: var(--secondary-text); text-transform: uppercase; }
.columns-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f7f9fc;
}
.columns-cell--specialization { background: var(--light-blue); border-color: #c5d3ee; }
.columns-cell--new { outline: 2px solid #3fae6a; outline-offset: -2px; }
.columns-cell.drop-target { outline: 2px dashed var(--blue); outline-offset: -2px; background: #fff; }
.columns-handle { cursor: grab; color: var(--secondary-text); font-size: 1rem; padding: 0 2px; user-select: none; }
.columns-handle:active { cursor: grabbing; }
.columns-text { font-weight: 600; flex: 1; }
.columns-select, .columns-input { font: inherit; font-size: .85rem; width: 100%; min-width: 0; flex: 1 1 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); }
.columns-input { font-weight: 600; text-align: center; }
.columns-input--suffix { flex: 1 1 0; max-width: 3rem; }
.columns-cell { min-width: 0; overflow: hidden; }
.columns-button { font: inherit; line-height: 1; border: 0; background: none; cursor: pointer; padding: 3px 5px; border-radius: 6px; font-size: 1rem; }
.columns-button--add { color: var(--blue); font-weight: 700; }
.columns-button--remove { color: #b42318; }
.columns-button--add:hover { background: #fff; }
.columns-button--remove:hover { background: #fef3f2; }
.columns-button--remove:disabled { color: #b42318; opacity: .3; cursor: not-allowed; background: none; }
.columns-button--end { border: 1px dashed var(--blue); color: var(--blue); font-size: .85rem; font-weight: 600; }
.columns-button--end.drop-target { background: var(--light-blue); }
.columns-editor__messages { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.columns-message { padding: 8px 12px; border-radius: 8px; font-size: .9rem; border: 1px solid var(--border); background: var(--surface); }
.columns-message--error { background: #fef3f2; border-color: #fda29b; color: #912018; }
.columns-message--warning { background: #fffaeb; border-color: #fec84b; color: #7a4d06; }
.columns-editor__actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; margin-top: 16px; }
.columns-editor__actions .note { margin-right: auto; }
.columns-editor.has-changes [data-columns-status] { color: #b54708; font-weight: 600; }
.columns-editor.sending { cursor: progress; opacity: .7; pointer-events: none; }

/* tablets and small laptops: the menu on its own row, under the logo, "Vezi ca" and "Ieșire"; "Contul meu" is a link to
   /cont and its entries are tabs on its pages (decision Î12) */
@media (max-width: 1100px) {
    .site-header__inner { flex-wrap: wrap; }
    .menu { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .menu__group { --submenu-mode: tabs; }
    .menu__submenu { display: none !important; }
    .account-tabs { display: inline-flex; }
}

/* ---------- Phones ---------- */

@media (max-width: 720px) {
    .site-header__inner { padding: 8px 12px; gap: 8px; }
    /* the logo fills what "Ieșire" leaves on the first row: a long line under it (a semester with a section and the
       week's parity) wraps inside it, "Ieșire" stays next to it; the archive's semester on its own row (it would
       squeeze the logo) */
    .brand { flex: 1 1 0; min-width: 0; }
    .brand__text small { text-wrap: balance; }
    .period-selector { flex: 1 1 100%; }
    /* the menu on two rows if needed: every item stays visible (a strip that scrolled sideways hid the last ones) */
    .menu {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 2px 4px;
    }
    .menu a { padding: 6px 9px; font-size: .95rem; }
    .period-selector select { max-width: 150px; }
    /* "Vezi ca": a row of its own, as wide as the screen, so the chosen role can be read */
    .role-selector { order: 2; flex: 1 1 100%; }
    .period-selector.role-selector select { max-width: none; width: 100%; }
    /* the faculty of a "Vezi ca" view on a faculty: on its own row of the banner */
    .role-view-faculty { display: block; margin: 6px 0 0; }
    /* the tables' toolbar: the search and the filter each on its own row, aligned, the buttons below them (they were
       pushed off the screen) */
    .admin-search { flex: 1 1 100%; }
    .admin-search > span { min-width: 3.2em; }
    .admin-search input { width: 100%; min-width: 0; }
    .admin-search select { flex: 1 1 auto; min-width: 0; }
    /* a box with more to its right (app.js): its right edge fades, a sign that it scrolls sideways */
    .scrolls-right {
        /* narrow and light: what is under it stays readable (app.js removes it once scrolled to the end) */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), rgba(0, 0, 0, .45));
        mask-image: linear-gradient(to right, #000 calc(100% - 20px), rgba(0, 0, 0, .45));
    }
    /* the wide activities (a course of several groups): the text from their left edge, visible without scrolling */
    .timetable-table .activity { align-items: flex-start; text-align: left; }
    .timetable-table .activity > span { text-align: left; }
    .content { padding: 16px 12px 32px; }
    .page-title { font-size: 1.3rem; }
    .tabs__buttons { display: flex; width: 100%; }
    .tabs__buttons button { flex: 1; padding: 8px 6px; }
    .account-tabs { display: flex; width: 100%; }
    .account-tabs a { flex: 1; padding: 8px 6px; text-align: center; }
}

@media print {
    /* the screen's frame stays off the paper: the whole top bar (logo, semester and week, the menu with "Contul meu"'s
       list, "Vezi ca", "Ieșire"), the banners ("Vezi ca" with the faculty's choice, the archive, the trial), the tabs of
       "Contul meu"'s pages (requirement 6), the footer, the page's actions and breadcrumbs; the page's title names the
       timetable */
    .site-header, .site-header .menu, .menu__submenu, .account-tabs, .period-selector, .logout-form, .alert__close, .footer, .archive-banner,
    .role-view-banner, .role-view-faculty, [data-trial-banner], .actions, .breadcrumbs { display: none !important; }
    /* "Contul meu" and the administration's editable timetables (decision Î4): only the timetable is printed, without
       the staff plans' controls (and the names above them), "Modifică", the add buttons ("+" in the free cells,
       "+ Altă activitate săptămânală", "+ Altă activitate modulară" and its note), the FAZ, the account's lasting warning, the
       teacher's / room's choice, the page's messages, the earlier semester's warning and, in the S4 window, the previous
       semester's punctual activities (requirement 11: only the current timetable is printed); on "Setările mele" only its
       forms (the phone, the password: .account-form), the account's data (name, email) being the page's content;
       in the formations' and the modular editors: the bottom bar ("↶ Anulează ultima operație", fixed: it would be
       printed on every page), the hints and the editors' notes, the copied activity's banner, the rights' note, the
       modular editor's bar ("+ Activitate nouă") and its weeks' "+ Activitate"; on the public timetables the zones of the
       activities over, "Activități încheiate" (U14: the modular ones and those of "Alte activități desfășurate modular") */
    .staff-plan, .overlap-entry, .overlap-edit, .add-activity, [data-add-activity], [data-add-punctual], .punctual > .note,
    .account-section__header, .faz, .account-form, .account-notice, .resource-choice, .semester-warning, [data-page-message],
    .modular-staff-plan, .modular-staff-plan-heading, .selection-bar, .editor-tips, .editor-note, .timetable-editor__clipboard,
    .rights-note, .modular-editor__bar, [data-add-modular], .prepared-semester-band, .punctual--previous, .previous-activities { display: none !important; }
    /* the title of "Contul meu" and of the administration's teachers' timetables (PROMPT-CONTACT-ORAR.md, C8 a): the email
       or the phone the person does not let be shown publicly stays on screen, with its note, but not on paper (the hidden
       item carries its comma; with both hidden, the whole parentheses) */
    .private-contact { display: none !important; }
    /* the prepared semester's short line (S8): on paper only, so a draft is never taken for the public timetable */
    .prepared-semester-print { display: block !important; margin: 0 0 8px; font-weight: 700; }
    /* U14: every activity of a list over (its zone left out): the line saying so, so the section's title is not alone */
    .previous-activities-print { display: block !important; margin: 0 0 8px; }
    /* an editable page's empty list of punctual activities ("Nicio activitate.", left out of the public pages too); in a
       rule of its own: a browser without :has() drops the whole rule it is in */
    .punctual:has(.punctual-table__empty) { display: none !important; }
    /* the root too: its grey would fill the rest of the second page and of the next ones (background graphics on) */
    :root, body, .content { background: #fff; }
    .content { max-width: none; padding: 0; }
    .card, .timetable-container, .modular-table-container, .admin-table-container, .punctual-table-container {
        box-shadow: none; border: 0; overflow: visible; max-height: none;
    }
    .timetable-table .hour-column, .timetable-day__name { position: static; }
    .floating-header, .floating-scrollbar, .timetable-zoom-reset { display: none !important; }
    /* 11.2pt (orar-03: 8.5pt + 20%, then + 10%) with the 1.1 line spacing, not less (the diacritics above and below
       touch between rows); a card with many text rows can make its rows taller. As in orar-03, the table keeps the
       screen's rules otherwise (the rows do not wrap, the columns keep their minimum width): a year's timetable wider
       than an A4 portrait page is shrunk by the browser (Chrome: at most 1.5 times; what is still wider is cut off) */
    .timetable-table, .modular-table { font-size: 11.2pt; line-height: 1.1; min-width: 0 !important; }
    /* the pages with a weekly timetable (the days side by side: a room's, a teacher's, a subgroup's, "Contul meu", the
       administration's teachers' and rooms' timetables) on an A4 landscape page (decision Î2; Chrome, Edge, recent
       Firefox; elsewhere the orientation is chosen in the print dialog); the years' timetables stay in portrait */
    body:has(.timetable-table--weekly) { page: weekly-landscape; }
    .timetable-table { zoom: 1 !important; } /* the printout ignores the size chosen by pinching */
    /* the types' colours are printed too (browsers leave out the backgrounds by default); in the editable timetables
       the colour is the card's container's (.editable-activity), the button inside it being transparent */
    .activity, .editable-activity, .legend__color, .type-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .timetable-day { break-inside: avoid; }
    /* a portrait page is narrow enough for the phone rules: the right edge of the boxes wider than the screen is not faded */
    .scrolls-right { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- the evaluation by students */

/* the questionnaire: for the phone first */
.evaluation { max-width: 760px; margin: 0 auto; }
/* at the window's top while scrolling: the time left stays visible (the site header does not stay there on this page,
   it would cover the timer) */
body:has(.evaluation-timer) .site-header { position: static; }
.evaluation-timer { position: sticky; top: 0; z-index: 11; display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: 12px; background: var(--light-blue); border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; }
.evaluation-timer--warning { background: var(--yellow); }
.evaluation-activity { font-size: 1.15rem; margin: 0 0 4px; }
.evaluation-activity small { display: block; color: var(--secondary-text); font-size: .9rem; font-weight: 400; }
.evaluation-question { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--border); }
.evaluation-question legend, .evaluation-question > .evaluation-question__text { font-weight: 600; margin-bottom: 8px; padding: 0; }
.evaluation-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
.evaluation-scale label { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; background: var(--surface); text-align: center; line-height: 1.1; }
.evaluation-scale input { position: absolute; opacity: 0; pointer-events: none; }
.evaluation-scale label:has(input:checked) { border-color: var(--blue); background: var(--light-blue); box-shadow: inset 0 0 0 1px var(--blue); }
.evaluation-scale label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.evaluation-scale .emoji { font-size: 1.4rem; }
.evaluation-scale .mark { font-weight: 700; }
.evaluation-scale .no-answer { font-size: .75rem; }
.evaluation-legend { font-size: .85rem; color: var(--secondary-text); margin: 6px 0 0; }
.evaluation-motivation { margin-top: 8px; }
.evaluation-motivation[hidden] { display: none; }
.evaluation-choices { display: flex; flex-direction: column; gap: 6px; }
.evaluation-choices label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.evaluation textarea { width: 100%; min-height: 70px; }
.evaluation-notes { font-size: .85rem; color: var(--secondary-text); }
.evaluation-remaining { padding-left: 18px; }
.evaluation-code input { font-size: 1.4rem; letter-spacing: .15em; text-transform: uppercase; text-align: center; }

/* the codes: printed on a sheet, cut out, one per student */
.code-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; margin-top: 12px; }
.code-sheet__item { border: 1px dashed var(--cancel-border); padding: 14px 8px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .1em; }
.code-sheet__item small { display: block; font-family: inherit; font-size: .7rem; letter-spacing: 0; color: var(--secondary-text); }
.code-sheet__item small + small { overflow-wrap: anywhere; } /* the page's address, on each code */
.code-single { font-family: ui-monospace, Consolas, monospace; font-size: 2.6rem; letter-spacing: .2em; text-align: center; padding: 24px 0 8px; }
.code-single__address { text-align: center; margin-top: 0; }
/* a trial code (13.1, T3): "PROBĂ" above the code, on the printed sheet and on the screen */
.code-sheet__trial { display: block; font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .2em; }
.code-single__trial { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: .3em; margin: 16px 0 0; }

/* the results */
.result-score { font-size: 1.6rem; font-weight: 700; }
.rating { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 6px; font-weight: 700; text-align: center; background: var(--light-blue); }
.rating--FB { background: #d1fadf; } .rating--B { background: #e0f2fe; } .rating--S { background: var(--yellow); }
.rating--NS { background: #fee4e2; } .rating--FE, .rating--EN { background: #f2f4f7; color: var(--secondary-text); }
.distribution { width: 100%; border-collapse: collapse; font-size: .9rem; }
.distribution th, .distribution td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.distribution th:first-child, .distribution td:first-child { text-align: left; }
/* the answers' distribution scrolls sideways on its own (not an .admin-table-container: it would widen the page) */
.distribution-scroll { overflow-x: auto; }
/* a report table that scrolls inside its own box on a phone (without the page-widening rules of .admin-table-container) */
.table-scroll { overflow-x: auto; }
.free-texts { padding-left: 18px; }
.free-texts li { margin-bottom: 4px; }
/* the filters and the short forms: the fields side by side (also when the element is a .form, which is a column),
   each at least 200px wide, so on a phone they go one under the other instead of being squeezed */
.report-filters, .form.report-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.report-filters .field { margin: 0; flex: 1 1 200px; }
.report-filters > .primary-button, .report-filters > .secondary-button { align-self: flex-end; }
/* a value shown like a field (label above), when there is nothing to choose */
.report-filters .field--static { flex: 0 0 auto; }
.field__value { padding: 10px 0; }
.report-sign { margin-top: 32px; }
/* Administrare › Evaluare: the open period's "Închide" next to its state (on phones the last columns are off-screen) */
.period-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
/* Administrare › Evaluare: a checkbox in a form's row (the confirmation of an older semester), as tall as the fields */
.report-filters__check { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-height: 44px; margin: 0; }
.question-table tbody tr { cursor: default; }
@media (max-width: 720px) {
    /* the questions as a list: number · questionnaire · category · answer, the text under them */
    .question-table thead { display: none; }
    .question-table, .question-table tbody, .question-table tr { display: block; }
    .question-table tr { padding: 8px 10px; border-bottom: 1px solid var(--border); }
    .question-table td { display: inline; padding: 0; border: 0; color: var(--secondary-text); }
    .question-table td:not(:first-child):not(.question-table__text)::before { content: ' · '; }
    .question-table td.question-table__text, .question-table td:only-child { display: block; margin-top: 4px; color: inherit; }
    /* the periods the same way: semester · faculty · state (with "Închide") · the dates, when known */
    .period-table td:first-child { color: inherit; }
    .period-table .period-state { display: inline-flex; vertical-align: middle; }
    .period-table td.is-empty { display: none; }
    .question-table.period-table td[data-label]::before { content: ' · ' attr(data-label) ' '; }
}

@media print {
    .evaluation-timer, .report-filters, .no-print { display: none !important; }
    .code-sheet__item { break-inside: avoid; }
    .rating { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* the ratings' colours */
}
/* ---------- The page "Despre" (/despre): the application's history as a vertical timeline ---------- */

/* the footer's link to it (not in the menu): never broken across lines; on a phone, on its own line */
.footer__separator { margin: 0 6px; }
.footer a { white-space: nowrap; }

.history-intro { color: var(--secondary-text); max-width: 70ch; margin: 0 0 24px; }
/* the note on the administration (W12): one paragraph after the timeline, outside its list, like the intro */
.history-note { color: var(--secondary-text); max-width: 70ch; margin: 24px 0 0; }
/* the year on the left, a line with a dot per stage, the stage's card on the right; the line runs from the first dot's
   centre to the last one's: a segment under each stage but the last, down to the next dot's centre (the 20px between
   the stages + the dot's centre, 27px) */
.history { list-style: none; margin: 0; padding: 0; }
.history__stage { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 40px; }
.history__stage + .history__stage { margin-top: 20px; }
.history__stage::before {
    content: ''; position: absolute; left: 77px; top: 20px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--blue); z-index: 1;
}
.history__stage:not(:last-child)::after {
    content: ''; position: absolute; left: 83px; top: 27px; bottom: -47px; width: 2px;
    background: var(--border);
}
.history__year {
    padding-top: 14px; text-align: right; font-size: 1.15rem; font-weight: 700; color: var(--blue);
    font-variant-numeric: tabular-nums;
}
.history .history__card { margin-top: 0; min-width: 0; }
.history__title { font-size: 1.05rem; margin: 0 0 14px; }
/* the people side by side while they fit, each at least 240px wide */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 20px; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* the round photo (the files are 240×240) or, only as a fallback for a missing one, the initials in a circle of the same size */
.person__photo {
    flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--light-blue);
}
.person__initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--light-blue); color: var(--blue); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
}
.person__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.person__name { font-weight: 600; }
.person__role { color: var(--secondary-text); font-size: .9rem; }
@media (max-width: 720px) {
    /* on a phone, one column: the line and the dots on the left edge (the dot's centre at 11px), the year above its card */
    .footer__separator { display: none; }
    .footer a { display: table; margin: 4px auto 0; }
    .history__stage { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
    .history__stage::before { left: 0; top: 4px; }
    .history__stage:not(:last-child)::after { left: 6px; top: 11px; bottom: -31px; }
    .history__year { padding-top: 0; margin-bottom: 6px; text-align: left; }
    .people { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The page "Suport tehnic" (/suport, requirement 14): a card per role, side by side while they fit ---------- */
.support-intro { color: var(--secondary-text); max-width: 70ch; margin: 0 0 24px; }
/* at most two columns (each at least 300 px and at least half the grid), one on a narrow screen; "Suport General"
   (PROMPT-UPDATE-2026-10-26.md, U6) on its own row, the grid's whole width, under the other two ("mai jos") */
.support { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - 20px) / 2))), 1fr)); gap: 20px; align-items: start; }
.support > .card { margin-top: 0; min-width: 0; }
.support > .support__section--general { grid-column: 1 / -1; }
.support__title { font-size: 1.05rem; margin: 0 0 12px; }
.support__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.support__person { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.support__name { font-weight: 600; }
/* the address is selectable text, not a link; a long one breaks anywhere on a phone instead of widening the page */
.support__email { overflow-wrap: anywhere; user-select: text; }
.support__fallback { margin: 0; }

/* the named page of the weekly timetables' printout (the print rules above: body:has(.timetable-table--weekly)) */
@page weekly-landscape { size: A4 landscape; }

/* ---- Administrare › Calendarul anului (requirement 12: templates/admin/calendar-years.php, calendar-editor.php,
   js/calendar-editor.js): the years' table, the editor's rows (one line on a desktop, stacked on a phone), the parts'
   states, the refusals and the preview */
.calendar-years__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calendar-years__actions form { margin: 0; }
.calendar-years__refusal { flex-basis: 100%; margin: 0; }
/* the hidden "Acțiuni" header (.visually-hidden is absolute): kept inside the table's scrolling box, never widening the page */
.calendar-years th { position: relative; }
.calendar-new-year { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.calendar-new-year .field { flex: 0 1 260px; }
.calendar-modified { margin: 0 0 14px; }
.calendar-lock .alert { margin-bottom: 12px; }
.calendar-part__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.calendar-part__state { font-size: .9rem; color: #7a4d06; background: #fffaeb; border: 1px solid #fec84b; border-radius: 999px; padding: 2px 10px; }
.calendar-part__state--done { color: #085d3a; background: #ecfdf3; border-color: #75e0a7; }
.calendar-part__title { font-size: .95rem; margin: 18px 0 6px; }
.calendar-part.is-sending { opacity: .7; }
.calendar-rows { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.calendar-rows:empty { display: none; }
.calendar-row {
    display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.calendar-row[data-locked] { background: #fffaeb; border-color: #fec84b; }
.calendar-row .field { flex: 0 1 170px; }
.calendar-row .calendar-row__wide { flex: 1 1 260px; }
/* the semester's list: wide enough for "— (fără activitate didactică)" on a desktop (the phone's rule below wins) */
.calendar-row .calendar-row__semester { flex: 0 1 250px; }
.calendar-row input:disabled, .calendar-row select:disabled { background: #f2f4f7; color: var(--secondary-text); }
.calendar-row__buttons { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.calendar-row__lock, .calendar-row__hint { flex-basis: 100%; margin: 0; }
.calendar-row__hint { color: var(--danger); }
.calendar-hours { max-width: 220px; }
.calendar-errors { margin: 10px 0 0; padding-left: 20px; color: var(--danger); }
.calendar-errors:empty { display: none; }
.calendar-errors__intro { list-style: none; margin-left: -20px; font-weight: 600; }
.calendar-part__actions { flex-wrap: wrap; }
.calendar-preview__output { margin-top: 12px; }
.calendar-preview__table { max-width: 640px; }
@media (max-width: 720px) {
    /* on a phone: each row's fields stacked, the buttons on their own line, no horizontal scroll */
    .calendar-row { flex-direction: column; align-items: stretch; }
    .calendar-row .field, .calendar-row .calendar-row__wide { flex: 1 1 auto; width: 100%; }
    .calendar-row__buttons { margin-left: 0; flex-wrap: wrap; }
    .calendar-new-year .field { flex: 1 1 100%; }
    .calendar-hours { max-width: none; }
}

/* ---- The user manuals (requirement 22: templates/manual/, /manual and /manual/<slug>): the list (the own manual
   first, marked), a manual's text at a reading width, its numbered steps, the frequent questions and the quoted labels
   of the interface (View::uiLabel()) */
.manual-intro { color: var(--secondary-text); max-width: 70ch; margin: 0 0 20px; }
.manual-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.manual-list > .card { margin-top: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.manual-list__link { font-weight: 600; }
.manual-list__item--own { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.manual-list__own { font-size: .85rem; color: var(--blue); background: var(--light-blue); border-radius: 999px; padding: 1px 8px; }
.manual-note { margin-top: 16px; }
.manual-back { margin: 0 0 8px; }
.manual { max-width: 80ch; }
.manual__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.manual-summary { margin: 0 0 20px; }
.manual h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.manual h3 { font-size: 1rem; margin: 16px 0 4px; }
.manual-steps { padding-left: 24px; margin: 0; }
.manual-steps li { margin-bottom: 6px; line-height: 1.45; }
.manual-faq__item p { margin: 0 0 8px; line-height: 1.45; }
.ui-label { font-weight: 600; }
@media print {
    /* on paper: the title and the text only (the menu, the footer and the banners are already left out above, the link
       back to the list and the print button by .no-print); the steps and the questions not broken across pages where
       possible, a heading never alone at a page's bottom */
    .manual { max-width: none; }
    .manual h2, .manual h3 { break-after: avoid; }
    .manual-steps, .manual-steps li, .manual-faq__item { break-inside: avoid; }
    .manual a { color: inherit; text-decoration: none; }
    .manual-list__item--own { box-shadow: none; }
}

/* ---- "Contul meu › Evaluarea mea": the zone of the chosen semester's details (results.php, #detalii-semestru,
   PROMPT-SEMESTRE-TEST S3), opened by the results of "Evaluarea anuală". It holds several cards (their spacing comes
   from "* + .card"), so it takes a card's top margin itself. Its start stays under the fixed header: the header's
   height measured by app.js (--site-header-height), or, without the script, one that covers a header on two rows
   (the menu under the logo, on a tablet, a phone or at a 200% zoom). The focus put there by app.js shows no outline;
   one, discreet, only for the keyboard. On a page just loaded the browsers count a script's focus as :focus-visible,
   so app.js marks that focus (.semester-details--quiet-focus, until the zone's blur or the first key pressed) and the
   mark keeps the outline away. */
.semester-details { margin-top: 16px; scroll-margin-top: calc(var(--site-header-height, 120px) + 12px); }
.semester-details:focus { outline: none; }
.semester-details:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; border-radius: var(--radius); }
.semester-details.semester-details--quiet-focus:focus-visible { outline: none; }

/* ---- The password's eye (_password-field.php, PROMPT-SEMESTRE-TEST S4): a button in the field's right end, over its
   inner margin, 44 px wide and as tall as the field (the fields keep their height: a padding of 9 px, a border of
   1 px and the page's line, 1.45, of the inherited font). Its touch zone grows invisibly a few pixels outside it
   (::before). Only the outline of the eye, thin, grey (the secondary text, at least 3:1), blue under the mouse and at
   the focus; the crossed eye while the password is shown (aria-pressed). The focus has an outline of its own, drawn
   inside the button (it stays within the field), the system's colour in the forced colours (high contrast). The room
   kept on the field's right, for the button and for the icons that Safari's autofill or the password extensions put
   inside the field, only with the script (without it the button stays hidden and the field is as before). */
.password-field { position: relative; }
.password-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44px;
    height: calc(1.45em + 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: none;
    color: var(--secondary-text);
    font: inherit;
    line-height: 1.45;
    cursor: pointer;
}
.password-toggle::before { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: 0; }
.password-toggle:hover, .password-toggle:focus { color: var(--blue); }
.password-toggle:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.password-toggle__icon { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.password-toggle[aria-pressed="true"] .password-toggle__icon--show,
.password-toggle:not([aria-pressed="true"]) .password-toggle__icon--hide { display: none; }
html.js .password-field input { padding-right: 48px; }
@media (forced-colors: active) {
    .password-toggle { color: ButtonText; }
    .password-toggle:hover, .password-toggle:focus { color: Highlight; }
    .password-toggle:focus { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* Edge's own eye in the password fields: not shown, so a field never has two (a rule of its own: a pseudo-element
   unknown to a browser makes it drop the whole rule, with every other selector in it) */
input::-ms-reveal { display: none; }

/* The file's last rule: the page checks it (layout.php) and loads the stylesheet again if it arrived incomplete
   (e.g. read while it was being copied onto the server). It must stay at the end. */
:root { --stylesheet-complete: 1; }