/* ============================================================
   Just Pitch — Approval workflow styles
   ============================================================ */

/* ===== Panel (strip under the topbar) ===== */
.apr-panel {
  background: #FFF8EA;
  border: 1px solid #F2D88A;
  border-top: 3px solid #C99B1E;
  padding: 12px 18px;
  margin: 0 16px 12px;
  border-radius: 8px;
}
.apr-panel.s-approved {
  background: rgba(75, 181, 126, .08);
  border-color: rgba(75, 181, 126, .4);
  border-top-color: #4BB57E;
}
.apr-panel.s-changes_requested {
  background: rgba(216, 106, 96, .07);
  border-color: rgba(216, 106, 96, .35);
  border-top-color: #D86A60;
}
.apr-panel.s-draft, .apr-panel.s-sent {
  background: var(--jr-gray-50);
  border-color: var(--jr-gray-200);
  border-top-color: var(--jr-gray-400);
}

.apr-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.apr-panel-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
}
.apr-state-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C99B1E;
  flex-shrink: 0;
}
.apr-state-dot.s-approved { background: #4BB57E; }
.apr-state-dot.s-changes_requested { background: #D86A60; }
.apr-state-dot.s-draft { background: #9DA8B3; }
.apr-state-dot.s-pending { background: #C99B1E; animation: aprPulse 1.6s infinite ease-in-out; }
@keyframes aprPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 155, 30, .55); }
  50% { box-shadow: 0 0 0 6px rgba(201, 155, 30, 0); }
}
.apr-state-label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--jr-blue-900);
  letter-spacing: -.005em;
}
.apr-state-sub {
  font-size: 12.5px;
  color: var(--jr-gray-700);
  margin-top: 2px;
}
.apr-panel-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.apr-btn-primary, .apr-btn-ghost, .apr-btn-danger {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s var(--ease-std);
}
.apr-btn-sm { padding: 6px 12px; font-size: 12px; }
.apr-btn-primary { background: var(--jr-blue-700); color: #fff; }
.apr-btn-primary:hover:not(:disabled) { background: var(--jr-blue-900); }
.apr-btn-primary.is-danger { background: #B0473D; }
.apr-btn-primary.is-danger:hover:not(:disabled) { background: #7F1D1D; }
.apr-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.apr-btn-ghost { background: transparent; color: var(--jr-gray-700); border-color: var(--jr-gray-300); }
.apr-btn-ghost:hover { background: var(--jr-gray-100); }
.apr-btn-danger { background: #fff; color: #B0473D; border-color: rgba(216, 106, 96, .4); }
.apr-btn-danger:hover { background: #FFE9E5; }

/* ===== Audit trail (collapsible) ===== */
.apr-history { margin-top: 10px; }
.apr-history summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--jr-gray-600);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.apr-history summary:hover { color: var(--jr-blue-700); }
.apr-history ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apr-evt {
  padding: 6px 10px;
  background: rgba(255,255,255,.55);
  border-radius: 5px;
  font-size: 12.5px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: baseline;
  color: var(--jr-gray-800);
}
.apr-evt-actor { font-weight: 700; color: var(--jr-blue-900); }
.apr-evt-action { color: var(--jr-gray-700); }
.apr-evt-time { font-size: 11px; color: var(--jr-gray-500); font-variant-numeric: tabular-nums; }
.apr-evt-note {
  grid-column: 1 / -1;
  color: var(--jr-gray-700);
  font-style: italic;
  margin-top: 3px;
  padding-left: 8px;
  border-left: 2px solid var(--jr-gray-300);
}
.apr-evt-approved { background: rgba(75, 181, 126, .1); }
.apr-evt-changes_requested { background: rgba(216, 106, 96, .08); }

/* ===== Modal ===== */
.apr-modal {
  position: fixed; inset: 0;
  background: rgba(15, 40, 80, .55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 250;
  font-family: var(--font-sans);
}
.apr-body {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(8, 30, 60, .4);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.apr-body.apr-body-narrow { max-width: 460px; }
.apr-head {
  padding: 22px 26px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--jr-gray-200);
  background: linear-gradient(180deg, #FAFCFE 0%, #fff 100%);
}
.apr-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--jr-gray-500);
  margin-bottom: 4px;
}
.apr-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -.01em;
  color: var(--jr-blue-900);
  line-height: 1.1;
}
.apr-sub {
  font-size: 13px;
  color: var(--jr-gray-700);
  line-height: 1.5;
  max-width: 480px;
}
.apr-close {
  background: transparent;
  border: none;
  color: var(--jr-gray-500);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.apr-close:hover { background: var(--jr-gray-100); color: var(--jr-blue-900); }

.apr-content {
  padding: 20px 26px;
  overflow-y: auto;
}
.apr-section-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--jr-gray-600);
  margin-bottom: 8px;
}

.apr-empty {
  padding: 22px 18px;
  background: var(--jr-gray-50);
  border: 1px dashed var(--jr-gray-300);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--jr-gray-700);
  line-height: 1.55;
}
.apr-empty strong { display: block; color: var(--jr-blue-900); margin-bottom: 4px; }
.apr-empty p { margin: 0; }
.apr-empty em { font-style: normal; font-weight: 700; color: var(--jr-blue); }

.apr-approvers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apr-approver {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--jr-gray-50);
  border: 1px solid var(--jr-gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.apr-approver:hover { background: #F1F6FA; }
.apr-approver.is-selected {
  background: var(--jr-blue-50);
  border-color: var(--jr-blue-300);
}
.apr-approver input { margin: 0; }
.apr-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--jr-blue-100);
  color: var(--jr-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.apr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.apr-approver-meta { flex: 1; min-width: 0; }
.apr-approver-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--jr-blue-900);
}
.apr-approver-role {
  font-size: 11.5px;
  color: var(--jr-gray-600);
}

.apr-note {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--jr-gray-300);
  border-radius: 6px;
  background: #fff;
  color: var(--jr-gray-900);
  resize: vertical;
}
.apr-note:focus {
  outline: none;
  border-color: var(--jr-blue);
  box-shadow: 0 0 0 3px rgba(34, 90, 133, .12);
}

.apr-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--jr-gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--jr-gray-50);
}

/* ===== Status pill: new statuses on the topbar dropdown ===== */
.status-menu-btn.s-pending_review .status-dot,
.status-card.s-pending_review .pill { background: #C99B1E; }
.status-menu-btn.s-changes_requested .status-dot,
.status-card.s-changes_requested .pill { background: #D86A60; }
.status-menu-btn.s-approved .status-dot,
.status-card.s-approved .pill { background: #4BB57E; }

/* ===== Roster approver chip ===== */
.lv-roster-card .lv-roster-approver-chip {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(75, 181, 126, .92);
  color: #fff;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  backdrop-filter: blur(4px);
}