:root{--ink:#1f2933;--muted:#6b7280;--line:#d9dee3;--bg:#f6f7f9;--accent:#1d4ed8;--ok:#15803d;--warn:#b45309;--bad:#b91c1c}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
header.top{background:#fff;border-bottom:1px solid var(--line);padding:8px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
header.top .brand{font-weight:700;color:var(--ink);text-decoration:none}
header.top nav a{margin-right:12px;color:var(--accent);text-decoration:none}
header.top .who{margin-left:auto;color:var(--muted)}
main{padding:16px;max-width:1400px;margin:0 auto}
h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:16px 0 8px}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top;white-space:nowrap}
th{background:#eef1f4;font-weight:600}
td.num,th.num{text-align:right}
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;background:#fff;border:1px solid var(--line);padding:8px 12px;margin-bottom:12px}
.filters label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
input,select,textarea{font:inherit;padding:3px 5px;border:1px solid var(--line);border-radius:3px}
input.k{width:90px;text-align:right}
button,.btn{font:inherit;padding:4px 10px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:3px;cursor:pointer;text-decoration:none}
button.secondary,.btn.secondary{background:#fff;color:var(--accent)}
button.danger{background:var(--bad);border-color:var(--bad)}
.msg{padding:6px 10px;margin-bottom:8px;border-radius:3px;border:1px solid}
.msg.success{color:var(--ok);border-color:var(--ok);background:#ecfdf5}
.msg.error{color:var(--bad);border-color:var(--bad);background:#fef2f2}
.badge{display:inline-block;padding:1px 6px;border-radius:9px;font-size:12px;background:#e5e7eb}
.badge.CONTRACT{background:#dcfce7;color:var(--ok)}.badge.BID_CANCELED,.badge.UNSOLD,.badge.SOLD_TO_OTHERS{background:#fee2e2;color:var(--bad)}
.badge.NEW_OFFER{background:#dbeafe;color:var(--accent)}.badge.BID_ACCEPTED{background:#fef3c7;color:var(--warn)}
.muted{color:var(--muted)}.timeout{color:var(--bad);font-weight:600}
.inline form{display:inline-flex;gap:4px;align-items:center}
.card{background:#fff;border:1px solid var(--line);padding:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0}dt{color:var(--muted)}dd{margin:0}
.pager a{margin-right:8px}
.errorlist{color:var(--bad);margin:0;padding-left:16px}
form.stack label{display:block;margin:6px 0 2px;color:var(--muted);font-size:12px}
form.stack p{margin:6px 0}

/* Keep wide data inside its own scroll area, including tables in cards/forms. */
table{display:block;max-width:100%;overflow-x:auto}
main,.card,.grid>*{min-width:0}
main{overflow-wrap:anywhere}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
header.top>*{min-width:0;max-width:100%}
header.top nav{display:flex;flex-wrap:wrap;gap:4px 12px}
header.top nav a{margin-right:0}
header.top .who,h1,h2,.card p,.msg,dt,dd,.errorlist{overflow-wrap:anywhere}
dl{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}
input,select,textarea{min-width:0;max-width:100%}
.filters label{min-width:0;max-width:100%}
.stack textarea{width:100%}

@media(max-width:900px){
  body{font-size:16px}
  button,.btn,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select{
    min-height:44px;
  }
  button,.btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:8px 12px;white-space:normal;overflow-wrap:normal}
  input,select,textarea{font-size:16px;padding:8px}
  input[type=checkbox],input[type=radio]{width:24px;height:24px;margin:10px;vertical-align:middle}
  header.top nav a,.pager a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  th,td{padding:8px}
  td a:not(.btn){display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  .filters label{flex:1 1 160px;font-size:14px}
  .filters input,.filters select{width:100%}
  form.stack label,.badge{font-size:14px}
  .stack input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.stack select{width:100%}
  textarea{min-height:88px}
  form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .inline form{gap:8px}
  .inline form>*{flex-shrink:0}
}

@media(max-width:600px){
  header.top{padding:8px 12px;gap:8px 12px}
  header.top nav{flex-basis:100%}
  header.top .who{flex-basis:100%;margin-left:0}
  main{padding:12px}
  .filters{padding:12px}
  .filters label{flex-basis:100%}
  dl{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
}

.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.metric{font-size:32px;font-weight:700;margin:8px 0}
ul{padding-left:24px}li{margin-bottom:8px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

:focus-visible { outline: 3px solid #175ea8; outline-offset: 3px; }
.skip-link { position: absolute; left: -10000px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: white; padding: .5rem; }
@media print {
  .top, .breadcrumbs, .no-print, form, details, .skip-link { display: none !important; }
  main { max-width: none; padding: 0; }
  table { display: table; overflow: visible; width: 100%; }
  tr { break-inside: avoid; }
}

.form-card{max-width:520px}
.house-form-card{max-width:480px}
.login-card{max-width:360px;margin:40px auto}
.scroll-x{overflow-x:auto}
.wrap-text{white-space:normal}
form.logout-form{display:inline}

.inventory-scroll { overflow-x: auto; max-width: 100%; }
.inventory-scroll td, .inventory-scroll th { white-space: nowrap; }

.nav-group { position: relative; }
.nav-group summary { color: var(--accent); cursor: pointer; }
.nav-group > div { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); background: white; }