/**
 * KKB Client Dashboard
 *
 * Theming inherits from kkb-documents' shared color-mode system:
 * `.kkb-document-page--mode-{light,auto,dark}` defines --kkb-doc-bg /
 * --kkb-doc-ink / --kkb-doc-ink-dim / --kkb-doc-ink-faint / --kkb-doc-hair,
 * which this file consumes through local --dash-* aliases. Swapping a
 * mode flips the whole dashboard without any additional CSS here.
 *
 * `--dashboard-primary` (client brand color) is injected by PHP per page.
 */

/* ============================================
   Tokens — alias the shared --kkb-doc-* set
   ============================================ */

.dashboard-wrapper {
	--dashboard-primary: var(--kkb-accent, #4afaa8);
	--dashboard-primary-light: color-mix(in srgb, var(--dashboard-primary), white 25%);
	--dashboard-primary-dark:  color-mix(in srgb, var(--dashboard-primary), black 20%);
	--dashboard-primary-10:    color-mix(in srgb, var(--dashboard-primary) 10%, transparent);
	--dashboard-primary-20:    color-mix(in srgb, var(--dashboard-primary) 20%, transparent);

	--dash-bg:          var(--kkb-doc-bg, #ffffff);
	--dash-bg-card:     color-mix(in srgb, var(--kkb-doc-bg, #ffffff), var(--kkb-doc-ink, #121214) 4%);
	--dash-bg-elevated: var(--kkb-doc-bg-soft, var(--kkb-doc-bg, #ffffff));
	--dash-text:        var(--kkb-doc-ink,       #121214);
	--dash-text-muted:  var(--kkb-doc-ink-dim,   rgba(18, 18, 20, 0.72));
	--dash-text-faint:  var(--kkb-doc-ink-faint, rgba(18, 18, 20, 0.42));
	--dash-border:      var(--kkb-doc-hair,      rgba(18, 18, 20, 0.12));
	--dash-btn-text:    var(--kkb-doc-bg,        #ffffff);

	--dash-radius: 8px;

	--dash-success: #10b981;
	--dash-warning: #f59e0b;
	--dash-danger:  #ef4444;

	--chart-t1: #2563eb;
	--chart-t2: #7c3aed;
	--chart-t3: #10b981;
	--chart-t1-target: color-mix(in srgb, var(--chart-t1) 40%, var(--dash-bg));
	--chart-t2-target: color-mix(in srgb, var(--chart-t2) 40%, var(--dash-bg));
	--chart-grid:      color-mix(in srgb, var(--dash-text) 10%, transparent);
	--chart-text:      var(--dash-text-muted);

	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark-mode rebases chart bases for contrast on the dark surface. */
.kkb-document-page--mode-dark .dashboard-wrapper {
	--chart-t1: #60a5fa;
	--chart-t2: #a78bfa;
	--chart-t3: #34d399;
}

@media (prefers-color-scheme: dark) {
	.kkb-document-page--mode-auto .dashboard-wrapper {
		--chart-t1: #60a5fa;
		--chart-t2: #a78bfa;
		--chart-t3: #34d399;
	}
}

.dashboard-wrapper *,
.dashboard-wrapper *::before,
.dashboard-wrapper *::after {
	box-sizing: border-box;
}

/* ============================================
   Layout
   ============================================ */

.dashboard-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	padding: 2rem;
	color: var(--dash-text);
	background: var(--dash-bg);
}

.dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--dash-border);
	gap: 1rem;
}

.dashboard-header__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dashboard-header__logo {
	max-height: 48px;
	width: auto;
	border-radius: 50%;
}

.dashboard-header__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--dash-text);
	margin: 0;
}

/* ============================================
   Admin quick-action buttons
   ============================================ */

.dashboard-admin-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--dashboard-primary-10);
	border: 1px dashed var(--dashboard-primary);
	border-radius: var(--dash-radius);
}
.dashboard-admin-buttons:empty { display: none; }

.dashboard-admin-buttons__label {
	width: 100%;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dashboard-primary);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.dashboard-admin-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--dash-radius);
	transition: all 0.15s;
}
.dashboard-admin-btn--primary {
	background: var(--dashboard-primary);
	color: var(--dash-btn-text);
	border: none;
}
.dashboard-admin-btn--primary:hover {
	background: var(--dashboard-primary-dark);
	color: var(--dash-btn-text);
}
.dashboard-admin-btn--secondary {
	background: var(--dash-bg-elevated);
	color: var(--dash-text);
	border: 1px solid var(--dash-border);
}
.dashboard-admin-btn--secondary:hover {
	border-color: var(--dashboard-primary);
	color: var(--dashboard-primary);
}
.dashboard-admin-btn__icon { font-size: 1rem; line-height: 1; }

