/* SATFlow v1.5.6 — audible click & bigger CTA */
:root{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#94a3b8;--accent:#38bdf8;--accent-2:#22c55e;--danger:#ef4444;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Courier New',monospace;--tap:44px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;background:#0f172a;color:#e5e7eb;-webkit-text-size-adjust:100%}
header{position:sticky;top:0;background:rgba(15,23,42,.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(148,163,184,.2);padding:16px 20px;z-index:10}
h1{margin:0 0 8px;font-size:22px}
nav{display:flex;gap:8px;overflow:auto}
.tab-btn{padding:8px 12px;background:#0b162d;color:var(--text);border:1px solid rgba(148,163,184,.25);border-radius:10px;min-height:var(--tap)}
.tab-btn.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
main{max-width:1100px;margin:20px auto;padding:0 16px}
.tab{display:none;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%),#111827;border:1px solid rgba(148,163,184,.15);padding:16px;border-radius:14px}
.tab.active{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.grid.compact input,.grid.compact textarea{margin-bottom:8px}
input,textarea{padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:#0d152a;color:var(--text);min-height:var(--tap)}
.actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.status-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:8px}
.status-box{background:#0b162d;border:1px solid rgba(148,163,184,.2);padding:12px;border-radius:12px}
.status-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.mono{font-family:var(--mono)}.big{font-size:26px}
.summary{padding:12px;background:#0b162d;border:1px solid rgba(148,163,184,.2);border-radius:12px;margin-bottom:12px}
.table-wrap{overflow:auto;border:1px solid rgba(148,163,184,.2);border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid rgba(148,163,184,.15);font-family:var(--mono)}
thead th{font-size:12px;color:var(--muted);background:#0c142a;position:sticky;top:0}
footer{max-width:1100px;margin:24px auto 40px;padding:0 16px;color:#94a3b8}
.controls-docked{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;background:linear-gradient(0deg,rgba(15,23,42,.98),rgba(15,23,42,.92) 60%,transparent);border-top:1px solid rgba(148,163,184,.18);display:grid;grid-template-columns:1fr;gap:8px;z-index:50;transition:transform .2s ease,opacity .2s ease}
.controls-hidden{opacity:0;pointer-events:none;transform:translateY(100%)}
.veh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button{border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:10px 14px;min-height:var(--tap);background:#0b162d;color:#fff;cursor:pointer}
button.primary{background:#0a213e;border-color:var(--accent)}
button.secondary{background:#0b2a19;border-color:var(--accent-2)}
button.danger{background:#2a0b0b;border-color:var(--danger)}
button.ghost{background:transparent}
button.wide{width:100%}
button:disabled{opacity:.5;cursor:not-allowed}
.admin-row{display:flex;gap:10px;justify-content:space-between}
body.dock-visible main{padding-bottom:140px}
body.idle #dock .veh-grid{display:none}
body.counting #dock .veh-grid{display:grid}
body.counting #dock .admin-row{display:none}
body.idle #end-of-sat-btn{display:none !important}
body.counting #green-btn{display:none !important}
body.idle:not(.has-samples) #dock .admin-row{display:none}
body.idle.has-samples #dock .admin-row{display:flex}
/* Larger controls while counting */
body.counting #dock .veh-grid button,body.counting #dock #end-of-sat-btn{min-height:calc(var(--tap)*2);padding-top:16px;padding-bottom:16px;font-size:1.1rem}
body.idle #dock #green-btn{min-height:var(--tap)}
/* XXL CTA for Site -> Measurements */
#start-measurements.cta-big{width:100%;min-height:calc(var(--tap)*2);font-size:1.1rem}

/* ...existing code...*/
/* Stack site details inputs vertically */
  #tab-site .grid {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  #tab-site .grid input,
  #tab-site .grid textarea,
  #tab-site .grid select {
    width: 100%;
    box-sizing: border-box;
  }

  /* make the actions area sit under the inputs */
#tab-site .grid + .actions,
#tab-site .grid .actions {
    margin-top: 0.5rem;
}

/* Limit Site Details area to typical iPhone 16 Pro width */
#tab-site {
  width: 100%;
  max-width: 430px; /* ~iPhone 16 Pro CSS width */
  margin-left: auto;
  margin-right: auto;
}

/* Limit Measurements (survey) area to typical iPhone 16 Pro width */
#tab-measure {
  width: 100%;
  max-width: 430px; /* ~iPhone 16 Pro CSS width */
  margin-left: auto;
  margin-right: auto;
}

/* Increase green button size by 50% */
#green-btn {
  min-height: calc(var(--tap) * 1.5) !important; /* from 44px -> ~66px */
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 1.25rem;
}
/* ensure idle-state rule is consistent */
body.idle #dock #green-btn { min-height: calc(var(--tap) * 1.5) !important; }
/* ...existing code... */

/* constrain entire app to iPhone 16 Pro width (approx. 430px) */
:root{--iphone-max-width:430px}

/* header, main and footer should sit inside the phone width */
header,
main,
footer {
  max-width: var(--iphone-max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* reduce the global main max width (overrides previous larger value) */
main{max-width:var(--iphone-max-width);margin:20px auto;padding:0 16px}

/* footer constrained too */
footer{max-width:var(--iphone-max-width);margin:24px auto 40px;padding:0 16px;color:#94a3b8}

/* ensure tabs/cards fill the constrained width */
.tab{width:100%}

/* controls dock should be centered and no wider than the phone width */
.controls-docked{
  left:0;
  right:0;
  width:100%;
  max-width:var(--iphone-max-width);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  padding-left:12px;
  padding-right:12px;
}

/* ensure wide buttons inside dock respect the phone width */
.controls-docked button.wide{width:100%}

/* table wrap should not exceed phone width and scroll horizontally if needed */
.table-wrap{max-width:100%;overflow:auto}

/* keep existing iPhone-specific tab limits (reinforce) */
#tab-site, #tab-measure { width:100%; max-width:var(--iphone-max-width); margin-left:auto; margin-right:auto; }
/* ...existing code... */

// ...existing code...
/* When #dock is inside the Measurements tab, make it stick to the tab bottom
   so it remains inside the iPhone width and above the footer. */
#tab-measure {
  position: relative; /* containing block for sticky/absolute placement */
  padding-bottom: calc((var(--tap) * 3) + env(safe-area-inset-bottom) + 16px); /* room for controls */
}

#tab-measure #dock {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--iphone-max-width);
  box-sizing: border-box;
  z-index: 40;
  transform: none !important; /* override transitions that expect fixed */
}

/* keep dock internals sized as before */
#tab-measure #dock .veh-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#tab-measure #dock button.wide{width:100%}

/* ensure fixed-position rules don't conflict when dock is inside the tab */
#tab-measure #dock.controls-hidden { opacity:0; pointer-events:none; transform:none; }
/* ...existing code... */

// ...existing code...
/* Make Results tab action buttons equal width across the results box */
#tab-results .actions {
  display: flex;
  gap: 8px;
  width: 100%;
}
#tab-results .actions button {
  flex: 1 1 0;
  min-width: 0; /* prevents overflow when using flex */
  box-sizing: border-box;
}
/* ...existing code... */
// ...existing code...
/* Make top tab selectors equal width across the header (inside phone bounds) */
header nav {
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  overflow: hidden; /* avoid horizontal scroll inside phone width */
}
header .tab-btn {
  flex: 1 1 0;
  min-width: 0; /* prevents overflow when using flex */
  text-align: center;
}
/* ensure active state visual still applies */
header .tab-btn.active { box-shadow: none; }
/* ...existing code... */
/* show veh-grid in idle and make buttons same large size as when counting */
body.idle #dock .veh-grid { display: grid; }
body.idle #dock .veh-grid button,
body.idle #dock #end-of-sat-btn {
  min-height: calc(var(--tap) * 2);
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 1.1rem;
}

/* Hide count buttons when idle */
body.idle #dock .veh-grid,
body.idle #dock .veh-grid button {
  display: none !important;
}
/* ...existing code... */