/* MyPadelClub — shared design tokens + app shell
   Theme system: light = "Center Court", dark = "Night Match".
   Token NAMES are kept stable (--court=primary, --lime=accent, --sand=bg,
   --panel=surface) so existing markup keeps working; only their VALUES + the
   display/mono fonts swap per theme. Per-club white-label overrides --lime
   (accent) via [data-club]. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Jost:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- Center Court (light) = default ---------- */
:root, :root[data-theme="light"]{
  --ink:#0E2430;
  --court:#103A5C;        /* primary */
  --court-deep:#0A2A44;
  --lime:#1B6FA8;         /* accent (per-club override below) */
  --sand:#FAFAF8;         /* bg */
  --line:#E2E5DE;
  --panel:#FFFFFF;        /* surface */
  --panel-2:#F2F4F1;
  --text:#14222B;
  --text-dim:#566169;
  --good:#2f8f5b;
  --warn:#b9861f;
  --bad:#c5482f;
  --shadow:0 1px 0 rgba(14,36,48,.06);
  --font-display:'Jost';
  --font-body:'Inter';
  --font-mono:'IBM Plex Mono';
}

/* ---------- Night Match (dark) ---------- */
:root[data-theme="dark"]{
  --ink:#0A1420;
  --court:#2E9BD6;        /* primary */
  --court-deep:#8FCDEF;
  --lime:#CBF23D;         /* accent (per-club override below) */
  --sand:#0A1420;         /* bg */
  --line:#21384A;
  --panel:#12202F;        /* surface */
  --panel-2:#0E1A27;
  --text:#E7EEF5;
  --text-dim:#93A6B4;
  --good:#5fbf8c;
  --warn:#e0b551;
  --bad:#e5806a;
  --shadow:0 1px 0 rgba(0,0,0,.4);
  --font-display:'Rajdhani';
  --font-body:'Inter';
  --font-mono:'JetBrains Mono';
}

/* ---------- per-club white-label (accent override, both themes) ---------- */
/* Club accent = lime-green + black + white. Place AFTER the theme blocks
   so --lime wins regardless of light/dark. */
:root[data-club="demo"]{ --lime:#CFE034; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--sand);
  color:var(--text);
  font-family:var(--font-body),"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{background:var(--lime);color:var(--ink);}
a{color:inherit;text-decoration:none;}
button{font:inherit;}

.display{
  font-family:var(--font-display),"Century Gothic","Futura","Segoe UI",sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.mono{
  font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:var(--font-display),"Century Gothic","Futura","Segoe UI",sans-serif;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--court);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

/* ---------- app shell ---------- */
.shell{
  display:grid;
  grid-template-columns:236px 1fr;
  min-height:100vh;
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;}
}

.sidebar{
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:1.5rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar .wordmark{
  font-size:1.25rem;
  display:flex;
  align-items:baseline;
  gap:.04em;
  padding:0 .3rem;
}
.sidebar .wordmark .mp-my{color:var(--text-dim);font-weight:400;}
.sidebar .wordmark .mp-brand{color:var(--court);}

.club-switcher{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .7rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel-2);
  font-size:.84rem;
}
.club-switcher .avatar{
  width:1.8rem;height:1.8rem;border-radius:6px;
  background:var(--court);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.78rem;flex-shrink:0;
}
.club-switcher .meta{overflow:hidden;}
.club-switcher .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.club-switcher .tier{color:var(--text-dim);font-size:.74rem;}

nav.primary-nav{display:flex;flex-direction:column;gap:.2rem;}
nav.primary-nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:6px;
  font-size:.9rem;color:var(--text-dim);font-weight:500;
}
nav.primary-nav a:hover{background:var(--panel-2);color:var(--text);}
nav.primary-nav a.active{background:var(--court);color:#fff;}
nav.primary-nav a.sub{margin-left:1.1rem;font-size:.82rem;padding-top:.4rem;padding-bottom:.4rem;}
nav.primary-nav a .dot{
  width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0;
}

.sidebar-footer{margin-top:auto;font-size:.74rem;color:var(--text-dim);padding:0 .3rem;}
.sidebar-footer .theme-toggle{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:999px;padding:.4em .85em;font-size:.76rem;font-weight:600;
  cursor:pointer;margin-bottom:.7rem;
  transition:border-color .12s ease;
}
.sidebar-footer .theme-toggle:hover{border-color:var(--court);}
.sidebar-footer .pitch-link{
  display:block;margin-bottom:.7rem;color:var(--court);font-weight:600;font-size:.78rem;
}
.sidebar-footer .status-pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3em .6em;border:1px solid var(--line);border-radius:999px;margin-bottom:.6rem;
}
.sidebar-footer .status-pill .dot{width:.45em;height:.45em;border-radius:50%;background:var(--lime);}

