/* --------------------------------------------------------------------------
   Métricas — the per-module KPI board and its toolbar button.

   The board is built for a lobby TV as much as for a desk: large type, high
   contrast, no hover-only information. Colours reuse the a11y.css tokens, so
   every value here already clears the 7:1 ratio of WCAG 1.4.6 (AAA).
   See public/css/a11y.css.
   -------------------------------------------------------------------------- */

/* First action of every card-actions bar; mr-2 separates it from "Nuevo". */
.module-metrics-btn {
	background-color: var(--a11y-primary);
	border-color: var(--a11y-primary);
	color: #ffffff;
	/* 2.5.5 Target Size: same minimum as the other row actions. */
	min-height: var(--a11y-target);
}

.module-metrics-btn:hover,
.module-metrics-btn:focus,
.module-metrics-btn:active {
	background-color: var(--a11y-primary-hover);
	border-color: var(--a11y-primary-hover);
	color: #ffffff;
}

/* --- palette --------------------------------------------------------------

   The board ships two themes because it is read on a TV: dark for an indoor
   lobby, light for a screen facing a window, where a dark panel turns into a
   mirror. Every pair keeps the 7:1 of WCAG 1.4.6 (AAA) against its own
   background, so the toggle never trades contrast for legibility.
   -------------------------------------------------------------------------- */

.metrics-screen {
	--mx-bg: #10151c;
	--mx-header-bg: #0b0f15;
	--mx-border: #2b3440;
	--mx-fg: #e6eaf0;          /* 13.2:1 on --mx-bg */
	--mx-fg-strong: #ffffff;
	--mx-fg-muted: #b9c2cd;    /* 8.9:1 on --mx-header-bg */
	--mx-panel-bg: #1a212b;
	--mx-column-bg: #141a23;
	--mx-card-bg: #1f2733;
	--mx-accent: #7fb2ff;      /* 8.1:1 on --mx-panel-bg */
	--mx-track: #2b3440;
	--mx-avatar-bg: #3a434f;
	--mx-tone-danger: #ff8a94;
	--mx-tone-warning: #ffc76b;
	--mx-tone-success: #7fe0a8;
	--mx-tone-info: #7fb2ff;
}

/* Sunlight: a bright ground beats a dark one behind glass. Text colours come
   from the a11y.css tokens, which are already >= 7:1 on white. */
.metrics-screen.metrics-theme-light {
	--mx-bg: #ffffff;
	--mx-header-bg: #eef1f5;
	--mx-border: #c3cad3;
	--mx-fg: #1b1f24;          /* 15.8:1 on white */
	--mx-fg-strong: #0b0f15;
	--mx-fg-muted: #3f444a;    /* 8.6:1 on --mx-header-bg and --mx-card-bg */
	--mx-panel-bg: #ffffff;
	--mx-column-bg: #f5f7fa;
	--mx-card-bg: #eef1f5;
	--mx-accent: #0f4c9a;      /* 8.3:1 on white */
	--mx-track: #d5dae1;
	--mx-avatar-bg: #4d535a;
	--mx-tone-danger: #8a1220;
	--mx-tone-warning: #6b4000;
	--mx-tone-success: #0f5132;
	--mx-tone-info: #0f4c9a;
}

/* --- full-screen shell ---------------------------------------------------- */

/* Below Bootstrap's .modal-backdrop (1040) on purpose: the preferences dialog
   has to stack over the board, and it brings its own backdrop. */
.metrics-screen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1035;
	display: flex;
	flex-direction: column;
	background-color: var(--mx-bg);
	color: var(--mx-fg);
	overflow: hidden;
}

.metrics-screen[hidden] {
	display: none;
}

/* Stops the page underneath from scrolling behind the board. */
body.metrics-screen-open {
	overflow: hidden;
}

.metrics-screen-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--mx-border);
	background-color: var(--mx-header-bg);
}

.metrics-screen-title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--mx-fg-strong);
}

.metrics-screen-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.metrics-screen-clock {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	color: var(--mx-fg-strong);
}

.metrics-screen-note {
	font-size: 0.9375rem;
	color: var(--mx-fg-muted);
}

.metrics-screen-btn {
	min-height: var(--a11y-target);
}

/* Deliberately not .btn-outline-light: its Bootstrap state rules are
   .btn-outline-light:not(:disabled):not(.disabled):active — specificity (0,4,0)
   — and they pin hover/active to a fixed #343a40 that survived the theme
   switch, leaving dark-grey text on a near-black button. This class owns every
   state so both themes stay readable. */