/* ============================================
   Intake (admin-only GF render)
   ============================================ */

.dashboard-intake {
	background: var(--dash-bg-elevated);
	border: 1px solid var(--dash-border);
	border-radius: var(--dash-radius);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.dashboard-intake__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--dashboard-primary-10);
	border-bottom: 1px solid var(--dash-border);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--dashboard-primary);
}

.dashboard-intake__icon { font-size: 1rem; line-height: 1; }

.dashboard-intake__label {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dashboard-intake__form { padding: clamp(16px, 1.6vw, 20px); }

.dashboard-intake__warning {
	padding: 0.75rem 1rem;
	background: color-mix(in srgb, var(--dash-warning) 12%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--dash-warning) 30%, transparent);
	color: var(--dash-text);
	font-size: 0.8125rem;
	margin: 0;
}
.dashboard-intake__warning a { color: var(--dashboard-primary); }

/* The GF itself is styled by the theme's global gravity-forms.css.
   Only the intake-panel chrome (header, wrapper border, warning
   stripe) lives here — the form internals stay consistent with every
   other GF on the site. */

/* ============================================
   Sections
   ============================================ */

.dashboard-section {
	background: var(--dash-bg-elevated);
	border-radius: var(--dash-radius);
	border: 1px solid var(--dash-border);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.dashboard-section:last-child { margin-bottom: 0; }

.dashboard-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--dash-border);
}

.dashboard-section__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: var(--dash-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dashboard-section__count {
	background: var(--dash-bg-card);
	border: 1px solid var(--dash-border);
	border-radius: 99px;
	padding: 0.1em 0.55em;
	font-size: 0.6875rem;
	font-weight: 700;
	min-width: 1.5em;
	text-align: center;
	color: var(--dash-text-muted);
}

.dashboard-section--alignment {
	background: var(--dash-bg-card);
	border-style: dashed;
}

.dashboard-alignment__head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(16px, 2vw, 24px);
}

.dashboard-alignment__label {
	color: var(--dash-text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dashboard-alignment__date {
	font-family: var(--kkb-font-display, "Instrument Serif", serif);
	font-style: italic;
	font-size: clamp(18px, 1.8vw, 22px);
	color: var(--dash-text);
}

/* ============================================
   Loading / error / empty
   ============================================ */

.dashboard-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3rem;
	color: var(--dash-text-muted);
}

.dashboard-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--dash-border);
	border-top-color: var(--dashboard-primary);
	border-radius: 50%;
	animation: dashboard-spin 0.6s linear infinite;
}
@keyframes dashboard-spin { to { transform: rotate(360deg); } }

.dashboard-error {
	background: color-mix(in srgb, var(--dash-danger) 12%, transparent);
	color: var(--dash-danger);
	padding: 1rem;
	border-radius: var(--dash-radius);
	border: 1px solid color-mix(in srgb, var(--dash-danger) 30%, transparent);
	margin-bottom: 1.5rem;
}

.dashboard-empty {
	color: var(--dash-text-muted);
	font-style: italic;
	padding: 1rem 0;
	margin: 0;
}

/* ============================================
   Metric cards — pattern reused from
   themes/kkb chapter outcomes (`.kkb-metrics`
   / `.kkb-metric`). Scoped under the dashboard
   wrapper so it doesn't leak and doesn't collide
   with the theme's own rules.
   ============================================ */

.dashboard-wrapper .kkb-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(10px, 1.4vw, 16px);
}
@media (min-width: 720px) {
	.dashboard-wrapper .kkb-metrics { grid-template-columns: repeat(4, 1fr); }
}

