/*
 * Fencing Link Portal: light theme on top of Bootstrap 5.3.
 *
 * Colours live in the variables below. Navy and gold are accents on white; gold never carries
 * body text on white, because it is too light to read (--gold-text is the readable version).
 * The body text is 17 px, because many users are older staff working on shared computers.
 */

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #14284f;
    --navy-hover: #0f1f3f;
    --gold: #c9a03f;
    --gold-soft: #f6edd8;
    --gold-text: #7c5c10;
    --ink: #1c2738;
    --muted: #566378;
    --line: #d8dee8;
    --strip: #edf0f5;
    --red: #a92a23;
    --red-soft: #fbeceb;
    --green: #1d6f48;
    --green-soft: #e6f3ec;

    --bs-body-font-family: "Schibsted Grotesk", "Noto Sans", system-ui, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--ink);
    --bs-body-bg: #fff;
    --bs-link-color-rgb: 20, 40, 79;
    --bs-link-hover-color-rgb: 15, 31, 63;
    --bs-border-color: var(--line);
    --bs-focus-ring-color: rgba(201, 160, 63, .45);
}

h1, h2 { color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 1.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin-bottom: .75rem; }
a { text-underline-offset: .15em; }
.muted { color: var(--muted); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Buttons and fields ------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-hover); --bs-btn-hover-border-color: var(--navy-hover);
    --bs-btn-active-bg: var(--navy-hover); --bs-btn-active-border-color: var(--navy-hover);
    --bs-btn-disabled-bg: var(--navy); --bs-btn-disabled-border-color: var(--navy);
    box-shadow: inset 0 -3px 0 var(--gold);
}
.btn-outline-primary {
    --bs-btn-color: var(--navy); --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy);
    --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy);
}
.btn-link { --bs-btn-color: var(--navy); --bs-btn-hover-color: var(--navy-hover); --bs-btn-font-weight: 500; }

.form-label { font-weight: 600; margin-bottom: .3rem; }
.form-control, .form-select { font-size: 1.0625rem; padding: .6rem .75rem; border-radius: 6px; border-color: #aab4c4; }
.form-control:focus, .form-select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(201, 160, 63, .4); }
.form-control[readonly] { background: var(--strip); }
/* Read-only only against autofill (partials/password_input.php): looks like a normal field */
.form-control[data-no-autofill][readonly] { background: var(--bs-body-bg); }
/* Current password as a text field shown as dots, so password managers leave it alone */
.text-masked { -webkit-text-security: disc; }
.form-text { color: var(--muted); font-size: .95rem; }
legend.form-label { font-size: inherit; }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(201, 160, 63, .4); }
.pagination { --bs-pagination-color: var(--navy); --bs-pagination-hover-color: var(--navy); --bs-pagination-active-bg: var(--navy); --bs-pagination-active-border-color: var(--navy); --bs-pagination-focus-color: var(--navy); }
.dt-length select { padding-right: 2rem; }

.password-wrap { position: relative; }
.password-wrap .form-control { padding-right: 3rem; }
/* One-line textarea for a password the browser must not offer (partials/password_input.php): looks like an input */
.password-text { resize: none; overflow: hidden; white-space: pre; min-height: 0; height: auto; }
.password-eye { position: absolute; inset: 0 0 0 auto; width: 3rem; border: 0; background: none; color: var(--muted); border-radius: 0 6px 6px 0; }
.password-eye:hover { color: var(--navy); }

