/* Venue Hire's own styles. The club palette, type and top bar come from
   style.css, shared with Club Contacts and Team Sheets; everything here is the
   furniture this app needs on top - the venue strip, stat tiles, money columns
   and the bars that make a season's shape readable at a glance. */

.subnav {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.subnav a {
  padding: 10px 14px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); }
.subnav a.active { color: var(--primary); border-bottom-color: var(--gold); }

.impersonation-banner {
  background: #fff8e6;
  border-bottom: 1px solid #f0dfa8;
  padding: 8px 24px;
  font-size: 0.88rem;
  display: flex;
  gap: 12px;
  align-items: center;
}
.impersonation-banner form { margin: 0; }
.impersonation-banner button.link {
  background: none; border: none; padding: 0; font: inherit; color: var(--primary);
  cursor: pointer; text-decoration: underline;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head h1 { margin-bottom: 2px; }
.page-head .subtitle { margin: 0; }

.season-picker { display: flex; align-items: flex-end; gap: 8px; }
.season-picker select { margin-bottom: 0; min-width: 180px; }
.season-picker label { margin-bottom: 6px; }

/* The headline numbers. Four tiles read as one row on a laptop and wrap to two
   columns on a phone rather than shrinking to illegibility. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-attention { border-left-color: var(--gold); }
.stat-good { border-left-color: #2e7d4f; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }

/* Money and hours line up on the decimal point, which is the whole point of a
   costs table - a column you can scan for the big number. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.variance { color: var(--danger); font-weight: 600; }

/* A share-of-total bar drawn behind the figure, so the number stays readable
   and exact while the row still shows its size. */
.bar {
  display: inline-block;
  position: relative;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 70px;
  text-align: right;
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--share, 0%);
  background: rgba(156, 28, 23, 0.12);
  border-radius: 4px;
  z-index: 0;
}
.bar > * { position: relative; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #eef1f6;
  color: var(--muted);
  text-transform: capitalize;
}
.badge-confirmed, .badge-agreed, .badge-paid { background: #eaf7ee; color: #1f6b3e; }
.badge-requested, .badge-received, .badge-warn { background: #fff4d9; color: #8a5a00; }
.badge-declined, .badge-cancelled, .badge-queried { background: #fdecea; color: var(--danger); }
.badge-venue { background: #e8eefb; color: #274690; }
/* The EDJBA round, as its own tag beside the date. Not capitalised the way the
   statuses are: these are "Round 12", "SF", "GF", "NO GAME". */
.badge-round { background: #f0eef6; color: #4a4363; text-transform: none; font-weight: 500; }

/* Dense tables: a hairline above each new date groups a day's courts together
   without a heading row per date. */
.bookings-table tr.new-day td { border-top: 1px solid var(--border); }
.bookings-table tr.status-declined td, .bookings-table tr.status-cancelled td { opacity: 0.55; }
.bookings-table td { padding-top: 6px; padding-bottom: 6px; }

.row-actions a, .row-actions button.link { font-size: 0.85rem; margin-right: 8px; }
button.link {
  background: none; border: none; padding: 0; font: inherit; color: var(--primary);
  cursor: pointer; text-decoration: underline;
}
button.link.danger, .btn.danger { color: var(--danger); }
.btn.danger { background: transparent; border: 1px solid #f4c7c3; }
form.inline { display: inline; margin: 0; }

.filter-card { padding: 16px 20px; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }

label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 10px; }
label.check input { width: auto; margin: 0; }


.code-input { letter-spacing: 0.4em; font-size: 1.3rem; text-align: center; }

@media (max-width: 640px) {
  .page-head { flex-direction: column; }
  .season-picker { width: 100%; }
  .season-picker select { width: 100%; }
}

/* The read-only side of the Venues screen: what the app knows about a venue
   that isn't editable, laid out as label and value rather than as a data table. */
.venue-facts th {
  text-align: left;
  vertical-align: top;
  width: 110px;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 10px;
}
.venue-facts td { padding-top: 8px; }
.venue-facts tr:first-child th, .venue-facts tr:first-child td { padding-top: 0; }
.venue-facts .check { margin: 4px 0 8px; font-size: 0.9rem; }

.venue-contact { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 0 0 6px; }

/* style.css styles the input types Club Contacts uses - text, email, file and
   date. This app also uses time, number and tel, on the booking, rates, invoice
   and venue forms, which would otherwise fall back to the browser's own sizing
   and sit noticeably narrower than the fields beside them. */
input[type="time"],
input[type="number"],
input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 16px;
  background: var(--card);
  color: var(--text);
}

/* Narrower than a full-width field, and after the rule above so it wins: a bare
   class would lose to that rule's attribute selector. */
input.rate-input { width: 110px; margin-bottom: 0; text-align: right; }

/* "Back" goes to the page you came from, so it reads as a step in the trail
   rather than a fixed parent. Sits above the heading, out of the way. */
.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
}
.back-link:hover { color: var(--primary); text-decoration: underline; }

/* Switching between the flat list and the workbook-style calendar. */
.view-switch { display: flex; gap: 4px; align-items: center; margin-bottom: 16px; }
.view-switch a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.view-switch a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.view-switch .muted { font-size: 0.85rem; margin-left: 6px; }

/* The calendar: a venue's courts side by side, as the workbooks had them. Dense
   on purpose - a whole term should fit without scrolling past what matters. */
.grid-table { font-size: 0.85rem; }
.grid-table th, .grid-table td { padding: 4px 8px; }
.grid-table thead th { background: #eef1f6; }
.grid-table .court-head {
  text-align: center;
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  color: var(--primary);
}
.grid-table tbody tr.new-day td { border-top: 1px solid var(--border); }
.grid-table tfoot th { background: #eef1f6; border-top: 2px solid var(--border); }

/* Why a date reads the way it does, shaded the way the workbook shaded them. */
.day-holiday > td { background: #fff4d9; }
.day-blocked > td { background: #eceff3; }
.day-stood-down > td { background: #fdecea; }
.day-empty > td { background: #fbfbfc; }
.day-note td {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
  padding-top: 0;
  padding-bottom: 6px;
}
.struck { text-decoration: line-through; color: var(--muted); }
/* One court stood down on a date whose others went ahead. Shaded per cell, not
   per row, so it reads against its neighbours. */
.grid-table td.cell-stood-down { background: #fdecea; }
.grid-table td.cell-stood-down a { color: var(--danger); }

.grid-key { font-size: 0.8rem; color: var(--muted); margin: 12px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid-key .key { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; display: inline-block; margin-left: 10px; }
.grid-key .key:first-child { margin-left: 0; }
.key-holiday { background: #fff4d9; }
.key-blocked { background: #eceff3; }
.key-stood-down { background: #fdecea; }
.key-empty { background: #fbfbfc; }