/* Custom styles on top of Pico.css */

/* Colour tokens. Light is the default; the dark values are listed twice because CSS cannot share
   a block between "system prefers dark" (no data-theme attribute) and "dark forced" (theme.js). */
:root {
  --vb-open: #e0b93a;
  --vb-open-bg: #fff8dc;
  --vb-taken: #4caf7d;
  --vb-taken-bg: #e6f5ec;
  --vb-taken-strong: #237a4b;
  --vb-taken-strong-text: #fff;
  --vb-taken-strong-muted: #dcefe3;
  --vb-mine: #1f6feb;
  --vb-expired: #9a9a9a;
  --vb-expired-bg: #f0f0f0;
  --vb-danger: #b3492f;
  --vb-danger-bg: #fbeae5;
  --vb-hover: brightness(0.96);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --vb-open: #d4b13f;
    --vb-open-bg: #3a3212;
    --vb-taken: #4caf7d;
    --vb-taken-bg: #15382a;
    --vb-taken-strong: #237a4b;
    --vb-mine: #6cb0ff;
    --vb-expired: #6f7785;
    --vb-expired-bg: #232831;
    --vb-danger: #f0907a;
    --vb-danger-bg: #40201a;
    --vb-hover: brightness(1.18);
  }
}
:root[data-theme="dark"] {
  --vb-open: #d4b13f;
  --vb-open-bg: #3a3212;
  --vb-taken: #4caf7d;
  --vb-taken-bg: #15382a;
  --vb-taken-strong: #237a4b;
  --vb-mine: #6cb0ff;
  --vb-expired: #6f7785;
  --vb-expired-bg: #232831;
  --vb-danger: #f0907a;
  --vb-danger-bg: #40201a;
  --vb-hover: brightness(1.18);
}

