/*!
 * HEA — Hotel Everywhere, Anytime — Proprietary Software
 * (formerly known as "Opero" until v18.8.0.21; renamed in v18.8.0.22)
 * Copyright (c) 2026 Hugo Filipe Araújo Mata. All rights reserved.
 * Unauthorized copying, modification, distribution, or use of this
 * file, via any medium, is strictly prohibited without prior written
 * permission from the copyright holder. See LICENSE.md for details.
 */
/* ══════════════════════════════════════════════════════════════
   ceo.css — Opero v18.8 — CEO View
   Apenas regras específicas. Tudo o que possa ser herdado das
   classes existentes da Home GM (.gm-card, .gm-hotel-today,
   .gm-yesterday, .op-icon, .op-tile-fin/fb/hr) NÃO é redefinido.
══════════════════════════════════════════════════════════════ */

/* Container — escondido por defeito; activado via .is-open.
   padding-top: 52px deixa espaço à topbar do app, igual ao #op-home. */
#op-page-ceo {
  display: none;
  padding: 70px 18px 16px;
  background: var(--sand, #FAF8F2);
  min-height: 100vh;
  box-sizing: border-box;
}
#op-page-ceo.is-open { display: block; }

/* Loading + empty */
.ceo-loading {
  text-align: center;
  padding: 60px 20px;
  color: rgba(0,0,0,0.45);
  font-size: 13px;
}
.ceo-empty {
  padding: 30px 12px;
  text-align: center;
  color: rgba(0,0,0,0.35);
  font-size: 24px;
}

/* Layout 2 colunas em desktop, 1 em mobile.
   SEM max-width — usar a largura inteira do container. */
.ceo-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items: stretch;
  /* alpha3p52.10 (16 Mai 2026): padding-bottom do #op-page-ceo reduzido
     de 32px → 16px para eliminar scroll mínimo de 1-2px. Min-height ajustado:
     70px (padding-top) + 16px (padding-bottom) = 86px. */
  min-height: calc(100vh - 86px);
}
.ceo-col-left, .ceo-col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Cards "middle" esticam: KPIs na coluna esquerda, Yesterday na direita.
   Os bottom cards (chart, donut) mantêm altura natural — são empurrados
   para o fundo da coluna pelo card que cresce acima deles. */
.ceo-col-left  > .ceo-kpis-card { flex: 1 1 auto; min-height: 0; }
.ceo-col-right > .gm-yesterday  { flex: 1 1 auto; min-height: 0; }

@media (max-width: 900px) {
  .ceo-grid { grid-template-columns: 1fr; min-height: 0; }
  .ceo-col-left  > .ceo-kpis-card,
  .ceo-col-right > .gm-yesterday { flex: 0 0 auto; }
  /* v18.8.0.18 — 4ª coluna (Conferences) só em desktop */
  #op-page-ceo .gm-yd-col-desktop { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   v18.8.0.20 — Layout compacto da Home CEO (sem scroll vertical)
   Header com label à esquerda + numerão à direita; KPIs colados
   no top; paddings reduzidos para tudo caber numa página.
══════════════════════════════════════════════════════════════ */

/* Header em linha: label esquerda · numerão direita */
#op-page-ceo .ceo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#op-page-ceo .ceo-card-head-lbl {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .85;
  font-weight: 500;
}
#op-page-ceo .ceo-card-head-val {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
#op-page-ceo .ceo-card-meta {
  font-size: 11px;
  opacity: .7;
  margin-bottom: 12px;
}

/* Cards compactos: padding reduzido */
#op-page-ceo .gm-card.ceo-compact {
  padding: 14px 16px !important;
}

/* Hotel Today compacto: secondary com border-top em vez de margin grande */
#op-page-ceo .ceo-ht-secondary {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
  margin-top: 4px;
}
#op-page-ceo .ceo-ht-secondary .gm-ht-mid {
  font-size: 18px;
}
#op-page-ceo .ceo-ht-secondary .gm-ht-sublbl {
  font-size: 9px;
  letter-spacing: .5px;
}

/* Yesterday compacto: pills mais baixos */
#op-page-ceo .gm-yesterday.ceo-compact .gm-yd-breakdown {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
  margin-top: 4px;
}
#op-page-ceo .gm-yesterday.ceo-compact .gm-yd-pill {
  padding: 8px 10px;
}
#op-page-ceo .gm-yesterday.ceo-compact .gm-yd-pill-val {
  font-size: 13px;
}
#op-page-ceo .gm-yesterday.ceo-compact .gm-yd-pill-lbl {
  font-size: 9px;
}

