/* ============================================================
   Novo relatório — passo de revisão: ficheiro à esquerda, valores
   lidos pela IA à direita em cartões (mesma linguagem do detalhe).
   ============================================================ */
/* Só a revisão precisa de largura (ficheiro + valores lado a lado); o passo de carregar fica estreito. */
.pms-upload-dialog.is-reviewing { width: min(1180px, 100%); }

.pms-review { display: flex; flex-direction: column; gap: var(--sp-4); }
.pms-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.pms-review-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pms-review-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 72vh;
  overflow: auto;
  padding: var(--sp-2);
  border: 1px solid var(--mg-hairline);
  border-radius: 18px;
  background: rgba(120, 120, 128, 0.08);
  cursor: zoom-in;
}
.pms-review-preview img,
.pms-review-preview iframe { flex-shrink: 0; border-radius: 12px; }
.pms-review-preview iframe { height: 100%; border: none; }
.pms-review-side__hint { margin: 0; color: var(--mg-secondary); font-size: var(--fs-sm); line-height: 1.45; }

.pms-review-form { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.pms-card {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--mg-hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}
.pms-card .pms-detail-section-title { margin-bottom: var(--sp-2); }
.pms-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.pms-card__head .pms-detail-section-title { margin: 0; }
.pms-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pms-card__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pms-card__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pms-card__grid--day { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.pms-card .field { min-width: 0; }
/* Rótulos em letra normal, como no detalhe: cabem quatro campos por linha. */
.pms-card .field__label {
  overflow: hidden;
  color: var(--mg-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

/* Disponíveis calculados (ocupados + livres) e verificação contra o total. */
.pms-rooms-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.08);
  font-size: var(--fs-sm);
}
.pms-rooms-summary__available { display: inline-flex; align-items: baseline; gap: var(--sp-2); color: var(--mg-ink-soft); }
.pms-rooms-summary__available strong { color: var(--mg-ink); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.pms-rooms-check { font-weight: 600; }
.pms-rooms-check.is-ok { color: var(--mg-success); }
.pms-rooms-check.is-off { color: var(--mg-warning); }

/* Faturação por área: linhas em grelha (nome, valor, remover), sem a largura mínima das tabelas. */
.pms-area-lines__head,
.pms-area-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px 36px; gap: var(--sp-2); align-items: center; }
.pms-area-lines__head {
  margin-bottom: var(--sp-2);
  color: var(--mg-tertiary);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pms-area-lines__head span:nth-child(2) { text-align: right; }
.pms-area-lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.pms-area-line__value { text-align: right; font-variant-numeric: tabular-nums; }
.pms-area-line__remove:hover { background: var(--mg-danger-soft); color: var(--mg-danger); }
.pms-area-lines__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--mg-hairline);
  color: var(--mg-ink);
  font-weight: 650;
}
.pms-area-lines__total strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

/* Consulta (olho do resumo de vários relatórios): os mesmos cartões, sem edição. Sem o botão de
   remover, a grelha das áreas fica só com nome e valor. */
.pms-review.is-readonly [data-pms-add-line],
.pms-review.is-readonly .pms-area-line__remove { display: none; }
.pms-review.is-readonly .pms-area-lines__head,
.pms-review.is-readonly .pms-area-line { grid-template-columns: minmax(0, 1fr) 150px; }
.pms-review.is-readonly .pms-review-form input { cursor: default; }

/* Os botões ficam colados ao fundo do popup, como um rodapé normal. */
.pms-review > .modal__footer { margin: auto calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); }

/* Computador: a revisão ocupa a altura do ecrã; ficheiro e valores têm a mesma altura e
   só a lista das áreas desliza por dentro (o popup em si deixa de fazer scroll). */