.site-header { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
.site-header nav { padding-block: 0.25rem; flex-wrap: wrap; }
.site-header .brand { text-decoration: none; }
.site-header .school { color: var(--pico-muted-color); font-size: 0.9em; margin-left: 0.4rem; }
.hint { font-size: 0.8rem; color: var(--pico-muted-color); padding-bottom: 0.5rem; }
.inline { display: inline; margin: 0; }
.theme-toggle { white-space: nowrap; min-width: 5.6rem; }
button.small, a[role=button].small, .small { padding: 0.3rem 0.7rem; font-size: 0.85rem; margin-bottom: 0; }
button.link { background: none; border: none; color: var(--pico-primary); padding: 0; margin: 0; font-size: inherit; text-decoration: underline; cursor: pointer; width: auto; }
button.danger, a.danger, button.link.danger { color: var(--vb-danger); border-color: var(--vb-danger); }
.narrow { max-width: 40rem; margin-inline: auto; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.row-between.wrap { flex-wrap: wrap; }
.row-between h1, .row-between h2 { margin-bottom: 0.5rem; }
.toolbar { margin-bottom: 0.75rem; }
.week-nav { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.week-label { margin-left: 0.5rem; }
.filters { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0; }
.filters input[type=date] { width: auto; margin: 0; }
.filters label { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; }
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tabs a { padding: 0.3rem 0.7rem; border-radius: var(--pico-border-radius); text-decoration: none; }
.tabs a[aria-current=page] { background: var(--pico-primary); color: var(--pico-primary-inverse); }
.flash { padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); margin-bottom: 0.75rem; }
.flash-success { background: var(--vb-taken-bg); border-left: 4px solid var(--vb-taken); }
.flash-error { background: var(--vb-danger-bg); border-left: 4px solid var(--vb-danger); }
.flash-warning { background: var(--vb-open-bg); border-left: 4px solid var(--vb-open); }
.flash-info { background: var(--pico-card-background-color); border-left: 4px solid var(--pico-primary); }
.notice { border-left: 4px solid var(--vb-open); }
.notice form { margin-top: 0.5rem; }
small.error { color: var(--vb-danger); display: block; }
.muted { color: var(--pico-muted-color); }
.empty { text-align: center; color: var(--pico-muted-color); padding: 1rem; }
.footer { font-size: 0.8rem; color: var(--pico-muted-color); text-align: center; padding-block: 2rem; }

/* Legend */
.legend { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; align-items: center; }
.swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 2px solid transparent; vertical-align: middle; }
.swatch.status-open { background: var(--vb-open-bg); border-color: var(--vb-open); }
.swatch.status-taken { background: var(--vb-taken-bg); border-color: var(--vb-taken); }
.swatch.mine { border-color: var(--vb-mine); }
.swatch.taken-by-me { background: var(--vb-taken-strong); border-color: var(--vb-taken-strong); }
.swatch.expired { background: var(--vb-expired-bg); border-color: var(--vb-expired); }

/* Week grid */
/* Pico redefines --pico-color and --pico-background-color on links, and cells and cards are links.
   So the page colours are captured here, on a non-link element, and inherited from there. */
.week-grid, .week-list { --vb-surface: var(--pico-background-color); --vb-text: var(--pico-color); }
.week-grid { display: grid; gap: 1px; background: var(--pico-muted-border-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.week-grid > * { background: var(--vb-surface); min-width: 0; }
.gh { padding: 0.4rem; text-align: center; font-weight: 600; font-size: 0.9rem; }
.gh.today { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.gh .date { font-weight: 400; font-size: 0.8em; }
.gp { padding: 0.3rem 0.5rem; font-size: 0.8rem; line-height: 1.2; white-space: nowrap; }
.cell { display: block; min-height: 3.2rem; }
.cell.today { background: color-mix(in srgb, var(--pico-primary) 10%, var(--vb-surface)); }
.cell.past { background: color-mix(in srgb, var(--pico-muted-border-color) 45%, var(--vb-surface)); }
.cell[href]:hover { background: color-mix(in srgb, var(--pico-primary) 22%, var(--vb-surface)); }

/* Offer cards */
.card { display: flex; flex-direction: column; gap: 0.1rem; margin: 2px; padding: 0.35rem 0.45rem; border-radius: 6px; border: 2px solid var(--vb-open); background: var(--vb-open-bg); color: var(--vb-text); text-decoration: none; font-size: 0.78rem; line-height: 1.25; overflow: hidden; z-index: 1; }
.card:hover { filter: var(--vb-hover); }
.card-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { color: var(--pico-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-taken { font-weight: 600; }
.card.status-taken { border-color: var(--vb-taken); background: var(--vb-taken-bg); }
.card.taken-by-me { border-color: var(--vb-taken-strong); background: var(--vb-taken-strong); color: var(--vb-taken-strong-text); }
.card.taken-by-me .card-meta { color: var(--vb-taken-strong-muted); }
.card.mine { border-style: dashed; border-color: var(--vb-mine); }
.card.expired { border-color: var(--vb-expired); background: var(--vb-expired-bg); color: var(--pico-muted-color); }
.badge { display: inline-block; font-size: 0.7rem; padding: 0 0.4rem; border-radius: 999px; background: #6b7280; color: #fff; width: fit-content; }
.badge-fortbildung { background: #5b6abf; }
.badge-termin { background: #96651c; }
.badge-tausch { background: #1f7486; }
.badge-sonstiges { background: #6b6b6b; }
.badge-admin { background: var(--pico-primary); color: var(--pico-primary-inverse); font-size: 0.7rem; vertical-align: middle; }
.status { display: inline-block; font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid; }
.status-open { border-color: var(--vb-open); background: var(--vb-open-bg); }
.status-taken { border-color: var(--vb-taken); background: var(--vb-taken-bg); }
.status-withdrawn, .status-expired { border-color: var(--vb-expired); background: var(--vb-expired-bg); color: var(--pico-muted-color); }

/* Mobile day list */
.week-list { display: none; }
.week-list .day { margin-bottom: 1rem; }
.week-list .day h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.week-list .day.today h3 { color: var(--pico-primary); }
.week-list .card { font-size: 0.9rem; }
@media (max-width: 700px) {
  .week-grid { display: none; }
  .week-list { display: block; }
  /* Pico keeps nav items on one line, which pushes the page wider than a phone screen. */
  .site-header nav ul { flex-wrap: wrap; }
  .site-header nav li { padding: 0.3rem 0.45rem; white-space: nowrap; }
  .filters { gap: 0.5rem 1rem; }
  th, td { padding: 0.4rem 0.5rem; }
  article h2 { font-size: 1.25rem; }
}

/* Details */
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
.details dt { font-weight: 600; }
.details dd { margin: 0; }
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 1rem; }
.actions-row form { margin: 0; }
.actions-row button, .actions-row a[role=button] { margin-bottom: 0; width: auto; }

/* Tables */
.table-wrap { overflow-x: auto; }
tr.past { color: var(--pico-muted-color); }
tr.me { background: var(--vb-taken-bg); font-weight: 600; }
td.actions { white-space: nowrap; }
td.actions a, td.actions form { margin-right: 0.5rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.tile { text-align: center; padding: 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.tile-value { display: block; font-size: 1.8rem; font-weight: 700; }
.tile-label { font-size: 0.8rem; color: var(--pico-muted-color); }