/* Wide, card-based "real app" dashboard — separate from forms.css (the narrow apply-wizard cards),
   loaded on dashboard.php, dashboard/*.php, and admin.php. */

.th-dash-wrap { background: #f4f5f8; font-family: 'Roboto', Arial, sans-serif; }

/* app shell: sidebar + main content */
.th-app-shell { display: flex; align-items: stretch; min-height: calc(100vh - 200px); }
.th-app-sidebar {
  flex: 0 0 220px; background: linear-gradient(180deg, #1c1f2a 0%, #2a1420 100%);
  display: flex; flex-direction: column; padding: 24px 14px; gap: 4px;
}
.th-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.th-sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px;
  color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500;
}
.th-sidebar-link .fas { width: 18px; text-align: center; font-size: 15px; }
.th-sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.th-sidebar-link.active { background: #C60C0C; color: #fff; }
.th-sidebar-logout { margin-top: auto; color: rgba(255,255,255,0.6); }
.th-sidebar-logout:hover { background: rgba(255,255,255,0.06); color: #fff; }
.th-app-main { flex: 1; min-width: 0; padding-bottom: 60px; }

.th-dash-container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* hero */
.th-dash-hero {
  background: linear-gradient(135deg, #1c1f2a 0%, #C60C0C 130%);
  padding: 32px 24px;
  color: #fff;
  margin-bottom: 28px;
}
.th-dash-hero-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.th-dash-avatar { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; overflow: hidden; }
.th-dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.th-dash-hero h1, .th-dash-hero p { color: #fff !important; }
.th-dash-hero h1 { font-family: 'Outfit', Arial, sans-serif; font-size: 26px; margin: 0 0 4px; }
.th-dash-hero p { margin: 0; opacity: 0.85; font-size: 14px; }

/* section headings */
.th-dash-section { margin-bottom: 28px; }
.th-dash-section-head { margin-bottom: 16px; }
.th-dash-section-head h2 { font-family: 'Outfit', Arial, sans-serif; font-size: 19px; margin: 0 0 2px; color: #1c1f2a; }
.th-dash-section-head p { margin: 0; font-size: 13px; color: #8a8f98; }

/* status pills */
.th-pill { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 6px; white-space: nowrap; }
.th-pill-green { background: #eaf7ee; color: #1e7e34; }
.th-pill-progress { background: #fff4e5; color: #b26a00; }
.th-pill-neutral { background: #eef0f4; color: #5b6270; }
.th-pill-red { background: #fdeaea; color: #C60C0C; }

/* the single Application card */
.th-app-card-main { background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(20,10,15,0.06); padding: 28px 24px; }
.th-app-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.th-app-card-divider { border: none; border-top: 1px solid #f0f0f2; margin: 26px 0; }

/* pipeline strip */
.th-app-card-main h3 { font-family: 'Outfit', Arial, sans-serif; font-size: 16px; margin: 0 0 24px; color: #1c1f2a; text-align: center; }
.th-pipeline { display: flex; align-items: flex-start; }
.th-pipeline-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.th-pipeline-node .fas { width: 46px; height: 46px; border-radius: 50%; background: #eef0f4; color: #a1a7ae; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 10px; }
.th-pipeline-node span { font-size: 12px; font-weight: 600; color: #a1a7ae; max-width: 100px; }
.th-pipeline-node .th-pipeline-connector { position: absolute; top: 23px; left: 50%; width: 100%; height: 2px; background: #eee; z-index: 0; }
.th-pipeline-node:last-child .th-pipeline-connector { display: none; }
.th-pipeline-node .fas { position: relative; z-index: 1; }
.th-pipeline-node.is-done .fas { background: #1e7e34; color: #fff; }
.th-pipeline-node.is-done .th-pipeline-connector { background: #1e7e34; }
.th-pipeline-node.is-done span { color: #1c1f2a; }
.th-pipeline-node.is-current .fas { background: #fff; color: #C60C0C; border: 2px solid #C60C0C; box-shadow: 0 0 0 5px rgba(198,12,12,0.12); }
.th-pipeline-node.is-current span { color: #C60C0C; font-weight: 700; }

/* applicant details: photo + table side by side, left-aligned, nested inside the application card */
.th-detail-card { display: flex; gap: 28px; flex-wrap: wrap; }
.th-detail-table { flex: 1 1 320px; min-width: 260px; border-collapse: collapse; width: 100%; }
.th-detail-table tr { border-bottom: 1px solid #f0f0f2; }
.th-detail-table tr:last-child { border-bottom: none; }
.th-detail-table td { padding: 10px 0; font-size: 14px; }
.th-detail-table td:first-child { color: #8a8f98; width: 38%; vertical-align: top; }
.th-detail-table td:last-child { font-weight: 400; color: #1c1f2a; line-height: 1.6; }
.th-detail-photo { flex: 0 0 180px; text-align: center; }
.th-detail-photo img { width: 180px; height: 216px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 18px rgba(20,10,15,0.12); }
.th-detail-photo-placeholder { width: 180px; height: 216px; border-radius: 12px; background: #f4f5f8; border: 2px dashed #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #a1a7ae; margin: 0 auto; }
.th-detail-photo-placeholder .fas { font-size: 36px; }
.th-detail-photo-placeholder p { font-size: 12px; margin: 0; padding: 0 16px; }
.th-detail-photo .th-doc-file { width: 180px; height: 216px; border-radius: 12px; background: #f4f5f8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #5b6270; margin: 0 auto; }
.th-detail-photo .th-doc-file .fas { font-size: 36px; color: #C60C0C; }

/* icon-card grids: dependants + documents */
.th-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.th-icon-card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(20,10,15,0.05); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.th-icon-card-icon { width: 40px; height: 40px; border-radius: 10px; background: #fdecea; color: #C60C0C; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.th-icon-card-body { flex: 1 1 120px; min-width: 120px; }
.th-icon-card-body strong { display: block; font-size: 13px; color: #1c1f2a; }
.th-icon-card-body span { display: block; font-size: 11px; color: #8a8f98; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-icon-card .btn { flex-shrink: 0; }
.th-icon-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.th-doc-delete-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #f3d6d6; background: #fdecea; color: #C60C0C; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; padding: 0; }
.th-doc-delete-icon:hover { background: #C60C0C; color: #fff; }

@media (max-width: 380px) {
  .th-icon-card { flex-direction: column; align-items: flex-start; }
  .th-icon-card-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

.th-dash-empty { background: #fff; border-radius: 14px; padding: 50px 24px; text-align: center; box-shadow: 0 6px 20px rgba(20,10,15,0.06); }
.th-dash-empty .fas { font-size: 34px; color: #C60C0C; margin-bottom: 14px; }
.th-dash-hint { font-size: 13px; color: #8a8f98; display: flex; align-items: center; gap: 8px; margin-top: 16px; }

@media (max-width: 860px) {
  .th-app-shell { flex-direction: column; min-height: 0; }
  .th-app-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px; }
  .th-sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .th-sidebar-link span { display: none; }
  .th-sidebar-link { padding: 10px; }
  .th-sidebar-logout { margin-top: 0; margin-left: auto; }
}

@media (max-width: 640px) {
  .th-detail-card { flex-direction: column; }
  .th-detail-photo { margin: 0 0 16px; text-align: center; }
  .th-detail-photo-placeholder { margin: 0 auto; }
  .th-detail-table { text-align: left; }
  .th-detail-table td:first-child { width: 38%; text-align: left; }
  .th-detail-table td:last-child { text-align: left; }
  .th-app-card-main h3 { text-align: left; }
  h3.th-detail-heading { text-align: center; }
  .th-pipeline { flex-wrap: wrap; }
  .th-pipeline-node { flex: 1 1 33%; margin-bottom: 20px; }
}

/* admin table */
.th-admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(20,10,15,0.06); }
.th-admin-table th, .th-admin-table td { padding: 12px 14px; font-size: 13px; text-align: left; border-bottom: 1px solid #f0f0f2; vertical-align: middle; }
.th-admin-table th { background: #f7f7f9; font-weight: 700; color: #5b6270; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.th-admin-table select { padding: 7px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
.th-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* generic modal — admin Manage panel, dashboard document-request popup, document viewer popup */
.th-modal-overlay { position: fixed; inset: 0; background: rgba(18,10,10,0.55); display: none; align-items: center; justify-content: center; z-index: 600; padding: 20px; }
.th-modal-overlay.open { display: flex; }
.th-modal { background: #fff; border-radius: 16px; padding: 30px; max-width: 480px; width: 100%; max-height: 86vh; overflow-y: auto; position: relative; text-align: left; }
.th-modal.th-modal-wide { max-width: 640px; }
.th-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f4f5f8; color: #5b6270; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Centered "sweet alert"-style popup for in-dialog save/notify feedback — fixed positioning
   keeps it in the middle of the viewport regardless of how far the tall Manage Application
   dialog has been scrolled, instead of an inline banner that could end up off-screen. */
.th-inline-alert-backdrop { display: none; position: fixed; inset: 0; background: rgba(18,10,10,0.45); align-items: center; justify-content: center; z-index: 700; padding: 20px; }
.th-inline-alert-backdrop.open { display: flex; }
.th-inline-alert-box { background: #fff; border-radius: 14px; padding: 26px 24px 20px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.th-inline-alert-box p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #1c1f2a; font-weight: 600; }
.th-inline-alert-box.is-error p { color: #C60C0C; }
.th-modal h3 { margin: 0 0 6px; font-family: 'Outfit', Arial, sans-serif; font-size: 18px; text-align: left; }
.th-modal .th-modal-section { border-top: 1px solid #f0f0f2; padding-top: 18px; margin-top: 18px; }
.th-modal .th-modal-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.th-modal .th-modal-section h4 { margin: 0 0 10px; font-family: 'Outfit', Arial, sans-serif; font-size: 14px; color: #1c1f2a; }
.th-modal label { display: block; font-size: 13px; font-weight: 600; color: #5b6270; margin: 10px 0 4px; }
.th-modal input[type=text], .th-modal input[type=number], .th-modal input[type=date], .th-modal input[type=file], .th-modal select, .th-modal textarea { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
.th-modal textarea { resize: vertical; min-height: 70px; }
.th-modal-doc-frame { width: 100%; height: 70vh; border: none; border-radius: 8px; }
.th-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.th-modal-check-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; color: #5b6270; }
.th-modal-check-row input { width: auto; margin-top: 3px; }