/* ============================================================
   Badminton Venue Management — core stylesheet

   Design notes
   ------------
   Colour is taken from the courts themselves: PU court green, white
   boundary lines, and the tan of a shuttlecock cork. Cork amber is
   reserved for one job only — marking peak hours and pricing — so a
   glance at any screen tells staff where the expensive hours are.

   Type is Be Vietnam Pro, chosen because it was drawn for Vietnamese
   and keeps stacked diacritics readable at small UI sizes, which
   matters once this is translated. Figures use IBM Plex Mono with
   tabular spacing so money columns line up.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Court surface greens */
  --court:        #0F6B52;
  --court-deep:   #0A4A38;
  --court-mid:    #17886A;
  --court-tint:   #E3F0EB;
  --court-tint-2: #F2F8F6;

  /* Shuttlecock cork — peak hours and pricing only */
  --cork:         #B87A22;
  --cork-tint:    #FBF1DE;

  /* Ink */
  --ink:          #14201C;
  --ink-2:        #48584F;
  --ink-3:        #7B8C83;

  /* Surfaces */
  --paper:        #FFFFFF;
  --shell:        #F0F4F2;
  --line:         #DBE4E0;
  --line-strong:  #C3D1CB;

  /* Signals */
  --flag:         #B23A32;
  --flag-tint:    #FBE9E7;
  --go:           #1F7A4D;
  --go-tint:      #E4F3EA;

  /* Rhythm */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;

  --shadow-1: 0 1px 2px rgba(20, 32, 28, .07);
  --shadow-2: 0 4px 16px rgba(20, 32, 28, .10);
  --shadow-3: 0 12px 40px rgba(20, 32, 28, .16);

  --sidebar-w: 232px;
  --topbar-h:  56px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--court); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Figures always tabular so columns align */
.num, td.num, .money, .stat-value, .cell-time {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--court-mid);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Layout
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--court-deep);
  color: #DCEAE4;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.brand-mark {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--court-deep);
  font-weight: 800;
  font-size: 13px;
}

.brand-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--paper);
  line-height: 1.2;
}
.brand-sub {
  font-size: 11px;
  color: rgba(220, 234, 228, .62);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav { padding: 12px 10px; flex: 1; }

.nav-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(220, 234, 228, .45);
  padding: 14px 10px 6px;
}
.nav-group:first-child { padding-top: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  color: #C9DED6;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 1px;
}
.nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--paper);
  text-decoration: none;
}
.nav-item.is-active {
  background: var(--court);
  color: var(--paper);
  font-weight: 600;
}
.nav-icon { width: 17px; flex: 0 0 17px; opacity: .85; }
.nav-item.is-active .nav-icon { opacity: 1; }

