:root{
  --bg: #000;
  --white: #fff;
  --muted: rgba(255,255,255,0.75);
  --panel: rgba(255,255,255,0.06);
  --panelBorder: rgba(255,255,255,0.10);
  --resultsBg: rgba(255,255,255,0.10);
  --green: #20c05c;
  --blue: #1e7cff;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--white);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Header */
.header{
  position:relative;
  padding: 2px 20px 6px; /* tighter: minimal top + small bottom */
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.inrock-logo{
  display: none;
}

.pt-logo{
  width: min(1100px, 94vw);
  height: auto;
  margin: 0 auto -6px; /* pull logo down slightly & reduce gap below */
}

/* Main layout */
.layout{
  position:relative;
  width:min(1200px, 95vw);
  margin: 0 auto 0; /* no extra gap between header and panels */
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 18px;
  padding-bottom: 60px;
}

.panel{
  background: var(--panel);
  border: 1px solid var(--panelBorder);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(6px);
  min-height: 420px;
}

/* Buttons */
.btn{
  width:100%;
  padding: 14px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
  cursor:pointer;
}

.btn-green{ background: var(--green); color:#000; }
.btn-blue{ background: var(--blue); color:#fff; }

.btn-ghost{
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.22);
  opacity:0.85;
}

.btn:disabled{
  cursor:not-allowed;
  opacity:0.45;
}

/* Blocks */
.block{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.block-title{
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 10px;
  opacity:0.95;
}

/* Inputs */
.select, .input{
  width:100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.65);
  color: var(--white);
  outline:none;
}

.search{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Results */
.results{
  margin-top: 14px;
  background: var(--resultsBg);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  min-height: 300px;
}

.results-title{
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:10px;
}

.results-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 320px;
  overflow:auto;
  padding-right: 6px;
}

.result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
}

.result-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.result-client{ font-weight:800; }
.result-sub{ font-size:12px; opacity:0.75; }

.badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}

.hint{
  font-size: 12px;
  opacity:0.7;
  margin-top:8px;
}

.btn-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top:10px;
}

.btn-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Footer */
.footer{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 10px 14px;
  background: rgba(0,0,0,0.85);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  opacity:0.9;
}

.cartman{
  width:18px;
  height:18px;
  border-radius: 999px;
  animation: pulse 2s infinite;
}

.dot{ opacity:0.5; }

@keyframes pulse{
  0%{ transform:scale(1); opacity:0.8; }
  50%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1); opacity:0.8; }
}

/* =============================
   Project Workspace (projectView)
   ============================= */

/* Hide helper */
.hidden{ display:none !important; }

/* Workspace header should be a row (home header stays centered/stacked) */
#projectView .header{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 8px 20px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
}

#projectView .workspace-title{
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Small logo in workspace header */
#projectView .workspace-logo{
  height: 42px;
  width: auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}

#projectView .workspace-logo:hover{
  opacity: 1;
}

/* 2-column workspace layout */
.layout.workspace{
  grid-template-columns: 1fr 380px;
  gap: 18px;
}

/* Panels in workspace should be taller */
.layout.workspace .panel{
  min-height: 520px;
}

/* Card styling (same sleek look) */
.card{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px;
}

.card-title{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.92;
}

/* Form grid inside workspace cards */
.form-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
}

