/* Layered on top of Pico.css. Kept small and purposeful. */

.muted { color: var(--pico-muted-color); }
.inline-form { display: inline; margin: 0; }
.login-card { max-width: 26rem; margin: 4rem auto; }

/* ---- Clock buttons: big, thumb-friendly, used on phones in the field ---- */
.big-form { margin-bottom: 0; }
.btn-clock {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.4rem 1rem;
  letter-spacing: 0.02em;
}
.btn-in  { --pico-background-color: #2e7d32; --pico-border-color: #2e7d32; }
.btn-in:hover  { --pico-background-color: #276b2b; --pico-border-color: #276b2b; }
.btn-out { --pico-background-color: #c62828; --pico-border-color: #c62828; }
.btn-out:hover { --pico-background-color: #ad2222; --pico-border-color: #ad2222; }

.punch-card { text-align: center; }
.punch-card .punch-label { margin-bottom: 0.25rem; color: var(--pico-muted-color); }
.punch-card .punch-job { margin: 0 0 0.25rem; }
.punch-card form { margin-top: 1.5rem; }

/* ---- Status / error messaging ---- */
.geo-status { margin: 0; }
.geo-status--info  { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius);
                     background: var(--pico-card-sectioning-background-color); }
.geo-status--error { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius);
                     background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.geo-status--loud  { padding: 1rem; border-radius: var(--pico-border-radius);
                     background: #c62828; color: #fff; font-weight: 700; font-size: 1.05rem;
                     border: 2px solid #8e1c1c; }

.error-box { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius);
             background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }

/* ---- Admin table ---- */
.flagged { background: #fff8e1; }
.flag-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; line-height: 1;
             padding: 0.2rem 0.4rem; border-radius: 999px; background: #ffb300; color: #3d2c00; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
           gap: 0.75rem; align-items: end; }
.filters label { margin: 0; }
.nowrap { white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }
table td, table th { vertical-align: middle; }

.admin-subnav { margin-bottom: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.header-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filters .check { display: flex; align-items: center; gap: 0.4rem; }
.filters .check input { margin: 0; }
.filter-actions { display: flex; gap: 0.5rem; align-items: end; }
.filters button, .filters [role="button"] { margin: 0; }
.pad { padding: 0.75rem; }
.pad input { margin-bottom: 0.5rem; }