/* Fieldday — sports club & training organiser. Scoped to the workspace: root rules use .uwapp-root.uwapp-fieldday
   (the platform also puts uwapp-fieldday on <body>), everything else lives under .fd-app. Logical properties for RTL. */

.uwapp-root.uwapp-fieldday { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.fd-body-dark { background: #0f1615; }

.fd-app {
  --fd-bg: #f3f6f5; --fd-surface: #ffffff; --fd-surface-2: #eef3f2; --fd-ink: #10201d; --fd-ink-2: #2f3f3c; --fd-muted: #4f5f5b;
  --fd-line: #d9e2e0; --fd-control: #687875; --fd-accent: #0f766e; --fd-accent-hover: #0b5f58; --fd-on-accent: #ffffff;
  --fd-accent-soft: #e3f3f0; --fd-accent-text: #0d6b63; --fd-warm: #c2410c; --fd-warm-soft: #fff1e8; --fd-up: #166534; --fd-down: #b91c1c;
  --fd-warn: #9a5b00; --fd-warn-soft: #fff6e0; --fd-err-soft: #fdecec; --fd-good-soft: #e8f6ec; --fd-focus: #b45309;
  --fd-shadow: 0 1px 2px rgba(16, 32, 29, .06), 0 4px 14px rgba(16, 32, 29, .05);
  --fd-s0: #0f766e; --fd-s1: #c2410c; --fd-s2: #1d4ed8; --fd-s3: #7e22ce; --fd-s4: #4d7c0f; --fd-s5: #be123c; --fd-s6: #a16207; --fd-s7: #475569;
  --fd-r: 12px;
  position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--fd-bg); color: var(--fd-ink); font-size: .95rem; line-height: 1.45; color-scheme: light;
}
.fd-app.fd-dark {
  --fd-bg: #0f1615; --fd-surface: #16201e; --fd-surface-2: #1c2826; --fd-ink: #e6efed; --fd-ink-2: #c8d4d1; --fd-muted: #a1b1ad;
  --fd-line: #2c3b38; --fd-control: #82958f; --fd-accent: #2dd4bf; --fd-accent-hover: #5eead4; --fd-on-accent: #042f2a;
  --fd-accent-soft: #133a35; --fd-accent-text: #5eead4; --fd-warm: #fb923c; --fd-warm-soft: #3a2414; --fd-up: #4ade80; --fd-down: #fca5a5;
  --fd-warn: #fbbf24; --fd-warn-soft: #362a10; --fd-err-soft: #3b1818; --fd-good-soft: #13301f; --fd-focus: #fbbf24;
  --fd-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --fd-s0: #2dd4bf; --fd-s1: #fb923c; --fd-s2: #93c5fd; --fd-s3: #d8b4fe; --fd-s4: #bef264; --fd-s5: #fda4af; --fd-s6: #fde047; --fd-s7: #cbd5e1;
  color-scheme: dark;
}
.fd-app *, .fd-app *::before, .fd-app *::after { box-sizing: border-box; }
.fd-app :focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 2px; }
.fd-app a { color: var(--fd-accent-text); }
.fd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fd-app [hidden] { display: none !important; }
.fd-ico { flex: none; }

