/* ============================================================================
   archive.css — Archive page (Track B Wave 1, V5 port)
   Source mockup: CCL Dashboard v5/mockups/pipeline-evolution/admin-platform-demo.html
   Screens 18 (Follow Up), 19 (Reactivate modal), 27 (Closed Won), 28 (Dead).
   Owned by agent V3. Scoped — all selectors prefixed .arch-* or .arch-view.
   ============================================================================ */

/* ===== VIEW WRAPPER ===== */
.arch-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  animation: fadeIn 200ms ease;
}

/* ===== PAGE HEADING ===== */
.arch-page-head {
  padding: 18px 24px 4px;
}
.arch-page-head .pg-h {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  display: block;
}
.arch-page-head .pg-d {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ===== TAB STRIP (V5 .arch-tabs) ===== */
.arch-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}
.arch-tab {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
}
.arch-tab:hover {
  color: var(--gray-700);
}
.arch-tab.on {
  color: var(--gray-900);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.arch-tab i {
  width: 14px;
  height: 14px;
}
.arch-tab .arch-tab-count {
  font: 600 10px var(--font-mono);
  color: var(--gray-400);
  margin-left: 2px;
}
.arch-tab.on .arch-tab-count {
  color: var(--brand);
}

/* ===== SECTION HEAD (V5 .hd) ===== */
.arch-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 10px;
  flex-shrink: 0;
}
.arch-ht {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
}
.arch-hc {
  font: 500 12px var(--font-mono);
  color: var(--gray-400);
  margin-left: 8px;
}

/* ===== TABLE (V5 .arch-table) ===== */
.arch-table-wrap {
  padding: 0 20px 20px;
}
.arch-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
}
.arch-table th {
  font: 600 9px var(--font-sans);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-200);
  user-select: none;
}
.arch-table th.sortable {
  cursor: pointer;
}
.arch-table th.sortable:hover {
  color: var(--gray-600);
}
.arch-table th .arch-sort-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  color: var(--gray-300);
}
.arch-table th.sorted .arch-sort-icon {
  color: var(--brand);
}
.arch-table th[data-align="right"] {
  text-align: right;
}
.arch-table td {
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}
.arch-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast);
}
.arch-table tbody tr:hover td {
  background: var(--gray-50);
}

/* ===== CELL CONTENT ATOMS ===== */
.arch-prop-name {
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}
.arch-prop-loc {
  font-weight: 400;
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
}
.arch-num {
  font: 600 12px var(--font-mono);
  color: var(--gray-900);
}
.arch-num-muted {
  font: 500 12px var(--font-mono);
  color: var(--gray-500);
}
.arch-time {
  font-size: 11px;
  color: var(--gray-400);
}
.arch-reason {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.4;
}
.arch-reason.clickable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--gray-300);
  text-underline-offset: 2px;
}
.arch-reason.clickable:hover {
  color: var(--gray-700);
}

/* ===== STAGE / STRATEGY BADGES (V5 .bg + small pill) ===== */
.arch-stage-pill {
  display: inline-block;
  font: 500 9px var(--font-sans);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--white);
  white-space: nowrap;
}
.arch-stage-pill[data-stage="new_submission"]   { background: var(--stage-1); }
.arch-stage-pill[data-stage="ai_analysis"]      { background: var(--stage-2); }
.arch-stage-pill[data-stage="screening"]        { background: var(--stage-3); }
.arch-stage-pill[data-stage="underwriting_l1"]  { background: var(--stage-4); }
.arch-stage-pill[data-stage="ready_for_review"] { background: var(--stage-5); }
.arch-stage-pill[data-stage="negotiation"]      { background: var(--stage-6); }
.arch-stage-pill[data-stage="contract"]         { background: var(--stage-7); }
.arch-stage-pill[data-stage="under_contract"]   { background: var(--stage-8); }
.arch-stage-pill[data-stage="closing"]          { background: var(--stage-9); }
.arch-stage-pill[data-stage=""],
.arch-stage-pill:not([data-stage]) { background: var(--gray-400); }

