/**
 * Session 18 dashboards, pipeline board, and calendar.
 * ----------------------------------------------------
 * Shared look for the Manager, Training, and Executive dashboards, the Kanban
 * pipeline board, and the follow-up calendar. Builds only on design-system tokens
 * (colors, radius, fonts) from csw-design-system.css — no raw hex here.
 */

/* ---------- Shell ---------- */
/* Width is owned by the design system's screen shell (--csw-screen-max). */
.csw-dashboard {
	font-family: var(--csw-font-body);
	color: var(--csw-ink);
	padding: 24px 16px 48px;
}

.csw-dashboard__header {
	margin-bottom: 20px;
}

.csw-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.csw-dashboard__section {
	background: var(--csw-surface);
	border: 1px solid var(--csw-line);
	border-radius: var(--csw-card-radius);
	padding: 20px 22px;
	margin: 0 0 20px;
	scroll-margin-top: 24px;
}

.csw-empty {
	color: var(--csw-muted);
	font-style: italic;
	margin: 8px 0 0;
}

.csw-hint {
	color: var(--csw-muted);
	font-size: 0.9rem;
	margin: 6px 0 14px;
}

.csw-hint--lock::before {
	content: "\1F512"; /* padlock */
	margin-right: 6px;
}

/* ---------- Period selector ---------- */
.csw-period {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}

.csw-period label {
	font-weight: 600;
	color: var(--csw-navy);
}

.csw-period select {
	padding: 8px 12px;
	border: 1px solid var(--csw-line);
	border-radius: 4px;
	font: inherit;
	background: var(--csw-surface);
}

/* ---------- Stat tiles ---------- */
.csw-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 4px 0 14px;
}

.csw-stat {
	flex: 1 1 150px;
	background: var(--csw-surface-alt);
	border: 1px solid var(--csw-line);
	border-radius: var(--csw-card-radius);
	border-left: 4px solid var(--csw-teal);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.csw-stat__value {
	font-family: var(--csw-font-display);
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--csw-navy);
	line-height: 1.1;
}

.csw-stat__label {
	font-size: 0.82rem;
	color: var(--csw-muted);
}

.csw-stat--good { border-left-color: var(--csw-green); }
.csw-stat--warn { border-left-color: var(--csw-olive); }
.csw-stat--bad  { border-left-color: var(--csw-red); }

/* ---------- Meters ---------- */
.csw-meter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.csw-meter {
	flex: 1 1 260px;
}

.csw-meter__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}

.csw-meter__label { font-weight: 600; color: var(--csw-navy); }
.csw-meter__pct   { font-family: var(--csw-font-display); font-weight: 800; }

.csw-meter__track {
	height: 12px;
	background: var(--csw-surface-alt);
	border: 1px solid var(--csw-line);
	border-radius: 999px;
	overflow: hidden;
}

.csw-meter__fill {
	display: block;
	height: 100%;
	background: var(--csw-teal);
	transition: width 0.3s ease;
}

.csw-meter__fill--good  { background: var(--csw-green); }
.csw-meter__fill--warn  { background: var(--csw-olive); }
.csw-meter__fill--bad   { background: var(--csw-red); }
.csw-meter__fill--muted { background: var(--csw-muted); }

.csw-meter__caption {
	display: block;
	margin-top: 4px;
	font-size: 0.82rem;
	color: var(--csw-muted);
}

/* ---------- Charts ---------- */
.csw-chart {
	position: relative;
	height: 280px;
	margin: 10px 0 16px;
}

.csw-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
	gap: 20px;
	align-items: center;
}

.csw-split .csw-chart { margin: 0; }

/* ---------- Legend / swatches ---------- */
.csw-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csw-legend--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 16px;
}

.csw-legend__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.csw-legend__label { flex: 1; }
.csw-legend__val   { font-weight: 700; color: var(--csw-navy); }

.csw-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--csw-teal);
	display: inline-block;
	flex: none;
}

.csw-swatch--teal  { background: var(--csw-teal); }
.csw-swatch--plum  { background: var(--csw-plum); }
.csw-swatch--coral { background: var(--csw-coral); }
.csw-swatch--olive { background: var(--csw-olive); }
.csw-swatch--red   { background: var(--csw-red); }
.csw-swatch--green { background: var(--csw-green); }

/* ---------- Tables ---------- */
.csw-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 0;
	font-size: 0.92rem;
}

.csw-table th,
.csw-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--csw-line);
}

.csw-table thead th {
	font-family: var(--csw-font-display);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--csw-muted);
}

