/*
 * Meetalent — Dashboard & Chart Styles
 * Step 5 — 2026-07-11
 *
 * Dipende da: design-system.css (variabili --ds-*)
 * Caricare DOPO meetalent-components.css
 */

/* =============================================================
   CHART CONTAINERS
   ============================================================= */

.ml-chart-panel {
  background: var(--ds-surface-card);
  border: 1px solid var(--ds-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin-bottom: var(--ds-space-6);
}

.ml-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-4) var(--ds-space-6);
  border-bottom: 1px solid var(--ds-border-light);
  background: var(--ds-neutral-50);
}

.ml-chart-header h4,
.ml-chart-header .ml-chart-title {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

.ml-chart-header .ml-chart-subtitle {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin: 0;
}

.ml-chart-body {
  padding: var(--ds-space-5) var(--ds-space-6);
}

.ml-chart-container {
  position: relative;
  min-height: 240px;
  max-height: 380px;
}

.ml-chart-container canvas {
  width: 100% !important;
}

/* chart wrapper per Panel con padding ridotto sul canvas */
.twm-pro-view-chart {
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface-card);
  border-radius: 0 0 12px 12px;
}

/* Override panel heading per dashboard candidato */
.wt-panel-heading {
  background: var(--ds-neutral-50);
  border-bottom: 1px solid var(--ds-border-light);
  border-radius: 12px 12px 0 0;
}

.wt-panel-heading .panel-tittle {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-secondary);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}

.panel.panel-default {
  border: 1px solid var(--ds-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* =============================================================
   DASHBOARD KPI GRID
   ============================================================= */

.ml-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-6);
}

/* Restyling delle KPI card candidate (.dashboard-card-2 / .wt-panel-body) */
.wt-panel-body.dashboard-card-2 {
  background: var(--ds-surface-card) !important;
  border: 1px solid var(--ds-border-light) !important;
  border-radius: 12px !important;
  padding: var(--ds-space-5) !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.wt-panel-body.dashboard-card-2:hover {
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
  transform: translateY(-2px);
}

/* Accent bar top colorata per KPI card */
.wt-panel-body.dashboard-card-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ds-gradient-cta);
  border-radius: 12px 12px 0 0;
}

/* Varianti colore per accent bar */
.block-gradient::before    { background: var(--ds-brand-500); }
.block-gradient-2::before  { background: var(--ds-accent-500); }
.block-gradient-3::before  { background: var(--ds-warm-500); }
.block-gradient-4::before  { background: var(--ds-info); }

/* Numero KPI */
.wt-card-right {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-text-4xl);
  font-weight: var(--ds-font-bold);
  color: var(--ds-text-primary);
  line-height: 1;
  margin: var(--ds-space-2) 0;
}

/* Icon KPI */
.wt-card-icon-2 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--ds-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ds-space-3);
}

.wt-card-icon-2 i {
  font-size: 20px;
  color: var(--ds-brand-600);
}

.block-gradient-2 .wt-card-icon-2  { background: var(--ds-accent-50); }
.block-gradient-2 .wt-card-icon-2 i { color: var(--ds-accent-600); }
.block-gradient-3 .wt-card-icon-2  { background: var(--ds-warm-100); }
.block-gradient-3 .wt-card-icon-2 i { color: var(--ds-warm-600); }
.block-gradient-4 .wt-card-icon-2  { background: var(--ds-info-light); }
.block-gradient-4 .wt-card-icon-2 i { color: var(--ds-info); }

/* Label KPI */
.wt-card-bottom-2 h4 {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-secondary);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}

/* =============================================================
   KANBAN BOARD — FUNNEL CANDIDATI
   ============================================================= */

/* Colonne kanban */
#cardViewContainer .card.bg-light {
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
}

/* Prospect column */
#cardViewContainer .col-xl-3:nth-child(1) > .card > .card-body {
  background: var(--ds-neutral-100) !important;
  border-radius: 12px !important;
  border-top: 3px solid var(--ds-neutral-400) !important;
}

/* Interview column */
#cardViewContainer .col-xl-3:nth-child(2) > .card > .card-body {
  background: var(--ds-brand-50) !important;
  border-radius: 12px !important;
  border-top: 3px solid var(--ds-brand-400) !important;
}

/* Shortlisted column */
#cardViewContainer .col-xl-3:nth-child(3) > .card > .card-body {
  background: var(--ds-accent-50) !important;
  border-radius: 12px !important;
  border-top: 3px solid var(--ds-accent-400) !important;
}

/* Placement column */
#cardViewContainer .col-xl-3:nth-child(4) > .card > .card-body {
  background: var(--ds-brand-100) !important;
  border-radius: 12px !important;
  border-top: 3px solid var(--ds-brand-500) !important;
}

/* Titoli colonne kanban */
#cardViewContainer .card-title.text-uppercase {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-bold);
  letter-spacing: var(--ds-tracking-widest);
  color: var(--ds-text-secondary);
}

/* Candidate draggable cards */
.card.draggable {
  border: 1px solid var(--ds-border-light) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: grab;
}

.card.draggable:hover {
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15) !important;
  transform: translateY(-1px);
}

.card.draggable:active {
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2) !important;
}

/* Candidate name link nei kanban card */
.card.draggable a {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  text-decoration: none !important;
}

.card.draggable a:hover {
  color: var(--ds-brand-600);
}

/* Dropzone */
.dropzone {
  background: rgba(5, 150, 105, 0.04) !important;
  border: 2px dashed var(--ds-brand-300) !important;
  border-radius: 8px !important;
  min-height: 60px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.droppable {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: var(--ds-brand-500) !important;
}

/* =============================================================
   RADAR CHART (INTERVIEW) — contenitore
   ============================================================= */

#radarChart {
  display: block;
  margin: 0 auto;
  max-width: 480px;
  max-height: 480px;
}

.ml-radar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--ds-space-8);
  background: var(--ds-surface-card);
  border-radius: 12px;
  border: 1px solid var(--ds-border-light);
}

/* =============================================================
   CHART.JS — LEGGENDA
   ============================================================= */

.ml-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-top: 1px solid var(--ds-border-light);
  justify-content: center;
}

.ml-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  font-family: var(--ds-font-ui);
  color: var(--ds-text-secondary);
}

.ml-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}