:root { --topdog-radius: 14px; }
html { background: #f5f6f8; }
body { min-height: 100vh; }
.navbar-item.has-text-weight-bold { letter-spacing: .08em; }
.box, .stat-card { border-radius: var(--topdog-radius); box-shadow: 0 4px 18px rgba(10,10,10,.05); }
.compact-box { padding: 1rem; }
.stat-card { background: #fff; padding: 1.15rem; min-height: 108px; display:flex; flex-direction:column; }
.stat-card span { color:#6b7280; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.stat-card strong { font-size:1.45rem; line-height:1.2; margin-top:.3rem; }
.stat-card small { color:#6b7280; margin-top:.2rem; }
.summary-lines .column { display:flex; flex-direction:column; }
.summary-lines span { color:#6b7280; font-size:.8rem; }
.shift-card { color:inherit; display:block; margin-bottom:.75rem !important; border-left:8px solid #363636; transition:transform .12s ease, box-shadow .12s ease; }
.shift-card:hover { transform: translateY(-1px); }

/* Screen approximations of the final CMYK colours used on Neal's printed rota. */
.shift-card.shift-day { border-left-color:#baff82; background:rgba(186,255,130,.20); }       /* C27 M0 Y49 K0 */
.shift-card.shift-night { border-left-color:#75ff00; background:rgba(117,255,0,.14); }      /* C54 M0 Y100 K0 */
.shift-card.shift-ot-day { border-left-color:#ff8ff5; background:rgba(255,143,245,.17); }   /* C0 M44 Y4 K0 */
.shift-card.shift-ot-night { border-left-color:#ff2126; background:rgba(255,33,38,.11); }   /* C0 M87 Y85 K0 */
.shift-card.shift-bank-holiday { border-left-color:#000080; background:rgba(0,0,128,.08); } /* C100 M100 Y0 K50 */
.shift-card.shift-bank-holiday .bank-holiday-tag { background:#000080; color:#fff; }

.shift-colour-key { display:flex; flex-wrap:wrap; gap:.35rem .7rem; color:#6b7280; }
.shift-colour-key span { display:inline-flex; align-items:center; gap:.28rem; white-space:nowrap; }
.shift-dot { width:.75rem; height:.75rem; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.12); }
.shift-dot-day { background:#baff82; }
.shift-dot-night { background:#75ff00; }
.shift-dot-ot-day { background:#ff8ff5; }
.shift-dot-ot-night { background:#ff2126; }
.shift-dot-bank-holiday { background:#000080; }
.job-row { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid #eee; }
.pre-line { white-space: pre-line; }
.select-input { width:100%; border:1px solid #dbdbdb; border-radius:6px; padding:.5em .75em; background:white; min-height:2.5em; }
.route-table-wrap { overflow-x:auto; }
.gap-2 { gap:.5rem; }
@media (max-width: 768px) {
  .section { padding: 1.2rem .9rem; }
  .title.is-3 { font-size:1.55rem; }
  .level.is-mobile .button { white-space:nowrap; }
  .stat-card { min-height:96px; }
  .job-row { align-items:flex-start; }
}

.route-time-reference { background:#f7f7f7; border:1px solid #e5e7eb; border-radius:10px; padding:.85rem; }
.route-time-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.45rem; }
.route-time-grid span { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:.55rem .35rem; text-align:center; display:flex; flex-direction:column; line-height:1.15; }
.route-time-grid strong { font-size:.9rem; }
.route-time-grid small { color:#6b7280; margin-top:.2rem; }
@media (max-width: 480px) {
  .route-time-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Rota planner - colours follow Neal's printed shift planner. */
.shift-dot-rest { background:#d9c9ff; }
.rota-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.rota-date-jump { min-width:240px; }
.rota-key { gap:.45rem 1rem; }
.rota-weekdays, .rota-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.45rem; }
.rota-weekdays { margin-bottom:.45rem; padding:0 .1rem; }
.rota-weekdays span { text-align:center; color:#6b7280; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.rota-cell { min-height:132px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.55rem; position:relative; overflow:hidden; }
.rota-cell-blank { background:transparent; border-color:transparent; box-shadow:none; }
.rota-cell.is-today { outline:3px solid #363636; outline-offset:1px; }
.rota-date-line { display:flex; justify-content:space-between; align-items:center; gap:.35rem; margin-bottom:.45rem; }
.rota-date-line strong { font-size:1rem; }
.rota-weekday-mobile { display:none; color:#6b7280; font-size:.72rem; margin-right:.3rem; }
.rota-mark-link { font-size:.68rem; color:#6b7280; text-decoration:underline; text-underline-offset:2px; }
.rota-marker { font-size:.74rem; line-height:1.15; margin:.25rem 0; }
.rota-note { font-size:.68rem; line-height:1.2; color:#4b5563; margin-bottom:.35rem; }
.rota-shift { display:block; color:inherit; border-top:1px solid rgba(0,0,0,.08); padding-top:.35rem; margin-top:.35rem; font-size:.68rem; line-height:1.25; }
.rota-shift strong, .rota-shift span { display:block; }
.rota-empty { color:#9ca3af; font-size:.68rem; margin-top:.5rem; }
.rota-day { background:#eaffd9; border-color:#baff82; }
.rota-night { background:#e8ffd4; border-color:#75ff00; }
.rota-ot-day { background:#fff0fd; border-color:#ff8ff5; }
.rota-ot-night { background:#ffe7e8; border-color:#ff2126; }
.rota-rest { background:#f4efff; border-color:#d9c9ff; }
.rota-holiday { background:#eef0ff; border-color:#000080; }
.rota-holiday .rota-marker { color:#000080; }
.quick-rota-choices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.65rem; }
.rota-choice { justify-content:flex-start; border-width:2px; font-weight:700; }
.rota-choice-day { background:#eaffd9; border-color:#baff82; }
.rota-choice-night { background:#e8ffd4; border-color:#75ff00; }
.rota-choice-rest { background:#f4efff; border-color:#d9c9ff; }
.rota-choice-holiday { background:#eef0ff; border-color:#000080; }
.rota-choice-day-ot { background:#fff0fd; border-color:#ff8ff5; }
.rota-choice-night-ot { background:#ffe7e8; border-color:#ff2126; }
.rota-choice-approved { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }

@media (max-width: 768px) {
  .rota-toolbar { align-items:stretch; }
  .rota-toolbar > * { width:100%; }
  .rota-toolbar .buttons { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rota-toolbar .buttons .button { width:100%; margin:0; border-radius:6px !important; }
  .rota-date-jump { min-width:0; }
  .rota-weekdays { display:none; }
  .rota-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
  .rota-cell { min-height:118px; }
  .rota-cell-blank { display:none; }
  .rota-weekday-mobile { display:inline; }
}

@media (max-width: 430px) {
  .rota-grid { grid-template-columns:1fr; }
  .rota-cell { min-height:0; }
  .quick-rota-choices { grid-template-columns:1fr; }
}

/* Monthly delivery counts */
.delivery-breakdown-box { padding-top:.35rem; padding-bottom:.35rem; }
.delivery-count-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem .25rem; border-bottom:1px solid #eee; }
.delivery-count-row:last-child { border-bottom:0; }
@media (max-width: 480px) {
  .delivery-count-row { padding:.75rem 0; }
}


/* Shift MPG / vehicle / End fields */
.shift-extra-line { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; }
.mpg-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.22rem .55rem; font-weight:700; line-height:1.15; border:1px solid rgba(0,0,0,.14); color:#111; }
.mpg-badge-large { min-width:4.5rem; padding:.35rem .7rem; font-size:1.05rem; }
.mpg-red { background:#ffb5b7; border-color:#d71920; }
.mpg-dark-orange { background:#f3a45d; border-color:#b85a00; }
.mpg-green { background:#bfeab7; border-color:#2f7d32; }
.mpg-amber { background:#ffd987; border-color:#b77900; }
.mpg-neutral { background:#f3f4f6; border-color:#d1d5db; }
.mpg-key { display:flex; flex-wrap:wrap; gap:.4rem; }
.mpg-input-red { background:#fff0f0 !important; border-color:#d71920 !important; }
.mpg-input-dark-orange { background:#fff4e8 !important; border-color:#b85a00 !important; }
.mpg-input-green { background:#effbef !important; border-color:#2f7d32 !important; }
.mpg-input-amber { background:#fff8e5 !important; border-color:#b77900 !important; }