:root {
  --ap-green:       #1f7ff5;
  --ap-blue-light: #266ff5;
  --ap-green-tint:  #f0f7f0;
  --ap-green-mid:   #c0dbc0;
  --ap-red:         #b83230;
  --ap-red-tint:    #fdf1f0;
  --ap-orange:      #c96d00;
  --ap-orange-tint: #fef7ed;
  --ap-slate:       #3d4f5c;
  --ap-text:        #1c2b1c;
  --ap-muted:       #687a68;
  --ap-border:      #dce8dc;
  --ap-shadow-sm:   0 2px 8px rgba(20,50,20,0.07);
  --ap-shadow-md:   0 4px 20px rgba(20,50,20,0.10);
  --ap-radius:      12px;
}


.ap-page-header-left  { display: flex; flex-direction: column; gap: 0.25rem; }
.ap-page-header-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.02em; }
.ap-page-header-meta  {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.74rem; color: rgba(255,255,255,0.78);
}

.ap-meta-chip.abandoned { background: rgba(184,50,48,0.5); border-color: rgba(184,50,48,0.7); }
.ap-page-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.ap-btn-download {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 0.4rem 0.9rem;
  font-size: 0.78rem; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.ap-btn-download:hover { background: rgba(255,255,255,0.26); color: #fff; }

#borderedTabJustified .nav-link {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ap-muted);
  border: none; border-bottom: 3px solid transparent;
  border-radius: 0; padding: 0.65rem 0.9rem 0.55rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#borderedTabJustified .nav-link:hover { color: var(--ap-green); background: var(--ap-green-tint); }
#borderedTabJustified .nav-link.active {
  color: var(--ap-green); border-bottom-color: var(--ap-green);
  background: var(--ap-green-tint);
}
#borderedTabJustified .badge-success { background: var(--ap-green); font-size: 0.62rem; }
#borderedTabJustified .badge-danger  { background: var(--ap-red);   font-size: 0.62rem; }
/* NEXT USER ACTION button in tab row */
#final_tab {
  margin: auto 0 2px auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--ap-green); color: #fff !important; border: none;
  border-radius: 8px; padding: 0.42rem 0.9rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(46,107,46,0.28);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
#final_tab:hover  { background: var(--ap-green-light); box-shadow: 0 4px 14px rgba(46,107,46,0.35); transform: translateY(-1px); }
#final_tab.active { background: #1e4d1e; }


.ap-action-bar .btn { font-size: 0.8rem; font-weight: 700; border-radius: 8px; padding: 0.45rem 1rem; }
.ap-action-bar .btn-outline-dark    { border-color: var(--ap-slate); color: var(--ap-slate); }
.ap-action-bar .btn-outline-dark:hover    { background: var(--ap-slate); color: #fff; }
.ap-action-bar .btn-outline-danger:hover  { background: var(--ap-red);   color: #fff; }
.ap-action-bar .btn-outline-success:hover { background: var(--ap-green); color: #fff; }
.ap-action-bar .btn-spacer { margin-left: auto; }

#tabs-final { padding-top: 0; }

/* ── Submit Panel ───────────────────────────────────────────── */
.submit-panel {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-top: 4px solid var(--ap-green);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-md);
  padding: 1.5rem 1.5rem 1.35rem;
  margin: 1.25rem auto 0;
}

.submit-panel__header {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding-bottom: 1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--ap-border);
}
.submit-panel__header-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(46,107,46,0.10); border: 1.5px solid rgba(46,107,46,0.20);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--ap-green);
}
.submit-panel__title {
  font-size: 1.05rem; font-weight: 800; color: var(--ap-text); line-height: 1.2; margin: 0 0 0.25rem;
}
.submit-panel__subtitle {
  font-size: 0.76rem; color: var(--ap-muted); font-weight: 500; line-height: 1.4;
}