.nav-foot {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.nav-user { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px; }
.nav-user-avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  background: var(--court-mid);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.nav-user-name { font-size: 13px; color: var(--paper); font-weight: 600; line-height: 1.2; }
.nav-user-role { font-size: 11px; color: rgba(220, 234, 228, .60); }

.nav-signout {
  display: block;
  text-align: center;
  padding: 7px;
  border-radius: var(--r);
  font-size: 12.5px;
  font-weight: 600;
  color: #C9DED6;
  border: 1px solid rgba(255, 255, 255, .16);
}
.nav-signout:hover { background: rgba(255, 255, 255, .08); color: var(--paper); text-decoration: none; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.page-head-text { min-width: 0; }
.page-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.page-body { padding: 24px; flex: 1; }
.page-body > * + * { margin-top: 20px; }

.menu-toggle { display: none; }

/* ============================================================
   Components
   ============================================================ */

/* ---------- Card ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

/* ---------- Stat tiles ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-value {
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-foot { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.stat.accent { border-left: 3px solid var(--court); }
.stat.accent-cork { border-left: 3px solid var(--cork); }
.stat.accent-flag { border-left: 3px solid var(--flag); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  min-height: 38px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--court-tint-2); border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--court); border-color: var(--court); color: var(--paper); }
.btn-primary:hover { background: var(--court-mid); border-color: var(--court-mid); }

.btn-danger { background: var(--paper); border-color: var(--flag); color: var(--flag); }
.btn-danger:hover { background: var(--flag-tint); }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--court-tint); }

.btn-sm { padding: 5px 10px; min-height: 30px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

.label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.label .req { color: var(--flag); }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 11px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--court);
  box-shadow: 0 0 0 3px var(--court-tint);
}
.textarea { min-height: 76px; resize: vertical; }
.input.is-money { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

.hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.field-error { font-size: 12.5px; color: var(--flag); margin-top: 5px; font-weight: 500; }
.input.has-error { border-color: var(--flag); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--court-tint-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:hover td { background: var(--court-tint-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .right, .table th.right { text-align: right; }
.table .center, .table th.center { text-align: center; }
.table tfoot td {
  font-weight: 700;
  background: var(--court-tint-2);
  border-top: 2px solid var(--line-strong);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-court    { background: var(--court-tint); color: var(--court-deep); }
.badge-cork     { background: var(--cork-tint);  color: var(--cork); }
.badge-flag     { background: var(--flag-tint);  color: var(--flag); }
.badge-go       { background: var(--go-tint);    color: var(--go); }
.badge-quiet    { background: var(--shell);      color: var(--ink-3); }

/* Skill level chips, 1 (Yếu) to 5 (Khá) */
.skill { border-radius: var(--r-sm); padding: 2px 7px; font-size: 11.5px; font-weight: 600; }
.skill-1 { background: #EEF1F0; color: #62716B; }
.skill-2 { background: #E2EFEA; color: #3C7C66; }
.skill-3 { background: var(--court-tint); color: var(--court-deep); }
.skill-4 { background: #CDE6DC; color: var(--court-deep); }
.skill-5 { background: var(--court); color: var(--paper); }

/* ---------- Alerts ---------- */
.alert {
  padding: 11px 15px;
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.alert + .alert { margin-top: 8px; }
.alert-error   { background: var(--flag-tint);  color: #8C2C25; border-color: #F0C9C5; }
.alert-success { background: var(--go-tint);    color: #145C39; border-color: #BFE0CD; }
.alert-warn    { background: var(--cork-tint);  color: #8A5B14; border-color: #EBD6AC; }
.alert-info    { background: var(--court-tint); color: var(--court-deep); border-color: #BFDCD1; }

.flash-stack {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 300;
  max-width: 380px;
  width: calc(100% - 28px);
}
.flash-stack .alert { box-shadow: var(--shadow-2); background-color: var(--paper); }

/* ---------- Empty state ---------- */
.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-3);
}
.empty-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.empty-text { font-size: 13.5px; margin-bottom: 16px; }

/* ============================================================
   Sign-in page
   ============================================================ */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 12%, rgba(23, 136, 106, .16), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(184, 122, 34, .10), transparent 46%),
    var(--court-deep);
}

/* The court-line motif: a badminton court drawn in white rules behind the card */
.auth-court {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .13;
  padding: 3vh 0;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 390px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 34px 30px 30px;
}
.auth-mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--court);
  color: var(--paper);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  margin-bottom: 18px;
}
.auth-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.auth-sub { font-size: 13.5px; color: var(--ink-3); margin: 5px 0 22px; }
.auth-foot { margin-top: 20px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ============================================================
   Utilities
   ============================================================ */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.strong { font-weight: 700; }
.small { font-size: 12.5px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.hidden { display: none !important; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

/* ============================================================
   Responsive — the front desk often runs this on a tablet
   ============================================================ */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-3);
  }
  .sidebar.is-open { transform: translateX(0); }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--paper);
    cursor: pointer;
  }

  .scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 32, 26, .45);
    z-index: 150;
  }

  .page-head { padding: 12px 16px; }
  .page-body { padding: 16px; }
  h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .sidebar, .page-actions, .menu-toggle, .flash-stack { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
  .page-body { padding: 0; }
}

/* ============================================================
   Stage 2 — tabs, modals, rate table, day picker, calendar
   ============================================================ */

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: -4px;
}
.tab {
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--court); border-bottom-color: var(--court); }

/* ---------- Card footer bar ---------- */
.card-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Rate matrix ---------- */
.rate-table th.band-peak,
.rate-table td.band-peak { background: var(--cork-tint); }
.rate-table th.band-peak { color: var(--cork); }
.rate-table .th-band { font-weight: 500; opacity: .8; }
.rate-row-head {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  background: var(--paper);
  white-space: nowrap;
}
.rate-table td { padding: 8px 10px; }
.rate-table .input { min-height: 36px; }

