/* Design tokens: brand navy + action pink, plus neutral surfaces. */ :root { --navy: #335888; --navy-dark: #2a4a72; --navy-soft: rgba(51, 88, 136, 0.08); --navy-ring: rgba(51, 88, 136, 0.18); /* Opaque equivalent of --navy-soft over white, for sticky table headers so scrolling rows don't show through. */ --navy-tint: #eef2f7; --pink: #f3177e; --pink-dark: #cf1069; --pink-ring: rgba(243, 23, 126, 0.22); --bg: #f4f6f9; --surface: #ffffff; /* Pannelli annidati dentro una section (form azioni, riepilogo override, ecc.): leggermente diversi da --surface così restano distinguibili dalla card che li contiene, anche se entrambi "bianchi". */ --surface-nested: #fafbfc; --text: #2b2f36; --text-muted: #6b7280; --border: #e5e9f0; --radius: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(28, 42, 71, 0.06); --shadow-md: 0 6px 18px rgba(28, 42, 71, 0.08); --transition: 0.18s ease; } /* Tema scuro: stessi token, valori ricalibrati per una base scura. Attivato mettendo data-theme="dark" su (vedi toggleTheme in store.ts). Le varianti "-dark" (usate per gli stati hover) qui sono più CHIARE della base, non più scure: su fondo scuro un hover che schiarisce si legge meglio di uno che scurisce ulteriormente. */ :root[data-theme='dark'] { --navy: #7fa8e0; --navy-dark: #a0c2ee; --navy-soft: rgba(127, 168, 224, 0.16); --navy-ring: rgba(127, 168, 224, 0.35); --navy-tint: #202a3d; --pink: #ff4f93; --pink-dark: #ff7db0; --pink-ring: rgba(255, 79, 147, 0.35); --bg: #12151b; --surface: #1a1f29; --surface-nested: #222834; --text: #e6e9ef; --text-muted: #9aa3b5; --border: #2b3140; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #root { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; } /* Admins have the wide schedule grid: reduce x margins by widening the content area and trimming horizontal padding. */ #root.role-admin { max-width: 1600px; padding-left: 0.5rem; padding-right: 0.5rem; } /* Forms */ form { background: var(--surface); padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .login-error { color: #d9534f; margin-top: 1rem; } label { display: block; font-weight: 500; margin-bottom: 0.5rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--text); transition: border-color var(--transition), box-shadow var(--transition); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-ring); } textarea { resize: vertical; min-height: 80px; } /* Buttons */ button, input[type="button"], input[type="submit"] { padding: 0.7rem 1.6rem; background: var(--pink); color: white; border: none; border-radius: var(--radius-pill); cursor: pointer; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; box-shadow: var(--shadow-sm); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } button:hover, input[type="submit"]:hover { background: var(--pink-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } button:active, input[type="submit"]:active { transform: translateY(0); box-shadow: var(--shadow-sm); } button:focus-visible, input[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pink-ring); } button:disabled { background: #c9ccd3; box-shadow: none; transform: none; cursor: not-allowed; } button.secondary { background: #5c6470; } button.secondary:hover { background: #454c56; } button.danger { background: #dc3545; } button.danger:hover { background: #bd2130; } /* Header: materiale translucido, non una tinta piatta - sticky in cima così il contenuto scorre sotto come vetro, non sotto una barra opaca fissa (apple-design §12). */ header { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); padding: 1.1rem 1.5rem; border: 1px solid var(--border); border-top: 3px solid var(--navy); margin-bottom: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0.75rem; z-index: 10; } @media (prefers-reduced-transparency: reduce) { header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Admin: griglia scrolla molto in verticale, header sticky ruba spazio utile e i sotto-header sticky (schedule-grid.tsx) già ancorano sotto di esso. */ #root.role-admin header { position: static; } header h1 { font-size: 1.5rem; margin: 0; color: var(--navy); font-weight: 700; letter-spacing: -0.01em; } header .user-info { display: flex; gap: 1rem; align-items: center; } .user-name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } /* Bottone tema: icona sola, stesso trattamento "pillola piccola" del fill-screen toggle della griglia. */ .theme-toggle-btn { padding: 0.4rem 0.65rem; line-height: 1; font-size: 1.05rem; } /* Etichetta del ruolo: leggibile, non lo slug tecnico che sostituisce (es. "azienda_crif" -> "Azienda"). */ .role-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--navy-soft); color: var(--navy); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } /* Sections */ section { background: var(--surface); padding: 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } /* Collapsible section (e.g. admin "Colloqui già effettuati"): same card as a
, with a clickable styled like its

. */ details.collapsible { background: var(--surface); padding: 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } details.collapsible > summary { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); cursor: pointer; list-style-position: inside; } details.collapsible[open] > summary { margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } h3 { font-size: 1.1rem; margin-top: 1rem; margin-bottom: 0.75rem; } /* Banner */ .banner { background: #fff8e6; border: 1px solid #ffd666; border-left: 3px solid #f0ad00; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } /* Tables */ table { width: 100%; border-collapse: collapse; margin-top: 1rem; } thead { /* Materiale translucido invece di una tinta piatta: sotto scorre il contenuto, non uno strato opaco - vetro, non cartone. */ background: rgba(238, 242, 247, 0.75); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); position: sticky; top: 0; } @media (prefers-reduced-transparency: reduce) { thead { background: var(--navy-tint); backdrop-filter: none; -webkit-backdrop-filter: none; } } th { padding: 0.75rem; text-align: left; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--border); } td { padding: 0.75rem; border-bottom: 1px solid var(--border); } tbody tr { transition: background var(--transition); } tr:hover { background: var(--navy-soft); } td.done { background: #e6f4ea; } /* Cancelled ("annullato") / absent ("assente") interviews: greyed out like a disabled control. Placed after td.done so it wins if both ever apply. */ .grid-table td.status-void { background: #eceef1; color: #9aa0aa; } .grid-table td.status-void .person { color: #9aa0aa; text-decoration: none; } .grid-table td.status-void .status-tag { background: #9aa0aa; color: white; } /* Il trattino placeholder (nessuno stato azienda) resta senza badge anche in una cella annullata/assente: non è un'informazione, non deve sembrarlo. */ .grid-table td.status-void .status-tag.status-tag-empty { background: transparent; color: #9aa0aa; } tr.pending { background: #fff3cd; } /* Schedule cell layout: three rows (nome, barra di stato, select admin), ognuna con un'altezza minima fissa indipendente dal contenuto (min-height, non auto-only) - un badge azienda assente o un nome corto non fanno mai accorciare la riga rispetto alle celle vicine, così l'intera tabella resta allineata orizzontalmente riga per riga. */ .cell-body { display: grid; grid-template-rows: auto auto auto; gap: 0.35rem; } .cell-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-weight: 600; line-height: 1.3em; /* Riserva sempre due righe, anche per un nome che sta su una sola: un nome lungo che va a capo non deve allungare la riga della tabella rispetto alle celle vicine con un nome corto. */ min-height: 2.6em; } .cell-row-bar { display: flex; align-items: center; gap: 0.35rem; min-height: 1.4rem; } .src-icons { display: inline-flex; gap: 0.35rem; } .cell-row-bar .src-icons { margin-left: auto; } .status-tag.status-tag-empty { background: transparent; color: #c9ccd3; padding: 0.1rem 0; } /* Stato admin: select su tutta la larghezza, come terza riga della cella. */ .status-admin-select { font-size: 0.75rem; width: 100%; } /* Completion-source icons: faded by default, brand pink when confirmed. */ .src-icon { display: inline-flex; align-items: center; line-height: 0; color: #c9ccd3; } .src-icon.active { color: var(--navy); } /* Small greyed status tag next to the name for cancelled/absent interviews. */ .status-tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; background: #9aa0aa; color: white; } /* Grid table wrapper for schedule */ .table-wrapper { overflow-x: auto; } .alumni-actions-cell { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* Meet link as a pink videocamera icon (schedule grid) */ .meet-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--pink); margin-top: 0.35rem; line-height: 0; transition: opacity var(--transition); } .meet-icon:hover { opacity: 0.7; } .grid-table th .meet-icon { margin-top: 0.4rem; } /* Company KPI stat tiles (colloqui da fare / fatti) */ .stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .stat-card { flex: 1 1 180px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem 1.5rem; } .stat-card.todo { border-left-color: var(--pink); } .stat-card.done { border-left-color: var(--navy); } .stat-number { font-size: 2.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; /* "Materializza" al cambio valore: la key cambia ad ogni update, Preact rimonta il nodo e l'animazione riparte da zero — non un salto muto. */ animation: stat-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes stat-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .stat-number { animation: none; } } .stat-card.todo .stat-number { color: var(--pink); } .stat-card.done .stat-number { color: var(--navy); } .stat-label { margin-top: 0.4rem; color: var(--text-muted); font-weight: 500; } /* "Show only to-do" filter toggle above the admin grid */ .schedule-filter { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; cursor: pointer; color: var(--navy); font-weight: 500; } .schedule-filter input { cursor: pointer; } /* Candidate-swap toolbar above the admin grid */ .swap-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } .swap-toolbar #swap-hint { flex: 1 1 auto; min-width: 12rem; } /* A grid cell available for / picked in a swap */ .grid-table td.swap-cell { cursor: pointer; } .grid-table td.swap-cell.selected { outline: 2px solid var(--pink); outline-offset: -2px; background: var(--pink-ring); } /* An available gap (company x time, no candidate assigned): click to assign a student. */ .grid-table td.empty-cell { cursor: pointer; background: #e6f4ea; } .grid-table td.empty-cell:hover { background: #c8e9d2; } .available-label { display: block; text-align: center; font-size: 0.75rem; color: #2f7a45; font-weight: 600; } /* A scheduled pause: shown so it isn't mistaken for a genuine gap, but not clickable/assignable. */ .grid-table td.pause-cell { background: repeating-linear-gradient( 45deg, var(--bg), var(--bg) 6px, var(--border) 6px, var(--border) 12px ); cursor: not-allowed; } .pause-label { display: block; text-align: center; font-size: 0.75rem; color: var(--text-muted); font-style: italic; } /* Company not present at this time (not arrived yet / already left): dark grey, not clickable — distinct from an available gap or a pause. */ .grid-table td.unavailable-cell { background: #3a3f47; cursor: not-allowed; } .unavailable-label { display: block; text-align: center; font-size: 0.75rem; color: #c9ccd3; letter-spacing: 0.05em; } /* Swap confirmation popup */ .swap-modal-overlay { position: fixed; inset: 0; background: rgba(35, 50, 74, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .swap-modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.5rem; max-width: 640px; width: 100%; } .swap-modal-card h3 { margin: 0 0 1rem; color: var(--navy); } .swap-modal-cols { display: flex; gap: 1rem; flex-wrap: wrap; } .swap-modal-col { flex: 1 1 260px; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; } .swap-modal-col-title { font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; } .swap-modal-slot { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--border); } .swap-modal-slot:first-of-type { border-top: none; } .swap-modal-slot-label { color: var(--text-muted); font-size: 0.875rem; } .swap-old { color: var(--text-muted); text-decoration: line-through; } .swap-new { color: var(--pink-dark); font-weight: 600; } .swap-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } .grid-table { width: 100%; /* separate (not collapse): with collapsed borders the shared cell borders scroll independently of the sticky header, letting table content peek above the header and between the header and the sub-row. With separate borders + fully opaque sticky cells nothing bleeds through. */ border-collapse: separate; border-spacing: 0; margin-top: 1rem; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } /* Draw the grid with per-cell right/bottom borders (the table supplies the top/left edge) so no border is shared — hence none scrolls away from a sticky cell. */ .grid-table th, .grid-table td { padding: 0.75rem; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .grid-table th { background: var(--navy-tint); position: sticky; top: 0; z-index: 2; font-weight: 600; } /* Schermo intero: niente nome colloquiatorə in intestazione (solo azienda + Meet), quindi la riga può stare più bassa. */ .grid-table-compact th { padding: 0.4rem 0.5rem; font-size: 0.85rem; } .grid-table-compact th .meet-icon { margin-top: 0.2rem; } /* Sub-header row (filter on): shows the last person interviewed per column. Sticks just under the main header — its `top` is set in JS to the main header's height — and sits a layer below it. */ .grid-table th.subhead-cell { z-index: 1; font-weight: 400; font-size: 0.8125rem; color: var(--text-muted); background: var(--surface-nested); } .subhead-last { display: inline-flex; align-items: center; gap: 0.4rem; } /* Schedule grid: bound the height and scroll inside the wrapper so the sticky header stays put. A plain overflow-x wrapper turns the box into a (non- vertically-scrolling) scroll container, which breaks `position: sticky` on the header — the header must stick to a scroller that actually scrolls. */ .grid-wrapper { max-height: 90vh; height: 90vh; overflow: auto; position: relative; } /* Schermo intero: la wrapper (non l'intera sezione, così titolo/filtro/ toolbar restano nel normale flusso dietro) copre tutto il viewport, senza padding/bordo/cornice attorno alla tabella. */ .grid-wrapper.fill-screen { position: fixed; inset: 0; z-index: 1000; max-height: 100vh; height: 100vh; padding: 0; margin: 0; border: none; border-radius: 0; background: var(--surface); } /* Ancora sticky senza altezza propria: il bottone dentro sta assoluto rispetto a lei, così non spinge giù la tabella ma resta appeso all'angolo alto-sinistro della wrapper anche mentre si scorre. */ .grid-fill-screen-anchor { position: sticky; top: 0; left: 0; height: 0; z-index: 30; } .grid-fill-screen-btn { position: absolute; top: 0.4rem; left: 0.4rem; padding: 0.35rem 0.6rem; line-height: 1; font-size: 1rem; border-radius: var(--radius-pill); } .grid-table td { text-align: left; vertical-align: top; } /* Candidate names */ .person { text-decoration: underline dotted; text-underline-offset: 2px; color: var(--navy); font-weight: 500; } /* Tooltip */ #tooltip { position: fixed; background: #23324a; color: white; padding: 0.75rem; border-radius: 10px; font-size: 0.875rem; box-shadow: var(--shadow-md); pointer-events: none; display: none; z-index: 1000; max-width: 250px; } #tooltip.visible { display: block; } /* Actions panel */ .actions-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .action-form { border: 1px solid var(--border); padding: 1.1rem; border-radius: 12px; background: var(--surface-nested); } .action-form h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1rem; } .action-form .form-group { margin-bottom: 0.75rem; } .action-form label { font-size: 0.875rem; margin-bottom: 0.25rem; } .action-form input, .action-form select { font-size: 0.875rem; padding: 0.5rem; } .checkbox-inline { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.75rem; font-weight: 400; } .checkbox-inline input { width: auto; } .action-form button { width: 100%; margin-top: 0.5rem; font-size: 0.875rem; padding: 0.5rem; } .action-message { padding: 0.75rem; margin-top: 0.5rem; border-radius: 10px; font-size: 0.875rem; background: var(--navy-soft); color: var(--navy-dark); } .action-message.error { background: #fdecea; color: #a12622; } /* Access control panel (gate pre-evento) */ .access-control-panel { background: var(--surface-nested); border: 1px solid var(--border); padding: 1.1rem; border-radius: 12px; } .access-control-panel .checkbox-inline { display: flex; margin-bottom: 0.5rem; } .access-user-add { display: flex; gap: 0.5rem; } .access-user-add select { flex: 1; } .access-blocked-users { list-style: none; margin: 0.75rem 0 0; padding: 0; } .access-blocked-users li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--border); } .access-blocked-users button { margin-left: auto; } /* Blocked screen (gate pre-evento) */ .blocked-screen { text-align: center; padding: 4rem 1rem; font-size: 1.1rem; color: var(--navy); } /* Overrides recap */ .overrides-recap { background: var(--surface-nested); border: 1px solid var(--border); padding: 1rem; border-radius: 10px; font-size: 0.9rem; } .overrides-recap ul { list-style-position: inside; margin: 0; padding: 0; } .overrides-recap li { margin: 0.5rem 0; } /* Checkboxes */ input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } /* Link styling */ a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; } /* Link-buttons (Meet, Feedback): navy, to keep pink for primary actions. */ a.btn { display: inline-block; padding: 0.45rem 1rem; background: var(--navy); color: white; border-radius: var(--radius-pill); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: background var(--transition), transform var(--transition); } a.btn:hover { background: var(--navy-dark); transform: translateY(-1px); text-decoration: none; } /* CV document icon */ .cv-link { display: inline-flex; align-items: center; color: var(--pink); transition: color var(--transition), transform var(--transition); } .cv-link:hover { color: var(--pink-dark); transform: translateY(-1px); text-decoration: none; } /* Stato colloquio (vista azienda): pill toggle invece di