:root {
  --pico-font-size: 100%;
  --ok: #1f8a4c;
  --warn: #b7791f;
  --err: #c53030;
}

header.container nav { flex-wrap: wrap; }
header .menu { flex-wrap: wrap; }
header .menu-mobile { display: none; }
header .menu-mobile summary { white-space: nowrap; }
/* Open the dropdown towards the left edge so it stays on screen. */
header .menu-mobile details.dropdown summary + ul { left: auto; right: 0; min-width: 12rem; }
header .menu-mobile details.dropdown summary + ul li a { padding: .75rem 1rem; }
@media (max-width: 767px) {
  header .menu { display: none; }
  header .menu-mobile { display: flex; }
}
.brand { font-weight: 700; text-decoration: none; }

/* Pill-shaped buttons throughout (inputs keep Pico's square-ish corners). */
button, [role=button], [type=submit], [type=button], [type=reset],
header .menu-mobile details.dropdown > summary { border-radius: 999px; }
.lang a { font-weight: 600; }

.flash { padding: .75rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.flash-error { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

.muted { color: var(--pico-muted-color); }
.small { font-size: .85rem; }
.warn { color: var(--warn); }
.indent { margin-left: 1.5rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.stats article { margin: 0; padding: 1rem; }
.stats small { display: block; color: var(--pico-muted-color); }
.stats strong { font-size: 1.5rem; display: block; }

.title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: var(--pico-typography-spacing-vertical); }
.title-row h1 { margin: 0; min-width: 0; }
.title-row [role=button] { flex-shrink: 0; white-space: nowrap; padding: .45rem 1rem; font-size: .9rem; }
.label-short { display: none; }
/* Only the narrowest phones need the shorter label to keep the button next to the title. */
@media (max-width: 359px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}

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

/* Phones: show each table row as a card, with the column name before every value. */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: .75rem 0; border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); }
  table.stack td { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; justify-items: start; padding: .2rem 0; border: 0; background: none; }
  table.stack td::before { content: attr(data-label); color: var(--pico-muted-color); font-size: .85rem; font-weight: normal; }
  table.stack td:empty { display: none; }
  table.stack td:not([data-label]) { display: flex; }
  table.stack td:not([data-label])::before { content: none; }

  /* Bookings: one card each, date as heading with the status next to it, details below. */
  table.cards thead { display: none; }
  table.cards, table.cards tbody { display: block; }
  table.cards tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title status" "note note" "prefs prefs";
    gap: .25rem .75rem; margin-bottom: 1rem; padding: 1rem 1.25rem;
    background: var(--pico-card-background-color); border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
  }
  table.cards td { display: block; padding: 0; border: 0; background: none; }
  table.cards td:empty { display: none; }
  table.cards .c-title { grid-area: title; font-size: 1.1rem; }
  table.cards .c-title a { text-decoration: none; }
  table.cards .c-status { grid-area: status; text-align: right; }
  table.cards .c-note { grid-area: note; }
  table.cards .c-prefs { grid-area: prefs; color: var(--pico-muted-color); }
}

.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.actions form { margin: 0; }
.actions button, .actions [role=button] { margin: 0; }
.row-actions { display: flex; gap: .25rem; }
.row-actions form { margin: 0; }
button.small { padding: .25rem .75rem; font-size: .85rem; margin: 0; }
/* Touch screens need larger targets than a mouse. */
@media (pointer: coarse) { button.small { padding: .5rem .9rem; } }
.danger { --pico-color: var(--err); border-color: var(--err); color: var(--err); }

.rule.inactive { opacity: .6; }
.rule dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.rule dt { color: var(--pico-muted-color); }
.rule dd { margin: 0; }
.run-now { margin: 0; }
.run-form { margin-top: .75rem; min-width: 240px; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.details dd { margin: 0; }
.log { white-space: pre-wrap; font-size: .8rem; max-height: 60vh; overflow: auto; padding: 1rem; }

.badge { display: inline-block; white-space: nowrap; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--pico-muted-border-color); }
.badge-booked, .badge-v-available { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.badge-payment_link, .badge-running, .badge-dry_run { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.badge-no_slot, .badge-error, .badge-v-invalid { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }

.login { max-width: 380px; margin: 4rem auto; }

.quick-add { padding: 1rem 1.25rem; }
.quick-add form { margin: 0; }
.quick-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: .75rem; align-items: end; }
/* Zero Pico's differing bottom margins so the button lines up with the inputs. */
.quick-row { margin-bottom: .75rem; }
.quick-row label, .quick-row input, .quick-row button { margin-bottom: 0; }
.quick-row button { height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); white-space: nowrap; }
@media (max-width: 640px) { .quick-row { grid-template-columns: 1fr; } }
.status-box { padding: 1rem 1.25rem; }
.status-box p { margin-bottom: .5rem; }
.badge-s-booked { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.badge-s-scheduled { background: color-mix(in srgb, var(--pico-primary) 18%, transparent); color: var(--pico-primary); }
.badge-s-open, .badge-s-payment_link { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.badge-s-failed { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }

.hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hero h1 { margin-bottom: .25rem; }
.hero p { margin-bottom: 0; font-size: 1.05rem; }
.hero img { height: 240px; width: auto; margin-bottom: -.75rem; pointer-events: none; }
@media (max-width: 640px) {
  .hero img { height: 160px; }
}

.share { margin: .75rem 0 .25rem; }
.whatsapp { --pico-background-color: #25d366; --pico-border-color: #25d366; --pico-color: #fff; }
.whatsapp:hover { --pico-background-color: #1ebe5b; --pico-border-color: #1ebe5b; }