/* Small additions to Pico classless. No inline styles anywhere: Caddy's CSP allows same-origin styles only. */

/* Page width: Pico sets the same max-width on header and main at each breakpoint, so they line up.
   Manager table pages (body.wide) get a wider container, applied to header and main together so the content
   keeps the header's inset. Below 64rem Pico's own widths and padding apply unchanged. */
@media (min-width: 64rem) {
  body.wide > header, body.wide > main { max-width: min(90rem, calc(100% - 4rem)); }
}

/* Header nav: keep items on one line where possible, wrap on very small screens. */
header nav { flex-wrap: wrap; }
header nav ul { flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }
button.link-button {
  background: none; border: none; padding: 0; margin: 0; width: auto;
  color: var(--pico-primary); text-decoration: none; font-size: inherit; cursor: pointer;
}

/* Flash messages. */
.flash { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius); border-left: 0.3rem solid; }
.flash-success { border-color: #2e7d32; background: rgba(46, 125, 50, 0.1); }
.flash-error { border-color: #c62828; background: rgba(198, 40, 40, 0.1); }
.muted { color: var(--pico-muted-color); }

/* Phone-friendly forms: full-width inputs and buttons, large tap targets. */
.entry-form input, .entry-form button { width: 100%; }
.entry-form { margin-bottom: 1rem; }
/* Hours and minutes dropdowns side by side, each followed by its unit, spaced like the other fields. */
fieldset.duration { margin: 0; padding: 0; border: 0; }
fieldset.duration legend { margin-bottom: var(--pico-spacing); padding: 0; }
.duration-fields {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 0.5rem; align-items: center;
  margin-bottom: var(--pico-spacing);
}
.duration-fields select { margin: 0; }
.duration-fields select[aria-invalid="true"] { margin: 0; }
.duration-unit { color: var(--pico-muted-color); white-space: nowrap; }
fieldset.duration small { display: block; margin-top: calc(var(--pico-spacing) * -0.5); margin-bottom: var(--pico-spacing); }
button.danger { background: #c62828; border-color: #c62828; color: #fff; }

/* Status badges. */
.badge {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.badge-approved { background: #e3f2fd; color: #0d47a1; }
.badge-sent { background: #e8f5e9; color: #1b5e20; }
.badge-inactive, .badge-draft { background: #eceff1; color: #37474f; }
.badge-sending { background: #fff3e0; color: #8a4b00; }
.badge-active { background: #e8f5e9; color: #1b5e20; }

/* My timesheet: weeks and entries as a tappable list. */
.week { margin-top: 1.5rem; }
.week-head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 1.1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color);
}
.week-total { white-space: nowrap; }
ul.entries { padding: 0; margin: 0; }
ul.entries li { list-style: none; margin: 0; padding: 0; }
.entry {
  display: block; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--pico-muted-border-color);
  color: inherit; text-decoration: none;
}
a.entry:hover, a.entry:focus { background: var(--pico-form-element-background-color); }
/* Date, status badge, then hours in a fixed-width right-aligned column so hours line up on every row. */
.entry-line {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) 4.5rem; gap: 0.5rem; align-items: baseline;
}
.entry-date { font-weight: 600; white-space: nowrap; }
.entry-status { min-width: 0; }
.entry-hours { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-desc { display: block; overflow-wrap: anywhere; }
a.entry-draft .entry-desc { color: var(--pico-primary); }
.entry-note { display: block; color: var(--pico-muted-color); }
.show-more { margin-top: 1rem; }

/* Wide manager tables scroll inside their container rather than the page. */
.table-wrap { overflow-x: auto; }

/* Manager screens (desktop, full-width tables). */
.flash-warning { border-color: #ef6c00; background: rgba(239, 108, 0, 0.1); }
.banner { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius); border-left: 0.3rem solid; }
.banner-warning { border-color: #ef6c00; background: rgba(239, 108, 0, 0.1); }
.banner-error { border-color: #c62828; background: rgba(198, 40, 40, 0.1); }
.attention { margin: 2rem 0; }
/* Needs attention: the table scrolls sideways on a phone; the error wraps within a readable width instead of
   collapsing the column to one character. */
.attention-table .error-text { min-width: 18rem; max-width: 30rem; overflow-wrap: break-word; }
/* Retry and Discard may stack so the row fits a desktop without sideways scrolling. */
.attention-table td.actions { white-space: normal; min-width: 6rem; }
.attention-table td.actions form { margin: 0.1rem 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
/* break-word (not anywhere) so long words wrap without shrinking the column's minimum width to one letter. */
td.wrap { overflow-wrap: break-word; min-width: 14rem; }
tfoot .totals-row th, tfoot .totals-row td { font-weight: 700; }
td.actions { white-space: nowrap; }
td.actions a { margin-left: 0.5rem; }
td button[type=submit], button[type=submit].compact {
  width: auto; padding: 0.2rem 0.6rem; margin: 0 0.25rem 0 0; font-size: 0.85rem;
}
td form.inline-form { display: inline-block; }
button.secondary {
  background: transparent; color: var(--pico-primary); border-color: var(--pico-primary);
}
.xero-form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.xero-form select {
  margin: 0; width: 18rem; min-width: 18rem; max-width: 100%; padding-top: 0.25rem; padding-bottom: 0.25rem;
}
.cell-note { display: block; }
.nowrap-part { white-space: nowrap; }
.role-name, .cell-state { display: block; }
.accounts-table th, .accounts-table td, .attention-table th, .attention-table td,
.entry-table th, .entry-table td {
  padding-left: 0.5rem; padding-right: 0.5rem;
}
.xero-form { flex-wrap: wrap; }
thead th { white-space: nowrap; }
/* User detail: all weeks in one table; a header row per week keeps the columns aligned. */
.entry-table tr.week-row th {
  background: var(--pico-form-element-background-color); font-weight: 700; padding-top: 0.75rem;
}
.week-row-label { margin-right: 1rem; }
.week-row-total { float: right; white-space: nowrap; }
.summary { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.summary div { margin: 0; }
.summary dt { font-weight: 600; }
.summary dd { margin: 0; }
.manager-form { max-width: 32rem; margin-bottom: 1rem; }
.add-entry { margin: 1rem 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Main action buttons are full width on a phone, their natural width on a desktop. */
@media (min-width: 48rem) {
  button.auto-width { width: auto; }
}