/* ===== ROW ACTIONS ===== */
.arch-row-actions {
  text-align: right;
  white-space: nowrap;
}
.arch-btn-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 10px var(--font-sans);
  color: var(--brand);
  background: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.arch-btn-view:hover {
  background: var(--brand-wash);
}
.arch-btn-view i { width: 12px; height: 12px; }

.arch-btn-reactivate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font: 600 10px var(--font-sans);
  background: var(--brand);
  color: var(--white);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(72,122,123,0.18);
  transition: background var(--t-fast), transform var(--t-fast);
  margin-right: 4px;
}
.arch-btn-reactivate:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}
.arch-btn-reactivate:active {
  transform: scale(0.97);
}
.arch-btn-reactivate i { width: 11px; height: 11px; }

/* ===== EMPTY STATE ===== */
.arch-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--gray-500);
}
.arch-empty-icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.arch-empty-icon i { width: 22px; height: 22px; }
.arch-empty h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.arch-empty p {
  font-size: 12px;
  color: var(--gray-500);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ===== INFO / WARNING STRIP (Dead tab footer) ===== */
.arch-info-strip {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--error-wash);
  border: 1px solid rgba(239,68,68,0.12);
  border-radius: 8px;
  font-size: 10px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.arch-info-strip i {
  width: 14px;
  height: 14px;
  color: var(--error);
  flex-shrink: 0;
}

/* ===== LOADING SKELETON ===== */
.arch-skel-row td {
  padding: 14px 10px;
}
.arch-skel {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.arch-skel.w-60 { width: 60%; }
.arch-skel.w-40 { width: 40%; }
.arch-skel.w-30 { width: 30%; }
.arch-skel.w-80 { width: 80%; }

/* ===== ERROR STATE ===== */
.arch-error {
  margin: 24px;
  padding: 16px 18px;
  background: var(--error-wash);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 10px;
  color: var(--gray-700);
}
.arch-error h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.arch-error p {
  font-size: 12px;
  color: var(--gray-600);
}

/* ===== REACTIVATE CONFIRMATION MODAL (V5 .mo + .md, Screen 19) ===== */
.arch-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 150ms ease;
}
.arch-modal {
  width: min(90vw, 440px);
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  z-index: var(--z-modal);
  animation: scaleIn 180ms ease;
}
.arch-modal-h {
  padding: 16px 20px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.arch-modal-h h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.arch-modal-h p {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.arch-modal-x {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.arch-modal-x:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}
.arch-modal-x i { width: 15px; height: 15px; }
.arch-modal-b {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 16px;
}
.arch-modal-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.arch-modal-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.arch-modal-card-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.arch-modal-note {
  font-size: 10px;
  color: var(--gray-400);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.arch-modal-note i {
  width: 12px; height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.arch-modal-f {
  padding: 10px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.arch-modal-cancel {
  padding: 7px 14px;
  border-radius: 6px;
  font: 600 11px var(--font-sans);
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background var(--t-fast);
}
.arch-modal-cancel:hover { background: var(--gray-50); }
.arch-modal-confirm {
  padding: 7px 14px;
  border-radius: 6px;
  font: 600 11px var(--font-sans);
  color: var(--white);
  background: var(--brand);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(72,122,123,0.18);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--t-fast);
}
.arch-modal-confirm:hover { background: var(--brand-dark); }
.arch-modal-confirm:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
  box-shadow: none;
}
.arch-modal-confirm i { width: 12px; height: 12px; }

/* ===== REASON MODAL (long decline reason expansion) ===== */
.arch-reason-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 150ms ease;
}
.arch-reason-modal {
  width: min(90vw, 480px);
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  animation: scaleIn 180ms ease;
}
.arch-reason-modal-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.arch-reason-modal-b {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.6;
}