/* The shared Esadecimale palette, as in code, learn and cyber. */
:root {
    --bg: #0a0a0b;
    --surface: #18181b;
    --surface2: #232327;
    --border: #27272a;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --primary: #ee72f1;
    --primary2: #ec4899;
    --primary-glow: rgba(238, 114, 241, 0.18);
    --wip: #eab308;
    --wip-soft: rgba(234, 179, 8, 0.12);
    --danger: #f85149;
    --danger2: #da3633;
    --danger-soft: rgba(248, 81, 73, 0.14);
    --wip: #eab308;
    --wip-soft: rgba(234, 179, 8, 0.12);
    --ok: #3fb950;
    --ok-soft: rgba(63, 185, 80, 0.1);
    /* A client's own sessions, under a share link: not in the shared palette. */
    --mine: #f0883e;
    --mine-soft: rgba(240, 136, 62, 0.16);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.1s;
}

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

.muted {
    color: var(--muted);
}

.danger {
    color: var(--danger);
}

/* ── Navbar ─────────────────────────────────────────────────────────── */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(70px, 6vw, 92px);
    padding: 0 clamp(24px, 4vw, 64px);
    gap: 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 24px var(--primary-glow);
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
}

.brand-home {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    flex-shrink: 0;
}

.brand-home:hover {
    color: var(--primary);
}

.nav-logo {
    width: clamp(40px, 3.2vw, 54px);
    height: clamp(40px, 3.2vw, 54px);
    object-fit: contain;
    flex-shrink: 0;
}

/* A client's logo, under their share link: any shape, kept to the bar. */
.nav-logo.client-logo {
    width: auto;
    max-width: clamp(120px, 14vw, 220px);
}

.brand-name {
    font-size: clamp(20px, 1.7vw, 30px);
    font-weight: 600;
    white-space: nowrap;
}

/* Brand and account links take equal shares of the bar, which leaves the
   sections sitting in the true middle of it. */
.navbar-brand {
    flex: 1 1 0;
}

.navbar-links {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.5vw, 24px);
    font-size: clamp(16px, 1.1vw, 20px);
}

/* ── Navbar sections ────────────────────────────────────────────────── */
/* As in code and learn: the sections are what the site is, bigger than the
   rest of the bar, in the centre of it, each with an icon. */

.navbar-sections {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 52px);
    flex-shrink: 0;
}

.nav-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    color: var(--muted);
    font-size: clamp(19px, 1.7vw, 30px);
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s;
}

.nav-section[hidden] {
    display: none;
}

.nav-section-icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.nav-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary2));
    translate: -50% 0;
    transition: width 0.2s ease;
}

.nav-section:hover,
.nav-section[aria-current="page"] {
    color: var(--text);
}

.nav-section:hover::after,
.nav-section[aria-current="page"]::after {
    width: 100%;
}

.nav-section:hover .nav-section-icon {
    color: var(--primary);
    transform: translateY(-2px);
}

.nav-section[aria-current="page"] .nav-section-icon {
    color: var(--primary);
}

/* Too narrow for the labels next to the brand and the account links: the
   icons carry the sections on their own. */
@media (max-width: 1000px) {
    .nav-section span {
        display: none;
    }

    .nav-section-icon {
        width: 1.5em;
        height: 1.5em;
    }
}

/* Phones: the brand mark alone, so the sections keep the middle. */
@media (max-width: 560px) {
    .navbar {
        padding: 0 16px;
        gap: 8px;
    }

    .brand-name,
    .nav-user-name {
        display: none;
    }

    .navbar-sections {
        gap: 22px;
    }
}

/* ── Work in progress ───────────────────────────────────────────────── */

.wip-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    color: var(--muted);
}

.wip-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border: 1px solid var(--wip);
    border-radius: 999px;
    background: var(--wip-soft);
    color: var(--wip);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.wip-badge-icon {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* As in learn: the account links are muted text, pink on hover. */
.navbar-links a,
.navbar-links .nav-link-btn {
    color: var(--muted);
    font-size: clamp(17px, 1.4vw, 25px);
    line-height: 1;
    text-decoration: none;
    transition: color 0.1s;
}

.navbar-links a:hover,
.navbar-links .nav-link-btn:hover {
    color: var(--primary);
}

.nav-user-name {
    color: var(--muted);
}

/* ── Landing: what an anonymous visitor sees ──────────────────────── */

body.landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000;
}