/* ---------- controls (platform button/input styles have zero specificity; these win) ---------- */
.fd-app :where(button) { font: inherit; }
.fd-btn, .fd-ibtn, .fd-menubar-btn, .fd-navbtn, .fd-item, .fd-menu-item {
  font: inherit; font-size: .9rem; font-weight: 600; width: auto; cursor: pointer; transition: background-color .12s, border-color .12s;
}
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px; padding: .4rem .85rem; border-radius: 9px; border: 1px solid var(--fd-control); background: var(--fd-surface); color: var(--fd-ink); line-height: 1.2; text-align: center; }
.fd-btn:hover { background: var(--fd-surface-2); color: var(--fd-ink); }
.fd-btn:disabled, .fd-ibtn:disabled { opacity: .55; cursor: not-allowed; }
.fd-btn-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-on-accent); }
.fd-btn-primary:hover { background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); color: var(--fd-on-accent); }
.fd-btn-danger { background: var(--fd-down); border-color: var(--fd-down); color: #fff; }
.fd-dark .fd-btn-danger { color: #2a0606; }
.fd-btn-danger:hover { filter: brightness(1.08); background: var(--fd-down); color: #fff; }
.fd-dark .fd-btn-danger:hover { color: #2a0606; }
.fd-btn-danger-quiet { color: var(--fd-down); border-color: var(--fd-line); }
.fd-btn-danger-quiet:hover { color: var(--fd-down); }
.fd-btn-small { min-height: 32px; padding: .25rem .6rem; font-size: .85rem; }
.fd-btn[aria-pressed="true"], .fd-btn.fd-on { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent-text); }
.fd-ibtn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--fd-ink-2); }
.fd-ibtn:hover { background: var(--fd-surface-2); color: var(--fd-ink); }
.fd-input { font: inherit; font-size: .92rem; color: var(--fd-ink); background: var(--fd-surface); border: 1px solid var(--fd-control); border-radius: 8px; min-height: 36px; padding: .35rem .55rem; width: 100%; min-width: 0; max-width: 100%; }
select.fd-input { padding-inline-end: 1.8rem; }
.fd-input[aria-invalid="true"] { border-color: var(--fd-down); box-shadow: 0 0 0 1px var(--fd-down); }
.fd-input:focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 1px; border-color: var(--fd-accent); }
textarea.fd-input { min-height: 7rem; resize: vertical; line-height: 1.45; }
.fd-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.fd-narrow { width: 5.2rem; }
.fd-mid { width: 7rem; }
.fd-wide { width: 100%; }
.fd-score { width: 4.2rem; text-align: center; padding-inline: .3rem; }
.fd-scoretext { width: 7rem; }
.fd-app input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--fd-accent); margin: 0; flex: none; }
.fd-file { font: inherit; font-size: .88rem; color: var(--fd-ink); max-width: 100%; }
.fd-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fd-field > label { font-size: .82rem; font-weight: 600; color: var(--fd-ink-2); }
.fd-help { margin: 0; font-size: .8rem; color: var(--fd-muted); }
.fd-check { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; cursor: pointer; font-size: .9rem; }
.fd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 0; }
.fd-row.fd-end { align-items: flex-end; }
.fd-row > .fd-input { width: auto; flex: 1 1 10rem; }
.fd-grid2, .fd-grid3, .fd-grid4 { display: grid; gap: .7rem .9rem; }
.fd-grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.fd-grid3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.fd-grid4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.fd-muted { color: var(--fd-muted); }
.fd-note { padding: .5rem .7rem; border-radius: 8px; background: var(--fd-warn-soft); color: var(--fd-ink); border-inline-start: 4px solid var(--fd-warn); }
.fd-up { color: var(--fd-up); font-weight: 600; }
.fd-down { color: var(--fd-down); font-weight: 600; }
.fd-strong { font-weight: 700; }
.fd-plain { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .3rem; }