.dashboard-wrapper .kkb-metrics--triple { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
	.dashboard-wrapper .kkb-metrics--triple { grid-template-columns: repeat(3, 1fr); }
}

.dashboard-wrapper .kkb-metric {
	position: relative;
	padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 22px);
	border: 0.5px solid var(--dash-border);
	border-radius: 14px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dash-text) 2%, transparent),
		transparent
	);
	overflow: hidden;
	transition:
		border-color 380ms var(--kkb-ease-out, ease),
		background   380ms var(--kkb-ease-out, ease),
		color        380ms var(--kkb-ease-out, ease),
		transform    500ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

/* Linked variant — rendered as `<a class="kkb-metric kkb-metric--link">`
   when the card scrolls to a section below. Hover language mirrors the
   front-page goodco-tile + the form's tile radios: hair border flips to
   the dashboard's brand accent, figure + label pick up color, card
   lifts 2px, corner tick sweeps in. */
.dashboard-wrapper .kkb-metric--link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.dashboard-wrapper .kkb-metric--link:hover,
.dashboard-wrapper .kkb-metric--link:focus-visible {
	outline: none;
	border-color: var(--dashboard-primary);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dashboard-primary) 6%, transparent),
		transparent
	);
	transform: translateY(-2px);
}

.dashboard-wrapper .kkb-metric--link:hover .kkb-metric__figure,
.dashboard-wrapper .kkb-metric--link:focus-visible .kkb-metric__figure,
.dashboard-wrapper .kkb-metric--link:hover .kkb-metric__label,
.dashboard-wrapper .kkb-metric--link:focus-visible .kkb-metric__label {
	color: var(--dashboard-primary);
}

/* Corner tick — 1px line that animates from 0 → 32px on hover.
   Same cue used on the goodco tiles and radio-choice labels. */
.dashboard-wrapper .kkb-metric--link::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 12px;
	width: 0;
	height: 1px;
	background: var(--dashboard-primary);
	transition: width 500ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.dashboard-wrapper .kkb-metric--link:hover::after,
.dashboard-wrapper .kkb-metric--link:focus-visible::after {
	width: 32px;
}

/* Top-right arrow indicator — ↗ glyph, subtle at rest, accent on hover */
.dashboard-wrapper .kkb-metric__arrow {
	position: absolute;
	top: clamp(14px, 1.4vw, 18px);
	right: clamp(14px, 1.4vw, 18px);
	width: 14px;
	height: 14px;
	color: var(--dash-text-faint);
	opacity: 0.6;
	transition:
		color     var(--kkb-dur-fast, 300ms) var(--kkb-ease-out, ease),
		opacity   var(--kkb-dur-fast, 300ms) var(--kkb-ease-out, ease),
		transform var(--kkb-dur-fast, 300ms) var(--kkb-ease-out, ease);
}
.dashboard-wrapper .kkb-metric--link:hover .kkb-metric__arrow,
.dashboard-wrapper .kkb-metric--link:focus-visible .kkb-metric__arrow {
	color: var(--dashboard-primary);
	opacity: 1;
	/* Subtle rotation reads as "link engaging" without the NE-arrow
	   translate (which implied external navigation + a direction the
	   content doesn't actually live in). */
	transform: rotate(-6deg);
}

.dashboard-wrapper .kkb-metric__figure {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--kkb-font-display, "Instrument Serif", "Times New Roman", serif);
	font-style: italic;
	font-size: clamp(44px, 5vw, 64px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--dash-text);
}

.dashboard-wrapper .kkb-metric__unit {
	font-size: 0.55em;
	color: var(--dashboard-primary);
}

.dashboard-wrapper .kkb-metric__label {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dash-text);
	letter-spacing: -0.01em;
}

.dashboard-wrapper .kkb-metric__sub {
	margin-top: 4px;
	font-family: var(--kkb-font-mono, "Geist Mono", "JetBrains Mono", ui-monospace, monospace);
	font-size: 10px;
	color: var(--dash-text-faint);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================
   Collapsibles
   ============================================ */

.dashboard-collapsible {
	background: var(--dash-bg-elevated);
	border-radius: var(--dash-radius);
	border: 1px solid var(--dash-border);
	overflow: hidden;
}

.dashboard-collapsible__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s;
}
.dashboard-collapsible__header:hover { background: var(--dash-bg-card); }