/* ---------- Peak window rows ---------- */
.peak-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  flex-wrap: wrap;
}
.peak-row:last-child { border-bottom: none; }
.peak-row .select { width: auto; min-width: 120px; }
.peak-row input[type="time"] { width: auto; min-width: 116px; }
.peak-row input[type="text"] { flex: 1; min-width: 130px; }

/* ---------- Day picker chips ---------- */
.day-picker { display: flex; gap: 7px; flex-wrap: wrap; }
.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  background: var(--paper);
}
.day-chip:hover { background: var(--court-tint-2); }
.day-chip input { accent-color: var(--court); width: 15px; height: 15px; margin: 0; }
.day-chip:has(input:checked) {
  background: var(--court-tint);
  border-color: var(--court);
  color: var(--court-deep);
}

/* ---------- Modal ---------- */
.modal { display: none; }
.modal.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
}
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 32, 26, .52);
}
.modal-card {
  position: relative;
  margin: 5vh auto;
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90vh;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
}
.modal-wide { max-width: 780px; }
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-head h2 { font-size: 16px; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Live price preview ---------- */
.price-box {
  background: var(--court-tint-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--court);
  border-radius: var(--r);
  padding: 13px 15px;
  margin: 4px 0 16px;
}
.price-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.price-total {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--court-deep);
}
.price-detail { margin-top: 5px; }

/* ---------- Legend ---------- */
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line-strong); }
.legend-offpeak { background: var(--paper); }
.legend-peak    { background: var(--cork-tint); border-color: #E8D3A6; }
.legend-booked  { background: var(--court); border-color: var(--court); }

/* ============================================================
   The court calendar
   ------------------------------------------------------------
   Booking blocks are drawn in court green with white boundary
   lines, and peak rows carry a cork tint straight through the
   grid, so the expensive hours read at a glance.
   ============================================================ */
.cal-wrap { overflow: auto; max-height: calc(100vh - 250px); }

.cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.cal thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--court-deep);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.cal thead th:last-child { border-right: none; }

.cal-time-head { width: 68px; min-width: 68px; }
.cal-court-head { min-width: 116px; }

.cal-time {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 68px;
  min-width: 68px;
  background: var(--paper);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: right;
  padding: 0 9px;
  height: 30px;
  vertical-align: middle;
}
.cal-time.is-peak { background: var(--cork-tint); color: var(--cork); font-weight: 600; }
.cal-time-half { opacity: .5; font-size: 10.5px; }

.cal-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  height: 30px;
  vertical-align: top;
  background: var(--paper);
}
.cal-cell.is-peak { background: var(--cork-tint); }
.cal tbody tr.row-hour .cal-cell,
.cal tbody tr.row-hour .cal-time { border-top: 1px solid var(--line-strong); }

/* Empty slot: a quiet target that only shows its + on hover */
.cal-free {
  width: 100%;
  height: 100%;
  min-height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background .1s ease, color .1s ease;
}
.cal-free:hover { background: var(--court-tint); color: var(--court); }
.cal-free:focus-visible { color: var(--court); background: var(--court-tint); outline-offset: -2px; }

/* A booking, drawn like a piece of court */
.cal-cell.has-booking { padding: 2px; background: var(--paper); }

.bk {
  width: 100%;
  height: 100%;
  min-height: 26px;
  border: none;
  border-left: 3px solid rgba(255,255,255,.55);
  border-radius: var(--r-sm);
  background: var(--court);
  color: var(--paper);
  cursor: pointer;
  text-align: left;
  padding: 4px 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  font-family: inherit;
  transition: filter .12s ease;
}
.bk:hover { filter: brightness(1.12); }

.bk-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-time, .bk-money {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  opacity: .88;
  line-height: 1.3;
}
.bk-paid {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.24);
  padding: 1px 6px;
  border-radius: 100px;
}

