/* =========================================================
   Page-specific styles
   ========================================================= */

/* ---------- Procurement / Section header layout ---------- */
.section-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Two-column stat row (optional, for headers) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.stat {
  background: var(--md-surface-elevated);
  border: 1px solid var(--md-outline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}

.stat__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-muted);
}

.stat__value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}

/* Section divider with label */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-8) 0 var(--s-4);
  color: var(--md-on-surface-muted);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
}

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--md-outline);
}

/* NL prompt section wrapper */
.prompt-section {
  margin-top: var(--s-8);
}

/* Detail page back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border-radius: var(--r-full);
  color: var(--md-primary-strong);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  margin-bottom: var(--s-4);
  transition: background var(--d-short) var(--ease-standard);
}
.back-link:hover { background: var(--md-hover-layer); }
.back-link .material-symbols-outlined { font-size: 18px; }

/* Linkified table cell (for emails / websites) */
.link-cell {
  color: var(--md-primary-strong);
  text-decoration: none;
}
.link-cell:hover { text-decoration: underline; }
[data-theme="dark"] .link-cell { color: var(--md-primary); }

/* =========================================================
   Marketing overview — big cards
   ========================================================= */
.big-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-4);
}

.big-card {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-8);
  text-align: left;
  border-radius: var(--r-xl);
  border: 1px solid var(--md-outline);
  background: var(--md-surface-elevated);
  box-shadow: var(--e-1);
  cursor: pointer;
  transition: box-shadow var(--d-med) var(--ease-standard),
              transform var(--d-med) var(--ease-standard),
              border-color var(--d-med) var(--ease-standard);
}

.big-card:hover {
  box-shadow: var(--e-3);
  transform: translateY(-2px);
  border-color: var(--md-outline-strong);
}

.big-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.big-card--tonal .big-card__icon-wrap {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.big-card--peach .big-card__icon-wrap {
  background: var(--md-accent-peach-container);
  color: var(--md-on-accent-peach-container);
}

.big-card__icon { font-size: 36px; }

.big-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.big-card__body strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.big-card__body p {
  margin: 0;
  color: var(--md-on-surface-muted);
  font-size: 14px;
}

.big-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-3);
  color: var(--md-primary-strong);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
}
.big-card__cta .material-symbols-outlined { font-size: 16px; transition: transform var(--d-med) var(--ease-emphasized); }
.big-card:hover .big-card__cta .material-symbols-outlined { transform: translateX(4px); }
[data-theme="dark"] .big-card__cta { color: var(--md-primary); }

/* =========================================================
   Templates grid + cards
   ========================================================= */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}

.template-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  text-align: left;
  align-items: flex-start;
}

.template-card__icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: grid; place-items: center;
  flex-shrink: 0;
}

.template-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.template-card__body strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--md-on-surface);
}

.template-card__body p {
  margin: 0;
  font-size: 13px;
  color: var(--md-on-surface-muted);
}

.template-card__body small {
  font-size: 12px;
  color: var(--md-on-surface-muted);
}

.template-card__body em { font-style: normal; color: var(--md-on-surface); }

.template-card__meta { color: var(--md-on-surface-subtle); margin-top: 4px; }

/* =========================================================
   Email preview pane
   ========================================================= */
.email-preview {
  background: var(--md-surface-variant);
  border: 1px solid var(--md-outline);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.email-preview__head {
  background: var(--md-surface-elevated);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--md-outline);
  display: grid;
  gap: var(--s-2);
}

.email-preview__field {
  display: flex;
  gap: var(--s-3);
  font-size: 13px;
}
.email-preview__field small {
  width: 60px;
  color: var(--md-on-surface-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.email-preview__field strong {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--md-on-surface);
}

.email-preview__body {
  padding: var(--s-8);
  display: flex;
  justify-content: center;
}

/* =========================================================
   Campaign modal — type cards, template picker, csv drop, contact list
   ========================================================= */
.type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--s-4);
  border: 1px solid var(--md-outline-strong);
  border-radius: var(--r-md);
  background: var(--md-surface-elevated);
  text-align: left;
  transition: border-color var(--d-short) var(--ease-standard),
              background var(--d-short) var(--ease-standard);
  cursor: pointer;
}

.type-card:hover { background: var(--md-hover-layer); }

.type-card.is-selected {
  border-color: var(--md-primary-strong);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.type-card__icon { font-size: 24px; color: var(--md-primary-strong); }
.type-card.is-selected .type-card__icon { color: var(--md-on-primary-container); }

.type-card strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
}

.type-card small { font-size: 12px; color: var(--md-on-surface-muted); }
.type-card.is-selected small { color: var(--md-on-primary-container); opacity: 0.85; }

/* Template picker */
.template-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}

.template-pick {
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--md-outline);
  border-radius: var(--r-sm);
  background: var(--md-surface-elevated);
  text-align: left;
  cursor: pointer;
  transition: background var(--d-short) var(--ease-standard),
              border-color var(--d-short) var(--ease-standard);
}

.template-pick:hover { background: var(--md-hover-layer); }

.template-pick.is-selected {
  border-color: var(--md-primary-strong);
  background: var(--md-primary-container);
}

.template-pick__icon { color: var(--md-primary-strong); }

.template-pick__body strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
}

.template-pick__body small {
  display: block;
  font-size: 12px;
  color: var(--md-on-surface-muted);
}

.template-pick__check {
  color: var(--md-primary-strong);
  opacity: 0;
  transition: opacity var(--d-short) var(--ease-standard);
}

.template-pick.is-selected .template-pick__check { opacity: 1; }

/* CSV drop zone */
.csv-drop {
  border: 2px dashed var(--md-outline-strong);
  border-radius: var(--r-md);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--d-short) var(--ease-standard),
              background var(--d-short) var(--ease-standard);
}

.csv-drop:hover, .csv-drop.is-drag {
  border-color: var(--md-primary-strong);
  background: var(--md-hover-layer);
}

.csv-drop__icon {
  font-size: 36px;
  color: var(--md-primary-strong);
}

.csv-drop strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
}

.csv-drop small {
  font-size: 12px;
  color: var(--md-on-surface-muted);
}

.csv-drop code {
  background: var(--md-surface-variant);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.csv-summary {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--md-surface-variant);
  border-radius: var(--r-sm);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.csv-summary code {
  background: var(--md-surface-elevated);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Manual contact entry */
.manual-row {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  margin-bottom: var(--s-3);
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 220px;
  overflow-y: auto;
}

.contact-list__item {
  display: grid;
  grid-template-columns: 24px 1fr 1.4fr 40px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--md-surface-variant);
  border-radius: var(--r-sm);
  font-size: 13px;
}

.contact-list__name { font-weight: 500; }
.contact-list__contact { color: var(--md-on-surface-muted); font-family: var(--font-mono); font-size: 12px; }

/* =========================================================
   HR — candidate cards + search fields
   ========================================================= */
.hr-search-fields {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}

.candidate-card {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.candidate-card__head {
  display: flex;
  gap: var(--s-3);
}

.candidate-card__avatar {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--md-primary-strong), #8B6FE0);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0;
}

.candidate-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.candidate-card__meta strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--md-on-surface);
}

.candidate-card__meta small {
  font-size: 12px;
  color: var(--md-on-surface-muted);
}

.candidate-card__city { color: var(--md-on-surface-subtle); }

.candidate-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.candidate-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.candidate-card__foot {
  display: flex;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--md-outline);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 800px) {
  .big-cards { grid-template-columns: 1fr; }
  .type-cards { grid-template-columns: 1fr; }
  .hr-search-fields { flex-direction: column; }
  .manual-row { flex-direction: column; }
}