.metrics-screen-btn.metrics-screen-ghost,
.metrics-screen-btn.metrics-screen-ghost:not(:disabled):not(.disabled) {
	color: var(--mx-fg-strong);
	border: 1px solid var(--mx-fg-muted);
	background-color: transparent;
}

.metrics-screen-btn.metrics-screen-ghost:hover,
.metrics-screen-btn.metrics-screen-ghost:focus,
.metrics-screen-btn.metrics-screen-ghost:not(:disabled):not(.disabled):active {
	color: var(--mx-bg);
	background-color: var(--mx-fg-strong);
	border-color: var(--mx-fg-strong);
}

/* The ring has to stay visible against whichever header is behind it. */
.metrics-screen .metrics-screen-btn:focus-visible {
	outline: 3px solid var(--mx-fg-strong);
	outline-offset: 2px;
}

.metrics-screen-body {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	overflow-y: auto;
	flex: 1 1 auto;
}

/* --- slots ---------------------------------------------------------------- */

.metrics-slot {
	flex: 1 1 260px;
	min-width: 0;
}

/* Capped: without a maximum, a row holding one KPI stretches that card across
   the whole screen and the figure floats in a field of empty panel. */
.metrics-slot-sm {
	flex: 1 1 220px;
	max-width: 22rem;
}

.metrics-slot-md {
	flex: 1 1 420px;
}

.metrics-slot-full {
	flex: 1 1 100%;
}

/* --- KPI cards ------------------------------------------------------------ */

/* Centred, because slots in a row stretch to the tallest panel: left at the
   top, the figure floated above a block of empty card. */
.metrics-kpi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mx-border);
	border-radius: 0.5rem;
	background-color: var(--mx-panel-bg);
}

.metrics-kpi-icon {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	/* 8.1:1 on var(--mx-panel-bg). */
	color: var(--mx-accent);
}

.metrics-kpi-value {
	margin: 0;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mx-fg-strong);
	font-variant-numeric: tabular-nums;
	/* Long figures like "$1,234,567.00" must not overflow the card. */
	overflow-wrap: anywhere;
}

.metrics-kpi-label {
	margin: 0.25rem 0 0;
	font-size: 1.0625rem;
	color: var(--mx-fg);
}

.metrics-kpi-hint,
.metrics-panel-hint {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--mx-fg-muted);
}

/* --- panels (rank, series, board) ----------------------------------------- */

.metrics-panel {
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mx-border);
	border-radius: 0.5rem;
	background-color: var(--mx-panel-bg);
}

.metrics-panel-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--mx-fg-strong);
}

.metrics-panel-hint {
	margin-bottom: 0.75rem;
}

.metrics-empty {
	margin: 0.75rem 0 0;
	color: var(--mx-fg-muted);
}

.metrics-empty-screen {
	flex: 1 1 100%;
	padding: 3rem 1rem;
	text-align: center;
	font-size: 1.25rem;
}

/* --- rank ----------------------------------------------------------------- */

.metrics-rank {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.metrics-rank-item {
	display: grid;
	grid-template-columns: 2rem minmax(6rem, 12rem) 1fr auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 1.0625rem;
}

.metrics-rank-pos {
	color: var(--mx-fg-muted);
	font-variant-numeric: tabular-nums;
}

.metrics-rank-label {
	color: var(--mx-fg-strong);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.metrics-rank-bar {
	height: 0.6rem;
	border-radius: 0.3rem;
	background-color: var(--mx-border);
	overflow: hidden;
}

.metrics-rank-fill {
	display: block;
	height: 100%;
	background-color: var(--mx-accent);
}

.metrics-rank-count {
	color: var(--mx-fg-strong);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* --- series --------------------------------------------------------------- */

.metrics-series {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	min-height: 11rem;
}

.metrics-series-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.metrics-series-count {
	font-size: 0.9375rem;
	color: var(--mx-fg-strong);
	font-variant-numeric: tabular-nums;
}

.metrics-series-bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 7rem;
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: var(--mx-border);
}

.metrics-series-fill {
	display: block;
	width: 100%;
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: var(--mx-accent);
}

/* Rotated: fourteen "DD/MM" labels do not fit side by side in a panel this
   wide, and horizontal ones overprinted each other. */
.metrics-series-label {
	font-size: 0.8125rem;
	color: var(--mx-fg-muted);
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* --- task board ----------------------------------------------------------- */

.metrics-board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-top: 0.75rem;
}

.metrics-column {
	padding: 0.75rem;
	border: 1px solid var(--mx-border);
	/* The status is carried by the label too, never by colour alone (1.4.1). */
	border-top: 4px solid var(--mx-accent);
	border-radius: 0.4rem;
	background-color: var(--mx-column-bg);
}

.metrics-tone-danger {
	border-top-color: var(--mx-tone-danger);
}

.metrics-tone-warning {
	border-top-color: var(--mx-tone-warning);
}

.metrics-tone-success {
	border-top-color: var(--mx-tone-success);
}

.metrics-tone-info {
	border-top-color: var(--mx-tone-info);
}

.metrics-column-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mx-fg-strong);
}