.csw-table .csw-num { text-align: right; font-variant-numeric: tabular-nums; }

.csw-table tbody tr:hover { background: var(--csw-surface-alt); }

/* ---------- Pills (status chips) ---------- */
.csw-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: var(--csw-surface-alt);
	color: var(--csw-ink);
	border: 1px solid var(--csw-line);
}

.csw-pill--active        { background: rgba(73, 170, 91, 0.15); color: #276b34; border-color: rgba(73, 170, 91, 0.4); }
.csw-pill--expiring_soon { background: rgba(185, 179, 76, 0.18); color: #6d6a1c; border-color: rgba(185, 179, 76, 0.5); }
.csw-pill--expired       { background: rgba(160, 67, 67, 0.14); color: #7a2f2f; border-color: rgba(160, 67, 67, 0.4); }

/* ---------- Small button variant ---------- */
.csw-btn--small {
	padding: 8px 18px;
	font-size: 0.85rem;
}

/* ============================================================= *
 * Pipeline Kanban board
 * ============================================================= */
.csw-pipeline__status {
	min-height: 1.2em;
	margin: 0 0 10px;
	color: var(--csw-plum);
	font-weight: 600;
}

.csw-pipeline__board {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 16px;
	align-items: flex-start;
}

.csw-lane {
	flex: 0 0 240px;
	background: var(--csw-surface-alt);
	border: 1px solid var(--csw-line);
	border-radius: var(--csw-card-radius);
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}

.csw-lane.is-over {
	outline: 2px dashed var(--csw-teal);
	outline-offset: -2px;
}

.csw-lane__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 2px solid var(--csw-teal);
}

.csw-lane__title {
	font-family: var(--csw-font-display);
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--csw-navy);
	margin: 0;
	line-height: 1.2;
}

.csw-lane__count {
	background: var(--csw-teal);
	color: var(--csw-btn-text);
	border-radius: 999px;
	padding: 1px 9px;
	font-size: 0.78rem;
	font-weight: 700;
	flex: none;
}

.csw-lane__cards {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	min-height: 40px;
}

.csw-card--consumer {
	background: var(--csw-surface);
	border: 1px solid var(--csw-line);
	border-left: 4px solid var(--csw-plum);
	border-radius: 4px;
	padding: 10px 12px;
	cursor: grab;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.csw-card--consumer:active { cursor: grabbing; }
.csw-card--consumer.is-dragging { opacity: 0.5; }
.csw-card--consumer.is-pending  { opacity: 0.6; }

.csw-card__ref  { font-weight: 700; color: var(--csw-navy); }
.csw-card__meta { font-size: 0.8rem; color: var(--csw-muted); }

/* ============================================================= *
 * Follow-up calendar
 * ============================================================= */
.csw-calendar__nav {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.csw-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 6px;
}

.csw-calendar__weekday {
	font-family: var(--csw-font-display);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--csw-muted);
	text-align: center;
	padding: 4px 0;
}

.csw-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.csw-calendar__cell {
	background: var(--csw-surface);
	border: 1px solid var(--csw-line);
	border-radius: 4px;
	min-height: 96px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.csw-calendar__cell--empty {
	background: transparent;
	border: none;
}

.csw-calendar__cell.is-today {
	border-color: var(--csw-teal);
	box-shadow: inset 0 0 0 1px var(--csw-teal);
}

.csw-calendar__daynum {
	font-weight: 700;
	color: var(--csw-navy);
	font-size: 0.82rem;
}

.csw-calendar__cell.has-items .csw-calendar__daynum { color: var(--csw-plum); }

.csw-calendar__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.csw-calendar__item {
	border-left: 3px solid var(--csw-teal);
	background: var(--csw-surface-alt);
	border-radius: 3px;
	padding: 3px 6px;
	font-size: 0.74rem;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
}

.csw-calendar__item-title { font-weight: 600; color: var(--csw-navy); }
.csw-calendar__item-sub   { color: var(--csw-muted); }

.csw-calendar__item--teal  { border-left-color: var(--csw-teal); }
.csw-calendar__item--plum  { border-left-color: var(--csw-plum); }
.csw-calendar__item--coral { border-left-color: var(--csw-coral); }
.csw-calendar__item--olive { border-left-color: var(--csw-olive); }

/* ---------- Responsive ---------- */
@media ( max-width: 640px ) {
	.csw-split { grid-template-columns: 1fr; }
	.csw-calendar__cell { min-height: 70px; }
	.csw-calendar__item-sub { display: none; }
}