@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #f4f5f6;
  --surface: #ffffff;
  --surface-muted: #f7f8f9;
  --ink: #171a1f;
  --muted: #68717c;
  --line: #d9dde2;
  --line-strong: #bcc3cb;
  --blue: #145fa8;
  --blue-hover: #0d4d89;
  --blue-soft: #eaf2fa;
  --green: #176b46;
  --green-soft: #e9f5ef;
  --amber: #8a5b0a;
  --amber-soft: #fff4d6;
  --red: #aa2c25;
  --red-soft: #faecea;
  --radius: 8px;
  --shadow-dialog: 0 24px 70px rgb(18 24 31 / 22%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; background: var(--canvas); }
body { min-height: 100vh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-hover); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .25rem; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: .55rem; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
h3 { margin-bottom: .3rem; font-size: 1rem; }

.container { width: calc(100% - 2rem); max-width: 72rem; margin-inline: auto; }
.page-content { padding-block: 2rem 3.5rem; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .5rem .75rem; color: #fff; background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.muted, .form-help { color: var(--muted); }
.monospace { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Header */
.site-header { background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--line); }
.site-header__content { min-height: 3.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 1.02rem; font-weight: 780; letter-spacing: -.02em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-logo { width: 2.65rem; height: 2.35rem; object-fit: contain; }
.brand-wordmark { white-space: nowrap; }
.site-header nav { min-width: 0; display: flex; align-items: center; gap: .7rem; }
.site-nav__links { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.site-nav__links > a, .nav-link { min-height: 2.15rem; padding: .45rem .65rem; display: inline-flex; align-items: center; color: #30363d; font-weight: 600; text-decoration: none; background: transparent; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.site-nav__links > a:hover, .nav-link:hover { color: var(--ink); background: #f0f2f4; }
.site-nav__links > a.is-active { color: var(--blue); background: var(--blue-soft); }
.nav-form { margin: 0 0 0 .35rem; }
.nav-form .nav-link { border: 1px solid var(--line); }

/* Kontomeny */
.account-menu { position: relative; flex: 0 0 auto; }
.account-trigger { min-height: 2.35rem; padding: .25rem .5rem .25rem .3rem; display: inline-flex; align-items: center; gap: .45rem; color: #30363d; font-weight: 650; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.account-trigger:hover { color: var(--ink); background: #f0f2f4; }
.account-trigger[aria-expanded="true"] { color: var(--ink); background: #f0f2f4; border-color: var(--line); }
.account-avatar { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 700; background: var(--blue); border-radius: 999px; }
.account-avatar--large { width: 2.3rem; height: 2.3rem; font-size: .8rem; }
.account-trigger__name { max-width: 10rem; overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.account-chevron { flex: 0 0 auto; color: var(--muted); transition: transform .18s ease; }
.account-menu.is-open .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; min-width: 16.5rem; padding: .35rem; display: grid; gap: .1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; opacity: 0; transform: translateY(-.35rem) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; box-shadow: 0 18px 40px rgb(18 24 31 / 14%); }
.account-menu.is-open .account-dropdown { opacity: 1; transform: none; }
.account-identity { margin-bottom: .2rem; padding: .5rem .55rem; display: flex; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.account-identity > span { min-width: 0; display: grid; }
.account-identity strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { color: var(--muted); font-size: .72rem; }
.account-item { width: 100%; min-height: 2.3rem; padding: .45rem .55rem; display: flex; align-items: center; justify-content: flex-start; gap: .55rem; color: #30363d; font-size: .85rem; font-weight: 600; text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: 7px; cursor: pointer; box-shadow: none; }
.account-item:hover, .account-item:focus-visible { color: var(--ink); background: var(--surface-muted); }
.account-item[aria-current="page"] { color: var(--blue); background: var(--blue-soft); }
.account-item svg { flex: 0 0 auto; color: var(--muted); }
.account-item:hover svg, .account-item[aria-current="page"] svg { color: currentcolor; }
.account-item--danger, .account-item--danger svg { color: var(--red); }
.account-item--danger:hover { color: var(--red); background: var(--red-soft); }
.account-form { margin: .2rem 0 0; padding-top: .25rem; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .account-dropdown, .account-chevron, .hint-bubble { transition: none; }
}

.danger-zone { margin-top: 1.5rem; padding: 1rem; display: grid; gap: .7rem; background: var(--surface); border: 1px solid #e7c9c6; border-radius: var(--radius); }
.danger-zone-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.danger-zone-head h2 { margin: 0; font-size: 1rem; }
.danger-zone p { margin: 0; font-size: .82rem; }
.danger-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.swish-qr { padding: .6rem 0 .2rem; display: grid; gap: .5rem; justify-items: start; }
.swish-qr svg { width: 10.5rem; height: auto; background: #fff; }
.swish-qr p { margin: 0; max-width: 24rem; font-size: .75rem; }
.club-qr { display: grid; gap: .6rem; justify-items: start; }
.club-qr svg { width: 12rem; height: auto; background: #fff; }
.club-qr .monospace { font-size: .72rem; word-break: break-all; }

/* Page framing */
.page-header, .compact-header { margin-bottom: 1.6rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-header > div, .compact-header > div { min-width: 0; }
.compact-header h1, .page-header h1 { margin-bottom: .2rem; }
.page-lead { margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }
.eyebrow { margin-bottom: .45rem; color: var(--muted); font-size: .72rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.header-actions, .form-actions, .swish-actions, .payment-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs { margin-bottom: 1.15rem; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { color: inherit; }
.section-heading { margin: 1.8rem 0 .65rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: 0; }

/* Controls */
.button, button { min-height: 2.35rem; padding: .48rem .8rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; color: var(--ink); font-weight: 650; line-height: 1.1; text-decoration: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer; box-shadow: none; }
.button:hover, button:hover { color: var(--ink); background: #f4f5f6; border-color: #9da6b0; }
.button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgb(20 95 168 / 22%); outline-offset: 1px; }
.button-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button-primary:hover { color: #fff; background: var(--blue-hover); border-color: var(--blue-hover); }
.button-secondary { background: var(--surface); }
.button-danger { color: var(--red); background: var(--surface); border-color: #d8aaa6; }
.button-danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.button-small { min-height: 1.95rem; padding: .34rem .6rem; font-size: .78rem; }
button:disabled, .button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button { width: 2.25rem; min-width: 2.25rem; height: 2.25rem; min-height: 2.25rem; padding: 0; font-size: 1.25rem; }

input, select, textarea { width: 100%; min-height: 2.5rem; padding: .52rem .65rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: none; }
input::placeholder { color: #9299a1; }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; accent-color: var(--blue); }
label { font-weight: 650; }
.form-help { font-size: .8rem; font-weight: 430; }
.form-card, .notice-card, .payment-import-card { max-width: 54rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-card form, .compact-form { display: grid; gap: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.form-field { display: grid; gap: .3rem; }
.form-field label { font-size: .84rem; }
.form-actions { margin-top: .35rem; }
.form-errors, .field-errors, .errorlist { margin: 0; padding: .65rem .8rem; color: var(--red); background: var(--red-soft); border-radius: 6px; list-style-position: inside; }
.has-error input, .has-error select { border-color: var(--red); }
.checkbox-field, .compact-checkbox { display: flex; align-items: flex-start; gap: .55rem; }
.compact-checkbox { padding: .65rem; background: var(--surface-muted); border-radius: 6px; }
.compact-checkbox span { display: grid; gap: .1rem; }
.advanced-fields { padding: .65rem; background: var(--surface-muted); border-radius: 6px; }
.advanced-fields summary { color: var(--blue); font-weight: 650; cursor: pointer; }
.advanced-fields[open] summary { margin-bottom: .65rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

/* Messages and status */
.messages { margin-bottom: 1rem; }
.message { margin: 0 0 .4rem; padding: .65rem .8rem; background: var(--blue-soft); border-left: 3px solid var(--blue); border-radius: 3px; }
.message--success { background: var(--green-soft); border-color: var(--green); }
.message--error { background: var(--red-soft); border-color: var(--red); }
.status-badge { padding: .18rem .42rem; display: inline-flex; align-items: center; width: max-content; color: #4d5660; font-size: .7rem; font-weight: 700; line-height: 1.25; background: #edf0f2; border-radius: 4px; white-space: nowrap; }
.status-confirmed { color: var(--green); background: var(--green-soft); }
.status-waiting, .status-unmarked { color: var(--amber); background: var(--amber-soft); }
.status-cancelled { color: var(--red); background: var(--red-soft); }

/* Dashboard */
.stats-grid { margin-bottom: 1.75rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat-card { min-width: 0; padding: 1rem 1.15rem; display: grid; gap: .2rem; border-right: 1px solid var(--line); }
.stat-card:last-child { border-right: 0; }
.stat-label { color: var(--muted); font-size: .78rem; }
.stat-value { font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.training-card { padding: 1rem 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.training-card-featured { border-left: 3px solid var(--blue); }
.training-card-main { min-width: 0; }
.training-card h3 { margin-bottom: .2rem; font-size: 1.05rem; }
.training-card p { margin-bottom: 0; }
.training-date { margin-bottom: .2rem !important; color: var(--blue); font-size: .78rem; font-weight: 700; text-transform: capitalize; }
.empty-state { padding: 1.3rem; color: var(--muted); text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-state p:last-child { margin-bottom: 0; }
.dashboard-session-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dashboard-session-row { min-height: 3.4rem; padding: .42rem .55rem; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; border-bottom: 1px solid var(--line); }
.dashboard-session-row:last-child { border-bottom: 0; }
.dashboard-session-row.is-next { box-shadow: inset 3px 0 var(--blue); }
.dashboard-session-date { display: grid; justify-items: center; color: var(--muted); line-height: 1; text-transform: uppercase; }
.dashboard-session-date strong { color: var(--ink); font-size: 1rem; }
.dashboard-session-date span { margin-top: .15rem; font-size: .58rem; font-weight: 700; }
.dashboard-session-main { min-width: 0; display: grid; }
.dashboard-session-main > strong, .dashboard-session-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-session-main > span { color: var(--muted); font-size: .72rem; }
.dashboard-session-state { display: flex; align-items: center; gap: .25rem; }
.dashboard-session-action form { margin: 0; }

/* Calendar */
.month-carousel { margin-bottom: .65rem; padding: .45rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.month-carousel h2 { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; font-size: 1rem; text-transform: capitalize; }
.month-picker { grid-column: 2; grid-row: 1; min-width: 0; opacity: 0; }
.month-picker input { cursor: pointer; }
.calendar-agenda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.calendar-day { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.calendar-day:last-child { border-bottom: 0; }
.calendar-date { padding: .65rem .35rem; display: flex; align-items: center; flex-direction: column; justify-content: center; color: var(--muted); background: var(--surface-muted); border-right: 1px solid var(--line); text-transform: uppercase; }
.calendar-date span { font-size: .62rem; font-weight: 700; }
.calendar-date strong { color: var(--ink); font-size: 1.15rem; }
.calendar-sessions { min-width: 0; }
.calendar-session { min-height: 3rem; padding: .45rem .65rem; display: grid; grid-template-columns: 7.4rem minmax(8rem, 1fr) auto auto; align-items: center; gap: .65rem; border-bottom: 1px solid #e8eaed; }
.calendar-session:last-child { border-bottom: 0; }
.calendar-session time { font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-session-title { min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.calendar-session-meta { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.calendar-session.is-cancelled { opacity: .6; text-decoration: line-through; }

/* Registry */
.registry-toolbar { position: sticky; z-index: 2; top: 0; margin-bottom: .45rem; padding: .45rem; display: flex; align-items: center; gap: .65rem; background: rgb(244 245 246 / 94%); backdrop-filter: blur(10px); }
.registry-toolbar input { min-height: 2.3rem; }
.compact-count { flex: 0 0 auto; font-size: .75rem; }
.member-list, .placement-list, .quick-member-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.member-row { min-height: 2.8rem; padding: .4rem .55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .55rem; border-bottom: 1px solid #e7e9ec; }
.member-row:last-child { border-bottom: 0; }
.member-identity { min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.member-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-meta { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.member-flags, .contact-status, .member-actions { display: flex; align-items: center; gap: .25rem; }
.status-admin { color: var(--blue); background: var(--blue-soft); }
.status-responsible { color: #59440b; background: var(--amber-soft); }
.session-header-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.contact-icon { position: relative; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; color: #89919a; font-size: .78rem; background: #edf0f2; border-radius: 5px; }
.contact-icon.is-complete { color: var(--green); background: var(--green-soft); }
.contact-icon.is-missing { color: #8c949d; background: #f1f2f3; }
.contact-icon.is-missing::after { content: ""; position: absolute; width: 1.15rem; height: 1px; background: var(--red); transform: rotate(-42deg); box-shadow: 0 0 0 1px rgb(255 255 255 / 70%); }
.account-row { min-height: 2.8rem; padding: .4rem .55rem; display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto 7rem; align-items: center; gap: .55rem; border-bottom: 1px solid #e7e9ec; }
.account-row:last-child { border-bottom: 0; }
.account-email { min-width: 0; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.account-row .member-actions { justify-content: flex-end; }
.account-row form { margin: 0; }
.account-action-label { padding-right: .45rem; font-size: .75rem; }

/* Imports and account activation */
.import-upload-card { margin-bottom: 1rem; }
.compact-upload-form { display: flex; align-items: center; gap: .65rem; }
.compact-upload-form input { min-width: 0; }
.compact-upload-form .button { flex: 0 0 auto; }
.import-preview { max-width: none; }
.import-summary { margin-block: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.import-summary span { padding: .65rem .75rem; display: flex; align-items: baseline; gap: .35rem; color: var(--muted); font-size: .75rem; border-right: 1px solid var(--line); }
.import-summary span:last-child { border-right: 0; }
.import-summary strong { color: var(--ink); font-size: 1.1rem; }
.activation-link-card { max-width: none; margin-bottom: 1rem; }
.activation-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.activation-link-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
.activation-card { margin-top: 2rem; }
.activation-form { padding: 1rem 0 0; grid-template-columns: 1fr; }

/* Training detail */
.booking-card, .booking-summary-card { margin-bottom: .75rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.booking-cta-card, .booking-optional-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.booking-card h2, .booking-summary-card h2 { margin: 0; font-size: 1rem; }
.booking-card p { margin: .15rem 0 0; }
.booking-summary-list { margin: .45rem 0; }
.booking-summary-row { min-height: 2.5rem; padding: .3rem 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--line); }
.booking-summary-row > span { display: flex; align-items: center; gap: .4rem; }
.payment-summary { padding: .75rem; display: grid; gap: .25rem; background: var(--surface-muted); border-radius: 6px; }
.payment-summary--member { margin-top: .65rem; padding: .65rem 0 0; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.member-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.member-payment-heading > span:first-child { display: flex; align-items: baseline; gap: .45rem; }
.member-payment-heading small { color: var(--muted); font-weight: 450; }
.swish-actions { margin-top: .35rem; }
.payment-details { color: var(--muted); font-size: .75rem; }
.payment-details summary { cursor: pointer; }
.payment-details[open] { display: grid; gap: .1rem; }
.booking-count-card { padding: .4rem 0; display: flex; align-items: baseline; gap: .35rem; background: transparent; border: 0; }
.session-reconciliation { margin: .9rem 0 .75rem; padding: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.reconciliation-heading { margin: 0 0 .55rem; align-items: center; }
.reconciliation-heading > div { display: grid; }
.reconciliation-heading h2 { font-size: 1rem; }
.reconciliation-heading .muted { font-size: .7rem; }
.reconciliation-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.reconciliation-stats > span { min-height: 3rem; padding: .35rem .5rem; display: grid; align-content: center; color: var(--muted); font-size: .66rem; background: var(--surface-muted); border-right: 1px solid var(--line); }
.reconciliation-stats > span:last-child { border-right: 0; }
.reconciliation-stats strong { color: var(--ink); font-size: 1rem; line-height: 1.05; }
.reconciliation-stats .is-present strong, .reconciliation-stats .is-paid strong { color: var(--green); }
.reconciliation-stats .is-sick strong { color: var(--amber); }
.reconciliation-stats .is-absent strong, .reconciliation-stats .is-unpaid strong { color: var(--red); }
.attendance-filters { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.filter-chip { min-height: 1.9rem; padding: .25rem .55rem; color: var(--muted); font: inherit; font-size: .7rem; font-weight: 650; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.filter-chip span { margin-left: .2rem; }
.filter-chip:hover { color: var(--ink); border-color: #9ca4ad; }
.filter-chip.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }
.cancelled-history { margin: .65rem 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cancelled-history > summary { min-height: 2.8rem; padding: .5rem .7rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; }
.cancelled-history > summary::-webkit-details-marker { display: none; }
.cancelled-history > summary > span:first-child { display: grid; }
.cancelled-history > summary small { color: var(--muted); font-size: .7rem; font-weight: 450; }
.cancelled-history-list { border-top: 1px solid var(--line); }
.cancelled-history-row { min-height: 2.75rem; padding: .4rem .65rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }
.cancelled-history-row:last-child { border-bottom: 0; }
.cancelled-history-row > div:first-child { min-width: 0; display: grid; }
.cancelled-history-row small { color: var(--muted); font-size: .68rem; }
.cancelled-history-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.session-event-log { margin: .65rem 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.session-event-log > summary { min-height: 2.8rem; padding: .5rem .7rem; cursor: pointer; list-style: none; }
.session-event-log > summary::-webkit-details-marker { display: none; }
.session-event-log > summary span { display: grid; }
.session-event-log > summary small { color: var(--muted); font-size: .7rem; font-weight: 450; }
.session-event-list { border-top: 1px solid var(--line); }
.session-event-row { min-height: 2.6rem; padding: .35rem .65rem; display: grid; grid-template-columns: 6rem minmax(9rem, 1fr) auto minmax(6rem, auto); align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.session-event-row:last-child { border-bottom: 0; }
.session-event-row time, .event-actor, .event-detail, .session-event-row small { color: var(--muted); font-size: .68rem; }
.session-event-row > span:nth-child(2) { min-width: 0; display: grid; }
.session-event-row > span:nth-child(2) strong, .session-event-row > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-detail { padding: .1rem .35rem; background: var(--surface-muted); border-radius: 4px; }
.event-actor { text-align: right; }
.account-page-header { margin-bottom: .25rem; }
.account-overview { margin-bottom: 1.2rem; }
.account-profile-card { padding: .75rem; display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 1.4fr); align-items: center; gap: .75rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.account-profile-name { min-width: 0; display: grid; }
.account-profile-name strong { font-size: 1.05rem; }
.account-profile-name span, .account-contact-list dt, .linked-members span { color: var(--muted); font-size: .7rem; }
.account-contact-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.account-contact-list div { min-width: 0; }
.account-contact-list dt, .account-contact-list dd { margin: 0; }
.account-contact-list dd { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-contact-warning { grid-column: 1 / -1; margin: 0; padding: .35rem .5rem; color: var(--amber); font-size: .72rem; background: var(--amber-soft); border-radius: 5px; }
.linked-members { margin-top: .5rem; padding: .65rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.linked-members h3 { margin: 0 0 .35rem; font-size: .8rem; }
.linked-members > div { min-height: 2rem; display: flex; align-items: baseline; gap: .5rem; border-top: 1px solid var(--line); }
.linked-members > div:first-of-type { border-top: 0; }
.account-reminder-setting { margin-top: .5rem; padding: .65rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.account-reminder-setting label { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.account-reminder-setting input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--green); }
.account-reminder-setting span { display: grid; }
.account-reminder-setting small { color: var(--muted); font-size: .7rem; }
.account-booking-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.account-booking-row { min-height: 3.1rem; padding: .38rem .6rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.account-booking-row:last-child { border-bottom: 0; }
.account-booking-row:hover { background: var(--surface-muted); }
.account-booking-row time { display: grid; justify-items: center; font-size: .7rem; font-variant-numeric: tabular-nums; }
.account-booking-row time span { color: var(--muted); }
.account-booking-main { min-width: 0; display: grid; }
.account-booking-main strong, .account-booking-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-booking-main small { color: var(--muted); font-size: .7rem; }
.account-booking-statuses { display: flex; gap: .25rem; }
.account-history { margin-top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.account-history > summary { min-height: 2.8rem; padding: .5rem .7rem; cursor: pointer; list-style: none; }
.account-history > summary::-webkit-details-marker { display: none; }
.account-history > summary span { display: grid; }
.account-history > summary small { color: var(--muted); font-size: .7rem; font-weight: 450; }
.account-history .account-booking-list { border-width: 1px 0 0; border-radius: 0 0 var(--radius) var(--radius); }
.account-password-card { max-width: 34rem; }
.reminder-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.reminder-admin-stats > span { min-height: 3.3rem; padding: .45rem .65rem; display: grid; align-content: center; color: var(--muted); font-size: .7rem; border-right: 1px solid var(--line); }
.reminder-admin-stats > span:last-child { border-right: 0; }
.reminder-admin-stats strong { color: var(--ink); font-size: 1.1rem; }
.reminder-admin-stats .is-sent strong { color: var(--green); }
.reminder-admin-stats .is-failed strong { color: var(--red); }
.reminder-command-help { margin-top: .65rem; }
.reminder-command-help p { margin: .15rem 0 0; font-size: .75rem; }
.reminder-delivery-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.reminder-delivery-row { min-height: 2.8rem; padding: .4rem .6rem; display: grid; grid-template-columns: 5.5rem minmax(9rem, 1fr) minmax(10rem, auto) auto 4rem; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.reminder-delivery-row:last-child { border-bottom: 0; }
.reminder-delivery-row time, .reminder-delivery-email, .reminder-delivery-row > .muted { font-size: .68rem; }
.reminder-delivery-main { min-width: 0; display: grid; }
.reminder-delivery-main strong, .reminder-delivery-main small, .reminder-delivery-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-delivery-main small { color: var(--muted); font-size: .68rem; }

.staff-roster-card { padding: .7rem .85rem; }
.staff-roster-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; }
.staff-roster-summary::-webkit-details-marker { display: none; }
.staff-roster-summary > span:first-child { display: grid; }
.staff-roster-summary small { color: var(--muted); font-size: .75rem; font-weight: 450; }
.staff-roster-summary::after { content: "Visa"; color: var(--blue); font-size: .75rem; font-weight: 700; }
.staff-roster-card[open] .staff-roster-summary::after { content: "Dölj"; }
.staff-roster-body { margin-top: .65rem; }
.roster-search { min-height: 2.25rem; margin-bottom: .4rem; }
.staff-roster-list { max-height: 24rem; overflow-y: auto; }
.staff-roster-row { min-height: 2.55rem; padding: .32rem .5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; border-bottom: 1px solid #e8eaed; }
.staff-roster-row:last-child { border-bottom: 0; }
.staff-roster-person { min-width: 0; display: flex; align-items: baseline; gap: .4rem; }
.staff-roster-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-roster-person small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-roster-row > form { margin: 0; }
.staff-roster-status { display: flex; align-items: center; }

.placement-row { min-height: 3rem; padding: .42rem .65rem; display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto auto; align-items: center; gap: .55rem; border-bottom: 1px solid #e7e9ec; }
.placement-row:last-child { border-bottom: 0; }
.attendance-divider { min-height: 2rem; padding: .32rem .65rem; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .7rem; background: #eef0f2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .045em; }
.attendance-divider:first-child { border-top: 0; }
.attendance-divider span { min-width: 1.4rem; padding: .1rem .35rem; color: inherit; text-align: center; background: rgb(255 255 255 / 68%); border-radius: 999px; }
.attendance-divider--present { color: var(--green); background: #dff1e8; }
.attendance-divider--sick { color: var(--amber); background: #fff0c7; }
.attendance-divider--absent { color: var(--red); background: #f8e5e2; }
.attendance-divider--waitlist { color: var(--blue); background: var(--blue-soft); }
.placement-row--present { background: #f3faf6; }
.placement-row--sick { background: #fffaf0; }
.placement-row--absent { background: #fdf6f5; }
.placement-row--unmarked { background: var(--surface); }
.placement-row--waitlist { background: #f6f9fc; }
.lane-badge { color: var(--muted); font-size: .7rem; font-weight: 650; }
.lane-waiting { color: var(--amber); }
.placement-person { min-width: 0; }
.placement-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placement-name-line { min-width: 0; display: flex; align-items: center; gap: .35rem; }
.remove-booking-button { width: 1.45rem; min-width: 1.45rem; height: 1.45rem; min-height: 1.45rem; padding: 0; color: #8b939b; font-size: 1rem; font-weight: 500; line-height: 1; background: transparent; border-color: transparent; border-radius: 50%; }
.remove-booking-button:hover { color: var(--red); background: var(--red-soft); border-color: #e2b5b1; }
.placement-statuses, .placement-actions { display: flex; align-items: center; gap: .35rem; }
.inline-status-form { margin: 0; }
.inline-status-form select { width: auto; min-height: 2rem; padding: .28rem 1.8rem .28rem .45rem; font-size: .75rem; }
.inline-status-form.is-saving { opacity: .5; pointer-events: none; }
.receipt-check-form { margin: 0; }
.receipt-toggle { min-height: 2rem; padding: .28rem .5rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .72rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.receipt-toggle input { margin: 0; }
.receipt-toggle.is-checked { color: var(--green); background: var(--green-soft); border-color: #9bcab3; }
.receipt-check-form.is-saving { opacity: .55; pointer-events: none; }

/* Dialogs */
.app-dialog { width: min(94vw, 35rem); max-height: 90vh; padding: 0; overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-dialog); }
.app-dialog::backdrop { background: rgb(20 27 35 / 30%); backdrop-filter: blur(2px); }
.side-sheet { position: fixed; inset: 0 0 0 auto; width: min(94vw, 29rem); height: 100vh; max-height: 100vh; margin: 0; border-radius: 10px 0 0 10px; }
.tool-sheet { width: min(96vw, 58rem); }
.tool-dialog-body { padding: 1rem; }
.tool-dialog-body > .messages { margin-top: 0; }
.tool-dialog-body .page-header, .tool-dialog-body .compact-header { margin-bottom: 1rem; }
.tool-dialog-body > .page-header h1, .tool-dialog-body > .page-header .eyebrow,
.tool-dialog-body > .compact-header h1, .tool-dialog-body > .compact-header .eyebrow { display: none; }
.tool-dialog-body .breadcrumbs { display: none; }
.tool-loading { padding: 2rem; text-align: center; }
.confirm-dialog { width: min(92vw, 31rem); }
.confirm-dialog-body { padding: 1rem; }
.confirm-dialog-body > p { margin-bottom: .75rem; }
.cancel-booking-warning { margin-bottom: .75rem; padding: .65rem .75rem; color: var(--muted); font-size: .82rem; background: var(--surface-muted); border-radius: 6px; }
.cancel-booking-warning.has-warning { color: var(--red); background: var(--red-soft); }
.cancel-booking-warning ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.dialog-titlebar { position: sticky; z-index: 2; top: 0; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.dialog-titlebar h2, .dialog-titlebar .eyebrow { margin: 0; }
.compact-form { padding: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-form > .form-field:first-of-type, .compact-form > .guardian-field, .compact-form > .form-actions, .compact-form > .form-errors, .compact-form > .payment-summary, .compact-form > .advanced-fields, .schedule-form > * { grid-column: 1 / -1; }
.guardian-field { min-width: 0; margin: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 6px; }
.guardian-field legend { padding-inline: .25rem; font-size: .82rem; font-weight: 700; }
.inline-account-panel { grid-column: 1 / -1; padding: .7rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .7rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 6px; }
.inline-account-panel h3, .inline-account-panel p { margin: 0; }
.account-status-ok { color: var(--green); }
.inline-activation-result { flex: 1 0 100%; }
.inline-activation-result > label { display: block; margin-bottom: .25rem; font-size: .78rem; }
.inline-activation-result > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.inline-activation-result input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
.checkbox-list { max-height: 12rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .6rem; overflow-y: auto; }
.side-sheet .checkbox-list { grid-template-columns: 1fr; }
.checkbox-list label { padding: .25rem; display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 500; }
.checkbox-list label > span { min-width: 0; flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.checkbox-list small { color: var(--muted); }
.schedule-form { display: block; }
.schedule-form > * { margin-bottom: .75rem; }
.schedule-history { padding: 1rem; border-top: 1px solid var(--line); }
.schedule-history article { padding: .55rem 0; display: flex; align-items: center; justify-content: space-between; gap: .7rem; border-bottom: 1px solid var(--line); }
.schedule-history article div { display: grid; }
.schedule-history article span { color: var(--muted); font-size: .75rem; }

/* Payments */
.payment-dropzone { min-height: 12rem; padding: 1.5rem; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: .3rem; text-align: center; background: var(--surface-muted); border: 1px dashed var(--line-strong); border-radius: 6px; cursor: pointer; }
.payment-dropzone.is-dragging { background: var(--blue-soft); border-color: var(--blue); }
.payment-dropzone__icon { color: var(--blue); font-size: 1.5rem; }
.payment-dropzone input { width: 100%; min-width: 0; min-height: auto; margin-top: .5rem; padding: .35rem; font-size: .75rem; border: 0; }
.payment-upload-actions { margin-top: .75rem; justify-content: flex-end; }
.payment-preview { margin-top: 1rem; max-width: none; }
.payment-preview-heading, .payment-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.payment-summary-grid { margin-block: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.payment-summary-item { padding: .75rem; display: grid; border-right: 1px solid var(--line); }
.payment-summary-item:last-child { border-right: 0; }
.payment-summary-item strong { font-size: 1.25rem; }
.payment-summary-item span { color: var(--muted); font-size: .75rem; }
.payment-summary-item--ok strong, .payment-status--matched { color: var(--green); }
.payment-table-wrap { margin-bottom: 1rem; overflow-x: auto; }
.payment-table { width: 100%; border-collapse: collapse; }
.payment-table th, .payment-table td { padding: .55rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.payment-table th { color: var(--muted); font-size: .72rem; }
.amount-cell { text-align: right !important; }

/* Login/footer */
.login-card { width: min(100%, 30rem); margin-inline: auto; }
.login-page { min-height: 100vh; display: block; background: radial-gradient(circle at 50% 22%, #24272b 0, #111318 42%, #07080a 100%); }
.login-page .site-header, .login-page .site-footer, .login-page .skip-link { display: none; }
.login-page .page-content { width: 100%; max-width: none; min-height: 100vh; padding: clamp(1.5rem, 5vh, 3.5rem) 1rem; display: grid; place-items: center; }
.login-shell { width: min(100%, 27rem); display: grid; justify-items: center; gap: .7rem; }
.login-logo { width: min(72vw, 18rem); height: auto; max-height: 18rem; object-fit: contain; filter: drop-shadow(0 12px 28px rgb(0 0 0 / 42%)); }
.login-page .login-card { padding: 1rem; border-color: rgb(255 255 255 / 18%); box-shadow: 0 18px 55px rgb(0 0 0 / 32%); }
.login-heading { margin-bottom: .85rem; text-align: center; }
.login-heading h1 { margin-bottom: .2rem; font-size: 1.65rem; }
.login-heading .eyebrow { color: var(--amber); }
.login-submit { width: 100%; margin-top: .2rem; background: #25272b; border-color: #25272b; }
.login-submit:hover { background: #050607; border-color: #050607; }
.login-help-link { margin-top: .65rem; display: block; color: var(--muted); font-size: .75rem; text-align: center; }
.login-help-link:hover { color: var(--ink); }
.login-logo--small { width: min(56vw, 12rem); }
.login-message-card { text-align: center; }
.login-message-card .button { margin-top: .35rem; }

/* Matchschema och laguttagningar */
.season-picker { min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 650; }
.season-picker select { min-width: 0; max-width: 100%; min-height: 2rem; }
.team-section { margin-bottom: 1.5rem; }
.team-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.team-tab { flex: 0 0 auto; min-height: 2.5rem; padding: .45rem .7rem; display: flex; align-items: center; gap: .4rem; color: var(--muted); font: inherit; font-weight: 650; white-space: nowrap; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; cursor: pointer; }
.team-tab small { padding: .05rem .35rem; font-size: .68rem; font-variant-numeric: tabular-nums; background: var(--surface-muted); border-radius: 999px; }
.team-tab:hover { color: var(--ink); background: var(--surface-muted); }
.team-tab[aria-selected="true"] { position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: calc(.45rem + 1px); color: var(--ink); background: var(--surface); border-color: var(--line); }
.team-panel { padding: .8rem; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
.team-panel-head { margin-bottom: .7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.team-panel-head > div { display: grid; gap: .08rem; }
.team-panel-head small, .match-main small, .callup-candidate small { color: var(--muted); font-size: .72rem; }
.team-archive { margin-top: .7rem; padding-top: .6rem; display: grid; gap: .35rem; border-top: 1px solid var(--line); }
.team-archive-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; max-width: 22rem; color: var(--muted); font-size: .82rem; }
.team-member-form { display: grid; gap: .55rem; }
.team-member-form > label { display: grid; gap: .25rem; font-size: .75rem; font-weight: 650; }
.team-member-search { min-width: 0; max-width: 22rem; flex: 1 1 14rem; }
.squad-toolbar label { display: grid; gap: .25rem; font-size: .75rem; font-weight: 650; }
.squad-toolbar { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.squad-periods { display: flex; gap: .2rem; padding: .15rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 999px; }
.squad-period { padding: .28rem .6rem; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 650; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.squad-period:hover { color: var(--ink); }
.squad-period[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgb(18 24 31 / 12%); }
.squad-panel { --stat-col: 4.9rem; --stat-gap: .5rem; border: 1px solid var(--line); border-radius: 7px; }
.squad-table { max-height: 26rem; display: grid; align-content: start; overflow: auto; border-radius: 0 0 7px 7px; }
.squad-head { position: relative; z-index: 3; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--surface-muted); border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0; }
.squad-head-labels, .squad-head-row, .squad-row { display: grid; grid-template-columns: 1.1rem minmax(9rem, 1fr) auto; align-items: center; gap: .75rem; padding: .3rem .7rem; }
.squad-head-labels { padding-bottom: 0; }
.squad-head-row { padding-top: .15rem; }
.squad-group-labels { display: grid; grid-template-columns: calc(2 * var(--stat-col) + var(--stat-gap)) calc(5 * var(--stat-col) + 4 * var(--stat-gap)); gap: var(--stat-gap); }
.squad-group { padding-bottom: .1rem; color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.squad-row { min-height: 2.4rem; border-bottom: 1px solid var(--line); }
.squad-row:last-of-type { border-bottom: 0; }
.squad-row:hover { background: var(--surface-muted); }
.squad-row input { width: 1rem; height: 1rem; }
.squad-row:has(input:checked) { background: #fbfcf4; }
/* De valda ligger alltid först. Linjen visar var truppen slutar och registret börjar. */
.squad-row:has(input:checked) + .squad-row:not(:has(input:checked)) { border-top: 2px solid var(--line-strong); }
.squad-name { min-width: 0; display: flex; align-items: baseline; gap: .4rem; font-size: .82rem; font-weight: 650; }
.squad-name small { color: var(--muted); font-size: .68rem; font-weight: 400; }
.squad-stats, .squad-sort-group { display: grid; grid-template-columns: repeat(7, var(--stat-col)); gap: var(--stat-gap); }
.squad-stat { font-size: .78rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.squad-stat--bits { color: var(--muted); }
.squad-stat--first, .squad-sort--first { padding-left: var(--stat-gap); border-left: 1px solid var(--line); }
.squad-trend { font-weight: 650; }
.squad-trend[data-direction="up"] { color: var(--green); }
.squad-trend[data-direction="down"] { color: var(--red); }
.squad-sort { display: block; width: 100%; min-height: 0; padding: 0; color: inherit; font: inherit; text-align: right; background: none; border: 0; cursor: pointer; }
.squad-sort--name { text-align: left; }
.squad-sort:hover { color: var(--ink); text-decoration: underline; }
.squad-sort[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }
.squad-hint { position: relative; display: block; }
.hint-bubble { position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0; width: 16rem; padding: .55rem .65rem; color: #fff; font-size: .74rem; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; background: #1f242b; border-radius: 7px; opacity: 0; visibility: hidden; transform: translateY(-.2rem); transition: opacity .14s ease, transform .14s ease; pointer-events: none; box-shadow: 0 12px 30px rgb(18 24 31 / 22%); }
.squad-hint:hover .hint-bubble, .squad-hint:focus-within .hint-bubble { opacity: 1; visibility: visible; transform: none; }
.team-member-empty { padding: .7rem .5rem; color: var(--muted); font-size: .78rem; }
.team-name-list { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .78rem; }
.team-name-list span { padding: .2rem .4rem; background: var(--surface-muted); border-radius: 4px; }
.month-carousel .month-label { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; font-size: 1rem; font-weight: 700; text-transform: capitalize; }
.calendar-matches { min-width: 0; }
.calendar-match { min-height: 3.4rem; padding: .5rem .65rem; display: grid; grid-template-columns: 5.4rem minmax(8rem, 1fr) auto auto; align-items: center; gap: .65rem; border-bottom: 1px solid #e8eaed; }
.calendar-match:last-child { border-bottom: 0; }
.calendar-match.is-cancelled { opacity: .6; }
.calendar-match > time { font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-match > time.is-unset { color: var(--muted); font-size: .72rem; font-weight: 650; }
.match-main { min-width: 0; display: grid; gap: .1rem; }
.match-main > a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-team { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.match-responses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.match-score { padding: 0 .15rem; font-variant-numeric: tabular-nums; }
.match-result-card { margin-bottom: 1rem; padding: .9rem; display: grid; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.match-result-score { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-size: .95rem; }
.match-result-score strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.match-result-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.match-result-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.match-result-table th, .match-result-table td { padding: .35rem .5rem; text-align: right; border-bottom: 1px solid var(--line); }
.match-result-table thead th { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.match-result-table tbody th, .match-result-table thead th:first-child { text-align: left; }
.match-result-table tr:last-child th, .match-result-table tr:last-child td { border-bottom: 0; }
.match-result-series { display: flex; justify-content: flex-end; gap: .3rem; font-variant-numeric: tabular-nums; }
.callup-response-card { margin-bottom: 1rem; padding: .85rem; display: grid; gap: .65rem; background: var(--blue-soft); border: 1px solid #b7d2eb; border-radius: 8px; }
.callup-response-card h2 { margin-bottom: .15rem; }
.callup-response-row { padding-top: .55rem; display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; align-items: center; gap: .5rem .6rem; border-top: 1px solid #b7d2eb; }
.callup-note { grid-column: 1 / -1; font-size: .78rem; }
.callup-note summary { color: var(--muted); cursor: pointer; }
.callup-note summary:hover { color: var(--ink); }
.callup-note input { margin-top: .35rem; width: 100%; max-width: 26rem; }
.segmented-actions { display: flex; gap: .25rem; }
.callup-editor { padding: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.callup-form { display: grid; gap: .65rem; }
.callup-meta { display: grid; grid-template-columns: 2fr 1fr; gap: .6rem; }
.callup-meta label, .callup-search { display: grid; gap: .25rem; font-size: .75rem; font-weight: 650; }
.callup-candidates { display: grid; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.callup-candidate { min-height: 2.8rem; padding: .38rem .55rem; display: grid; grid-template-columns: minmax(0, 1fr) 9rem auto; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line); }
.callup-candidate:last-child { border: 0; }
.callup-group:last-child .callup-candidate:last-child { border: 0; }
.callup-empty { padding: .7rem .55rem; color: var(--muted); font-size: .78rem; }
.callup-group-title { padding: .3rem .55rem; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.callup-deadline { font-weight: 650; }
.callup-candidate.is-team-member { background: #fbfcf4; }
.callup-candidate > div { min-width: 0; display: grid; }
.callup-candidate select { min-height: 2rem; }
.standing-sections { margin-top: 1.5rem; }
.standing-card { margin-bottom: .45rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.standing-card summary { padding: .6rem .75rem; display: flex; justify-content: space-between; cursor: pointer; }
.standing-card summary span { color: var(--muted); font-size: .75rem; }
.standing-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.standing-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.standing-table th, .standing-table td { padding: .36rem .5rem; text-align: right; border-bottom: 1px solid var(--line); }
.standing-table th:nth-child(2), .standing-table td:nth-child(2) { text-align: left; }
.standing-table tr.is-own-team { background: #fff9d8; }

@media (max-width: 700px) {
  .calendar-match { grid-template-columns: minmax(4.4rem, auto) minmax(0, 1fr) auto; gap: .35rem .5rem; }
  .match-responses { grid-column: 1 / -1; justify-content: flex-start; }
  .calendar-match > .button { grid-column: 3; grid-row: 1; }
  .callup-response-row { grid-template-columns: 1fr auto; }
  .callup-response-row .segmented-actions, .callup-response-row .callup-note { grid-column: 1 / -1; }
  .callup-meta { grid-template-columns: 1fr; }
  .callup-candidate { grid-template-columns: minmax(0, 1fr) 8rem; }
  .callup-candidate > .status-badge { grid-column: 1 / -1; }
}
.demo-login-card { margin-top: 0; padding: .7rem 1rem !important; }
.demo-login-card summary { cursor: pointer; list-style: none; }
.demo-login-card summary::-webkit-details-marker { display: none; }
.demo-login-card summary > span { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.demo-login-card summary small { color: var(--muted); font-size: .7rem; font-weight: 450; }
.demo-login-card[open] summary { margin-bottom: .6rem; }
.demo-login-card h2 { margin: 0; font-size: 1rem; }
.demo-login-list { margin-top: .6rem; display: grid; gap: .35rem; }
.demo-login-button { width: 100%; min-height: 2.7rem; display: grid; justify-items: center; gap: 0; text-align: center; }
.demo-login-button small { color: var(--muted); font-weight: 430; }
.site-footer { padding-block: 1.2rem; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); }

@media (max-width: 48rem) {
  .container { width: calc(100% - 1.25rem); }
  .page-content { padding-block: 1.35rem 2.5rem; }
  .site-header__content { min-width: 0; padding-block: .7rem .45rem; align-items: stretch; flex-direction: column; gap: .55rem; }
  .brand { align-self: flex-start; }
  .site-header nav { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .site-header nav > * { flex: 0 0 auto; }
  /* Länkraden ska brytas, inte skjuta ut sidan, när den inte får plats. */
  .site-header nav > .site-nav__links { flex: 1 1 auto; min-width: 0; }
  .site-nav__links > a, .nav-link { min-height: 2rem; padding: .35rem .55rem; font-size: .82rem; }
  .account-menu { margin-left: auto; }
  .account-trigger__name { max-width: 7rem; }
  .nav-form { margin-left: 0; }
  .page-header, .compact-header { margin-bottom: 1.1rem; align-items: flex-start; flex-direction: column; }
  .compact-header .header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .compact-header .member-header-actions { grid-template-columns: repeat(3, 1fr); }
  .compact-header .header-actions .button { width: 100%; }
  .compact-header .header-actions .season-picker { grid-column: 1 / -1; }
  .compact-header .header-actions .season-picker select { width: 100%; }
  .eyebrow { margin-bottom: .35rem; }
  h1 { font-size: 1.8rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2) { border-right: 0; }
  .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .training-card { align-items: stretch; flex-direction: column; }
  .training-card .button { align-self: flex-start; }
  .dashboard-session-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .45rem; }
  .dashboard-session-state { grid-column: 2; grid-row: 2; }
  .dashboard-session-action { grid-column: 3; grid-row: 1 / 3; }
  .form-grid, .form-row, .compact-form { grid-template-columns: 1fr; }
  .form-grid > *, .form-row > *, .compact-form > * { grid-column: 1 !important; }

  .calendar-day { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .calendar-session { grid-template-columns: minmax(5.9rem, auto) minmax(0, 1fr) auto; gap: .35rem .5rem; }
  .calendar-session-meta { grid-column: 2 / 4; grid-row: 2; overflow: hidden; text-overflow: ellipsis; }
  .calendar-session .button { grid-column: 3; grid-row: 1; }

  .member-row { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .3rem; }
  .member-identity { align-items: flex-start; flex-direction: column; gap: 0; }
  .member-actions { justify-content: flex-end; }
  .registry-toolbar { padding-inline: 0; }
  .contact-icon { width: 1.4rem; height: 1.4rem; font-size: .7rem; }
  .member-flags { max-width: 5.5rem; flex-wrap: wrap; justify-content: flex-end; }
  .account-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .1rem .4rem; }
  .account-row .member-identity { grid-column: 1; grid-row: 1; }
  .account-row .account-email { grid-column: 1; grid-row: 2; }
  .account-row .member-meta { display: none; }
  .account-row > .status-badge { grid-column: 2; grid-row: 1 / 3; }
  .account-row .member-actions { grid-column: 3; grid-row: 1 / 3; }
  .compact-upload-form { align-items: stretch; flex-direction: column; }
  .import-summary { grid-template-columns: repeat(2, 1fr); }
  .import-summary span:nth-child(2) { border-right: 0; }
  .import-summary span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .activation-link-row { grid-template-columns: 1fr; }

  .booking-cta-card, .booking-optional-card { align-items: stretch; flex-direction: column; }
  .booking-cta-card .button, .booking-optional-card .button, .swish-actions .button { width: 100%; }
  .member-payment-heading { align-items: flex-start; }
  .member-payment-heading > span:first-child { align-items: flex-start; flex-direction: column; gap: 0; }
  .placement-row { grid-template-columns: auto minmax(0, 1fr); gap: .4rem .55rem; }
  .placement-statuses { grid-column: 1 / -1; grid-row: 2; }
  .placement-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }
  .inline-status-form { flex: 1; }
  .inline-status-form select { width: 100%; }
  .staff-roster-person { align-items: flex-start; flex-direction: column; gap: 0; }
  .checkbox-list { grid-template-columns: 1fr; }
  .inline-account-panel { align-items: stretch; flex-direction: column; }
  .inline-account-panel > .button { width: 100%; }
  .payment-preview-heading, .payment-preview-footer { align-items: flex-start; flex-direction: column; }
  .payment-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-summary-item:nth-child(2) { border-right: 0; }
  .payment-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .account-profile-card { grid-template-columns: 1fr; }
  .account-booking-row { grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: .4rem; }
  .account-booking-statuses { grid-column: 2 / 4; grid-row: 2; flex-wrap: wrap; }
  .account-booking-row > span:last-child { grid-column: 3; grid-row: 1; }
  .cancelled-history-row { align-items: flex-start; flex-direction: column; }
  .cancelled-history-statuses { justify-content: flex-start; }
  .session-event-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .15rem .45rem; }
  .event-detail { grid-column: 2; }
  .event-actor { grid-column: 2; text-align: left; }
  .reminder-admin-stats { grid-template-columns: repeat(2, 1fr); }
  .reminder-admin-stats > span:nth-child(2) { border-right: 0; }
  .reminder-admin-stats > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .reminder-delivery-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .2rem .45rem; }
  .reminder-delivery-email { grid-column: 2 / 4; grid-row: 2; }
  .reminder-delivery-row > .muted { grid-column: 2; grid-row: 3; }
  .squad-panel { --stat-col: 4.05rem; --stat-gap: .35rem; }
  .squad-head-labels, .squad-head-row, .squad-row { grid-template-columns: 1.1rem minmax(6rem, 1fr) auto; gap: .5rem; padding-inline: .5rem; }
  .hint-bubble { width: 14rem; }
}

@media (max-width: 30rem) {
  /* Under ~480 px trängs tid, titel och knapp ihop och matchtiteln kapas.
     Titeln får då en egen rad. Mätt vid 390 px. */
  .calendar-match { grid-template-columns: minmax(0, 1fr) auto; }
  .calendar-match > time { grid-column: 1; grid-row: 1; }
  .calendar-match .match-main { grid-column: 1; grid-row: 2; }
  .calendar-match .match-responses { grid-column: 1 / -1; grid-row: 3; }
  .calendar-match > .button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .calendar-match .match-main > a { overflow: visible; white-space: normal; }
  /* Under ~480 px ryms inte namn och fem sifferkolumner på samma rad utan att
     namnen bryts sönder. Siffrorna får en egen rad under namnet i stället. */
  .squad-panel { --stat-col: 1fr; --stat-gap: .15rem; }
  .squad-head-labels, .squad-head-row, .squad-row { grid-template-columns: 1.1rem minmax(0, 1fr); gap: .3rem .5rem; padding-block: .45rem; }
  /* Grupprubrikerna måste vara kvar: annars står "Snitt" två gånger utan att
     det syns att den ena är BITS och den andra vår egen period. */
  .squad-group-labels { grid-column: 2 / -1; grid-template-columns: 2fr 5fr; }
  .squad-group { font-size: .58rem; letter-spacing: .03em; }
  .squad-stats, .squad-sort-group { grid-column: 2 / -1; grid-template-columns: repeat(7, 1fr); }
  .squad-stat--first, .squad-sort--first { padding-left: .15rem; }
  .hint-bubble { width: 13rem; }
  .squad-name { flex-wrap: wrap; }
  .squad-stat, .squad-sort { font-size: .72rem; }
  .squad-toolbar { align-items: stretch; flex-direction: column; }
  .team-member-search { flex: 0 0 auto; max-width: none; }
}

@media (max-width: 24rem) {
  .site-nav__links > a, .nav-link { font-size: .76rem; }
  .account-trigger__name { display: none; }
  .account-dropdown { min-width: 13rem; }
  .calendar-session { grid-template-columns: 1fr auto; }
  .calendar-session time { grid-column: 1; }
  .calendar-session-title { grid-column: 1; grid-row: 2; }
  .calendar-session-meta { grid-column: 1 / -1; grid-row: 3; }
  .calendar-session .button { grid-column: 2; grid-row: 1 / 3; }
}