.metrics-column-count {
	padding: 0.1rem 0.6rem;
	border-radius: 1rem;
	background-color: var(--mx-border);
	font-variant-numeric: tabular-nums;
}

.metrics-column-list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Long queues scroll inside their column instead of stretching the board. */
	max-height: 26rem;
	overflow-y: auto;
}

.metrics-card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem;
	margin-bottom: 0.4rem;
	border-radius: 0.35rem;
	background-color: var(--mx-card-bg);
}

.metrics-card-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.metrics-card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--mx-fg-strong);
	overflow-wrap: anywhere;
}

.metrics-card-subtitle {
	font-size: 0.9375rem;
	color: var(--mx-fg);
	overflow-wrap: anywhere;
}

.metrics-card-meta {
	font-size: 0.875rem;
	color: var(--mx-fg-muted);
}

.metrics-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	font-size: 0.9375rem;
	font-weight: 700;
	/* No colour here: EmployeeColor is arbitrary, so avatarHtml() picks black or
	   white per avatar from that colour's luminance. */
}

/* The "sin asignar" circle keeps a dark ground in both themes, so its glyph is
   white in both. Driving it from --mx-fg put a near-black icon on that dark
   circle in light mode — and axe cannot catch it, because an icon font has no
   text node to measure. */
.metrics-avatar-none {
	background-color: var(--mx-avatar-bg);
	color: #ffffff;
}

/* --- preferences dialog --------------------------------------------------- */

.metrics-prefs-legend {
	font-size: 1rem;
	font-weight: 600;
	color: var(--mx-fg);
}

.metrics-prefs-hint {
	color: var(--a11y-muted);
	font-size: 0.875rem;
}

/* The inline space before the hint collapses at a line break, leaving
   "Entregas del mes— Por fecha…" run together. */
.custom-control-label .metrics-prefs-hint,
.custom-control-label .metrics-prefs-kind {
	margin-left: 0.35rem;
}

.metrics-prefs-kind {
	padding: 0.05rem 0.4rem;
	border-radius: 0.25rem;
	background-color: #e9f1fb;
	color: var(--a11y-alert-info-fg);
	font-size: 0.8125rem;
}

.metrics-prefs-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.metrics-prefs-status {
	margin: 0.75rem 0 0;
	min-height: 1.25rem;
	color: var(--a11y-alert-success-fg);
}

.metrics-prefs-status-error {
	color: var(--a11y-alert-danger-fg);
}

/* Bootstrap 4's checkbox hit area is 16px; the label lifts it to the 2.5.5
   minimum without changing the layout. */
.metrics-prefs-kpi + .custom-control-label {
	display: inline-flex;
	align-items: center;
	min-height: var(--a11y-target);
}

/* The file input is .sr-only, so its <label> is the real control and has to
   show the same focus ring the other buttons get (2.4.7). */
.metrics-prefs-share input:focus-visible + label,
#metricsPrefsImport:focus + label {
	outline: 3px solid var(--a11y-primary);
	outline-offset: 2px;
}

/* --- TV sizing ------------------------------------------------------------ */

/* On a lobby screen the board is read from across the room. */
@media (min-width: 1600px) {
	.metrics-screen-title {
		font-size: 2.25rem;
	}

	.metrics-kpi-value {
		font-size: 3.5rem;
	}

	.metrics-kpi-label,
	.metrics-rank-item,
	.metrics-card-title {
		font-size: 1.25rem;
	}

	.metrics-panel-title {
		font-size: 1.5rem;
	}
}