.landing-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: clamp(70px, 6vw, 92px);
    padding: 0 clamp(16px, 4vw, 64px);
}

.landing-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 16px clamp(70px, 6vw, 92px);
}

.landing-logo {
    width: clamp(140px, 22vw, 280px);
    height: auto;
}

.landing .login-error {
    margin: 0;
}

.nav-link-btn {
    font: inherit;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.1s;
}

.nav-link-btn:hover {
    color: var(--primary2);
}

.login-error {
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid var(--danger);
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--text);
}

/* ── Content ────────────────────────────────────────────────────────── */

.container {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 64px) clamp(16px, 4vw, 64px);
}

h1 {
    font-size: clamp(32px, 3vw, 52px);
    line-height: 1.2;
    margin-bottom: 12px;
}

h2 {
    font-size: clamp(20px, 1.5vw, 26px);
    margin-bottom: 16px;
}

.error {
    margin-top: 24px;
    color: var(--danger);
}

/* ── Controls ───────────────────────────────────────────────────────── */

.btn {
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s;
}

.btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 8px 0;
    font-size: 20px;
    line-height: 1;
}

.btn.primary {
    color: var(--bg);
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.btn.primary:hover {
    color: var(--bg);
    background: var(--primary2);
    border-color: var(--primary2);
}

.btn:disabled,
.btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    color: inherit;
    border-color: var(--border);
}

.btn.primary:disabled,
.btn.primary:disabled:hover {
    color: var(--bg);
    background: var(--primary);
    border-color: var(--primary);
}

/* ── Admin tools ────────────────────────────────────────────────────── */

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(28px, 3vw, 44px);
}

/* Two large cards: an icon in an accent tile, a title and a one-line hint. */
.action-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: min(300px, 100%);
    padding: 16px 28px 16px 16px;
    font: inherit;
    text-align: left;
    color: var(--text);
    background: linear-gradient(135deg, var(--surface2), var(--surface));
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.action-btn:hover,
.action-btn:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 32px var(--primary-glow);
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 12px;
    color: var(--bg);
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.action-title {
    font-size: clamp(18px, 1.3vw, 21px);
    font-weight: 700;
}

.action-hint {
    font-size: 15px;
    color: var(--muted);
}

.admin-actions[hidden] {
    display: none;
}

.modal {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: clamp(20px, 3vw, 32px);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 32px var(--primary-glow);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--muted);
}

.field.wide {
    grid-column: 1 / -1;
}

.field[hidden] {
    display: none;
}

.field input,
.field select,
.field textarea {
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color-scheme: dark;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Date and time pickers (pickers.js) ─────────────────────────────── */
/* The field looks like an input; each part of the date is a button. */
.picker-display {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 4px 6px;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.picker-part,
.picker-time {
    font: inherit;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    white-space: nowrap;
}

.picker-part:hover,
.picker-part:focus-visible,
.picker-time:hover,
.picker-time:focus-visible {
    background: var(--surface2);
    outline: none;
}

.picker-part[aria-expanded="true"],
.picker-time[aria-expanded="true"] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow);
}

.picker-time {
    gap: 8px;
    padding: 4px 10px;
    font-variant-numeric: tabular-nums;
}

.picker-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The chooser: a full-width row at the bottom of the form grid. */
.picker-panel {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 0 24px var(--primary-glow);
}

.picker-panel[hidden] {
    display: none;
}

.picker-grid {
    display: grid;
    gap: 4px;
    width: 100%;
}

.picker-grid .option {
    text-align: center;
    padding: 8px 6px;
    font-size: 16px;
}

.picker-grid.days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: 360px;
}

.picker-grid.months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 420px;
}

.picker-grid.years {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    max-width: 420px;
}