@media (max-width: 1100px){
  .form-grid{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

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

/* Wider fields */
.input.wide{
  grid-column: 1 / -1;
}

/* Notes box */
.notes{
  width: 100%;
  margin-top: 12px;
  min-height: 160px;
  max-height: 320px;
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.65);
  color: var(--white);
  outline: none;
  line-height: 1.35;
}

.notes::placeholder{ opacity: 0.55; }

.notes-counter{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
  text-align: right;
}

/* Formation stack */
.formation-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Formation Preview */
.formation-preview{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.formation-preview-title{
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}

/* Vertical color bar stack */
.formation-bars{
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  min-height: 140px;
}

.formation-bar{
  height: 18px;
  width: 100%;
  border-radius: 3px;
}

/* Metrics row */
.formation-metrics{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.formation-metric{
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.formation-metric-label{
  font-size: 11px;
  opacity: 0.65;
  margin-bottom: 2px;
}

.formation-metric-value{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Make selects look consistent */
.select.formation{
  background: rgba(0,0,0,0.65);
}

/* Responsive */
@media (max-width: 980px){
  .layout.workspace{
    grid-template-columns: 1fr;
  }
  .form-grid{
    grid-template-columns: 1fr;
  }
}

/* =============================
   Workspace upgrades (new markup helpers)
   ============================= */

/* If you use a dedicated workspace header row */
.workspace-header{
  width: min(1200px, 95vw);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  border-radius: 12px;
}

.workspace-logo-large{
  height: 58px;
  opacity: 0.95;
}

/* Top section layout for job fields + crossing geometry card */
.ws-top{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
}

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

/* Mini card used for crossing geometry / small widgets */
.mini-card{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px;
}

.mini-card-title{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 10px;
}

/* Formation header row (title + Clear button) */
.formation-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.btn-small{
  width: auto;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.8px;
}

/* Clear-all button (formations) */
.btn-clear-small{
  width: auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0.7px;
}

/* Make readonly inputs look intentional (optional class if app.js adds it later) */
.input.readonly,
.input[readonly],
.input:disabled{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
}

/* Slight glow on primary info card header to add energy without being loud */
#projectView .card-title{
  text-shadow: 0 0 10px rgba(255,255,255,0.10);
}

/* =============================
   SHINY UI PASS (workspace polish)
   ============================= */

/* Give panels/cards a cleaner "glass + edge" look */
.panel,
.card,
.mini-card,
.results,
.result-row{
  position: relative;
  overflow: hidden;
}

.panel,
.card,
.mini-card,
.results{
  /* Gradient border without mask-composite */
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)) padding-box,
    linear-gradient(135deg, rgba(255,70,70,0.38), rgba(255,255,255,0.18), rgba(255,255,255,0.08)) border-box;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* soft top sheen */
.panel::after,
.card::after,
.mini-card::after,
.results::after{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -40px;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.14), rgba(255,255,255,0.00));
  opacity: 0.55;
}

/* Inputs: slightly shinier, keep your dark look */
.input,
.select,
.notes{
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.input:focus,
.select:focus,
.notes:focus{
  border-color: rgba(255,80,80,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 3px rgba(255,80,80,0.12);
}

/* Make the Formation "Clear all" button smaller and less loud */
.formation-header .btn,
.formation-header .btn-small{
  width: auto;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0.7px;
}

/* Hide helper/explainer copy until hover (keeps it clean)
   NOTE: Formation Preview should ALWAYS be visible (no hover). */
.mini-card,
.card{
  --helpOpacity: 0;
}

.mini-card:hover,
.card:hover{
  --helpOpacity: 1;
}

/* Formation Preview: ALWAYS visible */
.formation-preview{
  --helpOpacity: 1;
}

/* Only fade dedicated helper elements (do NOT fade all divs/p tags) */
.mini-card .hint,
.mini-card .help,
.mini-card .helper-text,
.mini-card .subtext{
  opacity: var(--helpOpacity);
  transition: opacity 180ms ease;
}

/* Keep titles visible; only the paragraph/help fades */
.formation-preview-title,
.mini-card-title,
.card-title{
  opacity: 0.92;
}

/* Workspace: prevent the left info area from feeling squished */
.layout.workspace .panel{
  padding: 18px;
}

/* Prefer a grid layout when the markup provides a wrapper */
.project-info-layout{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

.project-info-layout .mini-card{
  width: auto;
  margin: 0;
}

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

/* Fallback: if Crossing Geometry is still inside the main card without a wrapper,
   constrain it so it doesn’t make everything feel squished. */
#projectView .card .mini-card{
  max-width: 360px;
}

@media (max-width: 1200px){
  #projectView .card .mini-card{
    float: none;
    width: auto;
    margin-left: 0;
    margin-top: 12px;
  }
}

/* =============================
   Start Project placement (keep UI sleek)
   Ensures Start Project sits to the RIGHT of Crossing Geometry
   ============================= */

/* In the Project Information card, the ws-actions row should be horizontal */
#projectView .ws-actions{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 10px;
}

/* Crossing Geometry column */
#projectView .ws-actions .crossing-geometry{
  flex: 1;
  min-width: 260px;
}

#projectView .ws-actions .crossing-btn{
  width: 100%;
  height: 44px;
}

/* Start Project button to the right */
#projectView .ws-actions .start-project{
  flex: 0 0 auto;
}

#projectView .ws-actions .btn-start-project{
  width: auto;
  min-width: 180px;
  height: 44px;
  padding: 0 16px;
}

/* Responsive: stack on small screens */

@media (max-width: 980px){
  #projectView .ws-actions{
    flex-direction: column;
    align-items: stretch;
  }
  #projectView .ws-actions .btn-start-project{
    width: 100%;
  }
}

/* =============================
   Modal: Start Project (centered, sleek)
   ============================= */

/* Support a few possible modal wrappers/IDs without needing markup changes */
#startProjectModal,
.start-project-modal,
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(6px);
}

/* If your app hides modals by toggling .hidden, keep it fully removed */
#startProjectModal.hidden,
.start-project-modal.hidden,
.modal.hidden{
  display: none !important;
}

/* Common “dialog/content” containers */
#startProjectModal .modal-content,
#startProjectModal .modal-dialog,
.start-project-modal .modal-content,
.start-project-modal .modal-dialog,
.modal .modal-content,
.modal .modal-dialog{
  width: min(560px, 92vw);
  max-height: min(70vh, 640px);
  overflow: auto;
  border-radius: 14px;
  padding: 14px;

  /* Glass + edge to match the rest of the UI */
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)) padding-box,
    linear-gradient(135deg, rgba(255,70,70,0.38), rgba(255,255,255,0.18), rgba(255,255,255,0.08)) border-box;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.70),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Title row (if present) */
#startProjectModal .modal-header,
.start-project-modal .modal-header,
.modal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

#startProjectModal .modal-title,
.start-project-modal .modal-title,
.modal .modal-title{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Close button (X) */
#startProjectModal .modal-close,
.start-project-modal .modal-close,
.modal .modal-close{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

#startProjectModal .modal-close:hover,
.start-project-modal .modal-close:hover,
.modal .modal-close:hover{
  border-color: rgba(255,80,80,0.55);
  box-shadow: 0 0 0 3px rgba(255,80,80,0.12);
}

/* Body */
#startProjectModal .modal-body,
.start-project-modal .modal-body,
.modal .modal-body{
  padding: 12px 6px 6px;
}

/* Actions: Pilot / Ream buttons (if present) */
#startProjectModal .modal-actions,
.start-project-modal .modal-actions,
.modal .modal-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 520px){
  #startProjectModal .modal-actions,
  .start-project-modal .modal-actions,
  .modal .modal-actions{
    grid-template-columns: 1fr;
  }
}

/* Safety override: if any old modal styling tried to pin to bottom, force centering */
#startProjectModal,
.start-project-modal,
.modal{
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}