.notice { padding: .7rem 1rem; border-left: 4px solid; margin-bottom: 1.25rem; }
.notice-error { background: var(--red-soft); border-color: var(--red); color: #6f1a16; }
.notice-ok { background: var(--green-soft); border-color: var(--green); color: #124a30; }

/* Pages before sign-in: same layout as the sign-in page of Fencing Link ----- */
.auth { display: flex; min-height: 100dvh; }
.auth-side {
    position: relative; flex: 0 0 40%; min-width: 26rem; max-width: 38rem; padding: 3.5rem 4rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
    background: var(--navy); color: #fff; border-right: 4px solid var(--gold); overflow: hidden;
}
/* Large faint logo in the corner, decoration only */
.auth-side::before {
    content: ""; position: absolute; right: -16rem; bottom: -14rem; width: 46rem; height: 46rem;
    background: url("../img/logo_white.svg") center / contain no-repeat; opacity: .05; pointer-events: none;
}
.auth-brand { position: relative; display: flex; align-items: center; gap: 1rem; }
.auth-brand img { width: 3.5rem; height: 3.5rem; flex: none; }
.auth-brand-name { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.auth-brand-sub { color: #c9d2e1; font-size: 1rem; }
.auth-pitch { position: relative; max-width: 22rem; margin: 0; font-size: 1.5rem; line-height: 1.35; font-weight: 500; }
.auth-foot { position: relative; color: #c9d2e1; font-size: .95rem; }
.auth-foot a { color: var(--gold-soft); }

.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: #f4f6f9; }
.auth-form { width: min(100%, 26rem); }
.auth-form h1 { font-size: 2rem; margin-bottom: .4rem; }
.lead-text { color: var(--muted); margin-bottom: 1.75rem; }
.auth-link { margin: 1.1rem 0 0; text-align: center; }
.auth-note { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; text-align: center; }

@media (max-width: 991px) {
    .auth { flex-direction: column; }
    .auth-side { display: contents; }
    .auth-side::before, .auth-pitch { display: none; }
    .auth-brand { order: 1; padding: 1.25rem 1.5rem; background: var(--navy); color: #fff; border-bottom: 4px solid var(--gold); }
    .auth-brand img { width: 2.75rem; height: 2.75rem; }
    .auth-brand-name { font-size: 1.3rem; }
    .auth-main { order: 2; align-items: flex-start; padding: 2.25rem 1.25rem; }
    .auth-foot { order: 3; padding: 1rem; text-align: center; background: #f4f6f9; color: var(--muted); }
    .auth-foot a { color: var(--navy); }
}

/* Application: dark menu, status line, work area --------------------------- */
:root { --side: 16.5rem; --side-collapsed: 4.5rem; --page: #f4f6f9; }

.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100dvh; background: var(--page); }
[data-sidebar="collapsed"] .shell { grid-template-columns: var(--side-collapsed) minmax(0, 1fr); }

.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--navy); color: #fff; overflow: hidden; }
.side-brand { display: flex; align-items: center; gap: .75rem; height: 4.25rem; padding: 0 1.125rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); flex: none; }
.side-brand img { width: 2.25rem; height: 2.25rem; flex: none; }
.side-brand strong { font-size: 1.05rem; white-space: nowrap; }
.side-nav { flex: 1; padding: .75rem 0; overflow-y: auto; }
.side-title { margin: 1.25rem 1.5rem .35rem; color: #aebbd0; font-size: .9rem; white-space: nowrap; }
.side-nav a { display: flex; align-items: center; gap: .85rem; height: 3rem; padding: 0 1.5rem; color: #dbe2ee; text-decoration: none; white-space: nowrap; border-left: 4px solid transparent; }
.side-nav a i { width: 1.25rem; flex: none; text-align: center; font-size: 1.05rem; }
.side-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; border-left-color: var(--gold); }
.side-collapse { display: flex; align-items: center; gap: .85rem; height: 3.25rem; padding: 0 1.75rem; flex: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); background: none; color: #c9d2e1; white-space: nowrap; font-size: 1rem; }
.side-collapse i { width: 1.25rem; flex: none; text-align: center; }
.side-collapse:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar :focus-visible { outline-offset: -3px; }

[data-sidebar="collapsed"] .side-label { display: none; }
[data-sidebar="collapsed"] .side-brand { justify-content: center; padding: 0; }
[data-sidebar="collapsed"] .side-nav a { justify-content: center; padding: 0; }
[data-sidebar="collapsed"] .side-collapse { justify-content: center; padding: 0; }
[data-sidebar="collapsed"] .side-collapse i { transform: scaleX(-1); }

.sidebar-backdrop { display: none; }

.workspace { display: flex; flex-direction: column; min-width: 0; }
.statusbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; height: 4.25rem; padding: 0 1.75rem; background: #fff; border-bottom: 1px solid var(--line); }
.statusbar h1 { flex: none; margin: 0; font-size: 1.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.env-badge { padding: .1rem .5rem; border-radius: 4px; background: var(--gold-soft); color: var(--gold-text); font-size: .85rem; font-weight: 700; }
.status-tools { display: flex; flex: none; align-items: center; gap: .5rem; margin-left: auto; }

.clock { display: flex; gap: 1rem; margin-right: .5rem; color: var(--muted); font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock b { color: var(--ink); font-weight: 600; }
.clock { padding: .3rem .55rem; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; }
/* Two different times stand one under the other: pin = the user's time, fencer = the tournament's time,
   in the colours of the time zone map */
.clock.is-double { flex-direction: column; align-items: flex-start; gap: 0; padding-block: .1rem; font-size: .9rem; line-height: 1.25; }
/* History of a tournament */
.history-icon { width: 1.3rem; margin-right: .45rem; color: var(--muted); text-align: center; }
.history-detail { color: var(--muted); }
/* Participants on the Overview page: map, top nations, athletes per competition */
.participants { grid-column: 1 / -1; }
.overview-grid > .participants { margin: 0; }
.participants-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.participants-head h2 { margin: 0; }
.participants-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.part-map { aspect-ratio: 1000 / 439; display: grid; place-items: center; border-radius: 6px; background: #fbfcfe; }
.part-map svg { width: 100%; height: auto; display: block; }
.part-map path { fill: #eceff4; stroke: #fff; stroke-width: .5; }
.part-map path.has-athletes:hover { stroke: var(--gold); stroke-width: 1.2; }
.part-legend { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--muted); font-size: .8rem; }
.part-scale { width: 9rem; height: .5rem; border-radius: 99px; background: linear-gradient(90deg, #d7e3f3, #a9c3e6, #6f97cf, #3a66a8, #14284f); }
.bars.bars-compact li { padding-block: .1rem; }
.nation-code { display: inline-block; min-width: 2.6rem; color: var(--navy); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .bars.comp-bars li { grid-template-columns: minmax(0, 24rem) 1fr 2.5rem; } }
.bars.bars-compact li { grid-template-columns: minmax(0, 12rem) 1fr 2.5rem; }
.comp-bars .bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-date { display: inline-block; min-width: 3.2rem; color: var(--muted); }
.weapon-f { background: #2f80c4 !important; }
.weapon-e { background: #b8861b !important; }
.weapon-s { background: #a33a3a !important; }
.part-weapons { display: flex; gap: 1.2rem; margin: .5rem 0 0; color: var(--muted); font-size: .85rem; }
.weapon-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 2px; vertical-align: -.05rem; }
@media (max-width: 1199px) { .participants-grid { grid-template-columns: minmax(0, 1fr); } }
/* Preparation checklist on the Overview page */
.text-warning-strong { color: #b26a00; font-weight: 600; }
.ready-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.ready-head strong { display: block; font-size: 1.1rem; color: var(--navy); }
.ready-ring { flex: none; width: 3.4rem; height: 3.4rem; transform: rotate(-90deg); }
.ready-ring circle { fill: none; stroke-width: 3.6; }
.ready-ring-track { stroke: var(--strip); }
.ready-ring-fill { stroke: #2e8b57; stroke-linecap: round; transition: stroke-dasharray .6s; }
.ready-list { margin: 0; padding: 0; list-style: none; }
.ready-list li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.ready-list a { color: var(--ink); text-decoration: none; }
.ready-list a:hover { text-decoration: underline; }
.ready-done i { color: #2e8b57; }
.ready-todo i { color: #c77700; }
.ready-todo a { font-weight: 600; }
.ready-optional i, .ready-optional a { color: var(--muted); }
/* Photo of an imported official: the camera button in the table and the window with the photo */
.photo-view-button { padding: .1rem .3rem; border: 0; border-radius: 4px; background: none; cursor: zoom-in; }
.photo-view-button:hover, .photo-view-button:focus-visible { background: var(--strip); }
.photo-view-dialog { width: min(22rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(15, 31, 63, .35); }
.photo-view-dialog::backdrop { background: rgba(15, 31, 63, .55); }
.photo-view-dialog header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-bottom: 3px solid var(--gold); }
.photo-view-dialog header h2 { margin: 0; font-size: 1.05rem; }
.photo-view-dialog header form { margin: 0; }
.photo-view-body { display: grid; place-items: center; min-height: 12rem; padding: 1rem; }
.photo-view-body img { display: block; width: 100%; max-width: 300px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 10px rgba(20, 40, 79, .2); }
.photo-view-loading { margin: 0; color: var(--muted); font-size: 1.4rem; }
.photo-view-error { margin: 0; color: var(--red); text-align: center; }
/* Table heading with only an icon (narrow columns of marks) */
th.th-icon { color: var(--navy); font-size: .9rem; }
.clock-line { display: inline-flex; align-items: center; gap: .4rem; }
.clock-line i { width: 1rem; text-align: center; font-size: .85rem; }
.clock-local i { color: #2f80c4; }
.icon-fencer { display: inline-block; width: 1rem; height: 1rem; background: #b8861b; -webkit-mask: url("../img/fencer.svg") center / contain no-repeat; mask: url("../img/fencer.svg") center / contain no-repeat; }
.clock:hover, .clock:focus-visible { background: var(--strip); }
/* Time zone window: the map, then who is where */
.tz-dialog { --tz-you: #2f80c4; --tz-tournament: #d9a128; width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(15, 31, 63, .35); }
.tz-dialog::backdrop { background: rgba(15, 31, 63, .55); }
.tz-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 3px solid var(--gold); }
.tz-dialog header h2 { margin: 0; font-size: 1.2rem; }
.tz-dialog header form { margin: 0; }
.tz-body { padding: 1rem 1.25rem 1.25rem; }
.tz-map { aspect-ratio: 1000 / 439; display: grid; place-items: center; border-radius: 6px; background: #fbfcfe; color: var(--muted); }
.tz-map svg { width: 100%; height: auto; display: block; }
.tz-map #zones path { fill: #eef1f6; stroke: #d3dae5; stroke-width: .6; transition: fill .3s; }
.tz-map #zones path:nth-child(odd) { fill: #f7f9fc; }
.tz-map #zones path.tz-you { fill: color-mix(in srgb, var(--tz-you) 55%, #fff); }
.tz-map #zones path.tz-tournament { fill: color-mix(in srgb, var(--tz-tournament) 60%, #fff); }
.tz-map #land path { fill: none; stroke: #7a869a; stroke-width: .6; }
.tz-map #borders path { fill: none; stroke: #aab3c2; stroke-width: .35; }
.tz-legend { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1rem 0 .5rem; padding: 0; list-style: none; }
.tz-legend li { display: flex; align-items: center; gap: .6rem; }
.tz-legend span:not(.tz-swatch) { display: flex; flex-direction: column; line-height: 1.3; }
.tz-legend small { color: var(--muted); font-variant-numeric: tabular-nums; }
.tz-swatch { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 4px; }
.tz-you .tz-swatch { background: color-mix(in srgb, var(--tz-you) 55%, #fff); border: 1px solid var(--tz-you); }
.tz-tournament .tz-swatch { background: color-mix(in srgb, var(--tz-tournament) 60%, #fff); border: 1px solid var(--tz-tournament); }
.tz-same { margin: 0 0 .25rem; color: var(--navy); font-weight: 600; }
.tz-note { margin: 0; color: var(--muted); font-size: .85rem; }

.icon-button { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 6px; background: none; color: var(--navy); font-size: 1.2rem; }
.icon-button:hover { background: var(--strip); }
.menu-open { display: none; }

.profile-button { display: flex; align-items: center; gap: .55rem; height: 2.75rem; padding: 0 .6rem 0 .3rem; border: 0; border-radius: 6px; background: none; color: var(--ink); }
.profile-button:hover { background: var(--strip); }
.profile-button > i { color: var(--muted); font-size: .75rem; }
.avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .9rem; font-weight: 700; box-shadow: 0 0 0 2px var(--gold); }
.profile-name { font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Opens from the status line. Popovers start hidden; display is set only while open. */
.top-popover { position: fixed; inset: 4.5rem 1.25rem auto auto; width: 19rem; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 8px 24px rgba(20, 40, 79, .18); }
.top-popover h2 { font-size: 1.1rem; margin-bottom: .35rem; }
.top-popover p { margin-bottom: .5rem; }
/* Help menu: About opens the About window */
.help-about { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .75rem; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--navy); font: inherit; font-weight: 600; text-align: left; }
.help-about:hover { text-decoration: underline; }
/* Panel title with a help link, and the help window it opens (variables of document numbers, receipt footer) */
.panel-title { display: flex; align-items: center; gap: .5rem; }
.help-button { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--muted); font-size: 1rem; text-decoration: none; }
.help-button:hover, .help-button:focus-visible { background: var(--strip); color: var(--navy); }
.help-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(15, 31, 63, .35); }
.help-dialog::backdrop { background: rgba(15, 31, 63, .55); }
.help-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 3px solid var(--gold); }
.help-dialog header h2 { margin: 0; font-size: 1.15rem; }
.help-dialog header form { margin: 0; }
.help-dialog-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.vars { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .5rem 0 1rem; }
.vars dt { font-family: "DejaVu Sans Mono", ui-monospace, monospace; font-size: .88rem; font-weight: 600; color: var(--navy); background: var(--strip); padding: .05rem .4rem; border-radius: 4px; align-self: start; }
.vars dd { margin: 0; }
.vars-title { margin: 0 0 .25rem; font-weight: 700; color: var(--navy); }
.vars-examples { padding-left: 1.1rem; }
.vars-examples code { color: var(--navy); background: var(--strip); padding: 0 .3rem; border-radius: 3px; }
/* About window: version on top, the history table scrolls only its rows */
.about-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem 1.5rem 1.5rem; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(15, 31, 63, .35); }
.about-dialog::backdrop { background: rgba(15, 31, 63, .55); }
.about-dialog[open] { display: flex; flex-direction: column; }
.about-head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px solid var(--gold); }
.about-head h2 { margin: 0; font-size: 1.35rem; }
.about-head p { margin: .1rem 0 0; color: var(--muted); }
.about-head form { margin-left: auto; align-self: flex-start; }
.about-dialog h3 { margin: 1.1rem 0 .5rem; font-size: 1.05rem; color: var(--navy); }
.about-history { max-height: min(22rem, 50vh); overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.about-history table { margin: 0; font-size: .92rem; }
.about-history thead th { position: sticky; top: 0; z-index: 1; background: #f4f6f9; color: var(--navy); }
.about-history td, .about-history th { padding: .45rem .7rem; vertical-align: top; }
/* Access zones, all functions: FIE / EFC / EVF of each function */
.set-tag { display: inline-block; min-width: 2.6rem; margin-right: .2rem; padding: .05rem .35rem; border-radius: 4px; font-size: .78rem; font-weight: 700; text-align: center; }
.set-fie { background: #e5ecf7; color: #1f3f78; }
.set-efc { background: #fbeccb; color: #7c5c10; }
.set-evf { background: #e3f1e7; color: #1e6b37; }
.set-none { visibility: hidden; }
.change { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.change-new { background: #e3f1e7; color: #1e6b37; }
.change-update { background: #e5ecf7; color: #1f3f78; }
.change-bugfix { background: #fbeccb; color: #7c5c10; }
.change-removed { background: #f8e1e1; color: #8a2424; }
.profile-menu { padding: .5rem; }
.profile-email { padding: .4rem .6rem; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.profile-menu a, .profile-menu button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 4px; background: none; color: var(--ink); text-decoration: none; text-align: left; }
.profile-menu a:hover, .profile-menu button:hover { background: var(--strip); }
.profile-menu i { width: 1.1rem; color: var(--muted); }

.page { width: 100%; padding: 1.75rem; }
.panel { padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.empty { max-width: 40rem; text-align: left; }
.empty i { display: block; margin-bottom: .75rem; color: var(--gold); font-size: 1.75rem; }
.empty p { margin: 0; color: var(--muted); }
.avatar-img { object-fit: cover; padding: 0; }
/* Profile picture on the profile page and its crop dialog */
.avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.avatar-row .avatar { width: 5rem; height: 5rem; font-size: 1.6rem; flex: none; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.avatar-actions form { margin: 0; }
.avatar-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-pick:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
/* .crop-dialog.avatar-dialog: wins over the general .crop-dialog rules further down */
.crop-dialog.avatar-dialog { width: min(46rem, calc(100vw - 2rem)); }
.avatar-dialog .crop-stage { height: min(60vh, 28rem); }
.avatar-dialog .crop-side { width: 16rem; }
.avatar-dialog .crop-preview { width: 8rem; height: 8rem; border-radius: 50%; }
.avatar-dialog .crop-actions { flex-wrap: wrap; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 34rem)); gap: 1.5rem; align-items: start; }

.toolbar { justify-content: flex-end; }
.toolbar .table-search { padding-block: .2rem; font-size: 1rem; }
.table-search { width: 18rem; flex: none; }
.zones-panel { padding-block: .75rem; }
.zones-panel label { margin: 0; }
.zones-panel .form-control { font-size: .95rem; padding: .15rem .5rem; }
.form-panel { max-width: 40rem; }
/*
 * Forms on wide screens: the fields of a form in two columns (.form-grid, .span-2 for a field across both),
 * and the panels of a settings tab side by side (.form-columns). Narrower screens keep one column.
 */
@media (min-width: 1200px) {
    .form-panel.form-wide { max-width: 82rem; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
    .form-grid > .span-2 { grid-column: 1 / -1; }
    .form-grid > .doc-row { column-gap: 1.5rem; }
    .form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 40rem)); column-gap: 1rem; align-items: start; }
    .form-columns > .form-panel { max-width: none; }
}
.form-columns[hidden] { display: none; }
.panel-warning { border-top: 4px solid var(--gold); }
.notice-info { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-text); }
.notice-warning { background: #fff4e0; border-color: #c77700; color: #6b4300; }
.person-ids { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.person-ids summary { color: var(--navy); font-weight: 600; cursor: pointer; }
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .95rem; }
.table > :not(caption) > * > * { padding: .25rem .5rem; line-height: 1.3; }
.table thead th { color: var(--muted); font-weight: 600; }
.row-actions { display: flex; flex-wrap: nowrap; gap: .25rem; }
.row-actions .btn { --bs-btn-padding-x: .35rem; --bs-btn-padding-y: 0; --bs-btn-font-size: .95rem; white-space: nowrap; }
.icon-action { display: inline-grid; place-items: center; width: 1.75rem; height: 1.6rem; border: 0; border-radius: 4px; background: none; color: var(--navy); }
.icon-action:hover:not(:disabled, .is-disabled) { background: var(--strip); }
.icon-action:disabled, .icon-action.is-disabled { color: #aab4c4; cursor: not-allowed; }
.icon-danger { color: var(--red); }
.details { max-width: 26rem; overflow-wrap: anywhere; font-size: .9rem; color: var(--muted); }
.masked-input { -webkit-text-security: disc; }
.test-result { min-height: 1.6rem; margin-bottom: .75rem; font-weight: 500; }
.test-result.is-ok { color: var(--green); }
.test-result.is-bad { color: var(--red); }

.form-select { padding-right: 2.25rem; }
@media (max-width: 991px) { .edit-bar, .toolbar { margin: -1rem -1rem 1rem; padding-inline: 1rem; flex-wrap: wrap; } }
/* Officials import */
.page-note { max-width: 60rem; margin: 0 0 1rem; color: var(--muted); }
.upload-form { display: flex; align-items: center; gap: .5rem; }
.upload-form .form-control { width: 17rem; padding-block: .2rem; font-size: .95rem; }
.import-counts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.import-chip { display: inline-block; padding: .1rem .55rem; border-radius: 4px; border-left: 3px solid #8a96aa; background: var(--strip); color: var(--navy); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.import-counts .import-chip { padding: .25rem .7rem; font-size: 1rem; font-weight: 500; }
.chip-add { border-left-color: #2e8b57; background: #e6f4ec; color: #1d5e3a; }
.chip-update { border-left-color: #2f6db5; background: #e7effa; color: #1f4f8a; }
.chip-delete { border-left-color: #b4232c; background: #fbe9ea; color: #8c1b22; }
.chip-duplicate { border-left-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.chip-error { border-left-color: #b4232c; background: #b4232c; color: #fff; }
.chip-skip, .chip-keep { border-left-color: #8a96aa; background: #eef1f5; color: #4b5565; }
.chip-unchanged { border-left-color: #c3cad6; background: #f6f7f9; color: #6b7280; font-weight: 500; }
.import-table tr.import-duplicate > td { background: #fdf7e9; }
.import-table tr.import-error > td { background: #fdf1f1; }
.import-notes { min-width: 18rem; font-size: .92rem; }
.import-notes del { color: #8c1b22; }
.import-notes ins { color: #1d5e3a; text-decoration: none; font-weight: 600; }
.note-duplicate { color: var(--gold-text); font-weight: 600; }
.note-error { color: #8c1b22; }
.state { display: inline-block; padding: .05rem .5rem; border-radius: 4px; font-size: .9rem; font-weight: 600; background: #eef1f5; color: #4b5565; }
.state-applied { background: #e6f4ec; color: #1d5e3a; }
.state-refused { background: #fbe9ea; color: #8c1b22; }
/* Instructions in a column fixed to the right edge, from under the fixed lines to the bottom of the window.
   Being fixed, it doesn't make the page taller, so the tables keep fitting the window (--below-bars: portal.js). */
.import-main { margin-right: 17.5rem; }
.import-how { position: fixed; top: var(--below-bars, 7.25rem); right: 0; bottom: 0; z-index: 5; width: 18rem; overflow-y: auto; margin: 0; padding: 1.25rem; background: #fff; border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--gold); }
@media (max-width: 1199px) {
    .import-layout { display: flex; flex-direction: column-reverse; gap: 1rem; }
    .import-main { margin-right: 0; }
    .import-how { position: static; width: auto; border: 1px solid var(--line); border-radius: 6px; }
}
.import-how h2 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--navy); }
.import-how ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.import-how li { margin-bottom: .5rem; }
.import-how p { margin: 0; color: var(--muted); font-size: .95rem; }
/* Photos import */
.photo-drop { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 1.5rem; border: 2px dashed #b9c3d3; border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.photo-drop i { font-size: 2rem; color: var(--gold); }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-drop.has-rows { padding: .6rem 1rem; }
.photo-drop.has-rows i { font-size: 1.25rem; }
.photo-drop.is-over, .photo-drop:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.photo-drop:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.photo-panel { padding: .75rem 1rem; }
.photo-scroll { max-height: calc(100vh - 17rem); overflow: auto; }
.photo-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
.photo-source { display: flex; align-items: center; gap: .6rem; min-width: 14rem; }
.photo-file { display: flex; flex-direction: column; min-width: 0; }
.photo-name { overflow-wrap: anywhere; }
.photo-thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 4.5rem; height: 6rem; background: var(--strip); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; padding: 0; }
.photo-thumb img { max-width: 100%; max-height: 100%; }
.photo-thumb-result { cursor: zoom-in; }
.photo-thumb-result img { width: 100%; height: 100%; object-fit: cover; }
.photo-person { min-width: 14rem; }
.photo-person .photo-who { display: block; font-weight: 600; }
.photo-person small { display: block; }
.photo-person > .text-danger + [data-action="pick"] { margin-left: .4rem; }
.photo-status { min-width: 12rem; font-size: .92rem; }
.photo-table tr.photo-blocked > td { background: #fdf7e9; }
.photo-working { color: var(--muted); white-space: nowrap; }
.crop-dialog { width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(15, 31, 63, .35); }
.crop-dialog::backdrop { background: rgba(15, 31, 63, .55); }
.crop-dialog header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.crop-dialog h2 { margin: 0; font-size: 1.15rem; color: var(--navy); }
.crop-body { display: flex; gap: 1.25rem; padding: 1.25rem; }
.crop-stage { flex: 1; min-width: 0; height: min(70vh, 40rem); background: #1b2a4a; border-radius: 6px; overflow: hidden; }
.crop-stage img { display: block; max-width: 100%; }
.crop-loading { margin: 1rem; color: #fff; }
.crop-side { display: flex; flex-direction: column; gap: .75rem; width: 16rem; }
.crop-preview { width: 9rem; height: 12rem; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.crop-tools { display: flex; flex-wrap: wrap; gap: .35rem; }
.crop-adjust { display: flex; flex-direction: column; gap: .4rem; }
.crop-slider { display: flex; flex-direction: column; gap: .1rem; margin: 0; font-size: .85rem; }
.crop-slider span { display: flex; justify-content: space-between; }
.crop-slider output { color: var(--muted); font-variant-numeric: tabular-nums; }
.crop-slider input { width: 100%; accent-color: var(--navy); }
/* The live look of the sliders: photos.js sets --photo-filter on the dialog; the saved photo gets the same */
.crop-dialog .crop-stage img, .crop-dialog .crop-preview img { filter: var(--photo-filter, none); }
.crop-actions { display: flex; gap: .5rem; margin-top: auto; }
.crop-actions .btn { white-space: nowrap; }
@media (max-width: 767px) { .crop-body { flex-direction: column; } .crop-side { width: auto; } }
.busy-status { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; padding: .2rem .75rem; border-radius: 4px; background: var(--gold-soft); color: var(--gold-text); font-weight: 600; white-space: nowrap; }
body.is-busy { cursor: progress; }
.log-details { max-width: none; white-space: pre-wrap; }
.tournament-picker { flex: 0 1 24rem; width: auto; min-width: 8rem; padding-block: .35rem; font-size: 1rem; }

.phase { padding: .1rem .55rem; border-radius: 4px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.phase-setup { background: var(--green-soft); color: var(--green); }
.phase-locked { background: var(--strip); color: var(--navy); }
.phase-expired { background: var(--strip); color: var(--muted); }
.phase-detached { background: var(--red-soft); color: var(--red); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; }
.t-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 6px; }
.t-card:hover { border-top-color: var(--gold); }
.t-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.75rem; margin-bottom: .75rem; }
.t-card h2 { font-size: 1.25rem; margin-bottom: .2rem; }
.t-card h2 a { color: inherit; text-decoration: none; }
.t-card h2 a:hover { text-decoration: underline; }
.t-card p { margin-bottom: .35rem; }
.t-card-date { margin-top: auto; padding-top: .75rem; font-size: .95rem; }
.t-card-manage { align-self: flex-start; margin-top: .4rem; font-size: .95rem; }
.t-card-free { border-top-color: var(--line); background: transparent; border-style: dashed; }
.t-card-free .btn { align-self: flex-start; margin-top: .75rem; }

.disconnect { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ts-control { min-height: 2.8rem; border-color: #aab4c4; font-size: 1.0625rem; }
.ts-wrapper.multi .ts-control > div { background: var(--strip); color: var(--navy); border-radius: 4px; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--navy); border-color: var(--navy); }

.edit-bar, .toolbar {
    position: sticky; top: 4.25rem; z-index: 9; display: flex; align-items: center; gap: .75rem;
    min-height: 2.75rem; padding: .3rem 1.75rem; background: #eef2f7; border-bottom: 1px solid var(--line);
    margin: -1.75rem -1.75rem 1.25rem;
}
.edit-bar.is-editing { box-shadow: inset 0 -3px 0 var(--gold-soft); }
.edit-bar.is-lost { background: var(--red-soft); color: #6f1a16; }
.edit-text { margin-right: auto; color: var(--navy); font-weight: 600; }
.edit-actions { display: flex; flex: none; gap: .5rem; }
.edit-bar .table-search { width: 16rem; padding-block: .2rem; font-size: 1rem; }
.edit-bar .btn, .toolbar .btn { --bs-btn-padding-y: .2rem; --bs-btn-font-size: 1rem; }
/* Buttons and tabs keep their text on one line; when the bar is too narrow, it wraps to a second row */
.edit-bar, .toolbar { flex-wrap: wrap; row-gap: .4rem; justify-content: flex-end; }
.edit-bar .btn, .toolbar .btn, .tabs button { white-space: nowrap; }

.edit-text .tabs { display: flex; gap: .25rem; margin: -.3rem 0; }
.tabs button { padding: .6rem .9rem .45rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 500; }
.tabs button:hover { color: var(--navy); }
.tabs button[aria-selected="true"] { color: var(--navy); font-weight: 700; border-bottom-color: var(--gold); }
fieldset:disabled .form-control, fieldset:disabled .form-select { background: var(--strip); }
.sub-title { margin: 1rem 0 .4rem; color: var(--navy); font-size: 1.05rem; font-weight: 600; }
.doc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.logo-row { display: flex; gap: 1.5rem; align-items: flex-start; }
.logo-preview { width: 8rem; height: 8rem; flex: none; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.logo-empty { display: grid; place-items: center; color: var(--muted); font-size: .9rem; text-align: center; }
.logo-actions { display: flex; gap: .5rem; }
.logo-actions .form-control { min-width: 0; }
.logo-actions .btn { white-space: nowrap; }
table.dataTable th.dt-type-date, table.dataTable td.dt-type-date { text-align: left; }
.row-locked { color: var(--muted); }
.row-lock { color: var(--muted); padding-left: .5rem; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat { padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.stat strong { display: block; color: var(--navy); font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2.5rem; align-items: center; gap: .75rem; padding: .2rem 0; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .6rem; background: var(--strip); border-radius: 3px; }
.bar-fill { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.facts dl { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1rem; margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

.cal-table td { padding-block: .45rem; }
.cal-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.cal-title { font-weight: 600; color: var(--ink); }
.row-locked .cal-title { font-weight: 500; }
/*
 * Event types: --type is the colour the event gets in the Fencing Link calendar (default colour of each type
 * there, see Api_portal::calendar_post and calendar_event_colors.css in Fencing Link).
 */
.type-competition { --type: #4caf50; }
.type-phase { --type: #8bc34a; }
.type-meeting { --type: #9c27b0; }
.type-draw { --type: #f2d600; }
.type-referees { --type: #9e9e9e; }
.type-ceremony { --type: #ff9800; }
.type-desk { --type: #2196f3; }
.type-logistics { --type: #795548; }
.type-deadline { --type: #f44336; }
.type-other { --type: #607d8b; }
.type-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .05rem .5rem; border-radius: 4px; font-size: .85rem; font-weight: 600; white-space: nowrap; background: var(--strip); color: var(--navy); border-left: 3px solid var(--type, #8a96aa); }
.type-chip i { color: var(--type, #8a96aa); font-size: .8rem; }

/* Event editor: the form, and the preview beside it on wide screens */
.event-editor { display: grid; grid-template-columns: minmax(0, 46rem) 19rem; gap: 1.5rem; align-items: start; }
.event-main { max-width: none; }
.event-main fieldset legend { float: none; width: auto; margin-bottom: .5rem; font-size: 1rem; }
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.type-option { position: relative; display: flex; align-items: center; gap: .55rem; margin: 0; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: .92rem; line-height: 1.25; transition: border-color .15s, box-shadow .15s; }
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-option i { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: color-mix(in srgb, var(--type) 16%, #fff); color: var(--type); font-size: .85rem; }
.type-draw i { color: #8a7600; }
.type-option:hover { border-color: var(--type); }
.type-option:has(input:checked) { border-color: var(--type); box-shadow: inset 4px 0 0 var(--type), 0 1px 4px rgba(20, 40, 79, .12); font-weight: 600; }
.type-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.audience-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .4rem; }
.audience-option { position: relative; display: flex; align-items: center; gap: .75rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.audience-option input { position: absolute; opacity: 0; pointer-events: none; }
.audience-option > i { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--strip); color: var(--muted); }
.audience-option span { display: flex; flex-direction: column; line-height: 1.25; }
.audience-option small { color: var(--muted); }
.audience-option::after { content: ""; position: absolute; top: .55rem; right: .6rem; width: 1.1rem; height: 1.1rem; border: 1.5px solid #b7c0ce; border-radius: 4px; background: #fff; }
.audience-option:has(input:checked) { border-color: var(--navy); background: #f4f6fb; }
.audience-option:has(input:checked) > i { background: var(--navy); color: #fff; }
.audience-option:has(input:checked)::after { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat; }
.audience-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.event-preview { position: sticky; top: 8rem; }
.event-preview-label { margin-bottom: .5rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.event-card { display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 8px; border-left: 6px solid var(--type); background: color-mix(in srgb, var(--type) 9%, #fff); box-shadow: 0 1px 3px rgba(20, 40, 79, .12); }
.event-card-icon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--type); color: #fff; }
.type-draw .event-card-icon { color: #4a3f00; }
.event-card-body { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.event-card-body strong { color: var(--ink); overflow-wrap: anywhere; }
.event-card-body strong.is-empty { color: var(--muted); font-weight: 500; font-style: italic; }
.event-card-body span { color: var(--muted); font-size: .88rem; }
.event-card-type { font-weight: 600; color: var(--type) !important; filter: brightness(.8); }
.event-card-audience { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.event-card-audience span { padding: .1rem .55rem; border-radius: 999px; background: var(--strip); color: var(--navy); font-size: .82rem; font-weight: 600; }
.event-card-audience span[hidden] { display: none; }
.event-preview-note { color: var(--muted); font-size: .82rem; line-height: 1.4; }
@media (max-width: 1199px) {
    .event-editor { grid-template-columns: minmax(0, 1fr); }
    .event-preview { position: static; order: -1; }
}
@media (max-width: 575px) { .audience-picker { grid-template-columns: minmax(0, 1fr); } }

/* Lock window ------------------------------------------------------------- */
.lock { width: min(calc(100% - 2rem), 25rem); padding: 2rem; border: 0; border-top: 4px solid var(--gold); border-radius: 4px; color: var(--ink); text-align: center; overscroll-behavior: contain; }
.lock::backdrop { background: rgba(20, 40, 79, .55); backdrop-filter: blur(8px); overflow: hidden; overscroll-behavior: contain; }
.lock form { text-align: left; }
.lock-icon { display: block; text-align: center; color: var(--navy); font-size: 1.5rem; margin-bottom: .75rem; }
.lock h2 { text-align: center; margin-bottom: .25rem; }
.lock-user { text-align: center; font-weight: 600; margin-bottom: .75rem; }
.lock-hint { color: var(--muted); font-size: 1rem; margin-bottom: 1.25rem; }
.lock-message { min-height: 1.6rem; margin: .4rem 0; color: var(--red); font-size: 1rem; }
.lock .btn-link { margin-top: .4rem; }

/* Small screens work, but the application is made for computers and tablets */
@media (max-width: 991px) {
    .shell, [data-sidebar="collapsed"] .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--side); transform: translateX(-100%); }
    .sidebar.is-open { transform: none; }
    .sidebar.is-open ~ .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 20; border: 0; background: rgba(20, 40, 79, .45); }
    [data-sidebar="collapsed"] .side-label { display: inline; }
    [data-sidebar="collapsed"] .side-nav a { justify-content: flex-start; padding: 0 1.5rem; }
    [data-sidebar="collapsed"] .side-brand { justify-content: flex-start; padding: 0 1.125rem; }
    .side-collapse { display: none; }
    .menu-open { display: inline-grid; flex: none; }
    .statusbar { padding: 0 .75rem; gap: .5rem; }
    .profile-name, .profile-button > i, .env-badge { display: none; }
    .page { padding: 1rem; }
    .edit-bar, .toolbar { margin: -1rem -1rem 1rem; padding-inline: 1rem; flex-wrap: wrap; }
    .profile-grid, .overview-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .clock { display: none; }
}

/* Calendar timeline (tournament/calendar_timeline): days one under another, all on the same hour scale */
.ics-menu { inset: 8.25rem 1.25rem auto auto; }
.ics-menu a { display: flex; align-items: center; gap: .6rem; padding: .45rem .25rem; color: var(--navy); text-decoration: none; border-radius: 4px; }
.ics-menu a:hover { background: var(--strip); }
.ics-menu p { color: var(--muted); font-size: .9rem; }
.timeline { --tl-label: 17rem; }
.tl-day + .tl-day { margin-top: 1.5rem; }
.tl-date { margin: 0 0 .25rem; color: var(--navy); font-size: 1.05rem; font-weight: 400; }
.tl-scale { position: relative; height: 1.3rem; margin-left: calc(var(--tl-label) + .75rem); color: var(--muted); font-size: .75rem; }
.tl-scale span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.tl-scale span:first-child { transform: none; }
.tl-scale span:last-child { transform: translateX(-100%); }
.tl-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl-rows li { display: grid; grid-template-columns: var(--tl-label) 1fr; gap: .75rem; align-items: center; min-height: 2.1rem; border-bottom: 1px solid #eef1f5; }
.tl-label { display: flex; gap: .6rem; min-width: 0; padding-left: .5rem; border-left: 4px solid var(--type, #607d8b); }
.tl-time { flex: none; width: 6.4rem; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.tl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-track { position: relative; height: 1.5rem; background: repeating-linear-gradient(90deg, #eef1f5 0 1px, transparent 1px var(--tl-step)); }
.tl-bar { position: absolute; top: 0; bottom: 0; min-width: 1.5rem; display: flex; align-items: center; padding-left: .35rem; border-radius: 4px; background: var(--type, #607d8b); color: #fff; font-size: .75rem; text-decoration: none; }
a.tl-bar:hover { filter: brightness(1.1); box-shadow: 0 0 0 2px var(--gold); }
.type-draw .tl-bar { color: #3a3200; }
.tl-bar.is-moment { min-width: 0; width: 1.5rem !important; margin-left: -.75rem; padding: 0; justify-content: center; border-radius: 50%; }
@media (max-width: 991px) { .timeline { --tl-label: 10rem; } .tl-time { width: auto; } .tl-label { flex-direction: column; gap: 0; } }

/* Printable list of officials (tournament/officials_print): a sheet on screen, plain paper when printed */
.print-page { background: #e9edf3; }
.print-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.print-bar .form-select { width: auto; }
.print-sheet { max-width: 210mm; margin: 1.5rem auto; padding: 14mm 12mm; background: #fff; box-shadow: 0 1px 4px rgba(20, 40, 79, .15); color: #1d2433; font-size: 10.5pt; }
.print-head { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--navy); }
.print-head h1 { margin: 0; color: var(--navy); font-size: 17pt; }
.print-head p { margin: 0; color: var(--muted); }
.print-head-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 9pt; color: var(--muted); }
.print-head-side strong { color: var(--navy); font-size: 12pt; }
.print-group { margin-bottom: 1.1rem; }
.print-group h2 { margin: 0 0 .3rem; color: var(--navy); font-size: 12pt; break-after: avoid; }
.print-group h2 small { margin-left: .4rem; color: var(--muted); font-size: 9pt; font-weight: 400; }
.print-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.print-table .c-name { width: 32%; }
.print-table .c-nation { width: 9%; }
.print-table .c-function { width: 26%; }
.print-table .c-photo { width: 12%; }
.print-table th { padding: .2rem .4rem; border-bottom: 1px solid #9aa6b8; color: var(--muted); font-size: 8.5pt; font-weight: 600; text-align: left; }
.print-table td { padding: .22rem .4rem; border-bottom: 1px solid #e3e7ee; vertical-align: top; }
.print-table tr { break-inside: avoid; }
.print-table .photo-no { color: #b42318; font-weight: 600; }
.print-table .photo-url { color: #9a6700; }
.print-check { width: 4.5rem; color: var(--muted); font-size: 8.5pt; }
.print-missing { break-before: page; }
@media print {
    @page { size: A4; margin: 12mm 10mm; }
    .print-page { background: #fff; }
    .print-bar { display: none; }
    .print-sheet { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .print-table thead { display: table-header-group; }
}
@media screen and (max-width: 800px) { .print-sheet { margin: 0; padding: 1rem; } .print-head { flex-direction: column; gap: .5rem; } .print-head-side { align-items: flex-start; text-align: left; } }