/* Boss HQ demo: projects screen styles. Owned by the projects screen builder; shared classes live in demo.css. */
.pj .sec {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 12px;
}
.pj .pj-sech {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}
.jc {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--acc, var(--accent));
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
}
.jc:hover {
  border-color: var(--accent);
  border-left-color: var(--acc);
  box-shadow: var(--shadow);
}
.jc-top {
  padding: 15px 17px 13px;
  border-bottom: 1px solid var(--hair);
}
.jc-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.jc-addr {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.jc-mid {
  padding: 13px 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jc-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  min-width: 0;
}
.jc-key {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  width: 74px;
  flex-shrink: 0;
}
.jc-row .strong {
  font-weight: 600;
}
.jc-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.jc-bar .bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
}
.jc-bar .pct {
  font-size: 12px;
  color: var(--muted);
}
.calc-info {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--hair2);
  background: var(--card);
  color: var(--muted);
  font:
    italic 10.5px Georgia,
    serif;
  padding: 0;
  line-height: 1;
}
.jc-foot {
  margin-top: 0;
  padding: 11px 17px;
  border-top: 1px solid var(--hair);
  background: var(--sunk);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jc-foot .pill {
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 9px;
}
.jc-foot .jc-amt {
  margin-left: auto;
}
/* F10B4: a taller neighbor stretches the card, so the extra height goes to the flags panel at the bottom (the footer no longer floats, which left an empty block under Notes); a pipeline card has no flags and keeps its footer pinned */
.jc-prosp .jc-foot {
  margin-top: auto;
}
.jc-flags {
  flex: 1 1 auto;
  align-content: start;
  padding: 9px 17px 11px;
  background: var(--sunk);
  display: grid;
  gap: 6px;
  border-radius: 0 0 4px 4px;
}
.jc-fh {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.jc-n {
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
}
.jc-n.risk {
  background: var(--risk-bg);
  color: var(--risk);
}
.jc-flag {
  font-size: 11.5px;
  color: var(--muted);
  padding-left: 9px;
  border-left: 3px solid var(--warn);
}
.jc-flag.risk {
  border-left-color: var(--risk);
}
.jc-flag b {
  color: var(--text);
  margin-right: 5px;
}
.pj .grid2 {
  margin-bottom: 26px;
  align-items: start;
}
.pj-fold {
  margin: 0;
}
.pj-fh {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 14px;
}
.pj-chev {
  color: var(--muted);
  width: 12px;
}
.pj-fb {
  border-top: 1px solid var(--hair);
}
.pj-bl {
  display: block;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
  color: var(--text);
}
.pj-bl:last-child {
  border: 0;
}
.pj-arch {
  padding-bottom: 12px;
}
.pj-note {
  padding: 0 18px;
}
.pj-ar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 900px) {
  .jobs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.pj-kpis {
  margin-bottom: 24px;
}
.pj-kpis .kpi.warn .v {
  color: var(--warn);
}
.pj-kpis .kpi.risk .v {
  color: var(--risk);
}
.jc-note {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jc-ne {
  padding: 0 4px;
  min-height: 22px;
  margin-left: auto;
}
.jc-ne .ms {
  font-size: 14px;
}
.jc-flag {
  display: block;
  text-decoration: none;
  color: var(--muted);
}
a.jc-flag:hover {
  background: var(--hover, transparent);
}
.jc-foot .dl-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.jc-prosp {
  border-style: dashed;
  border-left-style: solid;
}
.pj-ta {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.pj-dr {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.pj-dr:last-of-type {
  border-bottom: 0;
}
.pj-dk {
  flex: 0 0 140px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
@media (max-width: 768px) {
  .pj-dr {
    flex-direction: column;
    gap: 2px;
  }
}
#jn-err {
  display: none;
}
#jn-err.show {
  display: block;
}
@media (max-width: 768px) {
  .pj .pj-sech .btn {
    min-height: 44px;
    padding: 0 16px;
  }
  .jc {
    min-height: 44px;
  }
  .jc-name,
  .jc-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* one label layout on every row: a fixed label column, the value beside it */
  .jc-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
  }
  .jc-ne {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    grid-column: 2;
    justify-self: end;
    margin: -8px -8px -8px 0;
  }
  .calc-info {
    position: relative;
    width: 22px;
    height: 22px;
  }
  .calc-info::after {
    content: '';
    position: absolute;
    inset: -12px;
  }
  .jc-foot {
    row-gap: 14px;
  }
  .jc-foot .pill {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    position: relative;
  }
  .jc-foot .pill::after {
    content: '';
    position: absolute;
    inset: -6px -2px;
  }
  .jc-foot .dl-pill {
    min-height: 44px;
    padding: 0 12px;
  }
  .jc-flag {
    padding: 12px 10px;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .jc-flags {
    gap: 8px;
  }
  .pj-fh {
    min-height: 44px;
  }
  .pj-bl,
  .pj-ar {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pj-ar .btn {
    min-height: 44px;
  }
  .pj-ar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
  }
  .pj-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pj-kpis .kpi:last-child {
    grid-column: 1 / -1;
  }
  .pj-kpis .v {
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .modal input,
  .modal textarea,
  .pj-ta,
  #pjNoteText {
    font-size: 16px;
    min-height: 44px;
  }
  .modal .sel {
    min-height: 44px;
    width: 100%;
  }
  .modal .foot .btn,
  .modal .modal-foot .btn {
    min-height: 44px;
  }
}
@media (max-width: 768px) {
  .pj-kpis {
    gap: 8px;
    margin-bottom: 18px;
  }
  .pj-kpis .kpi {
    padding: 10px 14px;
  }
  .pj-kpis .s {
    display: none;
  }
}

@media (pointer: coarse) and (min-width: 769px) {
  .pj-ar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn.jc-ne {
    min-width: 44px;
    min-height: 44px;
  }
}