/* app/pages/upload.css — Upload & Quote / Checkout */

:root { --bg:#0f172a; --card:#111827; --muted:#94a3b8; --accent:#22c55e; --btn:#2563eb; --btn2:#10b981; --err:#ef4444; --line:#1f2937; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(180deg,#0b1023,#0f172a); color:#e5e7eb; }
main { display:grid; place-items:center; padding:24px; }

/* Stepper */
.stepper{max-width:1080px;margin:12px auto 0;padding:0 16px;display:flex;gap:8px;align-items:center;color:#94a3b8;font-size:13px}
.stepper .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-weight:800;background:#0b1220;border:1px solid var(--line)}
.stepper .on{background:linear-gradient(135deg,#22c55e,#10b981);color:#052e1b;border-color:transparent}

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* Half–half checkout columns */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.two .card{max-width:none;}                 /* allow cards to fill their column */
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid .full{grid-column:1/-1}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Cards */
.card { width:100%; max-width:720px; background:linear-gradient(180deg,#0b1220,#0a0f1c); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.sub{color:#94a3b8;font-size:14px;margin:0 0 16px}

/* Form bits */
label{display:block;font-size:13px;color:#9ca3af;margin:10px 0 6px}
input[type="file"],select,input[type="range"]{width:100%;background:#0b1220;border:1px solid var(--line);color:#e5e7eb;border-radius:10px;padding:10px 12px}
input[type="range"]{padding:0;height:36px}

/* Buttons */
.btns{display:flex;gap:10px;margin-top:14px}
button{appearance:none;border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .04s ease,opacity .2s ease}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:#2563eb;color:#fff}
.success{background:#10b981;color:#062a1f}
.pill{background:#0b1220;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:#cbd5e1; white-space:nowrap; } /* prevent pill wrap */

/* Quote area */
.price{margin-top:16px;padding:14px;border:1px dashed #334155;border-radius:12px;background:rgba(16,24,40,.25)}
.muted{color:#94a3b8;font-size:13px}
.ok{color:#22c55e;font-weight:800}

/* Range helper */
.grid2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}

/* Upload progress */
.progress{ display:none; position:relative; height:10px; border-radius:999px; background:#0b1220; border:1px solid var(--line); overflow:hidden; margin-top:10px;}
.progress .bar{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#22c55e,#10b981); }
.progress .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:#052e1b; font-weight:700; }

/* Viewer */
.viewer{ position:relative; width:100%; height:360px; background:#0b1220; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.viewer .hint{ position:absolute; right:10px; bottom:8px; font-size:12px; color:#9ca3af; background:rgba(2,6,16,.5); border:1px solid var(--line); padding:4px 8px; border-radius:999px; }
.viewer .fileBadge{ position:absolute; left:10px; top:10px; font-size:12px; color:#cbd5e1; background:#0b1220; border:1px solid var(--line); padding:4px 8px; border-radius:999px; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width: 860px){ .viewer{ height:440px; } }
.viewer canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.viewer .reset { position:absolute; left:10px; bottom:8px; font-size:12px; color:#cbd5e1; background:rgba(2,6,16,.5); border:1px solid var(--line); padding:4px 8px; border-radius:999px; cursor:pointer; }

/* Checkout step tweaks */
[hidden]{display:none !important;}
main > section { margin: 12px 0 18px; }

/* Make .full items span both columns inside .row */
.row .full { grid-column: 1 / -1; }

.errline { color:#ef9a9a; }
.errline.flash { outline:2px solid #ef4444; border-radius:8px; }

/* CNC feasibility banner */
.notice{
  background: rgba(16,24,40,.35);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: #e5e7eb;
}

/* Mobile stacks */
@media (max-width: 680px){
  .row{ grid-template-columns: 1fr; }
}

/* Files list */
.files-wrap .file-row{
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
  flex-wrap: nowrap;                    /* desktop: single line */
  width: 100%;
}

/* Override the global width:100% just for file inputs in this row */
.files-wrap .file-row input[type="file"]{
  width: auto;                          /* <-- key fix */
  flex: 1 1 220px;                      /* grow/shrink to fit alongside buttons */
  min-width: 0;                         /* allow shrinking inside flex row */
  max-width: 100%;
}

.files-wrap .file-row .fname{
  display: none;                        /* hidden on desktop */
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.files-wrap .remove{
  border:1px solid var(--line); background:#0b1220; color:#94a3b8;
  border-radius:8px; padding:6px 10px; cursor:pointer;
}
.btn.mini{ padding:6px 10px; font-size:12px; }

/* Mobile layout */
@media (max-width: 680px){
  .files-wrap .file-row{ flex-wrap: wrap; }
  .files-wrap .file-row input[type="file"]{
    flex-basis: 100%;
    width: 100%;                        /* mobile: full-width input on its own line */
  }
  .files-wrap .file-row .fname.on{
    display:block;                      /* show filename under input on mobile */
    flex: 1 1 100%;
    margin-top: 2px;
  }
  .files-wrap .preview, .files-wrap .remove{ margin-top: 6px; }
}

/* ---- No-wrap helpers for summary (prevents “123.4 g” splitting) ---- */
.nowrap{ white-space:nowrap !important; }
#summary .nowrap, #summary b, #summary strong { white-space:nowrap; }
/* If your summary shows metrics as small badges, this ensures they stay on one line */
#summary .pill, #summary .metric, #summary .value { white-space:nowrap; display:inline-block; }

/* Show ALL text-like inputs inside cards (dark + light) */
.card input:not([type="file"]):not([type="range"]):not([type="hidden"]),
.card textarea{
  width:100%;
  background:#0b1220;
  border:1px solid var(--line);
  color:#e5e7eb;
  border-radius:10px;
  padding:10px 12px;
}

/* Keep selects light in light theme (override upload.css’ dark select) */
body.lp .card select{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#0f172a;
}

/* Keep text inputs light in light theme as well */
body.lp .card input:not([type="file"]):not([type="range"]):not([type="hidden"]),
body.lp .card textarea{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#0f172a;
}

/* Prevent wrapping + align numeric columns in summary */
#summary .right { white-space: nowrap; text-align: right; }

/* Optional: tidy table look + mobile-friendly borders */
#summary table.mini { width:100%; border-collapse: collapse; }
#summary table.mini th, #summary table.mini td { padding:6px 8px; border-bottom:1px solid #334155; }
body.lp #summary table.mini th, body.lp #summary table.mini td { border-bottom-color:#e5e7eb; }

/* Qty input width in the mini table */
#summary td.qty input { width:60px; text-align:center; }

/* --- Compact tip lines (fileNote, fileNote2, note) --- */
#fileNote,
#fileNote2,
#note{
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  background: rgba(16,24,40,.20);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px 8px 28px;      /* left pad for icon */
  margin-top: 8px !important;
  position: relative;
}

/* tiny “i” dot */
#fileNote::before,
#fileNote2::before,
#note::before{
  content: "i";
  position: absolute;
  left: 10px; top: 8px;
  width: 14px; height: 14px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 11px;
  border-radius: 999px;
  background: #0b1220;
  color: #93c5fd;
  border: 1px solid var(--line);
}

/* tighten stack when both tips show */
#fileNote + #fileNote2{ margin-top: 6px !important; }

/* keep the whole thing minimal on very small screens */
@media (max-width: 560px){
  #fileNote, #fileNote2, #note{ font-size: 11px; padding: 7px 9px 7px 26px; }
}