/* =========================================
   VDP TICKETS — DESIGN SYSTEM V2
   Van der Pols | Blauw & Oranje
   ========================================= */

:root {
  --navy: #102b4b;
  --navy-dark: #091d35;
  --navy-light: #1b426b;
  --orange: #f36b22;
  --orange-light: #fff1e8;
  --background: #f4f7fb;
  --white: #ffffff;
  --text: #172c46;
  --muted-text: #748499;
  --border: #e5ebf3;
  --success: #168052;
  --danger: #bc3945;
  --radius: 14px;
  --shadow: 0 4px 22px rgba(17, 43, 73, .045);
}

body {
  background: var(--background);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(243, 107, 34, .28);
  outline-offset: 2px;
}

/* =========================================
   STRUCTUUR & NAVIGATIE
   ========================================= */

.shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 255px;
  flex: 0 0 255px;
  min-height: 100vh;
  padding: 30px 17px;
  background: linear-gradient(
    170deg, #102b4b 0%, #091d35 100%
  );
  border-right: 0;
  box-shadow: 5px 0 25px rgba(9, 29, 53, .06);
}

.brand {
  color: #fff;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: .045em;
  padding: 12px 14px 38px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  margin-bottom: 22px;
}

.navs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav {
  display: block;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 14px 16px;
  margin: 0;
  color: #b7c6d8;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  transition: .18s ease;
}

.nav:hover {
  background: rgba(255,255,255,.075);
  color: #fff;
}

.nav.active {
  color: #fff;
  background: rgba(243,107,34,.16);
  border: 1px solid rgba(243,107,34,.24);
  border-left: 3px solid var(--orange);
  padding-left: 14px;
}

/* =========================================
   HOOFDGEDEELTE & HEADER
   ========================================= */

.main {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 1640px;
  margin: 0 auto;
  padding: 32px 38px 28px;
}

.main > .top {
  padding: 7px 0 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

#page-title {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--navy);
}

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

.top .muted {
  font-size: 13px;
  margin-top: 5px;
}

.account-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#account-name {
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
}

/* =========================================
   DASHBOARD HERO
   ========================================= */

.hero {
  position: relative;
  padding: 39px 40px;
  margin: 27px 0 30px;
  border-radius: 19px;
  overflow: hidden;
  background: linear-gradient(
    115deg, #102b4b 0%, #1e4b78 100%
  );
  box-shadow: 0 12px 30px rgba(16,43,75,.12);
}

.hero:before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  bottom: -170px;
  background: var(--orange);
  opacity: .17;
  border-radius: 50%;
}

.hero:after {
  content: '⚽';
  position: absolute;
  top: -48px;
  right: 5%;
  font-size: 200px;
  opacity: .075;
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(25px, 3vw, 37px);
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.hero div {
  position: relative;
  z-index: 1;
  color: #cfdae8;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================
   SECTIES & KAARTEN
   ========================================= */

.section-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 32px 0 17px;
  color: var(--navy);
}

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

.cols {
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
}

.card,
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card {
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
  box-shadow: 0 9px 28px rgba(17,43,73,.09);
  transform: translateY(-2px);
}

.card-body {
  padding: 22px;
}

.card-body p {
  margin: 9px 0;
  color: #51657b;
  font-size: 14px;
}

.card-body h3 {
  margin: 0 0 8px;
  font-size: 29px;
  color: var(--navy);
  letter-spacing: -.04em;
}

.panel {
  padding: 23px;
  overflow: visible;
}

.panel h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}

/* =========================================
   CLUBKAARTEN
   ========================================= */

.club-head {
  position: relative;
  height: 94px;
  padding: 22px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.club-head.fey,
.fey {
  background: linear-gradient(110deg, #b01b2f, #18273c);
}

.club-head.nac,
.nac {
  background: linear-gradient(110deg, #ddb92e, #292e39);
}

.club-head.spa,
.spa {
  background: linear-gradient(110deg, #bb273a, #1b344c);
}

.club-head:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  right: -25px;
  top: -30px;
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 50%;
}

/* =========================================
   WEDSTRIJDEN & TICKETOVERZICHT
   ========================================= */

.match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 2px;
  border-bottom: 1px solid #edf1f6;
}

.match:first-child {
  padding-top: 3px;
}

.match:last-child {
  padding-bottom: 3px;
  border-bottom: 0;
}

.match > div:first-child {
  min-width: 0;
}

.match strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.match small {
  display: block;
  margin-top: 5px;
  color: var(--muted-text);
  font-size: 12px;
  line-height: 1.5;
}

.empty {
  background: #f8fafc;
  border: 1px dashed #d9e3ed;
  border-radius: 12px;
  padding: 27px;
  color: var(--muted-text);
  font-size: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  background: #eaf7f0;
  color: #168052;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================
   KNOPPEN
   ========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 16px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: .18s ease;
}

.btn:hover {
  background: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(16,43,75,.14);
}

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

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.alt {
  background: #eaf0f6;
  color: var(--navy);
}

.btn.alt:hover {
  background: #dde7f0;
}

.btn.danger {
  background: #fff0f0;
  color: var(--danger);
  border-color: #f8dade;
}

.btn.danger:hover {
  background: #ffe3e6;
  box-shadow: none;
}

.account-bar > .btn:not(.alt) {
  background: var(--orange);
  color: #fff;
}

.account-bar > .btn:not(.alt):hover {
  background: #dd5b17;
}

/* =========================================
   TABELLEN
   ========================================= */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

thead {
  background: #f8fafd;
}

th {
  padding: 15px 13px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: #718198;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 17px 13px;
  font-size: 13px;
  color: #3e5269;
  border-bottom: 1px solid #edf1f6;
  vertical-align: middle;
}

tbody tr {
  transition: background .15s ease;
}

tbody tr:hover {
  background: #f8fafc;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td small {
  color: var(--muted-text);
  font-size: 11px;
  line-height: 1.55;
}

td .btn {
  padding: 9px 12px;
  font-size: 12px;
}

td select {
  min-width: 135px;
}

/* =========================================
   FORMULIEREN
   ========================================= */

input,
select,
textarea {
  width: 100%;
  background: #fff;
  color: var(--text);
  border: 1px solid #d6e0ea;
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color .18s ease,
              box-shadow .18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,107,34,.11);
}

input::placeholder,
textarea::placeholder {
  color: #a0acb9;
}

input[type="file"] {
  padding: 10px;
  background: #f8fafc;
}

.field {
  margin-bottom: 17px;
}

.field label,
label {
  color: #304864;
}

.field label {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 750;
}

.form-grid {
  gap: 16px;
}

.panel form > p {
  margin: 14px 0 7px;
}

.panel form label {
  font-size: 13px;
  font-weight: 700;
}

.panel form .btn {
  margin-top: 7px;
}

.alert {
  background: #fff5e9;
  border: 1px solid #ffe4c6;
  border-radius: 10px;
  color: #966020;
  padding: 12px 14px;
  margin: 12px 0 18px;
  font-size: 13px;
}

/* =========================================
   RESERVERING MODAL
   ========================================= */

.modal-bg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7,22,39,.68);
  backdrop-filter: blur(5px);
  z-index: 50;
}

.modal {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 19px;
  border: 1px solid #e7edf5;
  padding: 29px;
  box-shadow: 0 24px 75px rgba(0,0,0,.2);
}

.modal h2 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
  letter-spacing: -.025em;
}

.modal .top {
  margin-bottom: 22px;
}

/* =========================================
   LOGIN
   ========================================= */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 20%,
      rgba(243,107,34,.12), transparent 35%),
    linear-gradient(140deg, #eaf0f7, #f7f9fc);
}

.auth-box {
  width: min(435px, 100%);
  background: #fff;
  padding: 37px;
  border: 1px solid #e7edf4;
  border-radius: 20px;
  box-shadow: 0 24px 65px rgba(16,43,75,.11);
}

.auth-box h1 {
  color: var(--navy);
  font-size: 29px;
  letter-spacing: -.04em;
  margin: 0 0 10px;
}

.auth-box h1:before {
  content: '◢';
  color: var(--orange);
  margin-right: 10px;
}

.auth-box p {
  color: var(--muted-text);
  line-height: 1.6;
  margin-bottom: 25px;
}

.auth-box label {
  display: block;
  font-size: 12px;
  font-weight: 750;
  margin: 17px 0 8px;
}

.auth-box .btn {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
}

.auth-error {
  color: var(--danger);
  font-size: 13px;
}