.picker-weekday {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.picker-grid .option.today:not(.selected) {
    color: var(--primary);
}

.picker-grid.hours {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 360px;
    font-variant-numeric: tabular-nums;
}

.picker-minutes {
    display: flex;
    gap: 6px;
}

.picker-minutes .option {
    padding: 6px 14px;
    font-variant-numeric: tabular-nums;
}

.form-error {
    margin-top: 16px;
    color: var(--danger);
    font-size: 15px;
}

.modal-subject {
    margin: -4px 0 18px;
    color: var(--primary);
    font-weight: 600;
}

.modal-subject:empty {
    display: none;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.plan {
    margin-top: 20px;
}

.plan:empty {
    display: none;
}

.plan-summary {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.plan-summary.ok { color: var(--ok); }
.plan-summary.warn { color: var(--danger); }

.plan-days {
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.plan-day {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.plan-day + .plan-day {
    border-top: 1px solid var(--border);
}

.plan-date {
    text-transform: capitalize;
}

.plan-hours {
    color: var(--muted);
}

/* ── State colours ──────────────────────────────────────────────────── */
/* One meaning per colour, on every page: green is time that can still be
   booked, red is time already taken, grey is time not offered. Green stays
   on the text: a day square never turns green as a whole. */

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.dot.free, .badge.free { background: var(--ok); }
.dot.full, .badge.full { background: var(--danger); }
.dot.off, .badge.off { background: var(--surface2); }
.dot.off { box-shadow: inset 0 0 0 1px var(--muted); }
.dot.mine { background: var(--mine); }

/* Under a share link, the client's own meetings and training are orange;
   other clients' stay red (busy), free time green. */
.day.mine .day-number { color: var(--mine); }

.chip.mine {
    background: var(--mine-soft);
    border-left-color: var(--mine);
}

.slot.mine .slot-body {
    background: var(--mine-soft);
    border-left-color: var(--mine);
}

.activity.mine {
    border-left-color: var(--mine);
}

/* A session someone else gives in the trainer's place: yellow, and its
   hours stay free. */
.chip.other {
    background: var(--wip-soft);
    border-left-color: var(--wip);
}

.activity.other {
    border-left-color: var(--wip);
}

.activity-trainer,
.session-trainer {
    color: var(--wip);
    font-weight: 600;
}

.legend li[hidden] {
    display: none;
}

.badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bg);
}

.badge.off {
    color: var(--muted);
}

/* ── Month view ─────────────────────────────────────────────────────── */

.month-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* The stats under the month name, the mask switch at the right. */
.month-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -8px 0 24px;
}

/* Lined up with the month name, which sits inside its button's padding
   (0.15em of the title's size). */
.month-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    padding-left: calc(clamp(34px, 3.4vw, 56px) * 0.15);
}

.mask-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 16px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.mask-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mask-switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s;
}

.mask-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.15s, background 0.15s;
}

.mask-toggle input:checked + .mask-switch {
    background: var(--primary-glow);
    border-color: var(--primary);
}

.mask-toggle input:checked + .mask-switch::after {
    transform: translateX(18px);
    background: var(--primary);
}

.mask-toggle input:focus-visible + .mask-switch {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.mask-toggle:has(input:checked) {
    color: var(--text);
}

.stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.stat-value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stat-label {
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary), var(--primary2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.period-title {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    margin: 0;
    font-size: clamp(34px, 3.4vw, 56px);
}

.picker {
    position: relative;
}

/* The month and the year read as a title; the caret and the hover say they
   can be clicked. */
.period-btn {
    font: inherit;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0 0.15em;
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}

/* Every month name sits in the same grid cell and only the current one is
   visible, so the button is always as wide as the longest (Settembre) and
   nothing after it moves when the month changes. */
.period-btn.month {
    display: inline-grid;
    justify-items: start;
}

.period-btn.month .name {
    grid-area: 1 / 1;
    visibility: hidden;
}

.period-btn.month .name.current {
    visibility: visible;
}

/* The caret follows the name, not the reserved width. */
.period-btn.month::after {
    content: none;
}

.period-btn.month .name::after {
    content: "";
    display: inline-block;
    width: 0.22em;
    height: 0.22em;
    margin-left: 0.25em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    opacity: 0.6;
}

.period-btn.year {
    font-weight: 400;
    color: var(--muted);
}

.period-btn::after {
    content: "";
    display: inline-block;
    width: 0.22em;
    height: 0.22em;
    margin-left: 0.25em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    opacity: 0.6;
}

.period-btn:hover,
.period-btn[aria-expanded="true"] {
    color: var(--primary);
    background: var(--surface);
}

.period-nav {
    display: flex;
    gap: 8px;
}

.popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: grid;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px var(--primary-glow);
}

.popover[hidden] {
    display: none;
}

.month-grid {
    grid-template-columns: repeat(3, 1fr);
    width: max-content;
}

.year-list {
    grid-template-columns: 1fr;
    min-width: 100%;
}

.option {
    font: inherit;
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 18px;
    text-align: left;
    cursor: pointer;
}

.option:hover,
.option:focus-visible {
    background: var(--surface2);
    outline: none;
}

.option.selected {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-glow);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    font-size: 15px;
    color: var(--muted);
}