/* KPIs compactos: colados ao top, fontes menores, padding interno reduzido */
#op-page-ceo .ceo-kpis-card {
  padding: 14px 16px;
}
#op-page-ceo .ceo-kpis-row {
  gap: 8px;
}
#op-page-ceo .ceo-kpi {
  padding: 4px 0;
}
#op-page-ceo .ceo-kpi-label {
  font-size: 10px;
  letter-spacing: .5px;
}
#op-page-ceo .ceo-kpi-val {
  font-size: 22px;
  line-height: 1.1;
  margin-top: 2px;
}
#op-page-ceo .ceo-kpi-sub {
  font-size: 10px;
  margin-top: 1px;
}

/* Launcher — 3 tiles em vez de 7. Reproduz o styling completo das tiles
   da Home GM (background gradient colorido, halo, ícone branco grande,
   label branco), porque as regras originais têm prefix #op-home #op-launcher
   e não apanham na vista CEO. */
.ceo-launcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19 {
  background: var(--tile-bg, linear-gradient(140deg,#378ADD,#0C447C));
  border: none !important;
  padding: 14px 8px 12px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 110px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(10,40,60,.10);
  transition: transform .15s ease, box-shadow .2s ease;
  cursor: pointer;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19:hover {
  box-shadow: 0 6px 16px rgba(10,40,60,.18);
  transform: translateY(-2px);
  border: none !important;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19::before {
  content: '';
  position: absolute;
  top: -14px; right: -14px;
  width: 64px; height: 64px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19 .op-icon-svg.op-icon-3d {
  background: transparent !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
  position: relative;
  z-index: 1;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19 .op-icon-svg.op-icon-3d svg {
  width: 50px !important;
  height: 50px !important;
  display: block !important;
}
#op-page-ceo .ceo-launcher .op-icon.op-v19 .op-icon-label {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  position: relative;
  z-index: 1;
}
/* Paleta por tile — replicada do GM */
#op-page-ceo .ceo-launcher .op-icon.op-v19.op-tile-fb  { --tile-bg: linear-gradient(140deg,#F0997B 0%,#993C1D 100%); }
#op-page-ceo .ceo-launcher .op-icon.op-v19.op-tile-hr  { --tile-bg: linear-gradient(140deg,#5DCAA5 0%,#0F6E56 100%); }
#op-page-ceo .ceo-launcher .op-icon.op-v19.op-tile-fin { --tile-bg: linear-gradient(140deg,#7F77DD 0%,#3C3489 100%); }

/* KPIs card — único componente novo da CEO View.
   Como flex column, a row de KPIs estica para preencher a altura toda
   quando o card cresce. */
.ceo-kpis-card {
  background: var(--surface, white);
  border: 0.5px solid var(--border, rgba(0,0,0,0.08));
  border-radius: var(--radius, 12px);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ceo-kpis-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  align-content: center;
}
@media (max-width: 700px) {
  .ceo-kpis-row { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
}
.ceo-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.ceo-kpi-label {
  font-size: 11px;
  color: rgba(0,0,0,0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.ceo-kpi-val {
  font-size: 28px;
  font-weight: 500;
  font-family: 'DM Mono', ui-monospace, monospace;
  color: #2C2C2A;
  line-height: 1.1;
}
.ceo-kpi-sub {
  font-size: 11px;
  letter-spacing: 0.2px;
}
.ceo-kpi-sub.pos  { color: #0F6E56; }
.ceo-kpi-sub.neg  { color: #A32D2D; }
.ceo-kpi-sub.demo { color: rgba(0,0,0,0.45); font-style: italic; }

/* Chart e donut cards — herdam .card e .card-hd do GM (definidos em
   index.html). Não acrescento estilos próprios — fica idêntico ao GM. */

/* Yesterday card no contexto CEO — overrides para fundo verde escuro
   garantirem legibilidade. As regras .gm-yd-* têm prefix #op-home no
   index.html e por isso não apanham aqui.
   Layout: título em cima, números empurrados para o fundo (flex-end). */
#op-page-ceo .gm-yesterday {
  display: flex;
  flex-direction: column;
}
#op-page-ceo .gm-yesterday > .gm-card-title {
  flex: 0 0 auto;
}
#op-page-ceo .gm-yesterday-row {
  flex: 1 1 auto;
  display: flex !important;
  align-items: flex-end;
}
#op-page-ceo .gm-yesterday .gm-yd-col,
#op-page-ceo .gm-yesterday .gm-yd-col:nth-child(2),
#op-page-ceo .gm-yesterday .gm-yd-col:last-child {
  text-align: left;
  border: 0;
  padding: 0;
}
#op-page-ceo .gm-yesterday .gm-yd-val,
#op-page-ceo .gm-yesterday .gm-yd-col:last-child .gm-yd-val {
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1.1;
}
#op-page-ceo .gm-yesterday .gm-yd-lbl {
  color: rgba(255,255,255,0.75) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════
   v18.8.0.49 — TILES CEO COM PNG HEA NAVY
   ──────────────────────────────────────────────────────────────
   Quando o tile contém <img> (PNG HEA navy, alinhado com Home GM),
   anula o gradient colorido + halo + padding interno do CSS antigo.
   PNG já traz o seu próprio fundo navy + ilustração branca.

   Pattern espelhado do index.html linhas ~3120 (GM Home tiles).
   Bloco isolado para rollback trivial: apagar este bloco volta aos
   gradients coloridos com SVGs (que continuariam a existir como
   constantes se não tivessem sido removidas em ceo.js — já não há
   forma de reverter aos SVGs sem repor essas constantes).

   Browser compat: :has() Edge/Chrome 105+, FF 121+, Safari 15.4+.
══════════════════════════════════════════════════════════════ */
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img){
  background: transparent !important;     /* PNG dá a cor */
  box-shadow: none !important;             /* halo passa para o quadrado */
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;                 /* expande para caber label fora */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border-radius: 16px !important;
  overflow: visible !important;            /* label pode sair do botão */
}
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img):hover {
  box-shadow: none !important;
  transform: translateY(-1px);
}
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img)::before {
  display: none !important;                /* anula halo radial */
}
/* Quadrado (container do PNG) — fixo, com cantos arredondados e leve sombra */
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img) .op-icon-svg.op-icon-3d{
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden;
  flex: 0 0 110px;
  display: block;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: 0 1px 5px rgba(10,40,60,.08);
}
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img) .op-icon-svg.op-icon-3d img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  border-radius: 16px;
}
/* Label fora do tile, Bone & Ink (alinhado com Home GM) */
#op-page-ceo .ceo-launcher .op-icon.op-v19:has(img) .op-icon-label{
  position: static !important;
  display: block;
  margin-top: 8px !important;
  color: #0a1628 !important;
  text-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
  z-index: auto;
}

