/*!
 * HEA — Hotel Everywhere, Anywhere — 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 32px;
  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;
  /* Altura mínima = viewport menos topbar (~70px) e padding (~32px).
     Permite que as colunas estiquem para preencher a página inteira. */
  min-height: calc(100vh - 102px);
}
.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;
}