/* ---------- top bar & menus ---------- */
.fd-bar { display: flex; align-items: center; gap: .5rem; min-height: 50px; padding: .3rem .7rem; background: var(--fd-surface); border-bottom: 1px solid var(--fd-line); min-width: 0; }
.fd-menubar { display: flex; align-items: center; gap: 2px; flex: none; }
.fd-menubar-item { position: relative; }
.fd-menubar-btn { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .65rem; border: 0; border-radius: 8px; background: transparent; color: var(--fd-ink); }
.fd-menubar-btn:hover, .fd-menubar-btn[aria-expanded="true"] { background: var(--fd-surface-2); color: var(--fd-ink); }
.fd-name { font: inherit; font-weight: 700; font-size: 1rem; color: var(--fd-ink); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: .3rem .5rem; min-width: 6rem; width: 18rem; max-width: 40vw; flex: 1 1 18rem; }
.fd-name:hover { border-color: var(--fd-line); }
.fd-name:focus-visible { border-color: var(--fd-accent); background: var(--fd-surface); outline: 3px solid var(--fd-focus); outline-offset: 1px; }
.fd-spacer { flex: 1 1 0; min-width: 0; }
.fd-bar-actions { display: flex; align-items: center; gap: .3rem; flex: none; }
.fd-menu { position: fixed; z-index: 60; min-width: 15rem; max-width: min(24rem, 92vw); max-height: min(70vh, 34rem); overflow-y: auto; padding: .35rem; background: var(--fd-surface); color: var(--fd-ink); border: 1px solid var(--fd-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.fd-menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 34px; padding: .35rem .55rem; border: 0; border-radius: 7px; background: transparent; color: var(--fd-ink); text-align: start; font-weight: 500; }
.fd-menu-item:hover, .fd-menu-item:focus-visible { background: var(--fd-accent-soft); color: var(--fd-ink); }
.fd-menu-item:focus-visible { outline-offset: -2px; }
.fd-menu-item:disabled { opacity: .5; cursor: default; background: transparent; }
.fd-menu-mark { width: 16px; display: inline-flex; flex: none; color: var(--fd-accent-text); }
.fd-menu-label { flex: 1; }
.fd-menu-key { font-size: .78rem; color: var(--fd-muted); white-space: nowrap; }
.fd-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--fd-line); }
.fd-menu-heading { padding: .45rem .55rem .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--fd-muted); }

/* ---------- body: nav + main ---------- */
.fd-body { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: 0; }
.fd-nav { min-height: 0; overflow-y: auto; padding: .7rem .5rem; background: var(--fd-surface); border-inline-end: 1px solid var(--fd-line); }
.fd-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fd-navbtn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 40px; padding: .4rem .65rem; border: 0; border-radius: 9px; background: transparent; color: var(--fd-ink-2); text-align: start; font-weight: 600; }
.fd-navbtn:hover { background: var(--fd-surface-2); color: var(--fd-ink); }
.fd-navbtn[aria-current="page"] { background: var(--fd-accent-soft); color: var(--fd-accent-text); box-shadow: inset 3px 0 0 var(--fd-accent); }
[dir="rtl"] .fd-navbtn[aria-current="page"] { box-shadow: inset -3px 0 0 var(--fd-accent); }
.fd-main { min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-padding-block: 4rem; }
.fd-page { max-width: 78rem; margin: 0 auto; padding: 1.1rem 1.4rem 3rem; }
.fd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1rem; }
.fd-head-text { min-width: min(100%, 22rem); flex: 1 1 26rem; }
.fd-h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; color: var(--fd-ink); }
.fd-h2:focus { outline: none; }
.fd-h2:focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 3px; }
.fd-lede { margin: .35rem 0 0; color: var(--fd-muted); max-width: 62rem; }
.fd-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fd-h3 { margin: 0 0 .6rem; font-size: 1.02rem; font-weight: 700; color: var(--fd-ink); }
.fd-app h4 { margin: .9rem 0 .4rem; font-size: .92rem; color: var(--fd-ink-2); }
.fd-card { background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: 1rem 1.1rem; margin: 0 0 1rem; box-shadow: var(--fd-shadow); min-width: 0; }
.fd-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 32px; }
.fd-fold > summary::-webkit-details-marker { display: none; }
.fd-fold > summary::before { content: ""; width: .55rem; height: .55rem; border-inline-end: 2px solid var(--fd-ink-2); border-bottom: 2px solid var(--fd-ink-2); transform: rotate(-45deg); transition: transform .15s; flex: none; }
[dir="rtl"] .fd-fold > summary::before { transform: rotate(45deg); }
.fd-fold[open] > summary::before, [dir="rtl"] .fd-fold[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.fd-fold > summary .fd-h3 { margin: 0; }
.fd-fold[open] > summary { margin-bottom: .7rem; }
.fd-sub { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--fd-line); }
.fd-sub > h4 { margin-top: 0; }
.fd-empty { padding: 1.4rem; border: 1px dashed var(--fd-control); border-radius: var(--fd-r); background: var(--fd-surface); text-align: center; color: var(--fd-ink-2); }
.fd-empty .fd-row { justify-content: center; }
.fd-split { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.fd-items { position: sticky; top: 0; background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: var(--fd-r); padding: .5rem; box-shadow: var(--fd-shadow); }
.fd-items ul { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: 2px; }
.fd-item { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 8px; background: transparent; color: var(--fd-ink); text-align: start; }
.fd-item:hover { background: var(--fd-surface-2); color: var(--fd-ink); }
.fd-item[aria-current="true"] { background: var(--fd-accent-soft); color: var(--fd-accent-text); }
.fd-item-title { font-weight: 700; overflow-wrap: anywhere; }
.fd-item-sub { font-size: .8rem; font-weight: 500; color: var(--fd-muted); }
.fd-item[aria-current="true"] .fd-item-sub { color: var(--fd-ink-2); }
.fd-add { width: 100%; }
.fd-detail { min-width: 0; }

/* ---------- run panel, badges, errors ---------- */
.fd-run { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--fd-r); background: var(--fd-accent-soft); border: 1px solid color-mix(in srgb, var(--fd-accent) 30%, transparent); }
.fd-run-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; font-size: .88rem; }
.fd-run-status progress { width: 9rem; height: .55rem; accent-color: var(--fd-accent); }
.fd-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.fd-badge-ok { background: var(--fd-good-soft); color: var(--fd-up); }
.fd-badge-stale { background: var(--fd-warn-soft); color: var(--fd-warn); }
.fd-error { display: flex; align-items: flex-start; gap: .6rem; flex-basis: 100%; padding: .6rem .8rem; border-radius: 9px; background: var(--fd-err-soft); color: var(--fd-ink); border-inline-start: 4px solid var(--fd-down); }
.fd-error p { margin: 0; }
.fd-error-title { font-weight: 700; }
.fd-error > div { flex: 1; }
.fd-error .fd-ico { color: var(--fd-down); margin-top: .15rem; }
.fd-warnings, .fd-more { margin: .6rem 0; }
.fd-warnings summary, .fd-more summary { cursor: pointer; font-weight: 600; color: var(--fd-ink-2); min-height: 32px; display: list-item; padding-block: .3rem; }
.fd-warnings ul, .fd-notes { margin: .3rem 0; padding-inline-start: 1.2rem; color: var(--fd-ink-2); font-size: .88rem; }

