:root {
  --red: #c62828;
  --red-dark: #8b1a1a;
  --sea: #121d30;
  --muted: #5c6b7a;
  --bg: #f6f4f1;
  --card: #fff;
  --radius: 12px;
  --font: system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--sea);
  line-height: 1.5;
}

.wrap { max-width: 520px; margin: 0 auto; padding: 0 1.25rem; }

.top-link { color: inherit; text-decoration: none; opacity: .85; }
.top-link:hover { text-decoration: underline; opacity: 1; }

.top {
  background: linear-gradient(135deg, var(--sea), #1e3354);
  color: #fff;
  padding: 2rem 0 1.75rem;
}

.eyebrow {
  margin: 0 0 .35rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

h1 { margin: 0 0 .5rem; font-size: 1.75rem; font-weight: 700; }
h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.lead { margin: 0; opacity: .9; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0;
  box-shadow: 0 2px 12px rgba(18, 29, 48, .08);
}

.hidden { display: none; }

label {
  display: block;
  margin-bottom: .85rem;
  font-size: .9rem;
  font-weight: 600;
}

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .65rem .75rem;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font: inherit;
}

.hint { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
}

.slot {
  border: 1px solid #cfd8e3;
  background: #fff;
  border-radius: 8px;
  padding: .75rem .4rem;
  min-height: 48px;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.slot:hover { border-color: var(--red); }
.slot[aria-selected="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.slot small { display: block; font-size: .7rem; opacity: .75; }

.btn {
  display: inline-block;
  width: 100%;
  margin-top: .5rem;
  padding: .8rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn:hover { background: var(--red-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

.selected { font-size: .9rem; color: var(--muted); }

.success { border-left: 4px solid var(--red); }

.status-pill {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lead-done { margin: 0 0 1rem; color: var(--muted); }

.confirm-card {
  margin: 0 0 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e2e8f0;
}

.confirm-card div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .35rem .75rem;
  padding: .35rem 0;
  border-bottom: 1px solid #edf2f7;
}

.confirm-card div:last-child { border-bottom: none; }

.confirm-card dt {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}

.confirm-card dd { margin: 0; font-weight: 500; }

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-bar h2 { margin: 0; }

.btn-sm {
  width: auto;
  padding: .45rem .85rem;
  font-size: .85rem;
}

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

.bookings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.bookings-table th,
.bookings-table td {
  padding: .55rem .45rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.bookings-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.bookings-table code {
  font-size: .8rem;
  background: #f1f5f9;
  padding: .1rem .35rem;
  border-radius: 4px;
}

.footer-note {
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  padding: 1rem 0 2rem;
}

.text-link { color: var(--red); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.admin-login-page .login-card { margin-top: 1.25rem; }
.login-hint { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }


/* Staff dashboard */
.page-admin .wrap { max-width: 800px; }

.admin-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-top h1 { font-size: 1.45rem; }

.btn-logout {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.btn-logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.admin-main { padding-bottom: 2rem; }

/* —— Capacity panel —— */
.occupancy {
  margin-top: 1rem;
  background: linear-gradient(180deg, #fff 0%, #faf9f7 100%);
  border: 1px solid #e6e9ef;
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 4px 20px rgba(18, 29, 48, .06);
}

.occupancy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.occupancy-title h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
}

.occupancy-summary {
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
}

.occupancy-cap {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f1f5f9;
  padding: .35rem .55rem;
  border-radius: 6px;
}

.day-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.day-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: #eef2f6;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.day-tab:hover { color: var(--sea); background: #e4eaf1; }

.day-tab.active {
  color: #fff;
  background: var(--sea);
  border-color: var(--sea);
}

.day-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .22);
  color: inherit;
}

.day-tab:not(.active) .day-tab-count {
  background: #dce4ec;
  color: var(--sea);
}

.slot-heatmap {
  list-style: none;
  margin: 0 0 .65rem;
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: .4rem;
  background: #f7f9fb;
  border-radius: 10px;
  border: 1px solid #e8ecf1;
}

.slot-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 58px;
  padding: .4rem .3rem .35rem;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: default;
  transition: border-color .15s, box-shadow .15s;
}

.slot-chip-has-covers {
  box-shadow: 0 1px 0 rgba(18, 29, 48, .04);
}

.slot-chip-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e8edf2;
  margin-bottom: .4rem;
  overflow: hidden;
}

.slot-chip-track span {
  display: block;
  height: 100%;
  width: calc(var(--fill, 0) * 1%);
  border-radius: 999px;
  background: currentColor;
  transition: width .25s ease;
}

.slot-chip-time {
  font-size: .68rem;
  font-weight: 800;
  color: var(--sea);
  line-height: 1.1;
}

.slot-chip-guests {
  margin-top: .2rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}

.slot-chip-quiet { opacity: .78; }
.slot-chip-quiet .slot-chip-guests { color: #9aa8b5; }
.slot-chip-past { opacity: .5; }

.slot-empty { color: #b8c5d1; border-color: #e8ecf1; background: #fbfcfd; }
.slot-low { color: #4f9b57; border-color: #cfe8cf; background: #f7fbf7; }
.slot-mid { color: #c9921f; border-color: #f0ddb0; background: #fffaf0; }
.slot-high { color: #d66b38; border-color: #f0c9b0; background: #fff7f2; }
.slot-full { color: var(--red); border-color: #efc2c2; background: #fff6f6; }

.slot-legend {
  list-style: none;
  margin: 0 0 .85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  font-size: .72rem;
  color: var(--muted);
}

.slot-legend li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.leg {
  width: .65rem;
  height: .65rem;
  border-radius: 3px;
  display: inline-block;
}

.leg-empty { background: #edf1f5; border: 1px solid #dce4ec; }
.leg-low { background: #8fc98f; }
.leg-mid { background: #e8b44a; }
.leg-full { background: var(--red); }

.slot-busy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.slot-busy-heading {
  margin: 0 0 .1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.slot-busy {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8ecf1;
  font-size: .8rem;
}

.slot-busy-time {
  font-weight: 800;
  font-size: .82rem;
  color: var(--sea);
}

.slot-busy-body {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.slot-busy-bar {
  height: 6px;
  border-radius: 999px;
  background: #edf2f6;
  overflow: hidden;
}

.slot-busy-bar span {
  display: block;
  height: 100%;
  width: calc(var(--fill, 0) * 1%);
  border-radius: 999px;
  background: currentColor;
  transition: width .25s ease;
}

.slot-busy.slot-low { color: #4f9b57; }
.slot-busy.slot-mid { color: #c9921f; }
.slot-busy.slot-high { color: #d66b38; }
.slot-busy.slot-full { color: var(--red); }

.slot-busy-meta { color: var(--muted); font-size: .74rem; font-weight: 600; }

.slot-busy-status {
  font-size: .72rem;
  font-weight: 700;
  color: var(--sea);
  white-space: nowrap;
}

.slot-busy.slot-full .slot-busy-status { color: var(--red); }

.slot-busy-empty { margin: 0; }

.slot-quiet-panel {
  margin-top: .65rem;
  border-top: 1px dashed #e0e6ed;
  padding-top: .55rem;
}

.slot-quiet-panel summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}

.slot-quiet-panel summary::-webkit-details-marker { display: none; }

.slot-quiet-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: #eef2f6;
  font-size: .7rem;
}

.slot-quiet-list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .35rem;
}

.slot-quiet-row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .74rem;
  color: var(--muted);
  padding: .3rem .45rem;
  background: #f8fafc;
  border-radius: 6px;
}

/* —— Reservations panel —— */
.reservations-panel {
  margin-top: 1.25rem;
}

.reservations-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.reservations-head .section-title {
  margin: 0;
  font-size: 1.05rem;
}

.reservations-count {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  background: #eef2f6;
  padding: .25rem .55rem;
  border-radius: 999px;
}

.booking-list[hidden],
#bookings-empty[hidden] {
  display: none !important;
}

.booking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid #e6e9ef;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(18, 29, 48, .05);
}

.booking-row {
  border-bottom: 1px solid #eef1f5;
}

.booking-row:last-child { border-bottom: none; }

.booking-row-today {
  background: linear-gradient(90deg, #fff8f8 0%, #fff 55%);
}

.booking-row-main {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
}

.booking-row-time {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.booking-row-clock {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sea);
}

.booking-row-day {
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.booking-row-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.booking-row-name {
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-row-meta {
  font-size: .76rem;
  color: var(--muted);
}

.booking-row-meta code {
  font-size: .72rem;
  background: #f1f5f9;
  padding: .05rem .3rem;
  border-radius: 4px;
}

.booking-row-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

.booking-link {
  font-size: .76rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}

.booking-link:hover { text-decoration: underline; }

.booking-row .btn-cancel {
  width: auto;
  margin: 0;
  padding: .35rem .55rem;
  font-size: .74rem;
}

.booking-row-details {
  margin-top: .35rem;
  padding: .45rem .75rem .6rem;
  border-top: 1px solid #eef2f6;
}

.booking-row-details summary {
  cursor: pointer;
  list-style: none;
}

.booking-row-details summary::-webkit-details-marker { display: none; }

.booking-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .72rem;
  border-radius: 8px;
  border: 1px solid #d5dee8;
  background: #f8fafc;
  font-size: .78rem;
  font-weight: 700;
  color: var(--sea);
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.booking-row-details summary:hover .booking-details-toggle {
  background: #eef3f8;
  border-color: #c5d0dc;
}

.booking-row-details[open] .booking-details-toggle {
  background: #fff;
  border-color: #b8c8d8;
  box-shadow: 0 1px 0 rgba(18, 29, 48, .04);
}

.booking-details-chevron {
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -.12rem;
  opacity: .75;
}

.booking-row-details[open] .booking-details-chevron {
  transform: rotate(-135deg);
  margin-top: .08rem;
}

.booking-row-details-body {
  margin-top: .55rem;
  padding: .65rem .75rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e8edf2;
}

.booking-row-contact,
.booking-row-notes {
  margin: 0;
  font-size: .8rem;
  color: var(--sea);
  line-height: 1.45;
}

.booking-row-notes {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid #e8edf2;
  color: var(--muted);
}

@media (max-width: 520px) {
  .booking-row-main {
    grid-template-columns: 3.5rem 1fr;
    grid-template-areas:
      "time info"
      "actions actions";
  }
  .booking-row-time { grid-area: time; }
  .booking-row-info { grid-area: info; }
  .booking-row-actions {
    grid-area: actions;
    justify-content: flex-end;
    padding-top: .15rem;
  }
  .booking-row-details { padding-left: .75rem; }
  .slot-busy {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "time status"
      "body body";
  }
  .slot-busy-time { grid-area: time; }
  .slot-busy-body { grid-area: body; }
  .slot-busy-status { grid-area: status; text-align: right; }
}

@media (min-width: 600px) {
  .page-admin .wrap { max-width: 820px; }
  .admin-top h1 { font-size: 1.75rem; }
}

.bookings-table .row-today td { background: #fff8f8; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.error {
  color: var(--red);
  font-size: .85rem;
  margin-top: .5rem;
}

.booking-anon,
.privacy-hint {
  margin: .35rem .75rem .5rem;
  font-size: .74rem;
}

.history-panel {
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid #e6e9ef;
  border-radius: var(--radius);
  padding: .65rem .85rem;
}

.history-panel summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  list-style: none;
}

.history-panel summary::-webkit-details-marker { display: none; }

.history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: #eef2f6;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
}

.history-list {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.history-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: .5rem;
  align-items: center;
  font-size: .78rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  background: #f8fafc;
}

.history-when {
  font-weight: 700;
  color: var(--sea);
}

.history-meta {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-meta code {
  font-size: .7rem;
  background: #eef2f6;
  padding: .05rem .25rem;
  border-radius: 3px;
}

.history-status {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #5a8f5a;
}

.history-status-cancelled .history-status,
.history-row.history-status-cancelled .history-status {
  color: var(--muted);
}

@media (max-width: 520px) {
  .history-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "when status" "meta meta";
  }
  .history-when { grid-area: when; }
  .history-status { grid-area: status; text-align: right; }
  .history-meta { grid-area: meta; }
}