/* Small additions on top of Pico CSS. Mobile first-class: admins often check acknowledgements from
   a phone during an alert, so nothing may need sideways scrolling at 360px. */
:root { --pico-font-size: 95%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Top navigation: brand and account on the sides, sections in the middle; on phones the sections
   wrap onto their own row below, all visible (no hidden overflow that could hide the current page) */
nav.top { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; flex-wrap: wrap; }
nav.top a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
nav.top ul.sections { flex-wrap: wrap; }
nav.top li { white-space: nowrap; }
form.inline { margin: 0; }
@media (max-width: 1024px) {
  nav.top ul.sections { order: 3; flex-basis: 100%; margin-left: 0; margin-right: 0; }
  nav.top ul.sections li { padding: .5rem .6rem; }
  nav.top ul.sections li:first-child { padding-left: 0; }
}

.badge { display: inline-block; padding: .1rem .5rem; border-radius: .4rem; font-size: .85em; white-space: nowrap; }
.badge.red { background: #fde2e1; color: #a1161c; }
.badge.yellow { background: #fff3c4; color: #7a5a00; }
.badge.ok { background: #dff3e4; color: #1d6b34; }
.badge.muted { background: var(--pico-muted-border-color); color: var(--pico-muted-color); }
@media (prefers-color-scheme: dark) {
  .badge.red { background: #5b1a1c; color: #ffd6d4; }
  .badge.yellow { background: #4d3d00; color: #ffe9a3; }
  .badge.ok { background: #183d24; color: #c9f0d4; }
}
/* Long badges (errors, office status) may wrap on narrow screens instead of overflowing */
@media (max-width: 640px) { .badge { white-space: normal; } }

.grid-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-cards article { margin: 0; }
.big { font-size: 1.6rem; font-weight: 700; }
.office-status { margin-top: .6rem; }
h3.section { margin-top: 2rem; }
article.login { max-width: 32rem; margin: 3rem auto; }
code { overflow-wrap: anywhere; }

.filters { display: grid; gap: .5rem; grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
.filters.three { grid-template-columns: repeat(3, 1fr); }
.filters label { margin: 0; }
@media (max-width: 760px) {
  .filters, .filters.three { grid-template-columns: 1fr 1fr; }
  .filters .wide, .filters.three > :last-child { grid-column: 1 / -1; }
}
button.end { align-self: end; }
button.small { padding: .2rem .6rem; }

table td, table th { vertical-align: middle; }
td.actions { white-space: nowrap; text-align: right; }
tr.editing td { background: var(--pico-card-background-color); }

/* Phones: each table row becomes a card, the column name (data-label) printed beside each value */
@media (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { margin-bottom: .75rem; padding: .4rem .8rem; border: 1px solid var(--pico-muted-border-color);
                   border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); }
  table.stack td { position: relative; padding: .35rem 0 .35rem 40%; border: 0; background: none; text-align: left; }
  table.stack td[data-label]::before { content: attr(data-label); position: absolute; left: 0; width: 37%;
                                       color: var(--pico-muted-color); font-size: .85em; overflow-wrap: anywhere; }
  table.stack td:not([data-label]) { padding-left: 0; }
  table.stack td.actions { text-align: left; }
  table.stack td input:not([type=checkbox]) { margin: 0; }
}

/* Touch screens: finger-sized targets and no iOS zoom on focus (it zooms fields under 16px) */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1rem); }
  button.small, td.actions a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .9rem; }
}

.error { color: #c62828; }
.muted { color: var(--pico-muted-color); }