/* APN admin: additions to Pico CSS v2 (SPEC 10.3). Mobile first: one column
   below 768px, tables scroll inside .table-scroll, touch targets >= 44px.
   Short rules stay on one line to keep the file within 200 lines. */

:root {
  --apn-touch: 44px;
}

/* Navigation: brand and logout on the first row of a phone, sections below;
   one row from 768px */
.site-nav,
.site-nav ul { flex-wrap: wrap; }
.site-nav a,
.site-nav button {
  min-height: var(--apn-touch);
  display: inline-flex;
  align-items: center;
}
.site-nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.site-nav button { margin: 0; padding-block: 0; }
.site-nav .site-sections {
  --pico-nav-element-spacing-horizontal: 0.25rem;
  order: 1;
  flex-basis: calc(100% + 0.5rem);
  margin-inline: -0.25rem;
}
@media (min-width: 768px) {
  .site-nav .site-sections {
    --pico-nav-element-spacing-horizontal: 1rem;
    order: 0;
    flex-basis: auto;
    margin-inline: auto 0;
  }
}

/* One column on phones, two from 768px */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: calc(var(--pico-spacing) * 2);
}
@media (min-width: 768px) {
  .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cols > * { min-width: 0; }

/* Touch targets */
button,
[role="button"],
select,
input:not([type="checkbox"], [type="radio"]) {
  min-height: var(--apn-touch);
}
label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--apn-touch);
  margin-bottom: 0;
}

/* Tables scroll horizontally inside their container */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--pico-spacing);
}
.table-scroll table { margin-bottom: 0; }
.table-scroll th,
.table-scroll td { white-space: nowrap; vertical-align: middle; }
tbody:has(> tr:not(.empty-row)) > tr.empty-row { display: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.subtotal td { font-weight: 600; }

/* Buttons in rows and small forms */
.inline-form { display: inline-block; margin: 0; }
.inline-form button,
.row-actions button,
.row-actions [role="button"] { width: auto; margin-bottom: 0; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: var(--pico-spacing);
}
.table-scroll .row-actions { flex-wrap: nowrap; margin-bottom: 0; }
.icon-button { min-width: var(--apn-touch); padding-inline: 0.5rem; }

/* Messages, form errors, badges */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
  border-left: 4px solid currentColor;
  background: var(--pico-card-sectioning-background-color);
}
.flash-success { color: var(--pico-ins-color); }
.flash-error { color: var(--pico-del-color); }
.flash-info { color: var(--pico-primary); }
.flash-warn { color: #b7791f; }
.flash a { margin-left: 0.5rem; }
.field-error {
  display: block;
  margin-top: -0.5rem;
  margin-bottom: var(--pico-spacing);
  color: var(--pico-del-color);
}
.muted { color: var(--pico-muted-color); }
.badge {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 1rem;
  border: 1px solid currentColor;
  font-size: 0.875em;
  white-space: nowrap;
}
.badge-on { color: var(--pico-ins-color); }
.badge-warn { color: #b7791f; }
.badge-off { color: var(--pico-del-color); }

/* Copy fields, QR code, ordered lists */
.copy-field textarea,
.copy-field input,
textarea.code {
  font-family: var(--pico-font-family-monospace);
  font-size: 0.875em;
  word-break: break-all;
}
.qr img {
  display: block;
  width: 100%;
  max-width: 18rem;
  background: #fff;
}
.order-badge {
  margin-left: auto;
  min-width: 1.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--pico-primary);
}
.ordered-list ol { padding-left: 1.25rem; }
.ordered-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ordered-list .ordered-label { flex: 1 1 8rem; }
.login-card { max-width: 24rem; margin: 10vh auto 0; }

/* htmx indicators (htmx inline styles are disabled in htmx-config) */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }