/*
 * V2 visual design - matched directly against the client's mockup image
 * (received 2026-07-20, light theme with white cards on a light-gray
 * canvas). Two earlier attempts at this file guessed wrong (first dark,
 * then a generic light theme) - every color below was read off the actual
 * mockup screenshot, not invented or borrowed from the live site.
 */

.naemt-dashboard {
	--naemt-surface-page:   #f5f6f8;
	--naemt-surface-card:   #ffffff;
	--naemt-surface-tile:   #f3f4f6;
	--naemt-ink-primary:    #111827;
	--naemt-ink-secondary:  #4b5563;
	--naemt-ink-muted:      #9ca3af;
	--naemt-gridline:       #e5e7eb;
	--naemt-baseline:       #e5e7eb;

	/* Chart bars/legend (revenue vs expense as position, color is secondary). */
	--naemt-color-revenue:  #22c55e;
	--naemt-color-expense:  #f87171;
	--naemt-color-line:     #94a3b8;

	/* Lighter tints for the current month's "still expected" bar segment. */
	--naemt-color-revenue-expected: #bbf7d0;
	--naemt-color-expense-expected: #fecaca;

	/* Stat-tile VALUE colors follow the number's own sign (client rule,
	   2026-07-20): positive = green, negative = red, zero = neutral ink.
	   No fixed color per metric type - no teal, no purple. */
	--naemt-value-positive: #16a34a;
	--naemt-value-negative: #dc2626;

	--naemt-status-good:    #22c55e;
	--naemt-status-warning: #fbbf24;
	--naemt-status-critical: #f87171;

	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--naemt-ink-primary);
	background: var(--naemt-surface-page);
	border-radius: 16px;
	padding: 1.5rem;
	box-sizing: border-box;
}

.naemt-dashboard * {
	box-sizing: border-box;
}

.naemt-dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Client, 2026-10-14 (R2): shown while the live exchange rate is unavailable. */
.naemt-dashboard-notice {
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--naemt-value-negative);
	background: var(--naemt-surface-tile);
	color: var(--naemt-ink-secondary);
	font-size: 0.85rem;
}

.naemt-dashboard-header-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
}

/* Client, 2026-09-25: "Gør 'Opdateres om: 24 minutter' ikke fed og teksten
   halv så stor" - not bold, half the header title's size. */
.naemt-dashboard-refresh-countdown {
	font-weight: 400;
	font-size: 0.7rem;
}

/* Radial countdown to the next auto-refresh (client, 2026-07-23), replacing
   the old plain pulsing dot. The ring depletes over exactly the same
   duration as dashboard.js's auto-reload timer (REFRESH_INTERVAL_MS, 30
   min) - both are anchored to page load, so the ring empties out right as
   the page reloads itself. Keep the animation duration below in sync with
   that JS constant if either ever changes. */
.naemt-dashboard-live-dot {
	display: inline-block;
	vertical-align: middle;
	transform: rotate(-90deg);
	overflow: visible;
}

.naemt-dashboard-live-dot-track {
	fill: none;
	stroke: rgba(34, 197, 94, 0.25);
	stroke-width: 3;
}

.naemt-dashboard-live-dot-progress {
	fill: none;
	stroke: var(--naemt-status-good);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 50.27;
	stroke-dashoffset: 0;
	animation: naemt-dashboard-countdown 1800s linear forwards;
}

@keyframes naemt-dashboard-countdown {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 50.27;
	}
}

.naemt-dashboard-header-date {
	color: var(--naemt-ink-muted);
	font-size: 0.85rem;
}

.naemt-dashboard-section {
	margin-bottom: 1.5rem;
}

.naemt-dashboard-section:last-child {
	margin-bottom: 0;
}

.naemt-dashboard-section h2 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--naemt-ink-primary);
}

/* --- Stat tiles --- */

.naemt-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

.naemt-dashboard-stat {
	background: var(--naemt-surface-card);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.naemt-dashboard-stat-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--naemt-ink-muted);
	font-weight: 600;
}

.naemt-dashboard-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: proportional-nums;
	color: var(--naemt-ink-primary);
}

/* Keeps the big value and its "+X forventet" note on the same line (client,
   2026-09-25: "Add the forventet text after the big number so actual and
   expected is on the same line") - the delta badge below stays its own line. */
.naemt-dashboard-stat-value-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Progress/target line under a gradient-colored stat (Penge i kisten,
   Minimum indtjening, Gennemsnitlig minimum indtjening) - "current / target",
   deliberately muted/neutral so only the main value above carries color. */
