/* FlowCAD3D — PCF export dialog and hydraulic check dialog (js/ui/pcf-dialog.js, js/ui/hydraulics-dialog.js).
   Uses the theme variables of css/app.css only, so the light and dark themes both work. */

/* ---------- shared ---------- */
.pcfhyd h4 { margin: 12px 0 6px; font-size: 13px; color: var(--fg2); }
.pcfhyd .note.ok-note { border-left-color: var(--ok); }

/* ---------- PCF ---------- */
.pcf-dlg .pcf-selrow { margin-bottom: 6px; }
.pcf-dlg .pcf-lines { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow: auto; padding-right: 2px; }
.pcf-dlg .pcf-line { align-items: center; }
.pcf-dlg .pcf-line input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 0; }
.pcf-dlg .pcf-line .swatch { margin-top: 0; }
.pcf-dlg .pcf-count { margin: 6px 0 2px; }
.pcf-dlg .pcf-opts .gb { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pcf-dlg .pcf-opts .field:first-child { grid-column: 1 / -1; }
.pcf-dlg .pcf-opts .field:has(input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.pcf-dlg .pcf-opts .field:has(input[type="checkbox"]) label { margin: 0; cursor: pointer; }
.pcf-dlg .pcf-warns { margin: 4px 0 8px 18px; padding: 0; font-size: 13px; color: var(--fg2); }
.pcf-dlg .pcf-warns li { margin: 2px 0; }
.pcf-dlg .pcf-pre { max-height: 40vh; overflow: auto; margin: 6px 0 0; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--line); border-radius: 6px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); white-space: pre; user-select: text; -webkit-user-select: text; }

/* ---------- hydraulics ---------- */
.modal.hyd-modal { width: min(1320px, 100%); }
.hyd-dlg .hyd-disc { margin-top: 0; }
.hyd-dlg .hyd-method { margin: 4px 0 8px; }
.hyd-dlg .hyd-method summary { cursor: pointer; padding: 4px 0; color: var(--fg2); }
.hyd-dlg .hyd-method p { margin: 4px 0; }
.hyd-dlg .hyd-bar { margin: 6px 0; }
.hyd-dlg .hyd-wrap { max-height: 46vh; margin-top: 6px; }
.hyd-dlg .hyd-tbl th { white-space: normal; vertical-align: bottom; min-width: 44px; }
.hyd-dlg .hyd-tbl th, .hyd-dlg .hyd-tbl td { padding: 5px 6px; }
.hyd-dlg .hyd-tbl td { vertical-align: middle; white-space: nowrap; }
.hyd-dlg .hyd-tbl tr.sel td { background: var(--accentbg); }
.hyd-dlg .hyd-tbl .hyd-num { width: 78px; min-height: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.hyd-dlg .hyd-tbl .hyd-sel { width: 150px; min-height: 32px; }
.hyd-dlg .hyd-tbl .hyd-total { font-weight: 600; }
.hyd-dlg .hyd-tbl .hyd-bad { color: var(--err); font-weight: 600; }
.hyd-dlg .hyd-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.hyd-dlg .hyd-acts { flex-wrap: nowrap; }
.hyd-dlg .hyd-st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--bg4); color: var(--fg2); }
.hyd-dlg .hyd-st.ok { background: var(--ok); color: #fff; }
.hyd-dlg .hyd-st.warn { background: var(--warn); color: #111; }
.hyd-dlg .hyd-st.nopath { background: var(--err); color: #fff; }
.hyd-dlg .hyd-det { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
.hyd-dlg .hyd-det h3 { margin: 0 0 6px; font-size: 16px; }
.hyd-dlg .hyd-inputs { margin-bottom: 6px; }
.hyd-dlg .hyd-warns, .hyd-dlg .hyd-paths { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.hyd-dlg .hyd-warns .li { cursor: default; align-items: center; }
.hyd-dlg .hyd-warns .li.click { cursor: pointer; }
.hyd-dlg .hyd-det .tblwrap { max-height: 40vh; margin-top: 6px; }
.hyd-dlg .hyd-limits { margin-top: 12px; }
.hyd-dlg .hyd-limits .gb { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px; }
.hyd-dlg .hyd-pulse { box-shadow: 0 0 0 3px var(--accentbg); }
.hyd-dlg .hyd-stale { margin: 4px 0; }

@media (max-width: 700px) {
  .pcf-dlg .pcf-opts .gb { grid-template-columns: 1fr; }
  .hyd-dlg .hyd-wrap { max-height: none; }
}

/* ---------- tablet / phone: touch targets of at least 44 px ---------- */
body.mode-touch .pcf-dlg .pcf-line input[type="checkbox"] { width: 26px; height: 26px; }
body.mode-touch .pcf-dlg .pcf-opts .field:has(input[type="checkbox"]) { min-height: 48px; }
body.mode-touch .hyd-dlg .hyd-tbl .hyd-num, body.mode-touch .hyd-dlg .hyd-tbl .hyd-sel { min-height: 44px; }
body.mode-touch .hyd-dlg .hyd-acts .btn, body.mode-touch .pcfhyd .btn.small { min-height: 44px; min-width: 44px; }
body.mode-touch .hyd-dlg .hyd-method summary { min-height: 44px; line-height: 20px; padding: 12px 0; box-sizing: border-box; }
body.mode-touch .hyd-dlg .hyd-tbl td { padding-top: 4px; padding-bottom: 4px; }

/* ---------- PCF import (js/ui/pcf-import-dialog.js) ---------- */
.modal.pcfi-modal { width: min(1100px, 100%); }
.pcfi-dlg .pcfi-info { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 4px 0 10px; font-size: 13px; }
.pcfi-dlg .pcfi-info dt { color: var(--fg3); }
.pcfi-dlg .pcfi-info dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.pcfi-dlg .pcfi-wrap { max-height: 42vh; overflow: auto; }
.pcfi-dlg .pcfi-tbl td { vertical-align: top; }
.pcfi-dlg .pcfi-tbl select.inp { min-width: 9em; max-width: 100%; }
.pcfi-dlg .pcfi-specfile { margin-top: 6px; }
.pcfi-dlg .pcfi-others h4, .pcfi-report h4 { margin: 12px 0 6px; font-size: 13px; color: var(--fg2); }
.pcfi-dlg .pcfi-other { align-items: center; gap: 10px; margin: 4px 0; }
.pcfi-report .pcfi-check.ok { border-left-color: var(--ok); }
.pcfi-report .pcfi-list { margin: 0 0 4px 18px; padding: 0; font-size: 13px; color: var(--fg); }
.pcfi-report .pcfi-list li { margin: 3px 0; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.pcfi-report .pcfi-meta { white-space: nowrap; }
.pcfi-report .pcfi-g-unsupported h4 { color: var(--ban-warn-fg); }