/* Warnings */
.submit-panel__warnings { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.35rem; }
.submit-callout {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.75rem 1rem; border-radius: 10px;
  font-size: 0.83rem; line-height: 1.45; font-weight: 500;
}
.submit-callout i { flex-shrink: 0; margin-top: 0.12rem; font-size: 0.9rem; }
.submit-callout--orange { background: var(--ap-orange-tint); border: 1px solid #f5d9a8; color: #7a4a00; }
.submit-callout--orange i { color: var(--ap-orange); }
.submit-callout--red    { background: var(--ap-red-tint);    border: 1px solid #f5c1be; color: #7a1a18; }
.submit-callout--red i  { color: var(--ap-red); }

/* Confirmation checkbox */
.submit-confirm-label {
  display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;
  padding: 0.9rem 1rem; border: 1.5px solid var(--ap-border);
  border-radius: 10px; background: #f8fbf8; margin-bottom: 1.25rem;
  transition: border-color 0.15s, background 0.15s;
}
.submit-confirm-label:hover { border-color: var(--ap-green); background: var(--ap-green-tint); }
.submit-confirm-box   { position: relative; flex-shrink: 0; margin-top: 0.1rem; }
.submit-confirm-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; border: 2px solid var(--ap-green-mid);
  border-radius: 6px; background: #fff; cursor: pointer; display: block;
  transition: border-color 0.15s, background 0.15s;
}
.submit-confirm-checkbox:checked { background: var(--ap-green); border-color: var(--ap-green); }
.submit-confirm-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 0.72rem; pointer-events: none;
  opacity: 0; transition: opacity 0.1s;
}
.submit-confirm-checkbox:checked ~ .submit-confirm-mark { opacity: 1; }
.submit-confirm-text { font-size: 0.87rem; font-weight: 600; color: var(--ap-text); line-height: 1.45; }

/* Submit button */
.submit-panel__actions { display: flex; justify-content: flex-end; }
.btn-submit-final {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ap-green); color: #fff; border: none;
  border-radius: 10px; padding: 0.8rem 2rem;
  font-size: 0.92rem; font-weight: 800; letter-spacing: 0.04em; cursor: pointer;
  box-shadow: 0 3px 14px rgba(46,107,46,0.30);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-submit-final:hover  { background: var(--ap-green-light); box-shadow: 0 6px 22px rgba(46,107,46,0.38); transform: translateY(-2px); }
.btn-submit-final:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(46,107,46,0.22); }
.btn-submit-final:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Closed / no-action states */
.submit-panel .alert-warning,
.submit-panel .alert-info {
  border-radius: 10px; font-size: 0.85rem; margin-top: 0.5rem;
}

/* Closed window callout reuses submit-callout--red */
.submit-panel__warnings .submit-callout--red span { font-size: 1rem; font-weight: 700; }

/* ── "Next Action(s)" section heading ───────────────────────── */
#tabs-final .ap-action-heading {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ap-muted);
  margin: 1rem 0 0; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ap-border);
}
#tabs-final .ap-action-heading::before {
  content: ''; display: block; width: 4px; height: 16px;
  background: var(--ap-green); border-radius: 2px;
}

/* ── Wrapping fixes for detail/review pages ─────────────────── */
/* Checklist templates put full question text inside <thead> cells;
   shadcn.css forces thead cells to nowrap, which blows the table wider
   than the viewport and makes the whole page scroll sideways.
   Details pages must let header/question cells wrap. */
table thead th, table thead td,
.table thead th, .table thead td {
  white-space: normal !important;
}
table tbody tr td:first-child {
  white-space: normal !important;
}
/* Keep long content inside the card instead of forcing sideways scroll */
.card .table-responsive { overflow-x: auto; }
.card .table-responsive table { table-layout: auto; width: 100%; max-width: 100%; }
.card .table-responsive textarea { max-width: 100%; }

/* ── Checklist tables scroll inside their tab panel ─────────── */
/* The checklist partials hardcode inline heights (400/600px) but their
   content overflows the card; cap them to the viewport and scroll inside.
   Stylesheet !important beats the inline style height. */
#tabs .tab-content .card-body.table-responsive {
  height: auto !important;
  max-height: 65vh;
  overflow-y: auto !important;
  overflow-x: auto;
  border: 1px solid #dce8dc;
  border-radius: 8px;
}
/* keep the question header visible while its rows scroll */
#tabs .tab-content .card-body.table-responsive thead td,
#tabs .tab-content .card-body.table-responsive thead th {
  position: sticky; top: 0; z-index: 2;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .submit-panel { padding: 1rem; margin: 0.75rem 0 0; }
  .ap-page-header { padding: 0.85rem 1rem; }
  .btn-submit-final { width: 100%; justify-content: center; }
  .submit-panel__actions { justify-content: stretch; }
}