/* DTV Ventures Admin Skin (upload-ready) */
:root {
  --skin-bg: #F7FAFA;
  --skin-surface: #ffffff;
  --skin-surface-alt: #F7FAFA;
  --skin-border: #DCE3E7;
  --skin-text: #0F1B26;
  --skin-muted: #5B6B77;
  --skin-brand: #1F6672;
  --skin-brand-dark: #14304A;
  --skin-success: #1E8A5B;
  --skin-warning: #B7791F;
  --skin-danger: #C0392B;
  --skin-radius: 12px;
  --skin-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

body {
  background: var(--skin-bg);
  color: var(--skin-text);
}

.card {
  background: var(--skin-surface);
  border-color: var(--skin-border);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
}

.btn-primary {
  background: var(--skin-brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--skin-brand-dark);
}

.btn-secondary {
  background: var(--skin-surface-alt);
  color: var(--skin-muted);
  border: 1px solid var(--skin-border);
}
.btn-secondary:hover {
  background: #F1F4F5;
}

.btn-ghost {
  color: var(--skin-muted);
}
.btn-ghost:hover {
  background: var(--skin-surface-alt);
}

.input {
  border-color: var(--skin-border);
  background: #fff;
}
.input:focus {
  border-color: var(--skin-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.sidebar {
  background: linear-gradient(180deg, #0F1B26 0%, #14304A 100%);
}

.nav-item:hover,
.nav-item.active {
  background: rgba(37, 99, 235, 0.15);
  color: #3A5A78;
}

.table-row:hover {
  background: var(--skin-surface-alt);
}

.badge-submitted { background: #EAF0F5; color: #14304A; }
.badge-under_review { background: #FBF3E4; color: #7A5412; }
.badge-shortlisted { background: #F7F0F4; color: #6B5B7B; }
.badge-accepted { background: #EAF5F0; color: #1E8A5B; }
.badge-rejected { background: #FBECEA; color: #C0392B; }

.modal,
.modal-card {
  border-radius: 16px;
  border: 1px solid var(--skin-border);
}

#notif-panel {
  border: 1px solid var(--skin-border);
}

/* ── 3. Directory redesign (Mentors / SMEs / related pages) ── */
/* Token-backed, symmetric, professional layout for the talent directories. */

/* Page container */
.dtv-page {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 4px 4px 24px;
  box-sizing: border-box;
}

/* Page header */
.dtv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding: 0 2px;
}
.dtv-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0F1B26;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dtv-head-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.dtv-sub { font-size: 12.5px; color: #5B6B77; margin-top: 3px; }
.dtv-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Stat cards — symmetric equal-height grid */
.dtv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dtv-stat {
  background: #fff;
  border: 1px solid #DCE3E7;
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: box-shadow .15s, transform .15s;
}
.dtv-stat:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-1px); }
.dtv-stat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dtv-stat-val { font-size: 24px; font-weight: 800; color: #0F1B26; line-height: 1.1; }
.dtv-stat-label {
  font-size: 11.5px; color: #5B6B77; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Toolbar / filter bar */
.dtv-toolbar {
  background: #fff;
  border: 1px solid #DCE3E7;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.dtv-toolbar .input { width: auto; font-size: 12.5px; }
.dtv-toolbar .dtv-search { flex: 1; min-width: 200px; }

/* Table card */
.dtv-table-card {
  background: #fff;
  border: 1px solid #DCE3E7;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.dtv-table-wrap { overflow-x: auto; }
.dtv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtv-table thead th {
  background: #F7FAFA;
  color: #5B6B77;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #DCE3E7;
  white-space: nowrap;
}
.dtv-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #F1F4F5;
  vertical-align: middle;
  color: #243642;
}
.dtv-table tbody tr:last-child td { border-bottom: none; }
.dtv-table tbody tr:hover td { background: #F7FAFA; }
.dtv-table .num { text-align: center; }
.dtv-table .right { text-align: right; }

/* Name cell with avatar */
.dtv-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dtv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  background: #1F6672;
}
.dtv-name-main { font-weight: 700; color: #0F1B26; font-size: 13.5px; }
.dtv-name-sub { font-size: 11.5px; color: #5B6B77; margin-top: 1px; }

/* Cell secondary line */
.dtv-cell-main { font-size: 13px; color: #243642; }
.dtv-cell-sub { font-size: 11.5px; color: #8A9AA5; margin-top: 1px; }

/* DTV point-of-contact cell — table-row variant. Same shape as dtvContactCell,
   but constrained to the table track so long emails wrap cleanly. */
.dtv-poc-cell { min-width: 0; max-width: 220px; }
.dtv-poc-cell .dtv-avatar { flex-shrink: 0; }
.dtv-poc-cell > div > div:last-child { overflow-wrap: anywhere; }

/* Action buttons */
.dtv-actions { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: nowrap; }
.dtv-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid #DCE3E7;
  background: #fff;
  color: #5B6B77;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .12s;
}
.dtv-btn:hover { background: #F1F4F5; border-color: #C6D0D6; color: #0F1B26; }
.dtv-btn.primary { background: #EAF0F5; color: #1F6672; border-color: #C3D3E0; }
.dtv-btn.primary:hover { background: #EAF0F5; }
.dtv-btn.danger { background: #FBECEA; color: #C0392B; border-color: #EBC4BE; }
.dtv-btn.danger:hover { background: #FBECEA; }

/* DTV button with text content — opts out of 30×30 fixed dimensions so the label fits
   inside the border, and adds a proper horizontal padding / icon gap. */
.dtv-btn-with-text {
  width: auto;
  height: auto;
  padding: 5px 10px 5px 8px;
  gap: 6px;
  white-space: nowrap;
  border-radius: 7px;
  font-weight: 600;
}
.dtv-btn-with-text i { font-size: 10.5px; line-height: 1; }
.dtv-btn-with-text:hover { transform: translateY(-1px); }
/* Red "escalate" treatment for section-header CTAs (Add / Log / Update). */
.dtv-btn-escalate {
  background: #FBECEA;
  color: #C0392B;
  border: 1px solid #EBC4BE;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.06);
}
.dtv-btn-escalate:hover {
  background: #C0392B;
  color: #ffffff;
  border-color: #C0392B;
  box-shadow: 0 4px 10px rgba(220,38,38,0.25);
}
.dtv-btn.success { background: #EAF5F0; color: #1E8A5B; border-color: #CFE6DA; }
.dtv-btn.success:hover { background: #EAF5F0; }

/* Badges */
.dtv-badge {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Empty state */
.dtv-empty { text-align: center; padding: 44px 20px; color: #8A9AA5; }
.dtv-empty i { font-size: 30px; display: block; margin-bottom: 10px; color: #C6D0D6; }
.dtv-empty-title { font-size: 14px; font-weight: 700; color: #5B6B77; margin-bottom: 4px; }
.dtv-empty-sub { font-size: 12.5px; }

/* ── Modal redesign ── */
.dtv-modal { padding: 0; }
.dtv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #F1F4F5;
  gap: 12px;
}
.dtv-modal-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: #0F1B26;
}
.dtv-modal-title .dtv-head-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.dtv-modal-close {
  border: none; background: #F1F4F5; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: #5B6B77;
  font-size: 13px; transition: all .12s; flex-shrink: 0;
}
.dtv-modal-close:hover { background: #DCE3E7; color: #0F1B26; }
.dtv-modal-body { padding: 18px 22px; max-height: 70vh; overflow-y: auto; }
.dtv-modal-foot {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid #F1F4F5;
  flex-wrap: wrap;
}
.dtv-modal-foot .spacer { flex: 1; }

/* Profile hero */
.dtv-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dtv-hero .dtv-avatar { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
.dtv-hero-name { font-size: 18px; font-weight: 800; color: #0F1B26; }
.dtv-hero-sub { font-size: 12.5px; color: #5B6B77; margin-top: 2px; }
.dtv-hero-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* Detail grid — auto-fit so long URLs (no spaces) never crush siblings.
   repeat(auto-fit, minmax(220px, 1fr)) collapses to 1 column on narrow
   viewports instead of forcing two and stacking characters vertically. */
.dtv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin-bottom: 6px; }
.dtv-field { min-width: 0; min-height: 0; }
.dtv-field-label {
  font-size: 10.5px; font-weight: 700; color: #8A9AA5;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px;
}
.dtv-field-val { font-size: 13px; color: #0F1B26; font-weight: 500; overflow-wrap: anywhere; word-break: normal; }

/* Section */
.dtv-section { margin-top: 16px; }
.dtv-section-title {
  font-size: 12px; font-weight: 800; color: #243642;
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.dtv-section-title i { color: #8A9AA5; font-size: 11px; }
.dtv-text { font-size: 13px; color: #5B6B77; line-height: 1.65; }
.dtv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dtv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #F1F4F5; color: #243642;
  border: 1px solid #DCE3E7;
  border-radius: 12px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600;
}
.dtv-tag .w { color: #8A9AA5; font-weight: 400; }

/* Form grid — symmetric 2-col */
.dtv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.dtv-form-grid .full { grid-column: 1 / -1; }
.dtv-label { font-size: 11px; font-weight: 700; color: #5B6B77; display: block; margin-bottom: 5px; }
.dtv-label .req { color: #C0392B; }
.dtv-form-grid .input { width: 100%; font-size: 12.5px; }

@media (max-width: 640px) {
  .dtv-grid, .dtv-form-grid { grid-template-columns: 1fr; }
  .dtv-head h2 { font-size: 19px; }
}

/* Directory modals (detail views + 2-col forms) get a wider card.
   showModal() sets max-width:540px inline on .modal-card, so this needs
   !important to win. :has() is supported in all modern browsers.
   On narrow viewports we still respect 16px padding from the overlay so
   the card never overflows the viewport. */
.modal-card:has(.dtv-modal) { max-width: min(680px, calc(100vw - 32px)) !important; }

/* Partner detail modal is even wider on desktop — up to 760px — but still
   caps at viewport minus padding so it never overflows on mobile. */
.modal-card:has(.dtv-modal.dtv-modal-wide) { max-width: min(760px, calc(100vw - 32px)) !important; }

/* Partner detail — organized contacts & timeline rows (Phase P-1.5) */
.dtv-contact-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid #F1F4F5; border-radius: 10px;
  margin-bottom: 8px; background: #fff;
}
.dtv-contact-item:hover { border-color: #DCE3E7; background: #F7FAFA; }
.dtv-contact-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dtv-contact-name { font-size: 13px; font-weight: 700; color: #0F1B26; margin-top: 4px; }
.dtv-contact-sub { font-size: 11px; color: #5B6B77; }
.dtv-contact-meta { font-size: 11px; color: #8A9AA5; }
.dtv-contact-actions { display: flex; gap: 4px; flex-shrink: 0; }

.dtv-timeline-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1F4F5; }
.dtv-timeline-item:last-child { border-bottom: none; }
.dtv-timeline-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dtv-timeline-title { font-size: 12px; font-weight: 700; color: #0F1B26; }
.dtv-timeline-sub { font-size: 11px; color: #5B6B77; }
.dtv-timeline-meta { font-size: 10px; color: #8A9AA5; margin-top: 2px; }

/* DTV point-of-contact block inside partner view */
.dtv-poc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #F7F0F4; border-radius: 10px; background: #F7FAFA; }

/* ── Partner profile redesign (Phase P-1.5 hotfix) ── */
.dtv-modal-wide { /* opts the partner modal up to 760px on desktop */ }
.dtv-hero-info { min-width: 0; flex: 1; }
.dtv-hero-meta { font-size: 12px; color: #5B6B77; margin-top: 4px; overflow-wrap: anywhere; }
.dtv-hero-tags { margin-top: 8px; }
.dtv-section-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.dtv-section-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dtv-link {
  color: #1F6672; text-decoration: none;
  border-bottom: 1px solid #C3D3E0; overflow-wrap: anywhere; word-break: break-all;
}
.dtv-link:hover { border-bottom-color: #1F6672; }

.dtv-contact-main { min-width: 0; flex: 1; }
.dtv-timeline-main { min-width: 0; flex: 1; }
.dtv-timeline-item .dtv-timeline-icon i { font-size: 11px; }

.dtv-empty-mini {
  color: #8A9AA5; font-size: 12px;
  padding: 12px; text-align: center;
  background: #F7FAFA; border: 1px dashed #DCE3E7; border-radius: 8px;
}

/* ── Mobile hardening (≤ 480px) ──
   Force single-column, drop the hero avatar to a smaller block, shrink
   modal padding so the card never overflows the viewport. */
@media (max-width: 480px) {
  .dtv-modal-body { padding: 14px 16px; }
  .dtv-modal-head { padding: 14px 16px 12px; }
  .dtv-modal-foot { padding: 12px 16px 14px; }
  .dtv-hero { gap: 10px; }
  .dtv-hero .dtv-avatar { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
  .dtv-hero-name { font-size: 16px; }
  .dtv-grid { grid-template-columns: 1fr; }
  .dtv-form-grid { grid-template-columns: 1fr; }
  .dtv-contact-item { padding: 8px 10px; gap: 8px; }
  .dtv-contact-actions { flex-shrink: 0; }
}

/* ── CRM Follow-ups: filter toolbar ──────────────────────────────────────
   Replaces four stacked rows of pill chips whose inline labels ("SCOPE:",
   "ENTITY:", "PRIORITY:", "ASSIGNED TO:") varied in width, so no two groups
   shared a left edge and the long assignee chip list wrapped to a second
   line. Everything here is one labelled control per column in an equal-width
   grid, so the four filters share a baseline at any viewport width.

   Specificity note: `.input` is also declared in the admin shell's inline
   <style> block, which comes AFTER this file in document order — so a bare
   `.crm-flt-select` would lose every tie. These rules are therefore written
   as two-class selectors (0,2,0 / 0,3,0) to win outright. */
.crm-flt { margin-bottom: 20px; padding: 16px 20px; }
.crm-flt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.crm-flt-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: #0F1B26;
}
.crm-flt-title i { color: #6B5B7B; }
.crm-flt-reset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid #DCE3E7; background: #fff; color: #5B6B77;
  font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.crm-flt-reset:hover { background: #F7FAFA; color: #243642; border-color: #C6D0D6; }

/* Four equal columns; minmax(0,1fr) stops a long option label from forcing
   one column wider than the others. */
.crm-flt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
}
.crm-flt-field { display: flex; flex-direction: column; min-width: 0; }
.crm-flt-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: #5B6B77;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.crm-flt-label i { font-size: 10px; color: #8A9AA5; width: 12px; text-align: center; }

.crm-flt-select.input {
  width: 100%; font-size: 12.5px; cursor: pointer;
  padding: 8px 30px 8px 10px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.crm-flt-select.input:focus {
  border-color: #6B5B7B;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
}

.crm-flt-active {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1F4F5;
}
.crm-flt-active-lbl {
  font-size: 10.5px; font-weight: 700; color: #8A9AA5;
  text-transform: uppercase; letter-spacing: .05em;
}
.crm-flt-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F7F0F4; color: #6B5B7B; border: 1px solid #E2DAE6;
  border-radius: 20px; padding: 3px 6px 3px 10px;
  font-size: 11.5px; font-weight: 700;
}
.crm-flt-tag button {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #6B5B7B;
  cursor: pointer; padding: 2px 4px; border-radius: 50%;
  line-height: 1; font-size: 10px;
}
.crm-flt-tag button:hover { background: #E2DAE6; }
.crm-flt-note { font-size: 11px; color: #8A9AA5; margin-left: auto; }

/* Two columns on medium screens, one on phones. Without the 1100px step the
   four controls squash and the labels truncate on a laptop. */
@media (max-width: 1100px) {
  .crm-flt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .crm-flt-grid { grid-template-columns: 1fr; }
  .crm-flt-note { margin-left: 0; }
}

/* DVP.2 application detail — content-sized cards in balanced columns.
   The balanced grid sets an explicit column count inline (2 or 3 depending on
   how the cards divide), so on a phone those columns would be ~120px wide.
   Collapse to one column below the width where a three-column grid stops
   being readable. display:contents drops the column wrapper so the cards
   return to their original DOM order — the column groups are contiguous, so
   reading order is preserved exactly. A stylesheet !important declaration
   beats the inline grid-template-columns, which is required here. */
@media (max-width: 820px) {
  .dv2-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .dv2-col  { display: contents !important; }
  /* The profile grid's rows put a 130px label beside the value, so three
     tracks cannot fit a phone — collapse it to one column as well. */
  .dv2-profile { grid-template-columns: minmax(0, 1fr) !important; }
}