:root{
  --uiZoom: 1.10;

  --bg:#fbfcfe;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#1d4ed8; /* HEC-RAS-ish blue */
  --danger:#b91c1c;
  --ok:#166534;
  --shadow: 0 8px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.page{
  max-width:1600px;
  margin:0 auto;
  padding:18px 18px 30px;
  zoom:var(--uiZoom);
}

/* -----------------
   Header
   ----------------- */

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.title{display:flex;align-items:flex-start;gap:12px;}
.badge{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:#e0f2fe;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

h1{margin:0;font-size:20px;line-height:1.25;}
.subtitle{margin-top:4px;color:var(--muted);font-size:13px;}
.muted{color:var(--muted)}

/* -----------------
   Layout
   ----------------- */

.grid{
  display:grid;
  grid-template-columns:520px 1fr;
  gap:16px;
  align-items:start;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.panel-header{
  padding:14px 14px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.panel-header h2{margin:0;font-size:16px;}
.panel-body{padding:0 14px 14px;}

/* -----------------
   Forms
   ----------------- */

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  font-size:12px;
  color:var(--muted);
}
input,select,button,textarea{font-family:inherit;}

input,select{
  width:100%;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13px;
  background:#fff;
  min-height:38px;
}

.inline{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
.inline select{width:auto; padding:7px 10px; min-height:34px;}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.row3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  align-items:stretch;
}

.help{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.hint{color:var(--muted);font-size:11px; margin-left:6px;}

/* -----------------
   Buttons
   ----------------- */

.btnbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;  /* makes wrapped rows align nicely */
}


.btn{
  border:1px solid var(--border);
  background:#fff;
  padding:9px 11px;
  border-radius:10px;
  font-size:13px;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap; /* add this */
}

.btn:hover{border-color:#cbd5e1;}

.btn.primary{
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color:#1d4ed8;
  color:#fff;
}
.btn.primary:hover{filter:brightness(0.98);}

.btn.danger{background:#fff;border-color:#fecaca;color:var(--danger);}
.btn.danger:hover{background:#fef2f2;}

.filebtn{position:relative; overflow:hidden;}
.filebtn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}

/* -----------------
   Cards
   ----------------- */

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px 12px;
  margin-bottom:14px;
}

.card-header{
  display:flex;
  align-items:center;        /* was baseline */
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  flex-wrap:wrap;            /* allows clean wrap on small widths */
}

.card-header h3{margin:0;font-size:14px;}

/* -----------------
   Status
   ----------------- */

.status{
  margin-top:10px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:13px;
}
.status.ok{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok);}
.status.err{border-color:#fecaca;background:#fef2f2;color:var(--danger);}

/* -----------------
   Tables
   ----------------- */

.table-wrap{
  max-height:300px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.table th,
.table td{
  padding:8px 8px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  background:#fff;
}
.table th{
  position:sticky;
  top:0;
  background:#f8fafc;
  z-index:1;
  font-size:12px;
  color:var(--muted);
}

.table td input{padding:8px 8px; border-radius:10px;}

/* Results table: center both directions */
#resultsTable th,
#resultsTable td{
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

/* -----------------
   Plots + metrics
   ----------------- */

.plot{height:380px;}

.trendline{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#f8fafc;
}

.metric-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 6px;
}
.metric{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  min-width:140px;
  background:#fff;
}
.metric .k{font-size:11px;color:var(--muted);}
.metric .v{font-size:14px;font-weight:600;margin-top:4px;}

.legend-note{color:var(--muted); font-size:12px; margin-top:8px;}

/* Cross-section header (W.S centered) */
.xsHeader{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
}

.xsHeaderMid{
  text-align:center;
  font-size:14px;
  white-space:nowrap;
}
.xsWSLabel{ opacity:0.75; margin-right:6px; }
.xsWSValue{ font-weight:600; }
.xsWSUnit{ opacity:0.75; margin-left:6px; }

.xsHeaderRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.qSelectHighlight{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#eaf2ff;
}

/* -----------------
   Paste geometry modal
   ----------------- */

.modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:999;
}
.modal.show{display:flex;}

.modal-dialog{
  width:min(720px, 96vw);
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
}

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.modal-title{font-weight:700; font-size:14px;}
.modal-sub{color:var(--muted); font-size:12px; margin-top:2px;}

textarea#pasteText{
  width:100%;
  min-height:240px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}


/* ===== UI alignment fixes (override) ===== */

/* card title + button row alignment */
.page .card .card-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.page .card .card-header h3{
  margin:0 !important;
  line-height:1.25 !important;
}

/* keep buttons nicely aligned even when wrapping */
.page .card .card-header .btnbar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.page .card .card-header .btnbar .btn{
  white-space:nowrap !important;
}

/* align the two-column input rows (fixes the uneven “Max search” vs “Stage tolerance” row) */
.page .row2,
.page .row3{
  align-items:end !important;
}

.page .row2 > label,
.page .row3 > label{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  height:100% !important;
}


/* Make the 2-column input grid less cramped */
.row2{
  grid-template-columns: 1fr 1fr !important;
  column-gap: 14px !important;
}

.lbl{ display:flex; flex-direction:column; gap:4px; }
.lbl-title{ white-space:nowrap; }

/* ---- Fix wrapping of 'Max search above thalweg (m)' and similar labels ---- */
.row2 > label,
.row3 > label{
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

/* Keep inputs aligned nicely under labels */
.row2,
.row3{
  align-items: end !important;
}

/* -----------------
   Manual details
   ----------------- */

details.card summary{cursor:pointer;}
.steps{padding-top:10px; font-size:13px;}
.steps ol{margin:0; padding-left:18px;}
.steps li{margin:8px 0;}
.steps ul{margin:6px 0 0 16px;}
.note{margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:12px; background:#f8fafc; color:var(--muted);}

.actions{justify-content:flex-start;}

footer.footer{
  margin-top:16px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* ---- Fix broken label wrapping (Method / Slope S0 / units etc.) ---- */
label,
.field label{
  white-space: nowrap !important;
}

label small,
.field label small{
  white-space: normal !important; /* allow help text to wrap */
}
/* Keep label title in one line, put hint on next line */
label .hint{
  display:block !important;     /* hint goes to next line */
  margin-top:4px !important;
  white-space:normal !important;
  font-size:12px;
  color:var(--muted);
}

/* Prevent the main label text from breaking */
label{
  white-space:nowrap !important;
}

/* But allow inputs to remain normal width */
label input,
label select,
label textarea{
  white-space:normal !important;
}


@media (max-width:1100px){
  .grid{grid-template-columns:1fr;}
}