.legend li {
    display: flex;
    align-items: center;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    transition: opacity 0.15s;
}

.calendar.loading {
    opacity: 0.5;
}

.weekday {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
}

.day {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: clamp(96px, 9vw, 140px);
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    overflow: hidden;
    transition: border-color 0.1s, transform 0.1s;
}

a.day:hover {
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-1px);
}


/* Not a link: nothing to select. */
.day.off {
    background: var(--bg);
    cursor: default;
}

.day.blank {
    background: transparent;
    border: none;
}

.day.today {
    box-shadow: 0 0 0 2px var(--primary), 0 0 24px var(--primary-glow);
}

.day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.day-number {
    font-weight: 600;
    font-size: 18px;
}

.day.off .day-number {
    color: var(--muted);
}

.day-free {
    font-size: 18px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.day.free .day-free { color: var(--ok); }
.day.full .day-free { color: var(--danger); }

.chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style: none;
}

.chip {
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--danger-soft);
    border-left: 2px solid var(--danger);
    overflow-wrap: anywhere;
}

.chip-time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.chip-client {
    display: block;
    color: var(--muted);
}

.chip.more {
    background: none;
    border: none;
    color: var(--muted);
}

/* ── Day view ───────────────────────────────────────────────────────── */

.day-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.day-nav {
    display: flex;
    gap: 8px;
}

.day-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 32px;
    font-size: 16px;
}

.day-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}

.timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slot {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    font-size: 16px;
}

.slot-time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.slot-body {
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot.free .slot-body {
    background: var(--ok-soft);
    border-left-color: var(--ok);
    color: var(--ok);
}

.slot.busy .slot-body {
    background: var(--danger-soft);
    border-left-color: var(--danger);
}

.slot.off .slot-body {
    background: var(--surface);
    color: var(--muted);
}

.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity {
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: 8px;
}

.activity-time {
    font-size: 14px;
    color: var(--danger);
    font-variant-numeric: tabular-nums;
}

.activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-title {
    font-weight: 600;
    color: var(--text);
}

a.activity-title:hover {
    color: var(--primary);
}

/* Meeting or training day: the same tag wherever a session is listed. */
.kind-tag {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.kind-tag.meeting {
    color: var(--primary);
}

.kind-tag.training {
    color: var(--muted);
}

.activity-client {
    font-size: 15px;
}

/* A lecture's own description and meeting link (admin and its client). */
.session-note {
    margin-top: 8px;
    font-size: 15px;
    white-space: pre-line;
}

.meeting-link {
    align-self: flex-start;
    margin-top: 10px;
    color: var(--primary);
    border-color: var(--primary);
    text-decoration: none;
}

.meeting-link:hover {
    background: var(--primary-glow);
}

.session-edit {
    align-self: flex-start;
    margin-top: 10px;
    font-size: 14px;
    padding: 5px 10px;
    color: var(--muted);
}

.session-edit[hidden] {
    display: none;
}

.session-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.session-form .modal-actions {
    margin-top: 0;
}

.session-row-note {
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--muted);
    white-space: pre-line;
}

.session-row-link {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 14px;
    color: var(--primary);
}

.activity-description {
    margin-top: 8px;
    font-size: 15px;
    color: var(--muted);
    white-space: pre-line;
}

/* ── Activities page ────────────────────────────────────────────────── */

.activity-groups {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 24px;
}

.activity-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-group > h2 {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.activity-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px, 2vw, 26px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    scroll-margin-top: 120px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Where a new activity lands after it is created. */
.activity-card.highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 32px var(--primary-glow);
}

.activity-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
}

.activity-card-title {
    font-size: clamp(20px, 1.5vw, 26px);
    line-height: 1.25;
}