/* ══════════════════════════════════════════════════════════════
   v18.8.1.0-alpha3p52.5 (16 Mai 2026, Hugo) — CEO ADJUSTMENTS
   ──────────────────────────────────────────────────────────────
   1. Banner "No data loaded": esconder na vista CEO. Banner é função
      global do GM (_showNoDataBanner em index.html ~17184) que insere
      DOM antes de .ceo-kpis-card. Em CEO não faz sentido (vista
      diferente, sempre tem context). CSS-only override — JS continua
      a criar/inserir mas display:none o esconde.

   2. Donut "Revenue by Department" rebuild (SVG inline + stat cards
      lateral, paridade GM buildFinRevenueMix). Sem Chart.js.
══════════════════════════════════════════════════════════════ */

/* ─── 1. Banner stale: hide na CEO ─── */
#op-page-ceo #no-data-banner {
  display: none !important;
}

/* ─── 2. Donut Revenue by Department (SSR via _ceoBuildDonut) ─── */
/* alpha3p52.6 (16 Mai 2026, Hugo) — Layout Opção B:
   donut 150px esquerda + stat cards em grid 2×2 lateral.
   Aproveita toda a largura disponível do card (~600px), evita
   espaço em branco à direita que existia no layout 1-coluna do .5 */
#op-page-ceo .ceo-donut-card {
  padding: 14px 16px;
}

#op-page-ceo .ceo-donut-wrap {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
}

#op-page-ceo .ceo-donut-svg-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
}

#op-page-ceo .ceo-donut-svg {
  width: 100%;
  height: 100%;
  display: block;
}

#op-page-ceo .ceo-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#op-page-ceo .ceo-donut-center-val {
  font-size: 20px;
  font-weight: 500;
  font-family: 'DM Mono', ui-monospace, monospace;
  color: #2C2C2A;
  line-height: 1;
  letter-spacing: -.01em;
}

