/* ==============================================================================
 *  # Grade de Disponibilidade — premium (Fase 1 — Item 1)
 *
 *  Matriz 31 dias × categorias. Namespace: .gd-*
 *  Tokens: --occ-*. Cores de célula: verde (disponível), vermelho (lotado),
 *  amarelo (fim de semana), rosa (quase lotado).
 * ---------------------------------------------------------------------------- */

.gd-page { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 0; }

/* ----------- NAVEGAÇÃO ----------- */
.gd-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; margin-bottom: 0.75rem;
    background: var(--occ-surface); border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm); flex-shrink: 0; gap: 1rem;
}
.gd-nav-periodo { font-weight: 700; color: var(--occ-ink); font-size: 0.9rem; }
.gd-nav .btn {
    border-radius: 30px; font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.9rem; border: 1px solid var(--occ-line);
    background: var(--occ-surface); color: var(--occ-ink-soft);
    transition: all var(--occ-dur) var(--occ-ease);
}
.gd-nav .btn:hover { background: var(--occ-surface-2); border-color: var(--occ-line-strong); color: var(--occ-ink); }
.gd-nav .btn i { font-size: 0.9rem; color: var(--occ-ink-faint); }

/* ----------- GRADE MATRIZ ----------- */
.gd-matrix-wrap {
    background: var(--occ-surface); border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-sm); overflow: auto; flex: 1 1 0%; min-height: 0;
}
.gd-matrix { border-collapse: collapse; min-width: 100%; }
.gd-matrix th,
.gd-matrix td { padding: 0.4rem 0.55rem; font-size: 0.78rem; text-align: center; border: 1px solid var(--occ-line); }
.gd-matrix th { background: var(--occ-surface-2); font-weight: 600; color: var(--occ-ink-soft); position: sticky; top: 0; z-index: 2; }
.gd-matrix th.gd-sticky-col { left: 0; z-index: 3; min-width: 110px; text-align: left; padding-left: 0.75rem; }
.gd-matrix td.gd-sticky-col { position: sticky; left: 0; background: var(--occ-surface); z-index: 1; text-align: left; font-weight: 600; color: var(--occ-ink); padding-left: 0.75rem; min-width: 110px; }

.gd-matrix thead th.gd-col-dia { min-width: 58px; }
.gd-matrix thead th.gd-col-semana { font-size: 0.65rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
.gd-matrix thead th.gd-col-hoje { background: var(--occ-accent-soft); color: var(--occ-accent); font-weight: 700; }
.gd-matrix td.gd-col-hoje { background: rgba(28, 167, 167, 0.04); }

/* Cores das células */
.gd-matrix td.gd-vazia   { background: rgba(16, 185, 129, 0.06); color: #10b981; }
.gd-matrix td.gd-cheia   { background: rgba(239, 68, 68, 0.08);  color: #ef4444;  font-weight: 700; }
.gd-matrix td.gd-quase   { background: rgba(245, 158, 11, 0.08); color: #f59e0b;  font-weight: 600; }
.gd-matrix td.gd-sem-dados { color: var(--occ-ink-faint); }

.gd-matrix td .gd-sub {
    display: block; font-size: 0.62rem; font-weight: 400;
    color: var(--occ-ink-faint); margin-top: 0.1rem;
}

/* Linhas de totais */
.gd-matrix tbody tr.gd-row-totais td {
    font-weight: 700; border-top: 2px solid var(--occ-line-strong); background: var(--occ-surface-2);
}

/* ----------- LEGENDA ----------- */
.gd-legend {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    padding: 0.5rem 1rem; margin-top: 0.5rem;
    font-size: 0.72rem; color: var(--occ-ink-soft);
    flex-shrink: 0;
}
.gd-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.gd-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.gd-legend-swatch--disp    { background: rgba(16, 185, 129, 0.3); border: 1px solid #10b981; }
.gd-legend-swatch--cheia   { background: rgba(239, 68, 68, 0.3);  border: 1px solid #ef4444; }
.gd-legend-swatch--quase   { background: rgba(245, 158, 11, 0.3); border: 1px solid #f59e0b; }

/* ----------- DARK MODE ----------- */
[data-color-theme="dark"] .gd-matrix td.gd-vazia  { background: rgba(16, 185, 129, 0.10); }
[data-color-theme="dark"] .gd-matrix td.gd-cheia  { background: rgba(239, 68, 68, 0.12); }
[data-color-theme="dark"] .gd-matrix td.gd-quase  { background: rgba(245, 158, 11, 0.12); }
[data-color-theme="dark"] .gd-matrix td.gd-col-hoje { background: rgba(60, 208, 208, 0.06); }