.main{padding:2rem 2.5rem 4rem;max-width:1180px;}
@media (max-width:600px){ .main{padding:1.25rem 1.1rem 3rem;} }

.page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem 1.5rem;margin-bottom:2rem;
}
.page-head h1{font-size:clamp(1.4rem,2.6vw,1.75rem);margin:0 0 .3rem;}
.page-head p{margin:0;color:var(--text-dim);max-width:60ch;}

.btn{
  appearance:none;border:0;border-radius:5px;cursor:pointer;
  font-family:var(--font-display),"Century Gothic","Futura","Segoe UI",sans-serif;
  font-weight:700;font-size:.85rem;letter-spacing:.01em;
  padding:.65em 1.1em;
  transition:transform .08s ease;
}
@media (prefers-reduced-motion: reduce){ .btn{transition:none;} }
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--lime);color:var(--ink);}
.btn-secondary{background:var(--panel);color:var(--text);border:1px solid var(--line);}
.btn-ghost{background:transparent;color:var(--court);}
.btn-small{padding:.4em .8em;font-size:.76rem;}

/* ---------- cards / panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.panel-head h2{font-size:.95rem;margin:0;}
.panel-body{padding:1.1rem 1.25rem;}

/* ---------- stat tiles ---------- */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  margin-bottom:2rem;
}
.stat-tile{background:var(--panel);padding:1.1rem 1.25rem;}
.stat-tile .label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin-bottom:.5rem;}
.stat-tile .value{font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;font-size:1.5rem;font-weight:700;}
.stat-tile .delta{font-size:.78rem;margin-top:.3rem;}
.stat-tile .delta.up{color:var(--good);}
.stat-tile .delta.down{color:var(--bad);}
.stat-tile .delta.flat{color:var(--text-dim);}

/* ---------- pills / badges ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.25em .65em;border-radius:999px;font-size:.74rem;font-weight:600;
  white-space:nowrap;
}
.pill-open{background:color-mix(in srgb, var(--court) 16%, transparent);color:var(--court-deep);}
.pill-live{background:color-mix(in srgb, var(--lime) 30%, transparent);color:var(--ink);}
.pill-done{background:var(--panel-2);color:var(--text-dim);border:1px solid var(--line);}
.pill-pending{background:color-mix(in srgb, var(--warn) 20%, transparent);color:var(--warn);}
.pill-paid{background:color-mix(in srgb, var(--good) 18%, transparent);color:var(--good);}
.pill-unpaid{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);}
.nivel-badge{
  font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;font-size:.72rem;
  color:var(--court-deep);background:color-mix(in srgb, var(--court) 14%, transparent);
  padding:.15em .5em;border-radius:4px;
}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:520px;}
table.data-table th{
  text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);font-weight:700;padding:.5rem .7rem;border-bottom:1px solid var(--line);
}
table.data-table td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table td.num{font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;}

/* ---------- event cards ---------- */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2rem;}
.event-card{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.event-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;}
.event-card .tier{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.event-card h3{margin:0;font-size:1.02rem;}
.event-card .meta-row{font-size:.8rem;color:var(--text-dim);display:flex;gap:.9rem;flex-wrap:wrap;}
.event-card .fill-bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;margin-top:.2rem;}
.event-card .fill-bar > span{display:block;height:100%;background:var(--court);}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1.4rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.8rem;font-weight:600;color:var(--text);}
.field .help{font-size:.76rem;color:var(--text-dim);}
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field input[type="time"], .field select, .field textarea{
  border:1px solid var(--line);border-radius:5px;padding:.6em .7em;
  font:inherit;background:var(--panel);color:var(--text);
}
.field textarea{resize:vertical;min-height:4.5em;}
.chip-select{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip-select label{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.4em .8em;border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;cursor:pointer;background:var(--panel);
}
.chip-select input{accent-color:var(--court);}
.chip-select input:checked + span{font-weight:700;}
.tier-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;}
.tier-card{
  border:1px solid var(--line);border-radius:6px;padding:1rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.35rem;background:var(--panel);
}
.tier-card input{position:absolute;opacity:0;pointer-events:none;}
.tier-card.selected{border-color:var(--court);box-shadow:0 0 0 1px var(--court);}
.tier-card .tier-name{font-weight:700;}
.tier-card .tier-price{font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;color:var(--court-deep);font-size:.85rem;}
.tier-card .tier-desc{font-size:.78rem;color:var(--text-dim);}