#op-page-ceo .ceo-donut-center-lbl {
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 5px;
}

/* alpha3p52.6 — Grid 2×2: aproveita largura horizontal,
   cada categoria respira em vez de stack vertical estreito */
#op-page-ceo .ceo-donut-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

#op-page-ceo .ceo-donut-stat {
  border-left: 3px solid var(--rmx-c, rgba(0,0,0,0.15));
  border-radius: 0;  /* design system: single-sided borders sem rounded */
  padding: 4px 0 4px 12px;
  min-width: 0;
}

#op-page-ceo .ceo-donut-stat-name {
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
}

#op-page-ceo .ceo-donut-stat-val {
  font-size: 18px;
  font-weight: 500;
  font-family: 'DM Mono', ui-monospace, monospace;
  color: #2C2C2A;
  line-height: 1.15;
  margin-top: 2px;
}

#op-page-ceo .ceo-donut-stat-pct {
  font-size: 11px;
  color: rgba(0,0,0,0.4);
  letter-spacing: .2px;
  line-height: 1.1;
  margin-top: 1px;
}

/* Empty state honesto */
#op-page-ceo .ceo-donut-empty {
  padding: 30px 16px;
  text-align: center;
  color: rgba(0,0,0,0.4);
  font-size: 13px;
}

/* Mobile: stack vertical, mantém grid 2×2 dos stats em baixo */
@media (max-width: 700px) {
  #op-page-ceo .ceo-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
  #op-page-ceo .ceo-donut-stats {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   v18.8.1.0-alpha3p52.8 (16 Mai 2026, Hugo) — RICH CARDS
   ──────────────────────────────────────────────────────────────
   Hotel Today: hero + forecast 7d + 3 KPIs + same day 2025
   Yesterday: 3 mini-donuts + total grande + 4 KPIs com ícones+LY
   Replica GM em espaço CEO compacto (~700px largura).
══════════════════════════════════════════════════════════════ */

/* ─── HOTEL TODAY rich ─── */
#op-page-ceo .ceo-ht-rich {
  padding: 14px 16px;
}

#op-page-ceo .ceo-ht-rich .ceo-card-head {
  margin-bottom: 10px;
}

#op-page-ceo .ceo-ht-top {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

#op-page-ceo .ceo-ht-hero {
  display: flex;
  flex-direction: column;
}

#op-page-ceo .ceo-ht-hero-num {
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

#op-page-ceo .ceo-ht-hero-meta {
  font-size: 10px;
  opacity: 0.7;
  color: #fff;
  margin-top: 4px;
  font-weight: 400;
}

/* ─── Forecast 7 days ─── */
#op-page-ceo .ceo-ht-fc7 {
  min-width: 0;
}

#op-page-ceo .ceo-ht-fc7-hd {
  /* alpha3p52.82 (18 Mai 2026, Hugo) — título + avg colados à esquerda. */
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

#op-page-ceo .ceo-ht-fc7-title {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

#op-page-ceo .ceo-ht-fc7-avg {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
}

#op-page-ceo .ceo-ht-fc7-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  /* alpha3p52.84 (18 Mai 2026, Hugo) — gráfico mais alto. Antes 46px. */
  height: 58px;
  align-items: flex-end;
}
/* alpha3p52.85 (18 Mai 2026, Hugo) — Year mode: 12 barras numa só linha.
   Sem este override, repeat(7,1fr) faz as 12 barras enrolarem em 2 linhas. */
#op-page-ceo .ceo-ht-fc7-bars--year {
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

#op-page-ceo .ceo-fc-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
}

#op-page-ceo .ceo-fc-bar {
  width: 100%;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 1px;
}

#op-page-ceo .ceo-fc-bar-pct {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 500;
  color: #fff;
}

#op-page-ceo .ceo-fc-bar-lbl {
  font-size: 8px;
  opacity: 0.6;
  color: #fff;
}

#op-page-ceo .ceo-ht-fc7-empty-msg {
  font-size: 10px;
  opacity: 0.5;
  color: #fff;
  font-style: italic;
  padding: 14px 0;
  text-align: center;
}

/* ─── 3 KPIs (Arrivals/Departures/GIH) ─── */
#op-page-ceo .ceo-ht-secondary-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255,255,255,0.12);
}