.auth-note {
  background: #fff5e9;
  border-radius: 10px;
  color: #92632d;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 17px;
  padding: 12px;
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: #98a6b6;
  font-size: 11px;
  line-height: 1.7;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {
  .main {
    padding: 28px 24px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

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

@media (max-width: 850px) {
  .shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
  }

  .brand {
    font-size: 17px;
    padding: 5px 3px 13px;
    margin-bottom: 10px;
  }

  .navs {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
  }

  .navs::-webkit-scrollbar {
    display: none;
  }

  .nav {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
  }

  .nav.active {
    padding-left: 10px;
  }

  .main {
    padding: 22px 18px;
  }

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

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

  .main > .top {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 580px) {
  .main {
    padding: 18px 14px;
  }

  #page-title {
    font-size: 23px;
  }

  .hero {
    padding: 26px 22px;
    margin-top: 18px;
  }

  .hero h1 {
    font-size: 27px;
  }

  .card-body,
  .panel {
    padding: 17px;
  }

  .match {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .match > .btn,
  .match > div > .btn {
    max-width: 100%;
  }

  .modal {
    padding: 22px 18px;
  }

  .account-bar {
    width: 100%;
  }

  #account-name {
    flex: 1 1 100%;
  }

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

  .table-wrap {
    margin: 0 -8px;
  }
}

/* VDP Tickets — hospitality dashboard */
:root { --navy:#122c49; --text:#21374e; --muted-text:#697b8e; --border:#e4e9ef; --background:#f6f8fa; --orange:#ef681f; }
body { margin:0; font-size:14px; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
svg { flex-shrink:0; vertical-align:middle; }
button:focus-visible, a:focus-visible { outline:3px solid #ef681f; outline-offset:4px; }
.sidebar { position:sticky; top:0; height:100vh; min-height:700px; width:238px; flex:0 0 238px; padding:28px 17px 20px; background:#fff; border-right:1px solid var(--border); box-shadow:none; display:flex; flex-direction:column; }
.sidebar .brand { padding:8px 9px 30px; min-height:88px; margin:0 0 26px; border:0; display:flex; align-items:center; justify-content:center; }
.sidebar .brand:before { content:none; }
.brand-logo { display:block; width:100%; max-width:184px; height:auto; object-fit:contain; }
.navs { gap:8px; }
.nav { display:flex; align-items:center; gap:14px; padding:14px 16px; color:#5a6c80; font-size:13px; border:0; border-radius:8px; }
.nav:hover { background:#f2f5f8; color:var(--navy); }
.nav.active { background:var(--navy); color:#fff; border:0; padding-left:16px; box-shadow:inset 3px 0 var(--orange),0 5px 12px #122c4912; }
.nav.active:hover { background:#1d3d5f; }
.sidebar-bottom { margin-top:auto; padding:64px 18px 14px; background:linear-gradient(180deg,#fff0,#f1f4f7); border-radius:12px; }
.sidebar-kicker { display:block; font-size:8px; color:#7f8d9c; letter-spacing:.13em; margin-bottom:16px; font-weight:700; }
.sidebar-bottom strong { display:block; font-size:31px; line-height:1.1; letter-spacing:-.04em; color:var(--navy); }
.sidebar-rule { display:block; width:32px; height:3px; background:var(--orange); margin:18px 0; }
.sidebar-bottom small { display:block; font-size:9px; color:#788899; line-height:1.6; }
.main { max-width:1710px; padding:27px 32px 22px; }
.main > .top { margin:0 0 25px; padding:0; border:0; min-height:50px; }
#page-title { font-size:24px; letter-spacing:-.04em; }
.top .muted { font-size:12px; }
.account-bar { gap:9px; }
#account-name { color:var(--navy); padding-left:13px; border-left:1px solid var(--border); margin:0 5px; }
.btn { padding:11px 15px; border-radius:7px; font-weight:650; font-size:12px; }
.btn.alt { background:#fff; border:1px solid var(--border); }
.account-bar > .btn:not(.alt) { box-shadow:0 4px 10px #ef681f20; }
.vdp-hero { position:relative; isolation:isolate; min-height:306px; display:flex; align-items:center; overflow:hidden; border-radius:12px; padding:36px 40px; color:#fff; background:linear-gradient(90deg,#061425ed 0%,#081b30a3 50%,#0b243821 100%),url('/assets/stadium.jpg') center 55%/cover; }
.vdp-hero-content { position:relative; z-index:1; }
.vdp-eyebrow { display:flex; align-items:center; gap:9px; font-size:9px; font-weight:750; letter-spacing:.18em; color:#f5be99; margin-bottom:17px; }
.vdp-eyebrow > span { width:6px; height:6px; border-radius:50%; background:var(--orange); }
.vdp-hero h1 { font-size:clamp(34px,3.3vw,53px); font-weight:750; line-height:1.08; letter-spacing:-.052em; margin:0 0 16px; }
.vdp-hero h1 em { color:#ffb17f; font-style:normal; }
.vdp-hero p { margin:0 0 23px; color:#e2e7ed; font-size:13px; }
.hero-button { background:#fff; color:var(--navy); gap:20px; padding:11px 15px; }
.hero-button:hover { color:#fff; }
.hero-caption { position:absolute; right:22px; bottom:19px; font-size:8px; letter-spacing:.15em; color:#f4f6f9c7; }
.hero-caption span { color:var(--orange); padding:0 8px; }
.dashboard-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 31px; }
.stat-card { display:flex; align-items:center; gap:12px; padding:17px 16px; text-align:left; background:#fff; border:1px solid var(--border); border-radius:10px; transition:border-color .18s,transform .18s; }
.stat-card:hover { border-color:#d8af92; transform:translateY(-2px); }
.stat-icon { display:grid; place-items:center; width:38px; height:40px; flex-shrink:0; color:#b66b3c; background:#fcf2eb; border-radius:9px; }
.stat-card > span:nth-child(2) { flex:1; }
.stat-card strong { display:block; font-size:25px; line-height:1.1; letter-spacing:-.05em; color:var(--navy); font-weight:750; }
.stat-card small { display:block; color:#6c7c8d; font-size:10px; margin-top:5px; line-height:1.45; }
.stat-card > svg { color:#9aa8b6; }
.vdp-section { margin-bottom:25px; }
.vdp-section-heading,.vdp-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-eyebrow { display:block; font-size:8px; letter-spacing:.15em; font-weight:750; color:#8a7768; margin-bottom:7px; }
.vdp-section-heading h2,.vdp-panel-heading h2 { color:var(--navy); margin:0; font-size:19px; letter-spacing:-.04em; font-weight:750; }
.text-link { display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:6px 0; font-size:10px; font-weight:600; color:var(--navy); white-space:nowrap; }
.text-link:hover { color:#c35214; }
.vdp-club-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(142px,.63fr); gap:13px; }
.vdp-club-card { padding:0; text-align:left; overflow:hidden; background:white; border:1px solid var(--border); border-radius:10px; color:var(--text); transition:transform .2s,box-shadow .2s; }
.vdp-club-card:hover { transform:translateY(-3px); box-shadow:0 9px 22px #122c4910; }
.vdp-club-photo { position:relative; height:123px; background:linear-gradient(0deg,#081525ba,#08152505),url('/assets/stadium.jpg') center 53%/cover; }
.nac .vdp-club-photo { background-image:linear-gradient(0deg,#081525ba,#08152505),url('/assets/nac-stadium.webp'); background-position:center 65%; }
.spa .vdp-club-photo { background-image:linear-gradient(0deg,#081525ba,#08152505),url('/assets/sparta-stadium.webp'); background-position:center 60%; }
.club-photo-label { position:absolute; bottom:12px; left:15px; color:white; font-size:8px; font-weight:700; letter-spacing:.18em; }
.club-photo-count { position:absolute; top:11px; right:10px; color:#fff; background:#0a182970; backdrop-filter:blur(8px); font-size:9px; border:1px solid #ffffff30; border-radius:20px; padding:5px 8px; }
.vdp-club-info { position:relative; display:flex; align-items:center; gap:10px; padding:15px 12px 17px; min-height:76px; }
.club-badge { width:39px; height:44px; flex:0 0 39px; display:grid; place-items:center; border-radius:8px 8px 16px 16px; border:2px solid #fff; box-shadow:0 0 0 1px #dde3e9; color:white; font-family:Georgia,serif; font-size:23px; font-weight:700; background:#102b4b; }
.club-badge.feyenoord { background:linear-gradient(90deg,#c32a37 50%,#f9f6f0 50%); color:#152a41; text-shadow:0 1px #fff; }
.club-badge.nac { background:#f4c936; color:#19212c; font-family:inherit; font-size:11px; letter-spacing:-.04em; }
.club-badge.sparta { background:repeating-linear-gradient(90deg,#d93241 0 8px,#fff 8px 16px); color:#122c49; text-shadow:0 1px white; }
.vdp-club-info > .club-badge { margin-top:-23px; }
.vdp-club-details { flex:1; min-width:0; }
.vdp-club-details h3 { margin:0 0 7px; font-size:14px; color:var(--navy); font-weight:750; letter-spacing:-.035em; }
.vdp-club-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:9px; color:#6b7c8d; line-height:1.6; }
.vdp-club-meta > span { color:#b9c2cc; }
.club-card-arrow { align-self:flex-end; color:#64758a; }
.vdp-new-card { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:13px; border:1px dashed #cbd5df; border-radius:10px; background:#edf1f5; padding:18px 10px; color:var(--navy); transition:background .2s,border-color .2s; }
.vdp-new-card:hover { background:#fcf1e9; border-color:#eeb590; }
.vdp-new-icon { display:grid; place-items:center; width:43px; height:43px; border:1px solid #c5ced8; border-radius:50%; background:#ffffff8f; }
.vdp-new-card strong { font-size:12px; line-height:1.6; font-weight:650; }
.vdp-new-card > span:last-child { display:flex; align-items:center; gap:5px; font-size:9px; color:#6b7c8d; }
.vdp-overview-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start; }
.vdp-overview-panel { padding:19px; background:white; border:1px solid var(--border); border-radius:10px; min-width:0; }
.vdp-panel-heading { padding-bottom:16px; border-bottom:1px solid var(--border); margin:0; }
.vdp-panel-heading h2 { font-size:15px; }
.vdp-panel-heading .text-link { font-size:9px; gap:7px; }
.fixture-row { justify-content:flex-start; gap:11px; padding:16px 0; }
.fixture-row:first-child { padding-top:16px; }
.fixture-row:last-child { padding-bottom:0; }
.date-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; width:41px; flex:0 0 41px; height:61px; border-radius:7px; background:#f2f5f8; color:var(--navy); line-height:1.1; }
.date-tile span { font-size:8px; text-transform:uppercase; }
.date-tile strong { font-size:21px; font-weight:750; margin:2px 0; }
.fixture-row .club-badge { width:31px; height:35px; flex-basis:31px; font-size:20px; border-radius:6px 6px 12px 12px; }
.fixture-row .club-badge.nac { font-size:9px; }
.fixture-details { min-width:0; flex:1; }
.fixture-details strong { font-size:11px; letter-spacing:-.015em; }
.fixture-details small { font-size:9px; margin-top:4px; }
.detail-dot { padding:0 6px; color:#a8b2bd; }
.fixture-details .fixture-group { font-size:8px; color:#8593a1; }
.availability { display:inline-flex; align-items:center; gap:4px; padding:6px 7px; border-radius:5px; font-size:9px; color:#237651; background:#e7f5ed; white-space:nowrap; }
.availability-label { display:none; }
.availability.unavailable { color:#7a6870; background:#f3eff0; }
.fixture-book { font-size:9px; padding:9px 10px; gap:5px; }
.fixture-book svg { display:none; }
.vdp-recent-item { width:100%; text-align:left; display:flex; align-items:center; gap:10px; min-height:66px; padding:13px 0; border:0; border-bottom:1px solid #edf0f4; background:transparent; }
.vdp-recent-item:hover { background:#f8fafb; }
.vdp-recent-item:last-child { border-bottom:0; padding-bottom:0; }
.vdp-avatar { width:33px; height:33px; flex:0 0 33px; border-radius:50%; display:grid; place-items:center; color:#655547; background:#efe7dd; font-size:10px; font-weight:700; }
.vdp-recent-item:nth-child(even) .vdp-avatar { background:#e6edf2; color:#4a647b; }
.vdp-recent-details { flex:1; min-width:0; }
.vdp-recent-details strong { display:block; font-size:10px; color:var(--navy); }
.vdp-recent-details small { display:block; font-size:9px; color:#7b8898; margin-top:4px; overflow-wrap:anywhere; }
.vdp-status { display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:6px 7px; font-size:8px; white-space:nowrap; font-weight:650; }
.vdp-status > span { width:4px; height:4px; border-radius:50%; background:currentColor; }
.vdp-status-confirmed,.vdp-status-sent { background:#e7f5ed; color:#237651; }
.vdp-status-pending { background:#fff3d6; color:#9b6d16; }
.vdp-status-cancelled { background:#f0f2f5; color:#6f7e8b; }
.dashboard-side { display:grid; gap:16px; }
.connection-card { border-radius:10px; overflow:hidden; padding:23px; background:linear-gradient(100deg,#102b4bf5,#102b4bc9),url('/assets/stadium.jpg') center/cover; }
.connection-card .section-eyebrow { color:#e8b58f; font-size:7px; }
.connection-card h3 { color:white; font-size:20px; letter-spacing:-.03em; line-height:1.3; margin:13px 0; }
.connection-card .text-link { color:#f5c49c; }
.footer { font-size:9px; margin-top:28px; padding-top:17px; color:#8492a0; }
.agenda-heading { display:flex; align-items:center; justify-content:space-between; margin:34px 0 24px; }
.agenda-heading .section-title { font-size:29px; margin:5px 0 0; }
.agenda-count { color:#6c7c8c; font-size:12px; }
.agenda-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; flex-wrap:wrap; }
.club-filters { display:flex; gap:6px; flex-wrap:wrap; }
.filter-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid #e0e6ed; border-radius:7px; padding:10px 13px; color:#6b798a; background:#fff; font-size:11px; }
.filter-chip.selected { background:var(--navy); color:white; border-color:var(--navy); }
.club-dot { width:6px; height:6px; border-radius:50%; }
.club-dot.fey,.club-dot.spa { background:#d33b47; }
.club-dot.nac { background:#f0c52e; }
.match-search { display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid #dfe6ed; border-radius:7px; background:white; color:#7e8d9d; }
.match-search input { width:225px; padding:10px 0; border:0; background:none; font-size:11px; }
.match-search:focus-within { outline:2px solid #ef681f60; }
.match-search input:focus { box-shadow:none; }
.agenda-panel { padding:9px 22px 22px; }
.agenda-panel .fixture-row { gap:18px; }
.agenda-panel .fixture-details strong { font-size:14px; }
.agenda-panel .fixture-details small { font-size:11px; }
.agenda-panel .fixture-book { font-size:11px; padding:11px 15px; }
.agenda-panel .availability { font-size:11px; padding:8px 10px; }
.agenda-panel .availability-label,.agenda-panel .fixture-book svg { display:inline; }
.agenda-empty { padding:55px 20px; text-align:center; color:#7b8b9c; }
.agenda-empty h3 { margin:17px 0 8px; color:var(--navy); }
.agenda-empty p { font-size:13px; margin-bottom:22px; }
.modal-open { overflow:hidden; }
.auth-screen { padding:0; display:grid; grid-template-columns:1.1fr 1fr; background:#f8fafb; }
.auth-story { align-self:stretch; position:relative; padding:46px; display:flex; flex-direction:column; justify-content:space-between; color:white; background:linear-gradient(180deg,#0b203a4d,#061626ec),url('/assets/stadium.jpg') 62% center/cover; }
.auth-brand { width:190px; background:#fff; border-radius:8px; padding:13px 17px; }
.auth-story h2 { font-size:clamp(32px,4vw,58px); line-height:1.06; letter-spacing:-.05em; margin:20px 0; }
.auth-story p { color:#c6d1dd; font-size:14px; }
.auth-story-footer { color:#a8b7c8; font-size:9px; letter-spacing:.13em; margin-top:70px; }
.auth-box { justify-self:center; width:min(410px,100%); padding:40px; background:transparent; box-shadow:none; border:0; }
.auth-box .section-eyebrow { color:#ba642e; font-size:8px; margin-bottom:17px; }
.auth-box h1 { font-size:30px; line-height:1.13; letter-spacing:-.045em; }
.auth-box h1:before { content:none; }
.auth-box p { font-size:12px; line-height:1.8; margin-bottom:28px; }
.auth-box label { font-size:11px; margin-top:20px; }
.auth-box input { padding:13px; }
.auth-box .btn { background:var(--navy); font-size:12px; }
.auth-note { background:none; color:#8593a2; font-size:10px; padding:16px 0 0; border-top:1px solid var(--border); border-radius:0; line-height:1.8; }
.auth-error { margin-top:12px; line-height:1.6; }
@media(min-width:1600px) {
  .main { padding:32px 42px; }
  .vdp-hero { min-height:340px; }
  .fixture-row { gap:14px; }
  .fixture-details strong { font-size:13px; }
  .fixture-details small { font-size:10px; }
  .availability-label { display:inline; }
  .vdp-club-details h3 { font-size:17px; }
}
@media(max-width:1200px) {
  .sidebar { width:205px; flex-basis:205px; padding-left:12px; padding-right:12px; }
  .main { padding:25px 22px; }
  .vdp-club-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vdp-new-card { grid-column:1/-1; flex-direction:row; padding:12px 20px; justify-content:flex-start; gap:15px; text-align:left; }
  .vdp-new-card br { display:none; }
  .vdp-new-card > span:last-child { margin-left:auto; }
  .vdp-new-icon { width:32px; height:32px; }
  .vdp-overview-grid { grid-template-columns:1fr; }
  .dashboard-side { grid-template-columns:1.3fr 1fr; align-items:start; }
  .connection-card { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
  .vdp-club-info { gap:8px; }
  .vdp-club-details h3 { font-size:13px; }
}
@media(max-width:850px) {
  .shell { display:block; }
  .sidebar { height:auto; min-height:0; width:100%; display:block; position:sticky; z-index:30; padding:12px 18px 10px; box-shadow:0 2px 10px #122c4905; }
  .sidebar .brand { padding:0 0 12px; margin:0; min-height:0; justify-content:flex-start; }
  .brand-logo { max-width:139px; }
  .sidebar-bottom { display:none; }
  .navs { flex-direction:row; overflow:auto; gap:5px; }
  .nav,.nav.active { padding:10px 12px; width:auto; gap:8px; flex:0 0 auto; font-size:11px; }
  .nav svg { width:16px; height:16px; }
  .main { padding:22px 20px; }
  .main > .top { gap:15px; flex-wrap:wrap; }
  .vdp-hero { min-height:280px; }
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vdp-club-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vdp-club-info > .club-badge { display:none; }
  .auth-story { padding:30px; }
  .auth-box { padding:30px; }
}
@media(max-width:580px) {
  .main { padding:20px 14px; }
  #page-title { font-size:22px; }
  .account-bar { gap:8px; width:100%; }
  #account-name { flex:1; font-size:11px; margin:0; padding:0; border:0; }
  .account-bar .btn { font-size:10px; padding:10px 12px; }
  .vdp-hero { min-height:280px; padding:29px 24px 38px; background-position:60% center; }
  .vdp-hero h1 { font-size:34px; }
  .vdp-hero p { font-size:11px; max-width:235px; line-height:1.7; }
  .vdp-eyebrow { font-size:7px; }
  .hero-caption { font-size:6px; right:17px; bottom:14px; }
  .dashboard-stats { gap:8px; margin:14px 0 28px; }
  .stat-card { padding:13px 10px; gap:9px; }
  .stat-card strong { font-size:22px; }
  .stat-card small { font-size:8px; }
  .stat-icon { width:30px; height:34px; }
  .stat-icon svg { width:17px; }
  .stat-card > svg { display:none; }
  .vdp-section-heading h2 { font-size:19px; }
  .vdp-section-heading .text-link { font-size:9px; }
  .vdp-club-grid { grid-template-columns:1fr; gap:10px; }
  .vdp-club-card { display:grid; grid-template-columns:100px 1fr; min-height:94px; }
  .vdp-club-photo { height:100%; min-height:94px; }
  .club-photo-count { display:none; }
  .club-photo-label { font-size:7px; left:9px; bottom:10px; }
  .vdp-club-info { padding:15px; }
  .vdp-club-info > .club-badge { display:grid; width:31px; height:36px; flex-basis:31px; margin:0; font-size:18px; }
  .vdp-club-info > .club-badge.nac { font-size:9px; }
  .vdp-club-details h3 { font-size:14px; }
  .vdp-club-meta { font-size:9px; }
  .vdp-new-card { grid-column:auto; padding:15px; }
  .vdp-new-card strong { font-size:10px; }
  .vdp-new-card > span:last-child { font-size:0; }
  .vdp-overview-panel { padding:15px; }
  .vdp-panel-heading h2 { font-size:14px; }
  .vdp-panel-heading .text-link { font-size:8px; }
  .fixture-row,.agenda-panel .fixture-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:9px; align-items:center; }
  .fixture-row .date-tile { width:36px; grid-row:1/3; height:64px; }
  .fixture-row > .club-badge { display:none; }
  .fixture-details { grid-column:2/4; }
  .fixture-details strong,.agenda-panel .fixture-details strong { font-size:12px; }
  .fixture-details small,.agenda-panel .fixture-details small { font-size:9px; }
  .fixture-details .fixture-group { display:none; }
  .availability,.agenda-panel .availability { justify-self:start; grid-column:2; font-size:9px; padding:5px 6px; }
  .fixture-book,.agenda-panel .fixture-book { grid-column:3; font-size:9px; padding:7px 9px; }
  .agenda-panel .availability-label { display:none; }
  .dashboard-side { grid-template-columns:1fr; }
  .vdp-recent-item { gap:9px; }
  .connection-card { padding:24px; }
  .agenda-heading { margin:25px 0 20px; }
  .agenda-heading .section-title { font-size:24px; }
  .agenda-heading .section-eyebrow { font-size:6px; }
  .agenda-count { font-size:10px; }
  .agenda-toolbar { align-items:stretch; }
  .club-filters { display:grid; grid-template-columns:repeat(2,1fr); width:100%; gap:6px; }
  .filter-chip { justify-content:center; padding:10px; font-size:10px; }
  .match-search { width:100%; }
  .match-search input { width:100%; }
  .agenda-panel { padding:0 14px 15px; }
  .auth-screen { display:flex; flex-direction:column; justify-content:flex-start; overflow:auto; }
  .auth-story { width:100%; min-height:235px; padding:25px; box-sizing:border-box; }
  .auth-brand { width:140px; padding:9px 13px; }
  .auth-story h2 { font-size:30px; margin:24px 0 7px; }
  .auth-story .vdp-eyebrow,.auth-story-footer,.auth-story p { display:none; }
  .auth-box { padding:30px 26px; }
  .auth-box h1 { font-size:27px; }
  .auth-box p { margin-bottom:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Readable supporting text at ordinary laptop sizes. */
.stat-card small { font-size:11px; }
.vdp-club-meta { font-size:10px; }
.fixture-details strong { font-size:12px; }
.fixture-details small { font-size:10px; }
.fixture-details .fixture-group { font-size:9px; }
.vdp-recent-details strong { font-size:12px; }
.vdp-recent-details small { font-size:10px; }
.vdp-status { font-size:10px; }
@media(max-width:580px) {
  .stat-card small { font-size:10px; }
  .vdp-club-meta { font-size:10px; }
  .vdp-status { font-size:9px; }
  .vdp-recent-details strong { font-size:12px; }
}

/* Official club artwork retains its original proportions and colours. */
.club-badge.club-badge-official { background:transparent; border:0; border-radius:0; box-shadow:none; }
.club-badge-official img { display:block; width:100%; height:100%; object-fit:contain; }

/* De Kuip: supplied stadium photo for the Feyenoord card. */
.fey .vdp-club-photo { background-image:linear-gradient(0deg,#081525ba,#08152505),url('/assets/feyenoord-stadium.webp'); background-position:center 55%; }

/* Shared month calendar: agenda and compact dashboard. */
.match-calendar { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:25px 26px; }
.calendar-month { font-size:27px; color:var(--navy); letter-spacing:-.04em; font-weight:750; margin:0; text-transform:capitalize; }
.calendar-controls { display:flex; align-items:center; gap:7px; }
.calendar-nav,.calendar-today,.calendar-picker { display:flex; align-items:center; justify-content:center; height:36px; border:1px solid var(--border); border-radius:7px; background:#fff; color:var(--navy); }
.calendar-nav { width:36px; font-size:24px; line-height:1; padding:0 0 3px; }
.calendar-nav:hover,.calendar-today:hover,.calendar-picker:hover { background:#f2f5f8; }
.calendar-today { font-size:11px; padding:0 12px; margin-right:6px; }
.calendar-picker { position:relative; width:36px; cursor:pointer; overflow:hidden; }
.calendar-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.calendar-picker input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.calendar-picker:focus-within { outline:3px solid #ef681f; outline-offset:3px; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays { border-top:1px solid var(--border); background:#fafbfc; }
.calendar-weekdays span { padding:12px; text-transform:uppercase; color:#8895a3; letter-spacing:.09em; font-weight:650; font-size:10px; text-align:center; }
.calendar-day { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; min-width:0; min-height:134px; padding:13px 14px; text-align:left; border:0; border-top:1px solid var(--border); border-right:1px solid var(--border); background:#fff; color:#5b6d80; transition:background .15s; }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.is-weekend { background:#fcfcfd; }
.calendar-padding { background:#f8fafb; }
button.calendar-day:hover { background:#f2f6fa; }
.calendar-day.has-matches { background:#f6f9fc; cursor:pointer; }
.calendar-day.has-matches:hover { background:#edf3f9; }
.calendar-day:focus-visible { outline:2px solid var(--orange); outline-offset:-3px; z-index:1; }
.calendar-day-number { width:26px; height:26px; display:grid; place-items:center; font-size:12px; font-weight:600; }
.is-today .calendar-day-number { border-radius:50%; background:var(--orange); color:#fff; }
.calendar-logos { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.calendar-logos .club-badge { width:32px; height:32px; flex-basis:32px; margin:0; }
.calendar-day-caption { max-width:100%; color:#75869a; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-footer { padding:15px 23px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.calendar-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.calendar-legend > span { display:flex; align-items:center; gap:6px; color:#77889a; font-size:10px; }
.calendar-legend .club-badge { width:17px; height:19px; flex-basis:17px; }
.calendar-hint { font-size:10px; color:#8b98a7; }
.calendar-compact { border:0; border-radius:0; }
.calendar-compact .calendar-toolbar { padding:18px 0; gap:10px; }
.calendar-compact .calendar-toolbar .section-eyebrow { display:none; }
.calendar-compact .calendar-month { font-size:20px; }
.calendar-compact .calendar-controls { gap:4px; }
.calendar-compact .calendar-nav,.calendar-compact .calendar-picker,.calendar-compact .calendar-today { height:30px; }
.calendar-compact .calendar-nav,.calendar-compact .calendar-picker { width:30px; }
.calendar-compact .calendar-today { font-size:9px; padding:0 8px; margin-right:2px; }
.calendar-compact .calendar-weekdays span { font-size:9px; padding:10px 0; }
.calendar-compact .calendar-day { min-height:88px; padding:7px; gap:5px; }
.calendar-compact .calendar-day-number { font-size:10px; width:22px; height:22px; }
.calendar-compact .calendar-logos { gap:3px; }
.calendar-compact .calendar-logos .club-badge { width:22px; height:24px; flex-basis:22px; }
.calendar-compact .calendar-day-caption { display:none; }
.calendar-compact .calendar-footer { padding:15px 0 0; gap:12px; }
.calendar-compact .calendar-legend { gap:10px; }
.calendar-compact .calendar-legend > span { font-size:9px; }
.calendar-day-dialog { width:min(660px,calc(100% - 32px)); max-height:85dvh; padding:0; background:#fff; border:1px solid var(--border); border-radius:16px; color:var(--text); box-shadow:0 25px 90px #07172935; overflow-y:auto; }
.calendar-day-dialog::backdrop { background:#071627a8; backdrop-filter:blur(5px); }
.day-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:26px; border-bottom:1px solid var(--border); }
.day-dialog-heading h2 { font-size:22px; letter-spacing:-.035em; color:var(--navy); margin:0; text-transform:capitalize; }
.calendar-dialog-close { display:grid; place-items:center; padding:0; flex:0 0 32px; width:32px; height:32px; border:1px solid var(--border); border-radius:50%; background:#f6f8fa; color:#5f7185; font-size:23px; line-height:1; }
.calendar-dialog-close>svg { display:block; }
.day-dialog-content { padding:0 26px; }
.day-fixture { padding:26px 0; border-bottom:1px solid var(--border); }
.day-fixture:last-child { border:0; }
.day-fixture-content { min-width:0; }
.day-fixture-heading { text-align:center; margin-bottom:22px; }
.day-fixture-heading > .club-badge { width:56px; height:60px; margin:0 auto 16px; }
.day-fixture h3 { margin:0 0 8px; color:var(--navy); font-size:22px; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:balance; }
.day-fixture p { font-size:12px; color:#7c8c9e; line-height:1.7; margin:7px 0; }
.day-fixture-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:10px; margin:17px 0; }
.day-fixture-groups > span { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:14px; background:#f5f8fb; border:1px solid var(--border); border-radius:9px; font-size:12px; color:#718398; }
.day-fixture-groups strong { color:#267653; font-weight:650; font-size:13px; }
.day-fixture [data-day-book] { width:100%; min-height:46px; margin-top:6px; }
#calendar-day-dialog .day-dialog-heading { justify-content:center; padding-left:72px; padding-right:72px; text-align:center; }
#calendar-day-dialog .day-dialog-heading > div { min-width:0; }
#calendar-day-dialog .calendar-dialog-close { position:absolute; right:20px; top:50%; transform:translateY(-50%); width:44px; height:44px; }
@media(max-width:580px) {
  .calendar-toolbar { padding:18px 13px; gap:10px; }
  .calendar-month { font-size:21px; }
  .calendar-toolbar .section-eyebrow { display:none; }
  .calendar-controls { gap:4px; }
  .calendar-nav,.calendar-picker { width:30px; height:32px; }
  .calendar-today { height:32px; font-size:10px; padding:0 8px; margin:0; }
  .calendar-weekdays span { padding:10px 0; font-size:9px; }
  .calendar-day { min-height:91px; padding:6px 4px; gap:7px; }
  .calendar-day-number { width:22px; height:22px; font-size:10px; }
  .calendar-logos { gap:3px; }
  .calendar-logos .club-badge { width:21px; height:23px; flex-basis:21px; }
  .calendar-day-caption { display:none; }
  .calendar-footer { padding:13px; gap:12px; }
  .calendar-legend { gap:9px; }
  .calendar-legend > span { font-size:8px; gap:4px; }
  .calendar-legend .club-badge { width:14px; height:16px; flex-basis:14px; }
  .calendar-hint { font-size:9px; }
  .calendar-compact .calendar-day { min-height:79px; padding:5px 3px; }
  .calendar-compact .calendar-logos .club-badge { width:18px; height:20px; flex-basis:18px; }
  .calendar-compact .calendar-month { font-size:18px; }
  .calendar-compact .calendar-legend { gap:7px; }
  .calendar-compact .calendar-legend > span { font-size:8px; }
  .day-dialog-heading { padding:21px 18px; gap:10px; }
  .day-dialog-heading h2 { font-size:19px; }
  .day-dialog-content { padding:0 18px; }
  .day-fixture h3 { font-size:20px; }
}

/* Reservation quantity and saved recipients. */
.ticket-stepper { display:flex; align-items:center; justify-content:space-between; border:1px solid #d6e0ea; border-radius:10px; padding:7px; background:#fff; }
.ticket-stepper > button { display:grid; place-items:center; width:43px; height:43px; border:1px solid var(--border); border-radius:7px; color:var(--navy); background:#f4f7fa; font-size:25px; }
.ticket-stepper > button:not(:disabled):hover { background:var(--navy); color:#fff; }
.ticket-stepper > button:disabled { color:#c1cbd6; background:#fafbfd; cursor:not-allowed; }
.ticket-stepper > div { display:flex; align-items:baseline; gap:7px; color:#7b8b9d; font-size:12px; }
.ticket-stepper input { appearance:textfield; -moz-appearance:textfield; text-align:right; width:48px; padding:0; border:0; background:none; border-radius:0; color:var(--navy); font-size:25px; font-weight:700; box-shadow:none; }
.ticket-stepper input::-webkit-inner-spin-button,.ticket-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.booking-help { display:block; color:#8392a3; font-size:10px; line-height:1.6; margin-top:8px; }
.recipient-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.recipient-label label { margin:0; }
.recipient-label .text-link { color:#ba5d29; font-size:11px; padding:0; }
.selected-contact { display:flex; align-items:center; gap:11px; background:#f5f8fb; border-radius:8px; padding:13px; margin-top:12px; }
.selected-contact strong { display:block; font-size:12px; color:var(--navy); }
.selected-contact small { display:block; font-size:10px; line-height:1.6; color:#7a8b9c; margin-top:4px; overflow-wrap:anywhere; }
.new-contact-fields { border:1px solid #ead7c8; border-radius:10px; padding:18px; background:#fffcf9; margin:20px 0; min-width:0; }
.new-contact-fields legend { font-size:12px; font-weight:700; color:var(--navy); padding:0 7px; }
.new-contact-fields > p { margin:0 0 17px; color:#8a7a6d; font-size:11px; line-height:1.7; }
.new-contact-fields .field { margin-bottom:12px; }
.new-contact-actions { display:flex; align-items:center; gap:9px; margin-top:15px; flex-wrap:wrap; }
#booking-error:empty,#new-contact-error:empty { display:none; }
#booking-error { margin:12px 0; }
@media(max-width:580px) {
  .recipient-label .text-link { font-size:10px; }
  .new-contact-fields { padding:14px; }
}

/* Account identity and private profile photos. */
.profile-avatar { position:relative; overflow:hidden; }
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-button { gap:8px; padding:6px 11px; }
.profile-button .vdp-avatar { width:28px; height:28px; font-size:9px; }
.profile-body { padding:26px; }
.profile-identity { display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 0 25px; }
.profile-identity > strong { font-size:18px; color:var(--navy); }
.profile-identity > span { color:#7b8b9e; font-size:12px; overflow-wrap:anywhere; }
#profile-photo-preview .vdp-avatar,.profile-photo-preview-image { width:104px; height:104px; border-radius:50%; font-size:28px; object-fit:cover; margin-bottom:8px; }
.profile-privacy { font-size:11px; color:#7d8b9a; line-height:1.7; }
.profile-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.profile-success { color:#237651; font-size:12px; margin-top:12px; }
.account-tag { display:inline-block; vertical-align:middle; margin-left:8px; color:#5e7f9a; background:#e7eff6; padding:3px 6px; border-radius:4px; font-size:8px; }
@media(max-width:580px) {
  .profile-body { padding:20px; }
  .account-bar .profile-button { padding:5px 8px; }
  .profile-button > span:last-child { display:none; }
  .profile-button { min-width:36px; }
}

/* Searchable person picker with profile photos. */
.recipient-picker { position:relative; }
.recipient-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:1px solid #d6e0ea; border-radius:9px; background:#fff; padding:10px 13px; text-align:left; color:var(--navy); }
.recipient-trigger:hover { border-color:#aebfd0; }
.recipient-trigger[aria-expanded="true"] { border-color:var(--orange); box-shadow:0 0 0 3px #ef681f12; }
#recipient-trigger-content { display:flex; align-items:center; gap:11px; min-width:0; }
.recipient-trigger .vdp-avatar,.recipient-option .vdp-avatar { width:37px; height:37px; flex:0 0 37px; border-radius:50%; overflow:hidden; background:#edf0f3; }
.recipient-trigger .vdp-avatar img,.recipient-option .vdp-avatar img { width:100%; height:100%; object-fit:cover; }
.recipient-name { font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-placeholder { color:#8895a4; font-size:12px; }
.recipient-popup { position:absolute; top:calc(100% + 7px); left:0; right:0; z-index:8; padding:8px; background:#fff; border:1px solid #dfe6ee; border-radius:12px; box-shadow:0 13px 35px #122c4926; }
.recipient-search-wrap { display:flex; align-items:center; gap:9px; padding:0 10px; border:1px solid #e7edf3; background:#f7f9fb; border-radius:7px; color:#8b98a7; }
.recipient-search-wrap input { border:0; background:none; padding:10px 0; font-size:12px; }
.recipient-search-wrap input:focus { box-shadow:none; }
#recipient-options { max-height:228px; overflow:auto; overscroll-behavior:contain; margin-top:7px; }
.recipient-group { padding:10px 10px 5px; color:#8a98a8; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.recipient-option { display:flex; align-items:center; gap:11px; width:100%; padding:10px; border:0; background:#fff; border-radius:7px; color:var(--navy); text-align:left; }
.recipient-option:hover,.recipient-option.keyboard-active { background:#f2f6fa; }
.recipient-option[aria-selected="true"] { background:#eef4f9; }
.recipient-option-text { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.recipient-option-text strong { font-size:12px; font-weight:650; }
.recipient-option-text small { font-size:10px; color:#8391a1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-check { color:#2b8060; }
.recipient-no-results { padding:20px 12px; color:#8b97a6; font-size:12px; line-height:1.6; }
.password-section { margin-top:26px; padding-top:24px; border-top:1px solid var(--border); }
.password-section h3 { font-size:16px; color:var(--navy); margin:0 0 9px; }
.password-section > p { font-size:11px; color:#8392a3; line-height:1.7; margin-bottom:20px; }
#password-feedback { font-size:12px; margin:12px 0; }
@media(max-width:580px) {
  .recipient-trigger { padding:9px 11px; }
  #recipient-options { max-height:190px; }
}

/* Ticket workspace: one task at a time, details on demand. */
.ticket-workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:29px 0 25px; }
.ticket-workspace-heading h2 { margin:0; color:var(--navy); font-size:29px; letter-spacing:-.045em; }
.ticket-workspace-heading p { color:#7e8d9f; font-size:12px; margin:10px 0 0; }
.ticket-add-button { background:var(--orange); }
.ticket-add-button:hover { background:#d95c1b; }
.ticket-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:28px; }
.ticket-summary-card { display:flex; align-items:center; gap:13px; padding:19px 15px; background:#fff; border:1px solid var(--border); border-radius:10px; text-align:left; transition:border-color .15s,transform .15s; }
.ticket-summary-card:hover { border-color:#ddba9e; transform:translateY(-2px); }
.ticket-summary-card > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:5px; }
.ticket-summary-card strong { font-size:27px; letter-spacing:-.05em; line-height:1.1; color:var(--navy); }
.ticket-summary-card b { color:#52687f; font-size:10px; font-weight:600; }
.ticket-summary-card small { font-size:9px; color:#8b99a7; line-height:1.5; }
.ticket-summary-card > svg { color:#a3afba; }
.ticket-tabs { display:flex; gap:27px; border-bottom:1px solid #dde5ed; margin-bottom:22px; }
.ticket-tabs > button { display:flex; align-items:center; gap:8px; padding:15px 0; background:none; border:0; border-bottom:2px solid transparent; color:#8491a1; font-size:13px; font-weight:650; }
.ticket-tabs > button[aria-selected="true"] { color:var(--navy); border-bottom-color:var(--orange); }
.ticket-tabs > button span { background:#eaf0f5; color:#71869c; border-radius:5px; min-width:21px; padding:3px 5px; font-size:9px; }
.ticket-tabs > button[aria-selected="true"] span { color:var(--navy); background:#dfe9f2; }
.ticket-filterbar { display:flex; align-items:flex-end; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.ticket-filterbar > label { display:flex; flex-direction:column; gap:7px; min-width:120px; flex:1; }
.ticket-filterbar > label > span { font-size:9px; font-weight:650; color:#8896a5; }
.ticket-filterbar select { padding:10px 11px; font-size:11px; height:39px; }
.ticket-filterbar .ticket-match-filter { flex:1.6; min-width:180px; }
.ticket-filterbar > .ticket-search { display:flex; flex-direction:row; align-items:center; gap:9px; flex:1.7; min-width:210px; padding:0 11px; height:39px; border:1px solid #d6e0ea; border-radius:9px; background:#fff; color:#8d9bac; }
.ticket-search input { width:100%; min-width:0; border:0; background:none; padding:9px 0; font-size:11px; }
.ticket-search input:focus { box-shadow:none; }
.ticket-search:focus-within { outline:2px solid #ef681f60; }
.ticket-filterbar > .text-link { font-size:10px; height:39px; }
.ticket-create { border:1px dashed #cbd7e3; border-radius:10px; background:#f1f5f9; margin-bottom:22px; }
.ticket-create > summary { display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; color:var(--navy); list-style:none; }
.ticket-create > summary > span:nth-child(2) { flex:1; font-size:12px; font-weight:650; }
.ticket-create > summary small { display:block; font-size:10px; font-weight:400; color:#8796a7; margin-top:4px; }
.ticket-create > .panel { border:0; border-top:1px solid var(--border); border-radius:0 0 10px 10px; box-shadow:none; }
.ticket-create > .panel h3 { display:none; }
.ticket-create form { display:block; max-width:650px; }
.ticket-create form > p { margin:16px 0 7px; }
.ticket-create form > p:first-child { margin-top:0; }
.ticket-create .panel > .muted { font-size:12px; line-height:1.7; }
.ticket-create input[type="file"] { background:#f7f9fb; border-style:dashed; padding:18px; }
.ticket-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:23px 0 14px; }
.ticket-results-heading h3 { margin:0 0 6px; font-size:16px; letter-spacing:-.025em; color:var(--navy); }
.ticket-results-heading span { color:#8695a6; font-size:10px; }
.ticket-record-list { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.ticket-record { border-bottom:1px solid var(--border); }
.ticket-record:last-child { border-bottom:0; }
.ticket-record > summary { display:flex; align-items:center; gap:15px; padding:17px 20px; cursor:pointer; list-style:none; background:#fff; }
.ticket-record > summary:hover { background:#f8fafc; }
.ticket-record > summary:focus-visible,.ticket-create > summary:focus-visible { outline:2px solid var(--orange); outline-offset:-3px; }
.ticket-record > summary::-webkit-details-marker,.ticket-create > summary::-webkit-details-marker { display:none; }
.ticket-record > summary > .club-badge { width:32px; height:36px; flex-basis:32px; }
.ticket-record-title { flex:1; min-width:0; }
.ticket-record-title strong { display:block; color:var(--navy); font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.ticket-record-title small { display:block; font-size:10px; color:#8795a6; line-height:1.6; margin-top:5px; }
.record-chevron { display:block; color:#8b9bad; transition:transform .18s; margin-left:6px; }
.ticket-record[open] > summary .record-chevron,.ticket-create[open] > summary .record-chevron { transform:rotate(180deg); }
.ticket-record[open] > summary { background:#f5f8fb; }
.ticket-status { display:inline-flex; align-items:center; padding:6px 9px; border-radius:5px; white-space:nowrap; font-size:9px; font-weight:650; }
.status-green { color:#267653; background:#e7f5ed; }
.status-amber { color:#9d741c; background:#fff4da; }
.status-red { color:#b54b56; background:#fcecf0; }
.status-grey { color:#7a8b9b; background:#eef1f4; }
.ticket-record-body.match { margin:0; padding:20px; border-top:1px solid var(--border); border-bottom:0; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.ticket-record-body > div:first-child { flex:1 1 240px; }
.ticket-record-body > div:last-child { flex:1 1 280px; max-width:450px; }
.ticket-record-body select { margin:0 0 8px; font-size:11px; }
.ticket-record-body .btn { font-size:11px; padding:9px 12px; }
.ticket-record-body > div:last-child > .btn { margin:5px 5px 0 0; }
.ticket-pagination { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 0; color:#8796a7; font-size:10px; }
.ticket-pagination > div { display:flex; align-items:center; gap:12px; }
.ticket-pagination .btn { padding:6px 11px; }
.ticket-empty { padding:45px 20px; text-align:center; color:#9aa7b5; }
.ticket-empty h3 { font-size:17px; color:var(--navy); margin:16px 0 10px; }
.ticket-empty p { font-size:12px; color:#8a98a8; line-height:1.8; }
.ticket-empty .btn { margin-top:10px; }
.queue-record.match { padding:19px 20px; }
.queue-record.match:first-child { padding-top:19px; }
.queue-record.match:last-child { padding-bottom:19px; }
.ticket-queue-note { font-size:11px; color:#8a98a7; line-height:1.7; margin-bottom:20px; }
@media(max-width:1150px) {
  .ticket-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:580px) {
  .ticket-workspace-heading { align-items:flex-start; margin-top:20px; gap:12px; }
  .ticket-workspace-heading h2 { font-size:24px; }
  .ticket-workspace-heading p { font-size:10px; max-width:210px; line-height:1.7; }
  .ticket-add-button { font-size:10px; padding:10px; flex-shrink:0; }
  .ticket-workspace-heading .section-eyebrow { font-size:6px; }
  .ticket-summary-grid { gap:8px; }
  .ticket-summary-card { padding:13px 10px; gap:9px; }
  .ticket-summary-card strong { font-size:23px; }
  .ticket-summary-card b { font-size:9px; }
  .ticket-summary-card small { display:none; }
  .ticket-summary-card > svg { display:none; }
  .ticket-tabs { gap:17px; }
  .ticket-tabs > button { font-size:11px; gap:5px; }
  .ticket-tabs > button span { font-size:8px; min-width:17px; }
  .ticket-filterbar { gap:10px; }
  .ticket-filterbar > .ticket-search { flex-basis:100%; }
  .ticket-filterbar > label { flex:1 1 40%; min-width:0; }
  .ticket-filterbar > .ticket-match-filter { flex:1 1 40%; min-width:0; }
  .ticket-filterbar > .text-link { height:30px; }
  .ticket-record > summary { padding:14px 12px; gap:10px; flex-wrap:wrap; }
  .ticket-record-title { flex:1 1 calc(100% - 65px); }
  .ticket-record-title strong { font-size:12px; }
  .ticket-record-title small { font-size:9px; }
  .ticket-record > summary .ticket-status { margin-left:42px; }
  .ticket-record > summary .record-chevron { margin-left:auto; }
  .ticket-record-body.match { padding:15px; gap:15px; }
  .ticket-record-body > div:first-child,.ticket-record-body > div:last-child { flex:1 1 auto; width:100%; }
  .ticket-create > summary { padding:14px 12px; }
  .ticket-create > summary small { font-size:9px; }
  .ticket-results-heading span { font-size:9px; line-height:1.7; }
  .ticket-pagination { align-items:flex-start; font-size:9px; gap:8px; }
  .ticket-pagination > div { gap:7px; }
}

/* Calendar occupancy: recipients stay visible without opening a day. */
.calendar-fixtures { display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; }
.calendar-fixture { display:flex; flex-direction:column; gap:7px; min-width:0; }
.calendar-fixture + .calendar-fixture { padding-top:9px; border-top:1px dashed #dce5ee; }
.calendar-fixture-label { display:flex; align-items:center; gap:7px; min-width:0; }
.calendar-fixture-label .club-badge { width:26px; height:29px; flex:0 0 26px; }
.calendar-fixture-label > span:last-child { font-size:10px; color:#74879a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-guests { display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px; max-width:100%; }
.calendar-guest { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; max-width:42px; }
.calendar-guest-photo { display:block; position:relative; }
.calendar-guest .vdp-avatar { width:28px; height:28px; border:2px solid #fff; box-shadow:0 0 0 1px #9ec9b8; }
.calendar-guest .vdp-avatar img { width:100%; height:100%; object-fit:cover; }
.calendar-guest.guest-pending .vdp-avatar { box-shadow:0 0 0 1px #e5c27b; }
.calendar-guest-photo > b { position:absolute; bottom:-2px; right:-4px; min-width:13px; height:13px; padding:0 2px; border-radius:6px; display:grid; place-items:center; background:#213e5a; color:#fff; border:1px solid white; font-size:8px; font-weight:600; }
.calendar-guest-name { display:block; max-width:42px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; color:#60768c; }
.calendar-more-guests { display:grid; place-items:center; border-radius:50%; width:24px; height:24px; background:#e4edf5; font-size:9px; color:#617a91; }
.calendar-compact .calendar-fixture-label .club-badge { width:22px; height:25px; flex-basis:22px; }
.calendar-compact .calendar-fixture-label > span:last-child { display:none; }
.calendar-compact .calendar-guests { gap:6px; }
.calendar-compact .calendar-guest .vdp-avatar { width:28px; height:28px; border-width:1px; }
.calendar-compact .calendar-guest-name { font-size:8px; max-width:34px; }
.calendar-compact .calendar-guest-photo > b { font-size:7px; min-width:11px; height:11px; }
.calendar-compact .calendar-more-guests { width:20px; height:20px; font-size:8px; }
.day-reservations { padding:15px 0 13px; border-top:1px solid var(--border); margin-top:15px; }
.day-reservations > .section-eyebrow { font-size:8px; }
.day-reservation { display:flex; align-items:center; gap:10px; padding:9px 0; }
.day-reservation > .vdp-avatar { width:32px; height:32px; flex:0 0 32px; }
.day-reservation > span:last-child { min-width:0; }
.day-reservation strong { display:block; font-size:12px; color:var(--navy); }
.day-reservation strong small { display:inline; margin-left:8px; font-weight:400; }
.day-reservation small { display:block; margin-top:5px; font-size:9px; color:#8192a3; line-height:1.6; }
.booking-context { background:#f4f8fb; border:1px solid #e2eaf1; border-radius:10px; padding:15px; margin:18px 0; }
.booking-context strong { font-size:12px; color:var(--navy); }
.booking-context p { font-size:11px; line-height:1.7; color:#7b8da0; margin:7px 0 0; }
.booking-confirmation { display:flex; align-items:flex-start; gap:10px; margin-top:13px; padding-top:13px; border-top:1px solid #e2eaf1; font-size:11px; line-height:1.6; cursor:pointer; }
.booking-confirmation input { width:17px; height:17px; margin:1px 0 0; flex:0 0 17px; accent-color:var(--navy); }
@media(max-width:580px) {
  .calendar-fixture-label .club-badge { width:22px; height:25px; flex-basis:22px; }
  .calendar-fixture-label > span:last-child { display:none; }
  .calendar-guests,.calendar-compact .calendar-guests { gap:5px; }
  .calendar-guest .vdp-avatar,.calendar-compact .calendar-guest .vdp-avatar { width:20px; height:20px; border-width:1px; }
  .calendar-guest-name,.calendar-compact .calendar-guest-name { max-width:27px; font-size:7px; }
  .calendar-guest-photo > b { height:11px; min-width:11px; font-size:7px; }
  .calendar-more-guests { width:20px; height:20px; }
  .day-reservation strong small { display:block; margin:4px 0 0; }
}
.booking-overview-help { font-size:12px; color:#8192a4; line-height:1.7; margin:-6px 0 20px; max-width:720px; }

/* Responsive management cards share one set of actions on every screen. */
.overview-filters { display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; }
.overview-filters > label { flex:1 1 220px; display:flex; flex-direction:column; gap:8px; color:#52687f; font-size:12px; font-weight:600; }
.overview-filters > label:first-child { flex-grow:2; }
.results-count { color:#697d91; font-size:12px; margin:0 0 14px; }
.reservation-grid,.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.reservation-card,.contact-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
.reservation-match { display:flex; gap:12px; align-items:center; padding:20px; background:#fafbfd; border-bottom:1px solid var(--border); }
.reservation-match > div,.reservation-person > div,.contact-identity > div { min-width:0; flex:1; }
.reservation-match .club-badge { width:32px; height:36px; flex:0 0 32px; }
.reservation-match h3,.contact-identity h3 { font-size:15px; line-height:1.5; color:var(--navy); margin:0; overflow-wrap:anywhere; }
.reservation-match p,.contact-identity p { font-size:12px; line-height:1.6; color:#6c7f92; margin:4px 0 0; overflow-wrap:anywhere; }
.reservation-person { display:flex; align-items:center; gap:12px; padding:20px 20px 15px; }
.reservation-person > .vdp-avatar,.contact-identity > .vdp-avatar { width:40px; height:40px; flex:0 0 40px; }
.reservation-person strong { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.reservation-person small { display:block; color:#6e8194; font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.reservation-quantity { flex:0 0 auto; text-align:right; color:#718397; font-size:11px; }
.reservation-quantity strong { font-size:23px; color:var(--navy); }
.reservation-badges { display:flex; gap:7px; flex-wrap:wrap; padding:0 20px 18px; }
.reservation-badges .ticket-status { font-size:11px; white-space:normal; line-height:1.5; }
.reservation-details,.contact-details { border-top:1px solid var(--border); }
.reservation-details > summary,.contact-details > summary { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; min-height:48px; cursor:pointer; color:var(--navy); font-size:12px; font-weight:600; list-style:none; }
.reservation-details > summary::-webkit-details-marker,.contact-details > summary::-webkit-details-marker { display:none; }
.reservation-details[open] > summary svg,.contact-details[open] > summary svg { transform:rotate(180deg); }
.reservation-detail-body { padding:0 20px 20px; }
.reservation-detail-body dl { margin:0 0 18px; }
.reservation-detail-body dl > div { margin-bottom:12px; }
.reservation-detail-body dt { font-size:11px; color:#738599; margin-bottom:5px; }
.reservation-detail-body dd { font-size:13px; margin:0; overflow-wrap:anywhere; }
.reservation-attendance,.contact-details label { display:flex; flex-direction:column; gap:8px; color:#52687f; font-size:12px; }
.reservation-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.contact-identity { display:flex; align-items:center; gap:12px; padding:20px 20px 12px; }
.contact-info { display:flex; flex-direction:column; gap:6px; padding:0 20px; font-size:13px; color:#6a7e91; overflow-wrap:anywhere; }
.contact-info a { color:var(--navy); display:inline-flex; align-items:center; min-height:44px; }
.contact-bookings { padding:0 20px; margin:16px 0 20px; font-size:12px; color:#61798e; }
.contact-details > div { padding:0 20px 20px; }
.contact-details .btn { margin-top:12px; }
.contact-card[hidden],#contact-search-empty[hidden] { display:none; }
.profile-signout { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.profile-signout .btn { width:100%; }
/* Keep dialog dismissal available while a long form is scrolled. */
.modal { padding:0; overscroll-behavior:contain; }
.modal > .top { position:sticky; top:0; z-index:4; background:#fff; padding:22px 28px; margin:0; border-bottom:1px solid var(--border); }
.modal > form { padding:24px 28px 28px; }
.day-dialog-heading { position:sticky; top:0; z-index:4; background:#fff; }
.calendar-day-dialog { overscroll-behavior:contain; }
@media(min-width:851px) and (max-width:1100px) {
  .reservation-grid,.contact-grid { grid-template-columns:1fr; }
}

/* Phone and tablet: thumb navigation, comfortable type, keyboard-safe sheets. */
@media(max-width:850px) {
  html { scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  :root { --dialog-visible-height:min(var(--visual-height,100dvh),100dvh); --dialog-visible-top:clamp(0px,var(--visual-top,0px),calc(100dvh - var(--dialog-visible-height))); }
  body { font-size:15px; }
  button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .sidebar { position:static; padding:16px 18px; border:0; border-bottom:1px solid var(--border); box-shadow:none; }
  .sidebar .brand { padding:0; }
  .brand-logo { width:136px; }
  .navs { position:fixed; z-index:40; inset:auto 0 0; display:flex; flex-direction:row; gap:0; overflow:visible; width:100%; padding:5px max(4px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); background:#fff; border-top:1px solid #dce5ee; box-shadow:0 -4px 24px #102b4b0c; }
  .nav,.nav.active { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 0; width:0; min-width:0; min-height:60px; gap:6px; padding:6px 1px; margin:0; border:0; border-radius:9px; font-size:11px; line-height:1.2; color:#6c7e91; background:none; box-shadow:none; }
  .nav > span { display:none; }
  .nav::after { content:attr(data-mobile-label); font-size:11px; letter-spacing:-.015em; }
  .nav svg { width:22px; height:22px; }
  .nav.active,.nav.active:hover { color:var(--navy); background:#edf3f8; box-shadow:inset 0 3px var(--orange); font-weight:750; }
  .keyboard-open .navs { visibility:hidden; }
  .main { padding:20px 18px calc(94px + env(safe-area-inset-bottom)); }
  .main > .top { display:flex; flex-wrap:nowrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:22px; }
  .main > .top > div:first-child { min-width:0; }
  #page-title { font-size:22px; overflow-wrap:anywhere; }
  .main > .top .muted,#account-name,#logout-button { display:none; }
  .account-bar { flex:0 0 auto; width:auto; flex-wrap:nowrap; gap:8px; }
  .btn,.account-bar .btn,.ticket-record-body .btn,.ticket-pagination .btn { min-height:44px; min-width:44px; font-size:13px; line-height:1.4; padding:11px 14px; justify-content:center; }
  #profile-button { padding:6px; width:44px; height:44px; }
  .profile-button > span:last-child { display:none; }
  .profile-button .vdp-avatar { width:30px; height:30px; }
  #app-shell input,#app-shell select,#app-shell textarea,#modal input,#modal select,#modal textarea,dialog input,dialog select,dialog textarea,#auth-screen input { font-size:16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { min-height:48px; max-width:100%; }
  input[type=file] { width:100%; padding:12px; }
  input[type=file]::file-selector-button { max-width:100%; padding:9px; white-space:normal; }
  .field label,.recipient-label label,.overview-filters > label,.reservation-attendance,.contact-details label { font-size:13px; line-height:1.5; }
  .field { margin-bottom:20px; }
  .text-link { min-height:44px; font-size:12px; white-space:normal; line-height:1.5; }
  .section-eyebrow { font-size:9px; line-height:1.5; }
  .section-title { font-size:23px; }
  .booking-overview-help { font-size:13px; }
  .footer { font-size:11px; line-height:1.8; margin-top:30px; }
  .vdp-hero { min-height:230px; padding:28px 22px; }
  .vdp-hero h1 { font-size:clamp(30px,7.5vw,44px); line-height:1.12; }
  .vdp-hero p { font-size:14px; max-width:360px; }
  .vdp-eyebrow { font-size:9px; }
  .hero-caption { font-size:8px; }
  .stat-card { padding:16px 12px; }
  .stat-card small { font-size:12px; }
  .vdp-section-heading h2 { font-size:21px; }
  .vdp-section-heading .text-link,.vdp-panel-heading .text-link { font-size:12px; gap:6px; }
  .vdp-panel-heading h2 { font-size:16px; }
  .vdp-club-meta { font-size:12px; }
  .vdp-club-details h3 { font-size:15px; }
  .vdp-new-card { min-height:64px; }
  .vdp-new-card strong { font-size:13px; }
  .vdp-club-card,.vdp-new-card { touch-action:manipulation; }
  .vdp-recent-item { min-height:78px; flex-wrap:wrap; gap:10px; }
  .vdp-recent-details strong { font-size:14px; }
  .vdp-recent-details small { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
  .vdp-status { font-size:11px; white-space:normal; }
  .connection-card .text-link { color:#fff; }
  .agenda-heading { flex-wrap:wrap; }
  .agenda-heading .section-eyebrow { font-size:9px; }
  .agenda-count { font-size:12px; }
  .calendar-toolbar,.calendar-compact .calendar-toolbar { flex-wrap:wrap; padding:16px 12px; gap:12px; }
  .calendar-toolbar > div:first-child { flex:1 1 100%; }
  .calendar-month,.calendar-compact .calendar-month { font-size:22px; }
  .calendar-controls,.calendar-compact .calendar-controls { width:100%; gap:8px; }
  .calendar-nav,.calendar-picker,.calendar-today,.calendar-compact .calendar-nav,.calendar-compact .calendar-picker,.calendar-compact .calendar-today { height:44px; min-height:44px; min-width:44px; }
  .calendar-nav,.calendar-picker,.calendar-compact .calendar-nav,.calendar-compact .calendar-picker { width:44px; }
  .calendar-today,.calendar-compact .calendar-today { margin-right:auto; font-size:13px; padding:0 14px; }
  .calendar-picker input { min-height:44px; }
  .calendar-weekdays span,.calendar-compact .calendar-weekdays span { font-size:10px; padding:12px 0; }
  .calendar-day,.calendar-compact .calendar-day { min-height:92px; padding:6px 3px; gap:8px; }
  .calendar-day-number,.calendar-compact .calendar-day-number { font-size:12px; width:24px; height:24px; }
  .calendar-guest .vdp-avatar,.calendar-compact .calendar-guest .vdp-avatar { width:26px; height:26px; }
  .calendar-guest-name,.calendar-compact .calendar-guest-name { font-size:9px; max-width:32px; }
  .calendar-guests,.calendar-compact .calendar-guests { gap:8px; }
  .calendar-guest-photo > b,.calendar-compact .calendar-guest-photo > b { min-width:13px; height:13px; font-size:8px; }
  .calendar-compact .calendar-fixture-label .club-badge { width:24px; height:27px; flex-basis:24px; }
  .calendar-footer,.calendar-compact .calendar-footer { padding:14px 12px; }
  .calendar-legend > span,.calendar-compact .calendar-legend > span { font-size:10px; }
  .calendar-hint { font-size:11px; line-height:1.6; }
  .vdp-overview-panel:has(.calendar-compact) { padding:0; }
  .vdp-overview-panel:has(.calendar-compact) > .vdp-panel-heading { padding:12px; }
  .calendar-day-dialog { width:calc(100% - 20px); max-height:calc(var(--dialog-visible-height) - 24px); }
  .day-dialog-heading { padding:16px; gap:10px; }
  .day-dialog-heading h2 { font-size:20px; }
  #calendar-day-dialog .day-dialog-heading { padding-left:60px; padding-right:60px; }
  #calendar-day-dialog .calendar-dialog-close { right:10px; }
  .calendar-dialog-close { width:44px; height:44px; flex-basis:44px; }
  .day-dialog-content { padding:0 16px; }
  .day-fixture { padding:20px 0; }
  .day-fixture h3 { font-size:20px; }
  .day-fixture p,.day-fixture-groups > span { font-size:13px; }
  .day-fixture .btn { width:100%; }
  .day-reservation strong { font-size:14px; }
  .day-reservation small { font-size:12px; }
  .day-reservations > .section-eyebrow { font-size:10px; }
  .modal-bg { padding:0; align-items:flex-end; top:var(--dialog-visible-top); bottom:auto; height:var(--dialog-visible-height); }
  .modal { width:100%; max-height:calc(var(--dialog-visible-height) - 8px); border-radius:18px 18px 0 0; border-bottom:0; }
  .modal > .top { padding:16px 18px; gap:12px; }
  .modal h2 { font-size:20px; }
  .modal > form { padding:22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .modal .top .btn { flex-shrink:0; }
  .ticket-stepper > button { width:48px; height:48px; }
  #modal #count { font-size:26px; min-height:0; }
  .ticket-stepper > div { font-size:14px; }
  .booking-help { font-size:12px; }
  .recipient-label .text-link { font-size:12px; padding-left:10px; }
  .recipient-popup { position:relative; top:auto; left:auto; right:auto; margin-top:10px; }
  #recipient-options { max-height:min(260px,35dvh); overscroll-behavior:contain; }
  .recipient-name { font-size:15px; }
  .recipient-meta { font-size:12px; white-space:normal; overflow-wrap:anywhere; }
  .recipient-option { min-height:62px; }
  .recipient-trigger > svg { flex-shrink:0; }
  .selected-contact strong { font-size:14px; }
  .selected-contact small { font-size:12px; }
  .new-contact-fields { padding:16px; }
  .new-contact-fields legend { font-size:14px; }
  .new-contact-fields > p,.booking-context p,.booking-confirmation { font-size:13px; }
  .booking-context strong { font-size:14px; }
  .booking-confirmation { min-height:44px; align-items:center; }
  .booking-confirmation input { width:22px; height:22px; flex-basis:22px; }
  #booking-form > button[type=submit] { width:100%; min-height:48px; }
  .profile-body { padding:20px 18px; }
  .profile-identity > span { font-size:14px; text-align:center; }
  .profile-privacy,.password-section p { font-size:13px; }
  .profile-actions .btn { flex:1 1 140px; }
  .reservation-grid,.contact-grid { grid-template-columns:1fr; gap:14px; }
  .overview-filters { gap:12px; }
  .overview-filters > label { flex-basis:100%; }
  .reservation-match { padding:16px; }
  .reservation-person { padding:16px; }
  .reservation-badges { padding:0 16px 16px; }
  .reservation-detail-body { padding:0 16px 16px; }
  .reservation-details > summary,.contact-details > summary { padding:14px 16px; font-size:14px; }
  .reservation-actions .btn { flex:1 1 140px; }
  .contact-details .btn { width:100%; }
  .contact-identity { padding:16px 16px 12px; }
  .contact-info,.contact-bookings { padding:0 16px; }
  .ticket-workspace-heading { flex-wrap:wrap; align-items:center; }
  .ticket-workspace-heading h2 { font-size:24px; }
  .ticket-workspace-heading p { font-size:13px; max-width:100%; }
  .ticket-workspace-heading .section-eyebrow { font-size:9px; }
  .ticket-add-button { width:100%; }
  .ticket-summary-card { min-height:82px; padding:16px 12px; }
  .ticket-summary-card b { font-size:12px; }
  .ticket-summary-card small { font-size:11px; }
  .ticket-tabs { gap:4px; }
  .ticket-tabs > button { flex:1; min-width:0; min-height:48px; font-size:13px; justify-content:center; gap:5px; }
  .ticket-tabs > button span { font-size:10px; }
  .ticket-filterbar > label,.ticket-filterbar > .ticket-match-filter { flex:1 1 100%; min-width:0; }
  .ticket-filterbar > label > span { font-size:12px; }
  .ticket-filterbar > .ticket-search { height:48px; min-width:0; flex-basis:100%; }
  .ticket-filterbar select { height:48px; }
  .ticket-filterbar > .text-link { height:44px; font-size:13px; }
  .ticket-create > summary { min-height:64px; }
  .ticket-create > summary > span:nth-child(2) { font-size:14px; }
  .ticket-create > summary small { font-size:12px; }
  .ticket-results-heading { flex-wrap:wrap; }
  .ticket-results-heading span { font-size:12px; }
  .ticket-record > summary { min-height:80px; }
  .ticket-record-title strong { font-size:15px; }
  .ticket-record-title small { font-size:12px; }
  .ticket-status { font-size:11px; white-space:normal; line-height:1.5; }
  .ticket-record-body.match { padding:16px; }
  .ticket-record-body > div:last-child { min-width:0; }
  .ticket-record-body p,.ticket-record-body small,.ticket-queue-note { font-size:13px; overflow-wrap:anywhere; }
  .ticket-pagination { flex-wrap:wrap; align-items:center; font-size:12px; }
  .ticket-pagination > div { flex-wrap:wrap; }
  .queue-record.match { flex-wrap:wrap; gap:14px; padding:16px; }
  .queue-record > div { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .ticket-empty p { font-size:14px; }
  .auth-screen { overflow:auto; align-items:stretch; }
  .auth-box { min-width:0; }
  .auth-box .btn { min-height:48px; font-size:15px; }
  .auth-box label { font-size:13px; }
  .auth-box input { min-height:48px; }
}
@media(max-width:580px) {
  .main { padding-left:12px; padding-right:12px; }
  #page-title { font-size:20px; }
  .account-bar > .btn:not(.alt) { padding:11px 10px; font-size:12px; }
  .vdp-club-card { grid-template-columns:88px minmax(0,1fr); }
  .vdp-club-info { padding:14px 10px; gap:9px; }
  .vdp-club-meta { font-size:11px; }
  .vdp-club-details h3 { font-size:14px; }
  .vdp-section-heading { flex-wrap:wrap; }
  .vdp-panel-heading { gap:6px; }
  .vdp-panel-heading h2 { font-size:15px; }
  .vdp-panel-heading .text-link { font-size:11px; }
  .auth-story { min-height:155px; padding:20px 24px; flex-shrink:0; }
  .auth-story h2 { font-size:24px; margin:18px 0 0; }
  .auth-brand { width:125px; }
  .auth-box { padding:26px 24px; width:100%; flex-shrink:0; }
  .auth-box h1 { font-size:27px; }
  .auth-box p { font-size:14px; }
  .auth-note { font-size:12px; }
}
@media(max-width:350px) {
  .main > .top { flex-wrap:wrap; }
  .main > .top > div:first-child { flex:1 1 100%; }
  .account-bar { width:100%; }
  .account-bar > .btn:not(.alt) { flex:1; }
  .calendar-legend { gap:7px; }
  .calendar-legend > span,.calendar-compact .calendar-legend > span { font-size:9px; }
  .ticket-tabs > button { font-size:12px; }
}
@media(max-width:850px) and (max-height:500px) {
  .nav,.nav.active { min-height:48px; gap:3px; }
  .nav svg { width:20px; height:20px; }
}
@media(max-width:850px) {
  .calendar-day-dialog[open] { position:fixed; top:calc(var(--dialog-visible-top) + var(--dialog-visible-height) / 2); bottom:auto; margin:0 auto; transform:translateY(-50%); }
  .modal input,.modal select,.modal textarea,.calendar-day-dialog input { scroll-margin-top:100px; scroll-margin-bottom:24px; }
}
/* Keep search close to the tickets; less-used filters expand on a phone. */
.ticket-filter-toggle { display:none; }
.ticket-filter-options { display:flex; flex:3 1 470px; align-items:flex-end; flex-wrap:wrap; gap:12px; min-width:0; }
.ticket-filter-options > label { display:flex; flex-direction:column; gap:7px; flex:1 1 120px; min-width:0; }
.ticket-filter-options > label > span { font-size:10px; font-weight:650; color:#718398; }
.ticket-filter-options > .ticket-match-filter { flex:1.6 1 180px; }
.ticket-filter-options > .text-link { height:39px; }
@media(max-width:850px) {
  .ticket-filterbar > .ticket-search { flex:1 1 140px; width:0; }
  .ticket-filter-toggle { display:inline-flex; align-items:center; gap:6px; }
  .ticket-filter-toggle[aria-expanded=true] > svg { transform:rotate(180deg); }
  #ticket-filter-count:not(:empty) { display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; background:#e8eff6; color:var(--navy); border-radius:5px; font-size:11px; }
  .ticket-filter-options { flex:1 1 100%; gap:12px; padding:16px; border:1px solid var(--border); border-radius:10px; background:#fff; }
  .ticket-filter-options[data-expanded=false] { display:none; }
  .ticket-filter-options > label { flex:1 1 40%; }
  .ticket-filter-options > label > span { font-size:12px; }
  .ticket-filter-options > .ticket-match-filter { flex:1 1 100%; order:1; }
  .ticket-filter-options > .text-link { order:2; height:44px; font-size:13px; }
  .ticket-workspace-heading { margin-top:12px; }
  .ticket-summary-grid { margin:18px 0; }
}
.profile-identity > strong { max-width:100%; overflow-wrap:anywhere; text-align:center; }
.selected-contact > div { min-width:0; }
.selected-contact strong { overflow-wrap:anywhere; }

/* Admin-only connection check; mailbox credentials stay on the server. */
.mailbox-connection { margin-top:28px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.mailbox-connection > summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:16px 20px; color:var(--navy); font-size:14px; font-weight:650; cursor:pointer; list-style:none; }
.mailbox-connection > summary::-webkit-details-marker { display:none; }
.mailbox-connection[open] > summary svg { transform:rotate(180deg); }
.mailbox-connection > div { padding:0 20px 20px; }
.mailbox-connection h3 { color:var(--navy); font-size:16px; margin:0 0 10px; }
.mailbox-connection p,.mailbox-connection li { font-size:13px; color:#61778d; line-height:1.7; overflow-wrap:anywhere; }
.mailbox-connection li { margin-bottom:14px; }
.mailbox-connection ul { padding-left:20px; }
@media(max-width:850px) {
  .mailbox-connection > summary { padding:16px; }
  .mailbox-connection > div { padding:0 16px 16px; }
  .mailbox-connection .btn { width:100%; }
}

.ticket-inspection { margin-top:12px; }
.ticket-inspection .booking-help { font-size:12px; }
#ticket-inspection-result { font-size:13px; color:#5b7289; line-height:1.7; overflow-wrap:anywhere; }
#ticket-inspection-result:empty { display:none; }
.ticket-detected { display:flex; flex-direction:column; gap:6px; padding:14px; margin-top:14px; border:1px solid #dce7ef; border-radius:8px; background:#f4f8fb; }
.ticket-detected strong { color:var(--navy); }
@media(max-width:850px) { .ticket-inspection > .btn { width:100%; } }

/* Club and competition filters apply to the agenda; the dashboard shows all. */
.agenda-filterbar { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:20px; }
.agenda-filterbar > label { display:flex; flex-direction:column; gap:8px; flex:1 1 200px; min-width:0; font-size:12px; font-weight:600; color:#61768b; }
.agenda-filterbar select { width:100%; }
.agenda-filterbar .text-link { min-height:44px; }
.agenda-sync-summary { margin-bottom:20px; padding:18px; border:1px solid var(--border); background:#fff; border-radius:10px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.agenda-sync-summary > p { margin:0 0 12px; }
.agenda-sync-summary > p:last-child { margin-bottom:0; }
.agenda-sync-summary summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:600; color:var(--navy); }
.agenda-sync-summary li { margin-bottom:8px; }
.agenda-source-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:12px 0; }
.agenda-source-list > div { padding:14px; background:#f4f7fa; border-radius:8px; }
.agenda-source-list strong,.agenda-source-list span,.agenda-source-list small { display:block; }
.agenda-source-list span { margin:6px 0; }
.agenda-source-list small { font-size:11px; color:#73879b; }
.calendar-competition { align-self:flex-start; display:inline-flex; font-size:9px; font-weight:700; color:#6541a1; background:#f0eafa; border-radius:4px; padding:3px 5px; }
.calendar-fixture.is-unavailable { opacity:.65; }
@media(max-width:850px) {
  .agenda-filterbar > label { flex-basis:100%; font-size:13px; }
  .agenda-source-list { grid-template-columns:1fr; }
  .agenda-heading > .btn { width:100%; }
  .agenda-sync-summary { padding:16px; }
}