/* ---------- metrics & tables ---------- */
.fd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .6rem; margin: 0 0 1rem; }
.fd-metric { margin: 0; padding: .65rem .8rem; background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: 10px; min-width: 0; }
.fd-metric dt { font-size: .76rem; font-weight: 700; color: var(--fd-muted); text-transform: uppercase; letter-spacing: .02em; }
.fd-metric dd { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fd-metric-win { border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-metric-win dd { color: var(--fd-accent-text); }
.fd-metric-warn { border-color: var(--fd-warm); background: var(--fd-warm-soft); }
.fd-tablewrap { max-width: 100%; overflow: auto; border: 1px solid var(--fd-line); border-radius: 10px; margin: .5rem 0; background: var(--fd-surface); }
.fd-tablewrap.fd-tall { max-height: 30rem; }
.fd-table { border-collapse: collapse; width: 100%; margin: 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.fd-table th, .fd-table td { padding: .45rem .6rem; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--fd-line); }
.fd-table thead th { position: sticky; top: 0; z-index: 1; background: var(--fd-surface-2); color: var(--fd-ink-2); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.fd-table tbody tr:last-child > * { border-bottom: 0; }
.fd-table tbody th { font-weight: 600; }
.fd-table .fd-num { text-align: end; white-space: nowrap; }
.fd-table .fd-center { text-align: center; }
.fd-table.fd-edit td { padding: .3rem .4rem; }
.fd-table.fd-edit input[type=text], .fd-table.fd-edit input[type=search] { min-width: 8.5rem; }
.fd-table.fd-edit input[type=date] { min-width: 9.5rem; }
.fd-table.fd-edit input[type=time] { min-width: 7rem; }
.fd-table.fd-edit select { min-width: 8rem; }
.fd-table tr.fd-top > * { background: var(--fd-accent-soft); }
.fd-table tr.fd-hot > * { background: var(--fd-warm-soft); }
.fd-table tr.fd-ready > * { background: color-mix(in srgb, var(--fd-accent-soft) 60%, transparent); }
.fd-table tr.fd-played .fd-input { color: var(--fd-ink-2); }
.fd-scorebox { display: inline-flex; align-items: center; gap: .3rem; }
.fd-setsreps { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.fd-toolbar { justify-content: space-between; }
.fd-filter { max-width: 22rem; }

/* ---------- mixer ---------- */
.fd-picks { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .15rem .8rem; }
.fd-guest { display: flex; align-items: center; gap: .3rem; }
.fd-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); gap: .8rem; }
.fd-round { border: 1px solid var(--fd-line); border-radius: 10px; padding: .6rem .7rem; background: var(--fd-surface-2); }
.fd-round h4 { margin: 0 0 .4rem; }
.fd-round p { margin: .4rem 0 0; font-size: .85rem; }
.fd-courts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fd-court { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--fd-surface); border-radius: 8px; border: 1px solid var(--fd-line); }
.fd-court-no { font-size: .75rem; font-weight: 700; color: var(--fd-muted); white-space: nowrap; }
.fd-team-a { text-align: end; font-weight: 600; overflow-wrap: anywhere; }
.fd-team-b { font-weight: 600; overflow-wrap: anywhere; }
.fd-heat { margin-top: .8rem; }

/* ---------- tournaments ---------- */
.fd-entrants { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .3rem .8rem; }
.fd-entrant { display: flex; align-items: center; gap: .3rem; padding: .15rem .3rem; border-radius: 8px; background: var(--fd-surface-2); }
.fd-seed { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--fd-accent); color: var(--fd-on-accent); font-size: .78rem; font-weight: 800; }
.fd-entrant-name { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.fd-pick { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.fd-champion { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--fd-r); background: linear-gradient(135deg, var(--fd-accent-soft), var(--fd-warm-soft)); font-size: 1.1rem; font-weight: 800; color: var(--fd-ink); }
.fd-bracketwrap { overflow: auto; max-height: 34rem; border-radius: 10px; background: #fff; border: 1px solid var(--fd-line); }
.fd-svgimg { display: block; max-width: none; height: auto; }
.fd-bracket { min-width: 100%; }
.fd-chartimg, .fd-heat { max-width: 100%; border-radius: 10px; background: #fff; }
.fd-dark .fd-chartimg, .fd-dark .fd-heat, .fd-dark .fd-bracketwrap { filter: brightness(.92); }

/* ---------- league ---------- */
.fd-scenarios { display: grid; gap: .7rem; margin: .5rem 0; }
.fd-scenario { border: 1px solid var(--fd-line); border-radius: 10px; padding: .6rem .7rem; background: var(--fd-surface-2); }
.fd-scenario > .fd-row:first-child { margin-top: 0; align-items: flex-end; }
.fd-scenario .fd-field { flex: 1 1 14rem; }
.fd-scenario-tag { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--fd-warm); color: #fff; font-weight: 800; }
.fd-dark .fd-scenario-tag { color: #2a1405; }
.fd-changes { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.fd-change { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.fd-change select { width: auto; flex: 1 1 9rem; }

/* ---------- roster teams, training ---------- */
.fd-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .7rem; margin-top: .6rem; }
.fd-team { border: 1px solid var(--fd-line); border-top: 4px solid var(--fd-accent); border-radius: 10px; padding: .6rem .8rem; background: var(--fd-surface-2); }
.fd-team:nth-child(2n) { border-top-color: var(--fd-warm); }
.fd-team h4 { margin: 0; }
.fd-team p { margin: .1rem 0 .3rem; font-size: .82rem; }
.fd-team ul { margin: 0; padding-inline-start: 1.1rem; }
.fd-seg { display: inline-flex; gap: .3rem; margin: 0 0 1rem; padding: .25rem; border-radius: 11px; background: var(--fd-surface-2); border: 1px solid var(--fd-line); }
.fd-athlete-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.fd-athlete-head .fd-h3 { margin: 0; flex: 1; }

/* ---------- calendar ---------- */
.fd-agenda { display: grid; gap: 1rem; margin-top: .6rem; }
.fd-month h4 { margin: 0 0 .4rem; text-transform: capitalize; }
.fd-month ul, .fd-upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fd-upcoming { margin-block-end: .8rem; }
.fd-ag, .fd-upcoming li { display: grid; grid-template-columns: minmax(8.5rem, auto) auto minmax(0, 1fr); align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 8px; background: var(--fd-surface-2); }
.fd-ag-date { font-weight: 700; font-size: .86rem; white-space: nowrap; }
.fd-ag-time { margin-inline-start: .4rem; color: var(--fd-muted); font-weight: 600; }
.fd-ag-kind { font-size: .74rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--fd-surface); border: 1px solid var(--fd-line); color: var(--fd-ink-2); white-space: nowrap; }
.fd-ag-title { overflow-wrap: anywhere; }
.fd-ag-title small { font-size: .82rem; }
.fd-days { border: 1px solid var(--fd-line); border-radius: 10px; padding: .5rem .8rem .7rem; margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.fd-days legend { font-weight: 700; font-size: .85rem; padding: 0 .3rem; }

/* ---------- dashboard ---------- */
.fd-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 0 1rem; align-items: start; }
.fd-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fd-finding { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; background: var(--fd-surface-2); border-inline-start: 4px solid var(--fd-s7); }
.fd-finding.fd-good { border-inline-start-color: var(--fd-up); }
.fd-finding.fd-warn { border-inline-start-color: var(--fd-warm); }
.fd-finding.fd-info { border-inline-start-color: var(--fd-accent); }
.fd-finding-text { flex: 1; }
.fd-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--fd-r); background: linear-gradient(120deg, var(--fd-accent-soft), var(--fd-warm-soft)); border: 1px solid var(--fd-line); }
.fd-hint p { margin: 0; max-width: 48rem; }
.fd-hint .fd-row { margin: 0; }
.fd-recent, .fd-tpls { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.fd-recent li { display: flex; align-items: center; gap: .6rem; }
.fd-recent-open { flex: 1; justify-content: flex-start; text-align: start; }
.fd-tpls { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.fd-tpls li { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem; border: 1px solid var(--fd-line); border-radius: 10px; background: var(--fd-surface-2); }
.fd-tpls p { margin: 0 0 .4rem; flex: 1; color: var(--fd-ink-2); font-size: .88rem; }
.fd-tpls .fd-btn { align-self: flex-start; }
.fd-tpls h4 { margin: 0; font-size: .95rem; }
.fd-chips { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.fd-chips li { padding: .15rem .55rem; border-radius: 999px; background: var(--fd-surface-2); border: 1px solid var(--fd-line); font-size: .85rem; }
.fd-keys { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .8rem 0; }
.fd-keys dt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.fd-keys dd { margin: 0; }
.fd-single { font-weight: 700; }
.fd-app code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--fd-surface-2); color: var(--fd-ink); padding: .05em .3em; border-radius: 4px; }

/* ---------- charts ---------- */
.fd-figure { margin: .6rem 0; }
.fd-chart { width: 100%; height: auto; max-height: 300px; display: block; }
.fd-grid { stroke: var(--fd-line); stroke-width: 1; }
.fd-zero { stroke: var(--fd-control); stroke-width: 1; }
.fd-axis { fill: var(--fd-muted); font-size: 11px; font-family: inherit; }
.fd-line { fill: none; stroke-width: 2.4; }
.fd-dot { stroke: var(--fd-surface); stroke-width: 1.5; }
.fd-bar.fd-s0, .fd-dot.fd-s0, .fd-key.fd-s0 { fill: var(--fd-s0); background: var(--fd-s0); } .fd-line.fd-s0 { stroke: var(--fd-s0); }
.fd-bar.fd-s1, .fd-dot.fd-s1, .fd-key.fd-s1 { fill: var(--fd-s1); background: var(--fd-s1); } .fd-line.fd-s1 { stroke: var(--fd-s1); }
.fd-bar.fd-s2, .fd-dot.fd-s2, .fd-key.fd-s2 { fill: var(--fd-s2); background: var(--fd-s2); } .fd-line.fd-s2 { stroke: var(--fd-s2); }
.fd-bar.fd-s3, .fd-dot.fd-s3, .fd-key.fd-s3 { fill: var(--fd-s3); background: var(--fd-s3); } .fd-line.fd-s3 { stroke: var(--fd-s3); }
.fd-bar.fd-s4, .fd-dot.fd-s4, .fd-key.fd-s4 { fill: var(--fd-s4); background: var(--fd-s4); } .fd-line.fd-s4 { stroke: var(--fd-s4); }
.fd-bar.fd-s5, .fd-dot.fd-s5, .fd-key.fd-s5 { fill: var(--fd-s5); background: var(--fd-s5); } .fd-line.fd-s5 { stroke: var(--fd-s5); }
.fd-bar.fd-s6, .fd-dot.fd-s6, .fd-key.fd-s6 { fill: var(--fd-s6); background: var(--fd-s6); } .fd-line.fd-s6 { stroke: var(--fd-s6); }
.fd-bar.fd-s7, .fd-dot.fd-s7, .fd-key.fd-s7 { fill: var(--fd-s7); background: var(--fd-s7); } .fd-line.fd-s7 { stroke: var(--fd-s7); }
.fd-bar.fd-band-l { fill: var(--fd-up); } .fd-bar.fd-band-m { fill: var(--fd-s6); } .fd-bar.fd-band-h { fill: var(--fd-warm); } .fd-bar.fd-band-vh { fill: var(--fd-down); }
.fd-band { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-weight: 700; font-size: .82rem; }
.fd-band-l { background: var(--fd-good-soft); color: var(--fd-up); }
.fd-band-m { background: var(--fd-warn-soft); color: var(--fd-warn); }
.fd-band-h { background: var(--fd-warm-soft); color: var(--fd-warm); }
.fd-band-vh { background: var(--fd-err-soft); color: var(--fd-down); }
.fd-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .3rem 0 0; padding: 0; font-size: .82rem; color: var(--fd-ink-2); }
.fd-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.fd-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }

/* ---------- status bar ---------- */
.fd-status { display: flex; align-items: center; gap: 1rem; min-height: 32px; padding: .2rem .8rem; background: var(--fd-surface); border-top: 1px solid var(--fd-line); font-size: .82rem; color: var(--fd-ink-2); min-width: 0; }
.fd-msg { margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-msg[data-tone="error"] { color: var(--fd-down); font-weight: 700; }
.fd-msg[data-tone="good"] { color: var(--fd-up); font-weight: 600; }
.fd-msg[data-tone="warn"] { color: var(--fd-warn); font-weight: 600; }
.fd-runner, .fd-save, .fd-net { white-space: nowrap; }
.fd-runner.fd-busy { color: var(--fd-accent-text); font-weight: 700; }
.fd-net { display: inline-flex; align-items: center; gap: .3rem; color: var(--fd-warn); font-weight: 700; }

/* ---------- dialogs ---------- */
.fd-dialog { width: min(40rem, calc(100vw - 1.5rem)); max-height: min(88vh, 54rem); padding: 0; border: 1px solid var(--fd-line); border-radius: 14px; background: var(--fd-surface); color: var(--fd-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.fd-dialog-wide { width: min(58rem, calc(100vw - 1.5rem)); }
.fd-dialog[open] { display: flex; flex-direction: column; }
.fd-dialog::backdrop { background: rgba(10, 20, 18, .45); }
.fd-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem .6rem 1.2rem; border-bottom: 1px solid var(--fd-line); }
.fd-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.fd-dialog-body { padding: 1rem 1.2rem; overflow-y: auto; min-height: 0; }
.fd-dialog-body > p:first-child { margin-top: 0; }
.fd-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .7rem 1.2rem .9rem; border-top: 1px solid var(--fd-line); }
.fd-preview { margin-top: .8rem; }
.fd-dialog-body > .fd-field + .fd-field, .fd-dialog-body > .fd-field + .fd-check, .fd-dialog-body > .fd-check + .fd-field { margin-top: .85rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .fd-split { grid-template-columns: minmax(0, 1fr); }
  .fd-items { position: static; }
  .fd-items ul { display: flex; flex-wrap: wrap; gap: .3rem; }
  .fd-item { width: auto; border: 1px solid var(--fd-line); }
}
@media (max-width: 860px) {
  .fd-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .fd-nav { overflow-x: auto; overflow-y: hidden; padding: .35rem .5rem; border-inline-end: 0; border-bottom: 1px solid var(--fd-line); }
  .fd-nav ul { display: flex; gap: .25rem; width: max-content; }
  .fd-navbtn { flex-direction: column; gap: .1rem; min-height: 48px; padding: .3rem .55rem; font-size: .76rem; }
  .fd-navbtn[aria-current="page"], [dir="rtl"] .fd-navbtn[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--fd-accent); }
  .fd-page { padding: .9rem .8rem 2.5rem; }
  .fd-name { width: auto; flex: 1 1 6rem; max-width: none; }
  .fd-spacer { display: none; }
  .fd-status .fd-save { display: none; }
}
@media (max-width: 560px) {
  .fd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .1rem; padding-inline: .4rem; }
  .fd-menubar { min-width: 0; overflow: hidden; }
  .fd-menubar-btn { padding-inline: .5rem; }
  .fd-name { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .fd-bar-actions { grid-column: 2; grid-row: 1; }
  .fd-runbtn span { display: none; }
  .fd-runbtn { min-width: 40px; padding-inline: .5rem; }
  .fd-h2 { font-size: 1.25rem; }
  .fd-court { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fd-court-no { grid-column: 1 / -1; }
  .fd-ag, .fd-upcoming li { grid-template-columns: minmax(0, 1fr) auto; }
  .fd-ag-title { grid-column: 1 / -1; }
  .fd-card { padding: .8rem .8rem; }
  .fd-run { padding: .6rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { .fd-app * { transition: none !important; animation: none !important; } }

/* ---------- print: only the club report ---------- */
.fd-report { display: none; }
@media print {
  body.fd-printing > *:not(.fd-report) { display: none !important; }
  body.fd-printing { background: #fff !important; display: block !important; height: auto !important; }
  .fd-report { display: block; color: #111; font: 11pt/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 0 4mm; }
  .fd-report h1 { font-size: 20pt; margin: 0 0 2mm; }
  .fd-report h2 { font-size: 13pt; margin: 6mm 0 2mm; border-bottom: 1.5pt solid #0f766e; padding-bottom: 1mm; break-after: avoid; }
  .fd-report section { break-inside: avoid-page; }
  .fd-report table { border-collapse: collapse; width: 100%; font-size: 9.5pt; margin: 1mm 0 3mm; }
  .fd-report th, .fd-report td { border-bottom: .5pt solid #bbb; padding: 1mm 1.5mm; text-align: start; }
  .fd-report thead th { background: #eef3f2; }
  .fd-report .fd-tablewrap { border: 0; overflow: visible; max-height: none; }
  .fd-report .fd-metrics { display: flex; flex-wrap: wrap; gap: 3mm; }
  .fd-report .fd-metric { border: .5pt solid #bbb; padding: 2mm 3mm; border-radius: 2mm; }
  .fd-report .fd-metric dt { font-size: 7.5pt; color: #444; text-transform: uppercase; }
  .fd-report .fd-metric dd { margin: 0; font-weight: 800; font-size: 12pt; }
  .fd-report .fd-muted { color: #444; }
  .fd-report .fd-sr { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; margin: 0; font-weight: 700; }
}