.naemt-dashboard-stat-subvalue {
	font-size: 0.75rem;
	color: var(--naemt-ink-muted);
}

/* Client, 2026-10-13: Penge i kisten's "/ target goal kr." portion only -
   smaller and black (ink-primary), not the muted gray the rest of the
   subvalue line uses. */
.naemt-dashboard-stat-subvalue-target {
	font-size: 0.65rem;
	color: var(--naemt-ink-primary);
}

.naemt-dashboard-stat-value.is-positive {
	color: var(--naemt-value-positive);
}

.naemt-dashboard-stat-value.is-negative {
	color: var(--naemt-value-negative);
}

.naemt-dashboard-stat-value.is-neutral {
	color: var(--naemt-ink-primary);
}

/* Threshold-based coloring (good/warning/critical), for stats that read as
   "hitting a target" rather than a plain positive/negative number - e.g.
   5-stjernede anmeldelser (Naemt_Dashboard_Status::five_star()). */
.naemt-dashboard-stat-value.is-good {
	color: var(--naemt-status-good);
}

.naemt-dashboard-stat-value.is-warning {
	color: #ca8a04;
}

.naemt-dashboard-stat-value.is-critical {
	color: #f97316;
}

.naemt-dashboard-delta {
	font-size: 0.8rem;
	font-weight: 500;
	width: fit-content;
}

/* "+X forventet" sub-label under Omsætning/Udgifter (Version 5 roadmap,
   client 2026-09-25: "slightly green for expected revenue, slightly red
   for expected expenses") - deliberately muted (small, lighter tint) so it
   reads as a secondary forecast note, not competing with the main value. */
.naemt-dashboard-stat-expected {
	font-size: 0.75rem;
	font-weight: 500;
	width: fit-content;
}

.naemt-dashboard-stat-expected.is-revenue {
	color: var(--naemt-value-positive);
	opacity: 0.75;
}

.naemt-dashboard-stat-expected.is-expense {
	color: var(--naemt-value-negative);
	opacity: 0.75;
}

.naemt-dashboard-delta-good {
	color: #16a34a;
}

.naemt-dashboard-delta-bad {
	color: #ef4444;
}

.naemt-dashboard-delta-neutral {
	color: var(--naemt-ink-muted);
}

/* --- Likviditetsoversigt chart --- */

.naemt-dashboard-chart-card {
	background: var(--naemt-surface-card);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.naemt-dashboard-chart-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.naemt-dashboard-chart-title {
	font-weight: 600;
}

.naemt-dashboard-chart-subtitle {
	color: var(--naemt-ink-muted);
	font-size: 0.85rem;
	margin-top: 0.15rem;
}

.naemt-dashboard-chart-legend {
	display: flex;
	gap: 1rem;
	font-size: 0.8rem;
	color: var(--naemt-ink-secondary);
}

.naemt-dashboard-chart-legend-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.naemt-dashboard-chart-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.naemt-dashboard-chart-legend-swatch.is-revenue {
	background: var(--naemt-color-revenue);
}

.naemt-dashboard-chart-legend-swatch.is-expense {
	background: var(--naemt-color-expense);
}

.naemt-dashboard-chart-legend-swatch.is-expected {
	background: linear-gradient(to bottom, var(--naemt-color-revenue-expected) 50%, var(--naemt-color-expense-expected) 50%);
}

.naemt-dashboard-chart-legend-line {
	width: 14px;
	height: 2px;
	background: var(--naemt-color-line);
	display: inline-block;
}

.naemt-dashboard-chart {
	position: relative;
}

.naemt-chart {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.naemt-chart-bar-revenue {
	fill: var(--naemt-color-revenue);
}

.naemt-chart-bar-expense {
	fill: var(--naemt-color-expense);
}

.naemt-chart-bar-revenue-expected {
	fill: var(--naemt-color-revenue-expected);
}

.naemt-chart-bar-expense-expected {
	fill: var(--naemt-color-expense-expected);
}

.naemt-chart-line {
	fill: none;
	stroke: var(--naemt-color-line);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.naemt-chart-marker {
	fill: var(--naemt-color-line);
	stroke: var(--naemt-surface-card);
	stroke-width: 2;
}

.naemt-chart-baseline {
	stroke: var(--naemt-baseline);
	stroke-width: 1;
}

.naemt-chart-month-label {
	fill: var(--naemt-ink-muted);
	font-size: 11px;
	font-family: "Montserrat", sans-serif;
}

.naemt-chart-hit {
	fill: transparent;
	cursor: pointer;
}

.naemt-chart-hit:focus {
	outline: none;
	fill: rgba(17, 24, 39, 0.03);
}

.naemt-chart-hit.is-active {
	fill: rgba(17, 24, 39, 0.03);
}

.naemt-chart-tooltip {
	position: absolute;
	z-index: 2;
	background: var(--naemt-surface-card);
	border: 1px solid var(--naemt-gridline);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	line-height: 1.4;
	pointer-events: none;
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12);
	white-space: nowrap;
}

.naemt-chart-tooltip strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--naemt-ink-primary);
}