#op-page-ceo .ceo-ht-secondary-3 .gm-ht-sublbl {
  font-size: 9px;
  opacity: 0.6;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2px;
}

#op-page-ceo .ceo-ht-secondary-3 .gm-ht-mid {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}

#op-page-ceo .ceo-ht-secondary-3 .gm-ht-mid.pos {
  color: #5dcaa5;
}

#op-page-ceo .ceo-ht-secondary-3 .gm-ht-mid.neg {
  color: #f0997b;
}

/* ─── Same Day 2025 footer ─── */
#op-page-ceo .ceo-ht-ly-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}

#op-page-ceo .ceo-ht-ly-slot {
  min-width: 0;
}

#op-page-ceo .ceo-ht-ly-lbl {
  font-size: 8px;
  opacity: 0.55;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
}

#op-page-ceo .ceo-ht-ly-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 1px;
}

#op-page-ceo .ceo-ht-ly-val {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

#op-page-ceo .ceo-ht-ly-delta {
  font-size: 10px;
  font-weight: 500;
}

#op-page-ceo .ceo-ht-ly-delta.pos {
  color: #5dcaa5;
}

#op-page-ceo .ceo-ht-ly-delta.neg {
  color: #f0997b;
}

/* ─── YESTERDAY rich ─── */
#op-page-ceo .ceo-yd-rich {
  padding: 14px 16px;
}

#op-page-ceo .ceo-yd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 16px;
}

#op-page-ceo .ceo-yd-headblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

#op-page-ceo .ceo-yd-top .ceo-card-head-lbl {
  font-size: 10px;
  letter-spacing: 0.6px;
  opacity: 0.7;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
}

#op-page-ceo .ceo-yd-donuts {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

#op-page-ceo .ceo-yd-donut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#op-page-ceo .ceo-yd-donut-svg {
  display: block;
}

#op-page-ceo .ceo-yd-donut-lbl {
  font-size: 7px;
  opacity: 0.6;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
}

#op-page-ceo .ceo-yd-donut-val {
  font-size: 9px;
  font-weight: 500;
  color: #fff;
}

#op-page-ceo .ceo-yd-total-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0;
  margin-top: 2px;
}

#op-page-ceo .ceo-yd-total-val {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

#op-page-ceo .ceo-yd-delta {
  font-size: 13px;
  font-weight: 500;
}

#op-page-ceo .ceo-yd-delta.pos {
  color: #5dcaa5;
}

#op-page-ceo .ceo-yd-delta.neg {
  color: #f0997b;
}

#op-page-ceo .ceo-yd-delta.flat {
  color: rgba(255,255,255,0.6);
}

#op-page-ceo .ceo-yd-total-sub {
  font-size: 11px;
  opacity: 0.65;
  color: #fff;
  margin-bottom: 0;
}

#op-page-ceo .ceo-yd-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255,255,255,0.12);
}

#op-page-ceo .ceo-yd-kpi {
  min-width: 0;
}

#op-page-ceo .ceo-yd-kpi-hd {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2px;
}

#op-page-ceo .ceo-yd-kpi-icon {
  flex-shrink: 0;
}

#op-page-ceo .ceo-yd-kpi-lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#op-page-ceo .ceo-yd-kpi-val {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.15;
}

#op-page-ceo .ceo-yd-kpi-ly {
  font-size: 9px;
  opacity: 0.6;
  color: #fff;
  margin-top: 1px;
}

#op-page-ceo .ceo-yd-kpi-ly-na {
  font-size: 9px;
  opacity: 0.55;
  color: #fff;
  font-style: italic;
  margin-top: 1px;
}

#op-page-ceo .ceo-yd-kpi-delta-row .ceo-yd-delta {
  font-size: 9px;
}

#op-page-ceo .ceo-yd-kpi-delta-placeholder {
  font-size: 9px;
  opacity: 0;
  line-height: 1.1;
}

/* Mobile: cards stack vertical, sub-grids ajustam */
@media (max-width: 700px) {
  #op-page-ceo .ceo-ht-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #op-page-ceo .ceo-ht-ly-footer {
    grid-template-columns: 1fr;
  }
  #op-page-ceo .ceo-yd-kpis-grid {
    grid-template-columns: 1fr 1fr;
  }
  #op-page-ceo .ceo-yd-top {
    flex-direction: column;
    align-items: flex-start;
  }
  #op-page-ceo .ceo-yd-donuts {
    align-self: flex-start;
  }
}