.bk-playing   { background: var(--court-mid); }
.bk-completed { background: #5C7A6E; }
.bk-no_show   { background: var(--flag); }

/* Switched-off customer rows */
tr.is-off td { opacity: .55; }

@media (max-width: 900px) {
  .cal-wrap { max-height: calc(100vh - 210px); }
  .cal-court-head { min-width: 96px; }
  .modal-card { margin: 2vh auto; max-height: 96vh; }
  .price-total { font-size: 19px; }
}

/* ============================================================
   Stage 3 — sales lines, stock signals, category bars
   ============================================================ */

/* ---------- Sale line items ---------- */
.sale-line {
  display: grid;
  grid-template-columns: 1fr 88px 110px 36px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.sale-line:last-of-type { border-bottom: none; }
.sale-line .qty-input {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.sale-line .line-total {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
/* Asking for more than is on the shelf */
.sale-line.over-stock .qty-input {
  border-color: var(--flag);
  background: var(--flag-tint);
}
.sale-line.over-stock .line-total { color: var(--flag); }

/* ---------- Stock movement direction ---------- */
.qty-in  { color: var(--go); font-weight: 600; }
.qty-out { color: var(--flag); font-weight: 600; }

/* ---------- Category breakdown bars ---------- */
.bar-row { margin-bottom: 15px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-track {
  height: 7px;
  background: var(--shell);
  border-radius: 100px;
  overflow: hidden;
  margin: 5px 0 3px;
}
.bar-fill {
  height: 100%;
  background: var(--court);
  border-radius: 100px;
  min-width: 2px;
}

@media (max-width: 600px) {
  .sale-line {
    grid-template-columns: 1fr 70px 36px;
    grid-template-areas:
      "product product product"
      "qty total remove";
  }
  .sale-line select { grid-area: product; }
  .sale-line .qty-input { grid-area: qty; }
  .sale-line .line-total { grid-area: total; }
  .sale-line .remove-line { grid-area: remove; }
}

/* ============================================================
   Stage 4 — charts and report tables
   ============================================================ */
.chart-box { position: relative; height: 300px; }
.chart-sm  { height: 250px; }

.util-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.util-cell .bar-track { display: inline-block; height: 6px; flex: 0 0 60px; }

/* ============================================================
   Stage 5 — players and match arrangement
   ============================================================ */

/* ---------- Level summary strip ---------- */
.level-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.level-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--court-tint-2);
}
.level-count { font-size: 19px; font-weight: 600; color: var(--ink); }

/* ---------- Skill radio picker ---------- */
.skill-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-option { cursor: pointer; display: inline-flex; }
.skill-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.skill-option .skill {
  border: 2px solid transparent;
  padding: 6px 12px;
  font-size: 12.5px;
}
.skill-option input:checked + .skill {
  border-color: var(--court-deep);
  box-shadow: 0 0 0 3px var(--court-tint);
}
.skill-option input:focus-visible + .skill { outline: 2px solid var(--court-mid); outline-offset: 2px; }

/* ---------- Court cards ---------- */
.court-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
}
.court-card { display: flex; flex-direction: column; }

.match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* The two sides of a match, laid out like the two halves of a court */
.match-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.team {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
  background: var(--court-tint-2);
  position: relative;
}
.team-won {
  border-color: var(--court);
  background: var(--court-tint);
  box-shadow: inset 0 0 0 1px var(--court);
}
.team-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.team-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 5px;
}
.team-skill {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
}

/* The net between the two sides */
.match-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  padding: 0 2px;
}
.match-vs::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 3px,
    transparent 3px 6px
  );
}

/* ---------- Compact standings table ---------- */
.table-compact th { padding: 7px 12px; font-size: 10.5px; }
.table-compact td { padding: 7px 12px; font-size: 13px; }
.table-compact tr.is-playing td { background: var(--court-tint); }
.table-compact tr.is-playing td:first-child { box-shadow: inset 3px 0 0 var(--court); }

.select-tiny {
  width: auto;
  min-width: 56px;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 12px;
}

/* ---------- Add player rows ---------- */
.add-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.add-player-row:last-child { border-bottom: none; }

@media (max-width: 700px) {
  .court-grid { grid-template-columns: 1fr; }
  .match-board { grid-template-columns: 1fr; }
  .match-vs { padding: 4px 0; }
  .match-vs::before {
    top: 50%; left: 8px; right: 8px; bottom: auto;
    width: auto; height: 1px;
    background: repeating-linear-gradient(to right, var(--line-strong) 0 3px, transparent 3px 6px);
  }
  .chart-box { height: 240px; }
}

@media print {
  .court-grid { grid-template-columns: 1fr 1fr; }
  .chart-box { height: 220px; }
}

/* ============================================================
   Stage 7 — password visibility, auth links
   ============================================================ */
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 42px; }

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.password-toggle:hover { color: var(--court); background: var(--court-tint); }
.password-toggle:focus-visible { outline: 2px solid var(--court-mid); outline-offset: -2px; }

.auth-alt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.auth-alt a { font-weight: 600; margin-left: 4px; }