.naemt-chart-tooltip-row.is-revenue {
	color: var(--naemt-color-revenue);
}

.naemt-chart-tooltip-row.is-expense {
	color: var(--naemt-color-expense);
}

.naemt-chart-tooltip-row.is-result {
	color: var(--naemt-value-positive);
}

.naemt-chart-tooltip-row.is-result.is-negative {
	color: var(--naemt-value-negative);
}

.naemt-chart-tooltip-row.is-expected {
	opacity: 0.75;
	font-size: 0.75em;
}

/* --- Mål: sliding milestone cards --- */

.naemt-dashboard-goals {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 0.25rem;
}

.naemt-dashboard-goals::-webkit-scrollbar {
	height: 6px;
}

.naemt-dashboard-goals::-webkit-scrollbar-thumb {
	background: var(--naemt-gridline);
	border-radius: 999px;
}

.naemt-dashboard-goal {
	background: var(--naemt-surface-card);
	border-radius: 12px;
	padding: 1.1rem 1.25rem;
	flex: 1 1 0;
	min-width: 0;
	scroll-snap-align: start;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.naemt-dashboard-goal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.naemt-dashboard-goal-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--naemt-ink-primary);
}

.naemt-dashboard-goal-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.naemt-dashboard-goal-figure {
	background: var(--naemt-surface-tile);
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
}

.naemt-dashboard-goal-figure-label {
	display: block;
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--naemt-ink-muted);
	margin-bottom: 0.2rem;
	font-weight: 600;
}

.naemt-dashboard-goal-figure-value {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--naemt-ink-primary);
}

.naemt-dashboard-goal-figure-value.is-negative {
	color: #dc2626;
}

.naemt-dashboard-progress-track {
	background: var(--naemt-surface-tile);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.naemt-dashboard-progress-fill {
	height: 100%;
	/* background set inline per goal - a continuous gradient by progress % (Naemt_Dashboard_Status::gradient_color()), not a fixed class. */
}

.naemt-dashboard-goal-percent {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: right;
	/* color set inline per goal - same gradient as .naemt-dashboard-progress-fill. */
}

/* Client, 2026-10-13: "UNLIMITED goals... with pagination" - driven entirely
   by dashboard.js (which pages .naemt-dashboard-goal cards 3 at a time and
   fills in the "X / Y" label); this is just the chrome. */
/* Client, 2026-10-13: "move the arrows to there... Same line as 'Mål' but
   bottom aligned" - the pager sits on the same row as the heading, flush
   with its text baseline; the row itself carries the spacing down to the
   goal cards that the heading's own margin used to provide. */
.naemt-dashboard-maal-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.naemt-dashboard-maal-header h2 {
	margin: 0;
}

.naemt-dashboard-goals-pager {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.naemt-dashboard-goals-pager-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--naemt-ink-primary);
	min-width: 2.5em;
	text-align: center;
}

.naemt-dashboard-goals-pager-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	border: 1px solid var(--naemt-status-good);
	background: var(--naemt-surface-card);
	color: var(--naemt-status-good);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.naemt-dashboard-goals-pager-btn:hover:not(:disabled) {
	border-color: var(--naemt-status-good);
	background: var(--naemt-surface-tile);
}

.naemt-dashboard-goals-pager-btn:disabled {
	border-color: var(--naemt-gridline);
	color: var(--naemt-ink-muted);
	opacity: 0.6;
	cursor: default;
}

/* --- Error state --- */

.naemt-dashboard-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 1rem;
	color: var(--naemt-ink-primary, #111827);
}

.naemt-dashboard-error-detail {
	font-family: monospace;
	font-size: 0.85rem;
	color: var(--naemt-ink-secondary, #4b5563);
}