.dashboard-collapsible__title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: var(--dash-text);
}

.dashboard-collapsible__count {
	background: var(--dashboard-primary);
	color: var(--dash-btn-text);
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.2em 0.55em;
	border-radius: 99px;
	min-width: 1.5em;
	text-align: center;
}

.dashboard-collapsible__toggle {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dash-text-muted);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.dashboard-collapsible__toggle svg { width: 16px; height: 16px; }

.dashboard-collapsible[data-collapsed="true"] .dashboard-collapsible__toggle {
	transform: rotate(-90deg);
}

.dashboard-collapsible__body { padding: 0 1.25rem 1.25rem; }

.dashboard-collapsible[data-collapsed="true"] .dashboard-collapsible__body {
	display: none;
}

.dashboard-collapsible--nested {
	background: transparent;
	border: none;
	border-radius: 0;
	margin-bottom: 0.5rem;
}
.dashboard-collapsible--nested:last-child { margin-bottom: 0; }

.dashboard-collapsible--nested .dashboard-collapsible__header {
	padding: 0.625rem 0.75rem;
	background: transparent;
	border-radius: var(--dash-radius);
}
.dashboard-collapsible--nested .dashboard-collapsible__header:hover {
	background: var(--dash-bg-card);
}
.dashboard-collapsible--nested .dashboard-collapsible__title {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dash-text-muted);
}
.dashboard-collapsible--nested .dashboard-collapsible__body {
	padding: 0.25rem 0 0.5rem 0;
}
.dashboard-collapsible--nested .dashboard-collapsible__count {
	background: var(--dash-bg-card);
	border: 1px solid var(--dash-border);
	color: var(--dash-text-muted);
}

.dashboard-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--dash-text-muted);
}
.dashboard-status-dot[data-status="3-in-progress"] { background: var(--dashboard-primary); }
.dashboard-status-dot[data-status="2-on-deck"]     { background: var(--dash-warning); }
.dashboard-status-dot[data-status="in-progress"]   { background: var(--dashboard-primary); }
.dashboard-status-dot[data-status="on-deck"]       { background: var(--dash-warning); }
.dashboard-status-dot[data-status="in-review"]     { background: #8b5cf6; }
.dashboard-status-dot[data-status="blocked"]       { background: var(--dash-danger); }

/* ============================================
   Project lists
   ============================================ */

.dashboard-project-list,
.dashboard-completed-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dashboard-project-item,
.dashboard-completed-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--dash-radius);
	transition: background 0.15s;
}
.dashboard-project-item:hover,
.dashboard-completed-item:hover {
	background: var(--dash-bg-card);
}

.dashboard-project-name { font-weight: 500; font-size: 0.9375rem; }

.dashboard-project-category {
	font-size: 0.6875rem;
	color: var(--dash-text-muted);
	background: var(--dash-bg-card);
	border: 1px solid var(--dash-border);
	padding: 0.2em 0.5em;
	border-radius: 4px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dashboard-completed-date {
	font-size: 0.8125rem;
	color: var(--dash-text-muted);
	white-space: nowrap;
}

.dashboard-completed-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* ============================================
   Chart
   ============================================ */

.dashboard-chart-wrap {
	position: relative;
	height: 300px;
	background: var(--dash-bg-card);
	border: 1px solid var(--dash-border);
	border-radius: var(--dash-radius);
	padding: 1rem;
}

.dashboard-chart-controls {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
	justify-content: flex-end;
}

.dashboard-chart-controls button {
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	border: 1px solid var(--dash-border);
	background: var(--dash-bg-elevated);
	color: var(--dash-text-muted);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s;
}
.dashboard-chart-controls button:hover {
	border-color: var(--dashboard-primary);
	color: var(--dashboard-primary);
}
.dashboard-chart-controls button.active {
	background: var(--dashboard-primary);
	border-color: var(--dashboard-primary);
	color: var(--dash-btn-text);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
	.dashboard-wrapper { padding: 1rem; }
	.dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.dashboard-stats { grid-template-columns: repeat(2, 1fr); }
	.dashboard-chart-wrap { height: 240px; }
	.dashboard-project-item,
	.dashboard-completed-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}