/* 32 Unit Survey: server-rendered pages. Plain CSS, no external assets. */
:root {
  --bg: #f6f7f9; --fg: #1d2330; --muted: #5d6677; --line: #dde1e7; --card: #fff;
  --accent: #1f5fbf; --accent-fg: #fff; --danger: #b42318; --ok: #157347; --warn: #9a6700;
  --radius: 8px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.muted, small { color: var(--muted); }
small { display: block; font-size: .8rem; margin-top: .2rem; }

/* App shell: topbar across the top, sidebar on the left, content on the right, footer at the bottom.
   The shell is exactly one screen tall; only .content scrolls, so the topbar, sidebar and footer stay in place.
   Below 960px the sidebar is an off-canvas drawer opened by the #nav-toggle checkbox (works without JavaScript). */
:root { --topbar-h: 3.25rem; --sidebar-w: 15rem; --nav-bg: #172033; --nav-fg: #c9d2e3; --nav-hover: #222d45; }
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell.with-nav { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto; grid-template-areas: "top top" "side main" "side foot";
  height: 100vh; height: 100dvh; overflow: hidden; }
.content { grid-area: main; flex: 1; width: 100%; padding: 1.25rem 1.75rem 2rem; min-width: 0; }
.content > * { max-width: 1280px; }
.with-nav .content { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
/* Footer: closes the page below the last table row and the pager. */
.footer { grid-area: foot; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center; padding: .9rem 1.75rem calc(.9rem + env(safe-area-inset-bottom)); font-size: .85rem;
  color: var(--muted); border-top: 1px solid var(--line); background: var(--card); }
.shell:not(.with-nav) .content { margin: 0 auto; }

.topbar { grid-area: top; z-index: 30; display: flex; gap: 1rem; align-items: center;
  height: var(--topbar-h); padding: 0 1.25rem; background: var(--nav-bg); color: var(--nav-fg);
  border-bottom: 1px solid #2a3550; }
.topbar a { color: #e6ecf7; }
.brand { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.logout { display: flex; gap: .6rem; align-items: center; margin: 0 0 0 auto; min-width: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

.sidebar { grid-area: side; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--nav-bg); color: var(--nav-fg); padding: .75rem .6rem 2rem; }
.sidebar nav { display: grid; gap: .1rem; }
.sidebar a, .sidebar summary { display: block; padding: .5rem .75rem; border-radius: 6px; color: #e6ecf7;
  border-left: 3px solid transparent; }
.sidebar a:hover, .sidebar summary:hover { background: var(--nav-hover); text-decoration: none; }
.sidebar a.active { background: #26355a; border-left-color: #6ea0ff; font-weight: 600; color: #fff; }
.sidebar summary { cursor: pointer; list-style: none; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after { content: "▸"; float: right; font-size: .85em; opacity: .7; }
.sidebar details[open] > summary::after { content: "▾"; }
.nav-sub { display: grid; gap: .1rem; }
.nav-sub a { padding-left: 1.6rem; font-size: .92rem; }
.nav-heading { margin: 1rem .75rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #8a96ad; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; cursor: pointer; padding: .5rem; margin-left: -.5rem; border-radius: 6px; }
.nav-button:hover { background: var(--nav-hover); }
.burger, .burger::before, .burger::after { display: block; width: 1.2rem; height: 2px; background: #e6ecf7;
  border-radius: 1px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.scrim { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 960px) {
  .shell.with-nav { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "foot"; }
  .nav-button { display: inline-flex; align-items: center; }
  .sidebar { position: fixed; z-index: 40; top: var(--topbar-h); left: 0; bottom: 0;
    width: min(var(--sidebar-w), 82vw); transform: translateX(-100%); transition: transform .2s ease;
  }
  .nav-toggle:checked ~ .shell .sidebar { transform: none; box-shadow: 4px 0 18px rgba(0,0,0,.25); }
  .nav-toggle:checked ~ .shell .scrim { display: block; position: fixed; z-index: 35; inset: var(--topbar-h) 0 0 0;
    background: rgba(10, 15, 25, .45); }
  .content { padding: 1rem 1rem 1.5rem; }
  .footer { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 560px) {
  .user-name { display: none; }
  h1 { font-size: 1.35rem; }
}

a.button { display: inline-block; color: var(--accent-fg); }
a.button:hover { text-decoration: none; }

button, .button { font: inherit; padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-fg); cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.link { background: none; border: none; color: #e6ecf7; padding: 0; text-decoration: underline; }
input, select { font: inherit; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; }
.card h2 { margin-top: 0; }
.form { display: grid; gap: .8rem; max-width: 34rem; }
.form label { display: grid; gap: .25rem; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; }
label.check { display: flex; gap: .5rem; align-items: baseline; }
label.check small { display: inline; }
.inline, .filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }

table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #fafbfc; }
td.num, th.num { text-align: right; }
td.empty { color: var(--muted); text-align: center; padding: 1.2rem; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
/* Horizontal variant: each <div> holds one dt/dd pair (label above value); pairs share the width and wrap. */
.facts.inline { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem 1.5rem; }
.facts.inline > div { display: grid; gap: .15rem; align-content: start; }
.facts.inline dt { font-size: .85rem; }
.facts.inline dd { font-weight: 600; }
/* Long text (address, remarks): its own full-width row, normal weight. */
.facts.inline > div.wide { grid-column: 1 / -1; }
.facts.inline > div.wide dd { font-weight: normal; }
.crumbs { margin: 0; font-size: .9rem; color: var(--muted); }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.actions .card { margin: 0; display: grid; gap: .7rem; align-content: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; color: var(--fg); }
.tile strong { display: block; font-size: 1.6rem; color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tabs a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.tabs a.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tabs a:hover { text-decoration: none; border-color: var(--accent); }
/* Tabs with many entries turn into a dropdown on small screens (see lookups/list.html). */
.tabs-select { display: none; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.tabs-select label { font-weight: 600; }
.tabs-select select { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .tabs-wide { display: none; }
  .tabs-select { display: flex; }
}
.pager { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "prev info next"; gap: .6rem 1rem;
  align-items: center; margin: 1.25rem 0 .5rem; color: var(--muted); }
.pager .prev { grid-area: prev; justify-self: start; }
.pager .info { grid-area: info; text-align: center; }
.pager .next { grid-area: next; justify-self: end; }
@media (max-width: 560px) {
  .pager { grid-template-columns: 1fr 1fr; grid-template-areas: "info info" "prev next"; }
}
.pager a { padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }

.flash { padding: .7rem 1rem; border-radius: var(--radius); background: #e7f4ec; border: 1px solid #b7dfc6; margin: 0 0 1rem; }
.flash.error { background: #fdecea; border-color: #f5c2bd; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef1f5; }
.badge.active, .badge.completed { background: #e7f4ec; color: var(--ok); }
.badge.blocked, .badge.failed { background: #fdecea; color: var(--danger); }
.badge.completed_with_errors, .badge.running, .badge.pending { background: #fff4d6; color: var(--warn); }
.revealed strong { font-size: 1.3rem; letter-spacing: .08em; }

.login-page { display: grid; place-items: center; min-height: 100vh; }
.card.login { width: min(24rem, 92vw); }
.card.login form { display: grid; gap: .8rem; }
.card.login label { display: grid; gap: .25rem; }

/* Forms with many fields */
.form-sections { display: grid; gap: 1rem; }
.form-sections fieldset { margin: 0; }
.form-sections legend { font-weight: 600; padding: 0 .3rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1rem; }
.field { display: grid; gap: .25rem; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field textarea { font: inherit; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger); }
.form-actions { display: flex; gap: 1rem; align-items: center; grid-column: 1 / -1; }
.actions-row { display: flex; gap: 1rem; align-items: center; }

.js .no-js-only { display: none; }
html:not(.js) .js-only { display: none; }
.pre { white-space: pre-line; }
.inline-pair { display: flex; gap: .4rem; }
.inline-pair input { flex: 1; min-width: 0; }
.form-steps { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.form-steps label { display: grid; gap: .25rem; min-width: 15rem; }

/* Wide tables scroll sideways inside their own box instead of widening the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); margin: 0 0 1rem; }
.table-wrap table { border: 0; border-radius: 0; margin: 0; }
.table-wrap tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f9fafc; }

/* Small screens: stack forms and filters, keep tap targets comfortable, avoid iOS zoom on focus. */
@media (max-width: 720px) {
  input, select, textarea, button, .button { font-size: 16px; }
  .filters, .inline { align-items: stretch; }
  .filters > input, .filters > select { flex: 1 1 12rem; min-width: 0; }
  .form { max-width: none; }
  .form-steps { display: grid; }
  .form-steps label { min-width: 0; }
  .form-actions, .actions-row { flex-wrap: wrap; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .facts dd { margin-bottom: .5rem; overflow-wrap: anywhere; }
  .facts.inline { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .facts.inline dd { margin-bottom: 0; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .card { padding: .9rem 1rem; }
  th, td { padding: .45rem .55rem; }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
}