/* ===========================================================================
   c-status - /status/, no espirito do status.claude.com: banner geral, lista
   de componentes e uma faixa de barrinhas (uma por dia) com o historico real.
   =========================================================================== */

.c-status__cabeca { max-width: 60ch; }

.c-status__banner {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin-top: var(--e-4);
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
	transition: background var(--transicao), border-color var(--transicao);
}

.c-status__bannerIcone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink-3);
}

.c-status__bannerTitulo { font-size: 1.1rem; font-weight: 600; }

.c-status__bannerHora {
	margin-top: 0.2rem;
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-status__banner[data-estado="ok"] {
	border-color: rgba(52, 209, 124, 0.35);
	background: rgba(52, 209, 124, 0.08);
}
.c-status__banner[data-estado="ok"] .c-status__bannerIcone {
	background: rgba(52, 209, 124, 0.16);
	color: #34d17c;
}

.c-status__banner[data-estado="degradado"] {
	border-color: rgba(240, 179, 64, 0.4);
	background: rgba(240, 179, 64, 0.08);
}
.c-status__banner[data-estado="degradado"] .c-status__bannerIcone {
	background: rgba(240, 179, 64, 0.18);
	color: #f0b340;
}

.c-status__banner[data-estado="fora"] {
	border-color: rgba(216, 76, 76, 0.45);
	background: rgba(216, 76, 76, 0.08);
}
.c-status__banner[data-estado="fora"] .c-status__bannerIcone {
	background: rgba(216, 76, 76, 0.18);
	color: #d84c4c;
}

/* --------------------------------------------------------- lista/linhas --- */

.c-status__lista {
	margin-top: var(--e-4);
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
}

.c-status__linha {
	padding-bottom: var(--e-2);
	border-bottom: 1px solid var(--linha);
}

.c-status__linhaTopo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}

.c-status__ponto {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ink-3);
}
.c-status__ponto[data-estado="ok"] { background: #34d17c; }
.c-status__ponto[data-estado="degradado"] { background: #f0b340; }
.c-status__ponto[data-estado="fora"] { background: #d84c4c; }

.c-status__nome { flex: 1 1 auto; font-weight: 600; }

.c-status__uptime {
	color: var(--ink-3);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Barras flexiveis (flex:1, sem min-width): comprimem para caber em qualquer
   largura, exatamente como a referencia -- nunca precisam de scroll lateral. */
.c-status__barras {
	display: flex;
	gap: 2px;
	height: 32px;
}

.c-status__barra {
	flex: 1 1 0;
	border-radius: 2px;
	background: var(--surface-2);
	cursor: default;
	transition: filter var(--transicao), transform var(--transicao);
}
.c-status__barra[data-estado="ok"] { background: #34d17c; }
.c-status__barra[data-estado="degradado"] { background: #f0b340; }
.c-status__barra[data-estado="fora"] { background: #d84c4c; }

/* Realce de quem esta sob o tooltip agora -- sem isso, numa faixa de 90
   barrinhas coladas, fica dificil saber qual delas o balao esta descrevendo. */
.c-status__barra.esta-em-foco {
	filter: brightness(1.35);
	transform: scaleY(1.12);
}

/* ------------------------------------------------------------- tooltip ---- */

/* Um so para as 540 barras (ver comentario no PHP): fixed + JS movendo left/top
   a cada hover/toque, em vez de um balao por barra. pointer-events:none pra
   nunca disputar o toque com o dedo de quem esta rolando por cima. */
.c-status__tooltip {
	position: fixed;
	z-index: 40;
	max-width: 220px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio-sm);
	background: var(--surface-2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 120ms ease, transform 120ms ease;
}

.c-status__tooltip[data-visivel="1"] {
	opacity: 1;
	transform: translateY(0);
}

/* Setinha apontando pra barra -- um quadrado rotacionado atras do corpo do
   balao, mesmo truque usado em qualquer tooltip com seta sem imagem. */
.c-status__tooltip::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--surface-2);
	border-right: 1px solid var(--linha-forte);
	border-bottom: 1px solid var(--linha-forte);
}

/* Por padrao o balao fica ACIMA da barra, seta apontando pra baixo; quando
   c-status.js decide que nao cabe (barra perto do topo da tela), ele acrescenta
   este atributo e o CSS espelha tudo -- balao abaixo, seta apontando pra cima. */
.c-status__tooltip:not([data-para-baixo]) { margin-top: -10px; }
.c-status__tooltip:not([data-para-baixo])::after {
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}

.c-status__tooltip[data-para-baixo] { margin-top: 10px; }
.c-status__tooltip[data-para-baixo]::after {
	top: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(225deg);
}

.c-status__tooltipData {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink);
}

.c-status__tooltipDesc {
	margin-top: 0.15rem;
	color: var(--ink-2);
	font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.c-status__tooltip { transition: opacity 120ms ease; }
	.c-status__barra.esta-em-foco { transition: none; }
}

/* --------------------------------------------------------------- legenda --- */

.c-status__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-3);
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-status__legendaCor {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--surface-2);
	vertical-align: middle;
}
.c-status__legendaCor[data-estado="ok"] { background: #34d17c; }
.c-status__legendaCor[data-estado="degradado"] { background: #f0b340; }
.c-status__legendaCor[data-estado="fora"] { background: #d84c4c; }

@media (max-width: 640px) {
	.c-status__barras { height: 24px; }
	.c-status__uptime { display: none; }
}

/* --------------------------------------------------------------- numeros --- */

.c-status__numeros { margin-top: var(--e-4); }

.c-status__numGrade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--e-3);
	margin-top: var(--e-4);
}

.c-status__numCard {
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-status__numRot {
	font-size: 0.8125rem;
	color: var(--ink-3);
}

.c-status__numValor {
	margin-top: 0.25rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.c-status__numNota {
	margin-top: 0.25rem;
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-status__lideres { margin-top: var(--e-4); }

.c-status__lideresLista {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	margin-top: var(--e-2);
}

.c-status__liderLinha {
	display: flex;
	align-items: baseline;
	gap: var(--e-2);
	padding: 0.6rem var(--e-3);
	border: 1px solid var(--linha);
	border-left: 3px solid var(--reino, var(--linha));
	border-radius: var(--raio-sm);
	background: var(--surface);
}

.c-status__liderCat {
	flex: 0 0 auto;
	min-width: 6em;
	font-weight: 600;
	color: var(--ink-2);
	font-size: 0.8125rem;
}

.c-status__liderNome { flex: 1 1 auto; font-weight: 600; }

.c-status__liderMeta {
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-status__liderValor {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}

.c-status__numRodape {
	margin-top: var(--e-3);
	color: var(--ink-3);
	font-size: 0.8125rem;
}

.c-status__numRodape a { color: inherit; }

@media (max-width: 640px) {
	.c-status__liderLinha { flex-wrap: wrap; }
}