.activity-card-client {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

/* A client's view: a bigger title, the total hours, the dates on a click. */
.activity-card-title.big {
    font-size: clamp(24px, 2vw, 32px);
}

.activity-card-hours {
    font-size: clamp(30px, 2.6vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

.activity-card-description.big {
    font-size: clamp(17px, 1.2vw, 19px);
}

/* A client's card is a link to the activity's page. */
a.link-card {
    color: inherit;
    text-decoration: none;
}

a.link-card:hover,
a.link-card:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 32px var(--primary-glow);
}

.activity-card-head > .activity-card-hours,
.activity-card-head > .activity-card-summary {
    flex-shrink: 0;
    margin-left: auto;
}

/* The activity's page. */
.activity-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.activity-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 32px;
}

.activity-page-head h1 {
    margin-bottom: 4px;
}

.activity-page-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.activity-page-section h2 {
    margin-bottom: 0;
}

a.activity-card-title-link {
    color: inherit;
    width: fit-content;
}

a.activity-card-title-link:hover {
    color: var(--primary);
}

.attachments {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.attachment {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    background: var(--surface);
}

.attachment + .attachment {
    border-top: 1px solid var(--border);
}

.attachment-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.attachment-size {
    font-size: 14px;
    white-space: nowrap;
}

/* The programme: a card per part, its sections and topics inside. */
.syllabus-part {
    padding: clamp(16px, 2vw, 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.syllabus-part-title {
    font-size: clamp(18px, 1.3vw, 21px);
    color: var(--primary);
    margin-bottom: 4px;
}

.syllabus-section-title {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 600;
}

.syllabus-topics {
    margin: 6px 0 0 20px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.activity-card-final {
    font-size: 15px;
}

/* A dated group, month by month: the month on the left, its cards beside. */
.month-block {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
}

.month-block + .month-block {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.month-label {
    position: sticky;
    top: calc(clamp(70px, 6vw, 92px) + 20px);   /* below the navbar */
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.month-label-name {
    font-size: 20px;
    font-weight: 700;
}

.month-label-year {
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.month-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 700px) {
    .month-block {
        grid-template-columns: 1fr;
    }

    .month-label {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }
}

.btn.danger-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.btn.small {
    font-size: 15px;
    padding: 6px 12px;
}

.activity-card-description {
    color: var(--muted);
    font-size: 16px;
    white-space: pre-line;
}

.activity-card-summary {
    font-size: 15px;
    font-weight: 600;
}

.session-list summary {
    cursor: pointer;
    font-size: 15px;
    color: var(--muted);
    width: max-content;
}

.session-list summary:hover {
    color: var(--text);
}

.sessions {
    list-style: none;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.session.other {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.session + .session {
    border-top: 1px solid var(--border);
}

.session.past {
    color: var(--muted);
}

.session-date {
    color: inherit;
    text-transform: capitalize;
}

.session-date:hover {
    color: var(--primary);
}

.session-time {
    color: var(--muted);
}

/* ── Clients ────────────────────────────────────────────────────────── */

.client-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.client-card {
    cursor: pointer;
}

.client-card:hover,
.client-card:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 32px var(--primary-glow);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.share-note {
    margin: 0 0 16px;
}

.modal-actions .push {
    margin-right: auto;
}

/* Another client's session, seen from a share link. */
.chip.busy {
    color: var(--muted);
}

.logo-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.logo-preview {
    max-width: 200px;
    max-height: 56px;
    object-fit: contain;
    padding: 6px;
    background: var(--surface);   /* as in the navbar, where the client sees it */
    border: 1px solid var(--border);
    border-radius: 6px;
}

.client-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 20px;
    font-size: 15px;
}

.client-facts dt {
    color: var(--muted);
}

.client-facts dd {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.client-status {
    font-size: 15px;
    font-weight: 600;
}

.client-status.ok { color: var(--ok); }

.field.span2 {
    grid-column: span 2;
}

.field-hint {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

/* ── Small screens ──────────────────────────────────────────────────── */
/* Seven columns leave no room for text on a phone: the squares keep the
   day number and the state colour, the day page has the detail. */
@media (max-width: 700px) {
    .calendar {
        gap: 4px;
    }

    .stat-value {
        font-size: 32px;
    }

    .day {
        min-height: 56px;
        padding: 6px;
    }

    .day-number {
        font-size: 15px;
    }

    .day-free,
    .chips {
        display: none;
    }

    .weekday {
        font-size: 11px;
        letter-spacing: 0;
    }

    .day-layout {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.footer {
    border-top: 1px solid var(--border);
    padding: 48px clamp(16px, 4vw, 80px);
    margin-top: 80px;
    background: var(--surface);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    justify-items: center;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.footer-col p,
.footer-col a {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-email {
    color: var(--primary) !important;
}

.footer-credit {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-top: 40px;
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}