@media (min-width: 961px) {
  .pms-upload-dialog.is-reviewing { height: 94vh; max-height: 94vh; }
  .pms-review { overflow: hidden; }
  .pms-review-layout { flex: 1; min-height: 0; align-items: stretch; }
  .pms-review-side { position: static; min-height: 0; }
  .pms-review-preview { flex: 1; height: auto; min-height: 0; }
  .pms-review-form { min-height: 0; overflow-y: auto; }
  /* Em ecrãs baixos o cartão nunca fica com menos de 220 px: aí é a coluna que desliza. */
  .pms-card--areas { display: flex; flex: 1 0 220px; flex-direction: column; min-height: 220px; }
  .pms-card--areas .pms-area-lines { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
}

@media (max-width: 960px) {
  .pms-review-layout { grid-template-columns: minmax(0, 1fr); }
  .pms-review-side { position: static; }
  .pms-review-preview { height: 50vh; }
}
@media (max-width: 520px) {
  .pms-card__grid--day,
  .pms-card__grid--three,
  .pms-card__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pms-card__grid--day .field:first-child { grid-column: 1 / -1; }
  .pms-area-lines__head,
  .pms-area-line { grid-template-columns: minmax(0, 1fr) 110px 36px; }
}

/* ============================================================
   Lista de relatórios e detalhe — linguagem "liquid glass" do
   Management (tokens --mg-* em management.css, mesma leitura das
   tabelas do Dashboard e do Custos).
   ============================================================ */

/* ---------- comuns ---------- */
.pms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pms-strong { color: var(--mg-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pms-muted { color: var(--mg-secondary); }
.pms-sub { display: block; margin-top: 2px; color: var(--mg-secondary); font-size: var(--fs-sm); }

.pms-meter { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pms-meter__track {
  display: block;
  flex: 1;
  max-width: 120px;
  height: 8px;
  border-radius: 4px;
  background: var(--mg-fill);
  overflow: hidden;
}
.pms-meter__fill { display: block; height: 100%; border-radius: 4px; background: var(--mg-accent); }
.pms-meter__text { color: var(--mg-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pms-meter__pct {
  min-width: 40px;
  color: var(--mg-secondary);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- lista ---------- */
.pms-reports-hint { margin-left: auto; }
.pms-reports-table td { vertical-align: middle; }
.pms-reports-table thead th.pms-num { text-align: right; }
.pms-report-row { cursor: pointer; }
.pms-date { display: block; color: var(--mg-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pms-actions { width: 1%; text-align: right; white-space: nowrap; }
.pms-actions .btn-icon { display: inline-flex; }
.pms-actions__delete:hover { background: var(--mg-danger-soft); color: var(--mg-danger); }

/* ---------- detalhe ---------- */
.pms-detail-dialog { max-width: 780px; }
.pms-detail-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pms-detail-head__sub {
  margin: 0;
  overflow: hidden;
  color: var(--mg-secondary);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pms-detail { display: flex; flex-direction: column; gap: var(--sp-4); }
.pms-detail-loading { margin: 0; color: var(--mg-secondary); }
.pms-detail-content { display: flex; flex-direction: column; gap: var(--sp-6); }
.pms-detail-section-title {
  margin: 0 0 var(--sp-3);
  color: var(--mg-ink);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Três números do dia, cada um com a sua cor (como os chips do Dashboard). */
.pms-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.pms-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--sp-4);
  border-radius: 18px;
  background: var(--fig-bg);
}
.pms-figure--revenue { --fig-bg: rgba(10, 132, 255, 0.1); --fig-ink: #0060df; }
.pms-figure--rooms { --fig-bg: rgba(48, 209, 88, 0.12); --fig-ink: #1a6e30; }
.pms-figure--guests { --fig-bg: rgba(191, 90, 242, 0.11); --fig-ink: #8944ab; }
.pms-figure__label {
  color: var(--fig-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pms-figure__value {
  color: var(--mg-ink);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pms-figure__hint { color: var(--mg-secondary); font-size: var(--fs-sm); }
.pms-figure__meter { flex: none; max-width: none; height: 6px; margin-top: var(--sp-2); background: rgba(255, 255, 255, 0.75); }
.pms-figure--rooms .pms-meter__fill { background: #30d158; }

/* Quartos e camas: cada grupo num cartão leve, valores em grelha. */
.pms-detail-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pms-group {
  padding: var(--sp-4);
  border: 1px solid var(--mg-hairline);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
}
.pms-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; }
.pms-group__item dt { color: var(--mg-secondary); font-size: var(--fs-sm); }
.pms-group__item dd {
  margin: 0;
  color: var(--mg-ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pms-group__empty { margin: 0; color: var(--mg-secondary); font-size: var(--fs-sm); }

/* Faturação por área: nome, valor e peso no total, com a linha do total no fim. */
.pms-areas-detail { width: 100%; border-collapse: collapse; }
.pms-areas-detail th,
.pms-areas-detail td { padding: var(--sp-3); }
.pms-areas-detail :is(th, td):first-child { padding-left: 0; }
.pms-areas-detail :is(th, td):last-child { padding-right: 0; }
.pms-areas-detail thead th {
  padding-top: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--mg-hairline);
  color: var(--mg-tertiary);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}
.pms-areas-detail thead th.pms-num { text-align: right; }
.pms-areas-detail tbody :is(th, td) { border-bottom: 1px solid var(--mg-hairline); color: var(--mg-ink-soft); }
.pms-areas-detail tbody th { color: var(--mg-ink); font-weight: 600; text-align: left; }
.pms-areas-detail tfoot :is(th, td) { color: var(--mg-ink); font-weight: 750; text-align: left; }
.pms-areas-detail tfoot .pms-num { text-align: right; }
.pms-share-col { width: 38%; }
.pms-areas-detail .pms-meter__track { max-width: none; }

@media (max-width: 640px) {
  .pms-detail-summary,
  .pms-detail-groups { grid-template-columns: minmax(0, 1fr); }
  .pms-reports-hint { display: none; }
}

/* ============================================================
   Vários relatórios de uma vez (management-pms-batch.js)
   ============================================================ */
.pms-batch-hint {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: var(--mg-accent-soft);
  color: #0058c7;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.pms-batch { display: flex; flex-direction: column; gap: var(--sp-4); }
.pms-batch__head { display: flex; flex-direction: column; gap: var(--sp-2); }
.pms-batch__title { margin: 0; color: var(--mg-ink); font-size: var(--fs-base); font-weight: 700; }
.pms-batch__progress { flex: none; max-width: none; height: 8px; }
.pms-batch__progress .pms-meter__fill { width: 0; transition: width 240ms var(--ease); }

.pms-batch__list {
  display: flex;
  flex-direction: column;
  max-height: 52vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--mg-hairline);
  border-radius: 16px;
  list-style: none;
}
.pms-batch-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--mg-hairline);
}
.pms-batch-item:last-child { border-bottom: none; }
.pms-batch-item__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(120, 120, 128, 0.1);
  color: var(--mg-secondary);
}
.pms-batch-item__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pms-batch-item__name { overflow: hidden; color: var(--mg-ink); font-size: var(--fs-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pms-batch-item__status { color: var(--mg-secondary); font-size: var(--fs-sm); }
.pms-batch-item.is-reading .pms-batch-item__icon { background: var(--mg-accent-soft); color: var(--mg-accent); }
.pms-batch-item.is-reading .pms-batch-item__icon .icon { animation: pms-spin 1s linear infinite; }
.pms-batch-item.is-added .pms-batch-item__icon { background: var(--mg-success-soft); color: var(--mg-success); }
.pms-batch-item.is-added .pms-batch-item__status { color: var(--mg-success); }
.pms-batch-item.is-review .pms-batch-item__icon,
.pms-batch-item.is-skipped .pms-batch-item__icon { background: var(--mg-warning-soft); color: var(--mg-warning); }
.pms-batch-item.is-error .pms-batch-item__icon { background: var(--mg-danger-soft); color: var(--mg-danger); }
.pms-batch-item.is-error .pms-batch-item__status { color: var(--mg-danger); }

@keyframes pms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pms-batch-item.is-reading .pms-batch-item__icon .icon { animation: none; }
}