.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;}
.slot{
  border:1px solid var(--line);border-radius:5px;padding:.6rem .7rem;cursor:pointer;font-size:.8rem;
  display:flex;flex-direction:column;gap:.2rem;background:var(--panel);
}
.slot .time{font-family:var(--font-mono),"SFMono-Regular",Consolas,Menlo,monospace;font-weight:700;}
.slot .rate{color:var(--text-dim);font-size:.74rem;}
.slot.suggested{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime);position:relative;}
.slot.suggested::after{
  content:"sugerido";position:absolute;top:-.55em;right:.5em;
  background:var(--lime);color:var(--ink);font-size:.62rem;font-weight:700;
  padding:.1em .4em;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;
}
.slot input{position:absolute;opacity:0;pointer-events:none;}
.slot.selected{background:color-mix(in srgb, var(--court) 12%, transparent);border-color:var(--court);}

/* ---------- request queue ---------- */
.request-row{
  display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px dashed var(--line);flex-wrap:wrap;
}
.request-row:last-child{border-bottom:none;}
.request-row .req-info{flex:1;min-width:220px;}
.request-row .req-type{font-weight:700;font-size:.86rem;}
.request-row .req-detail{font-size:.8rem;color:var(--text-dim);}
.request-actions{display:flex;gap:.5rem;}
.req-check{margin-top:.55rem;display:flex;flex-direction:column;gap:.28rem;font-size:.8rem;}
.req-check .chk{display:inline-flex;align-items:center;gap:.45em;}
.req-check .chk.ok{color:var(--good);}
.req-check .chk.bad{color:var(--bad);}
.req-check .chk-verdict{margin-top:.35rem;padding:.5em .75em;background:color-mix(in srgb,var(--lime) 16%,transparent);border-radius:5px;color:var(--text);}

/* ---------- misc ---------- */
.section-title{font-size:1rem;margin:0 0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--text);color:var(--panel);
  padding:.8em 1.1em;border-radius:6px;font-size:.85rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  display:flex;align-items:center;gap:.6em;
  transform:translateY(1rem);opacity:0;pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
  z-index:50;
}
.toast.show{transform:translateY(0);opacity:1;}
@media (prefers-reduced-motion: reduce){ .toast{transition:none;} }
.toast .dot{width:.5em;height:.5em;border-radius:50%;background:var(--lime);flex-shrink:0;}

.demo-banner{
  background:var(--panel-2);border:1px dashed var(--line);border-radius:6px;
  padding:.7rem 1rem;margin-bottom:1.75rem;font-size:.8rem;color:var(--text-dim);
  display:flex;align-items:center;gap:.6rem;
}
.demo-banner .dot{width:.5em;height:.5em;border-radius:50%;background:var(--lime);flex-shrink:0;}