:root{
  --navy:#10263d;
  --green:#0b8f49;
  --green-dark:#086d38;
  --blue:#1557d6;
  --orange:#ef8d18;
  --red:#e03a3e;
  --purple:#7857d8;
  --text:#172033;
  --muted:#687386;
  --line:#dfe4ea;
  --bg:#f6f8fb;
  --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--blue);text-decoration:none}
button,input,select,textarea{font:inherit}
button,.button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
.center{text-align:center}
.app-shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}
.sidebar{background:var(--navy);color:#fff;padding:26px 18px;min-height:100vh}
.brand{font-size:26px;font-weight:800;letter-spacing:.02em}
.brand span{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;margin-top:3px}
.sidebar nav{display:grid;gap:8px;margin-top:30px}
.sidebar nav a{color:#e9f0f7;padding:12px 14px;border-radius:8px}
.sidebar nav a:hover,.sidebar nav a.active{background:var(--green)}
.side-summary{margin-top:36px;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px}
.side-summary h3{font-size:13px;text-transform:uppercase}
.side-summary div{display:flex;justify-content:space-between;padding:7px 0;font-size:13px}
.content{padding:34px;max-width:1050px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.primary{border:0;background:var(--green);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700}
.primary:hover{background:var(--green-dark)}
.secondary{background:#fff;border:1px solid var(--line);color:var(--text)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:8px}
.toolbar{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap}
.toolbar select{padding:10px 34px 10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.filters{display:flex;gap:4px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:4px;overflow:auto}
.filters a{padding:9px 14px;border-radius:6px;color:var(--text);white-space:nowrap;font-size:14px}
.filters a.selected{background:#eef4ff;color:var(--blue);font-weight:700}
.month-block{margin-bottom:26px}
.month-block h2{font-size:15px;color:var(--green);letter-spacing:.04em}
.race-list{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.race-row{display:grid;grid-template-columns:76px 1fr auto 22px;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--text)}
.race-row:last-child{border-bottom:0}
.race-row:hover{background:#fbfcfe}
.date-tile{border-right:1px solid var(--line);padding-right:14px;text-align:center}
.date-tile span,.date-tile small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}
.date-tile strong{font-size:26px;display:block}
.race-main strong{display:block;color:var(--blue);margin-bottom:5px}
.race-main small{color:var(--muted)}
.race-meta{display:grid;gap:8px;text-align:right;font-size:13px}
.status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px}
.status-completed{background:#dff5e7;color:#08783c}
.status-registered{background:#fff0da;color:#c66a00}
.status-considering{background:#eee9ff;color:#6541c7}
.status-skipped{background:#ffe6e6;color:#c72c31}
.chevron{font-size:28px;color:#8993a2}
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:20px;margin-top:24px}
.skipped-item{display:grid;grid-template-columns:1fr auto;gap:5px 20px;border-top:1px solid var(--line);padding:12px 0}
.skipped-item p{grid-column:1/-1;margin:0;color:var(--muted)}
.empty-state{background:#fff;border:1px dashed #cbd3dc;padding:44px;text-align:center;border-radius:12px}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px}
.stack{display:grid;gap:16px}
label{display:grid;gap:7px;font-weight:700;font-size:14px}
label small,fieldset small{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;border:1px solid #ccd4dd;border-radius:8px;padding:11px 12px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(21,87,214,.12);border-color:var(--blue)}
.alert{background:#fff0f0;border:1px solid #f2c5c6;color:#a92b2e;padding:12px;border-radius:8px;margin-bottom:18px}
.form-page{width:min(780px,calc(100% - 30px));margin:30px auto 60px}
.form-header{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.form-header h1{margin:0}
.race-form{display:grid;gap:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:16px}
legend{font-weight:700;padding:0 6px}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 16px}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{width:auto}
.form-actions{display:flex;justify-content:flex-end;gap:10px}
.delete-form{text-align:center;margin-top:15px}
.danger-link{border:0;background:transparent;color:var(--red);font-weight:700}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:20px;text-align:center}
.stat-card strong{display:block;font-size:28px;color:var(--green);margin-bottom:5px}
.stat-card span{font-size:13px;color:var(--muted)}
.bar-row{display:grid;grid-template-columns:42px 1fr 60px;gap:12px;align-items:center;margin:12px 0}
.bar-track{height:12px;background:#edf0f4;border-radius:999px;overflow:hidden}
.bar{height:100%;background:var(--green);border-radius:999px}
.admin-page{padding:32px;max-width:1250px;margin:auto}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;min-width:760px}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:14px}
th{background:#f8fafc}
@media(max-width:800px){
  .app-shell{display:block}
  .sidebar{min-height:auto;padding:14px 16px;position:sticky;top:0;z-index:10}
  .sidebar .brand{font-size:20px}
  .sidebar nav{margin-top:12px;display:flex;overflow:auto;gap:6px}
  .sidebar nav a{white-space:nowrap;padding:9px 11px;font-size:13px}
  .side-summary{display:none}
  .content{padding:20px 14px 90px}
  .topbar{align-items:flex-start}
  .topbar h1{font-size:25px}
  .toolbar{align-items:stretch}
  .filters{width:100%}
  .race-row{grid-template-columns:58px 1fr 20px;padding:13px 12px;gap:10px}
  .race-meta{grid-column:2;grid-row:2;text-align:left;display:flex;align-items:center;gap:10px}
  .chevron{grid-column:3;grid-row:1/3}
  .date-tile strong{font-size:22px}
  .form-grid,.category-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-page{width:min(100% - 20px,780px);margin-top:16px}
}

.auth-brand{color:var(--navy);margin-bottom:18px}.member-note{background:#eef8f2;border:1px solid #cce7d6;color:#285a3c;padding:12px 14px;border-radius:8px;margin:14px 0 18px}.full-button{width:100%;margin-top:12px}

.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.master-list{margin-top:18px;border-top:1px solid var(--line)}
.master-item{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.master-item strong{display:block;margin-bottom:5px}
.master-item small{display:block;margin-top:5px;color:var(--muted)}
.already-added{font-size:12px;background:#dff5e7;color:#08783c;padding:6px 9px;border-radius:999px;white-space:nowrap}
.create-new-card{text-align:center}
@media(max-width:650px){
  .search-row{grid-template-columns:1fr}
  .master-item{align-items:flex-start;flex-direction:column}
}

.confirm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.confirm-grid div{border:1px solid var(--line);border-radius:8px;padding:12px}
.confirm-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.warning-card{border-color:#e9c46a}
@media(max-width:650px){.confirm-grid{grid-template-columns:1fr}}

.top-actions{display:flex;gap:10px;align-items:center}
.export-menu{display:flex;gap:6px}
@media(max-width:650px){
  .top-actions{width:100%;flex-wrap:wrap}
  .export-menu{flex:1}
  .export-menu .button{flex:1}
}


/* Permanent client-side status filters */
.filters button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.filters button.selected {
  background: #eef3ff;
  color: #285bc7;
  font-weight: 700;
}

.race-row[hidden],
.month-block[hidden],
.filtered-empty-state[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  /*
   * MOBILE ONLY
   * - Compact navy identity header
   * - Excel/PDF move into navy header
   * - Duplicate content title is removed
   * - Year + Add Race + filters are one sticky toolbar
   */

  .sidebar {
    position: static;
    top: auto;
    padding-bottom: 12px;
  }

  .sidebar nav .nav-add-race {
    display: none;
  }

  .mobile-brand-line {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: .01em;
  }

  .mobile-account-email {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .sidebar nav {
    margin-top: 14px;
  }

  .mobile-header-exports {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }

  .mobile-header-exports .button {
    flex: 1;
    min-height: 38px;
    padding: 8px 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
  }

  .calendar-topbar {
    display: none;
  }

  .mobile-add-race {
    display: inline-flex;
  }

  .calendar-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
    margin: 0 -14px 16px;
    padding: 8px 14px 9px;
    background: var(--bg);
    border-bottom: 1px solid rgba(16,38,61,.08);
    box-shadow: 0 6px 14px rgba(16,38,61,.08);
    overflow: visible;
  }

  .calendar-toolbar .year-form {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .calendar-toolbar .year-form select {
    width: auto;
    min-width: 108px;
    height: 44px;
    padding: 9px 32px 9px 12px;
    border: 1px solid #aeb9c7;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(16,38,61,.06);
  }

  .calendar-toolbar .mobile-add-race {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 128px;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  .calendar-toolbar .toolbar-status-filters {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .toolbar-status-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 5px;
    overflow: visible;
    background: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 10px;
  }

  .toolbar-status-filters button {
    min-width: 0;
    padding: 9px 2px;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.05;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    border-radius: 8px;
  }

  .toolbar-status-filters button.selected {
    background: var(--green);
    color: #fff;
    font-weight: 700;
  }

  .month-block {
    margin-bottom: 22px;
  }
}


/* Mobile-only helpers hidden on desktop. */
.mobile-account-email,
.mobile-header-exports,
.mobile-add-race {
  display: none;
}

@media (max-width: 700px) {
  .mobile-account-email,
  .mobile-header-exports {
    display: flex;
  }

  .mobile-account-email {
    display: block;
  }

  .mobile-add-race {
    display: inline-flex;
  }
}