/*
 * Ground Control — Design System (Claude Design, projecto 8dc915fc-f946-475f-99fe-9d15d139a5f7,
 * importado 2026-09-18. Ver docs/design/README.md e docs/design/tokens.css).
 *
 * Identidade própria do GC: ardósia/tinta em vez do preto do OSv2, oxblood em vez de lime, serif
 * de display + corpo Manrope + mono Space Mono em vez de um único grotesk. Onde a maquete e o
 * GC_UX_R1 divergem, o GC_UX_R1 manda na LINGUAGEM (sem nomes de tabela, sem jargão técnico); a
 * maquete manda no ESTILO (tipografia, cor, espaço, forma) — ver docs/design/README.md §Regra de
 * precedência.
 *
 * Estrutura do ficheiro:
 *   1. Tokens            5. Page/section headers    9. Tabs
 *   2. Base/tipografia   6. Cards & stats          10. JSON viewer
 *   3. Shell & sidebar   7. Tabelas & toolbar       11. Login/bare
 *   4. Topbar            8. Forms & badges          12. Utilitários
 *                                                   13. Fichas (ecrã Day Pass)
 *
 * Secção 3 inclui, no fim, a "Navegação 2 níveis (GC v2.1)" — a subnav de
 * nível 2, coluna irmã da sidebar (ver templates/components/subnav.php).
 *
 * As páginas consomem estas classes; nunca definem CSS próprio. Uma classe
 * nova entra AQUI (decisão do coordenador), nunca inline numa página.
 */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
/* De docs/design/tokens.css, verbatim (o @import das fontes fica em templates/layouts/app.php,
   como <link> com preconnect — não se carregam fontes por dentro do CSS). */

:root {
    /* Ink & paper — warm, not stark black/white (distinct from Ground OS's black/white + lime) */
    --gc-ink: oklch(22% 0.015 40);
    --gc-ink-soft: oklch(48% 0.015 40);
    --gc-ink-faint: oklch(65% 0.01 50);
    --gc-paper: oklch(96.5% 0.008 70);
    --gc-paper-raised: oklch(99% 0.003 70);
    --gc-line: oklch(87% 0.01 60);
    --gc-line-strong: oklch(78% 0.012 55);

    /* Accent — oxblood. GC's signal color; OS owns lime-green, so GC never uses green as accent */
    --gc-accent: oklch(35% 0.11 25);
    --gc-accent-strong: oklch(27% 0.10 25);
    --gc-accent-soft: oklch(92% 0.035 25);
    --gc-accent-soft-line: oklch(82% 0.06 25);

    /* Semantic status */
    --gc-success: oklch(45% 0.09 150);
    --gc-success-bg: oklch(94% 0.035 150);
    --gc-warning: oklch(52% 0.13 70);
    --gc-warning-bg: oklch(94% 0.05 75);
    --gc-danger: oklch(50% 0.17 18);
    --gc-danger-bg: oklch(94% 0.045 18);

    /* Display serif for titles/brand — deliberately not the grotesk sans Ground OS uses everywhere */
    /* Owner 19/09: a mesma fonte de display do website em vez do serif da maquete. */
    --gc-font-display: 'Funnel Display', 'Funnel Display Fallback', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --gc-font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --gc-font-mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

    --gc-text-display-xl: 56px;
    --gc-text-display-lg: 40px;
    --gc-text-display-md: 28px;
    --gc-text-display-sm: 22px;
    --gc-text-body-lg: 17px;
    --gc-text-body-md: 15px;
    --gc-text-body-sm: 13px;
    --gc-text-label: 12px;
    --gc-text-mono-md: 13px;
    --gc-text-mono-sm: 12px;

    --gc-leading-tight: 1.1;
    --gc-leading-normal: 1.5;
    --gc-tracking-label: 0.08em;

    /* Spacious scale — GC rows/pages breathe more than OS's dense operational tables */
    --gc-sp-1: 4px;
    --gc-sp-2: 8px;
    --gc-sp-3: 12px;
    --gc-sp-4: 16px;
    --gc-sp-5: 20px;
    --gc-sp-6: 24px;
    --gc-sp-8: 32px;
    --gc-sp-10: 40px;
    --gc-sp-12: 48px;
    --gc-sp-16: 64px;
    --gc-sp-20: 80px;

    --gc-page-pad-x: 64px;
    --gc-page-pad-top: 48px;
    --gc-row-h: 60px;

    /* Sharper, architectural corners — contrast to OS's pill buttons and rounded cards */
    --gc-radius-sm: 2px;
    --gc-radius-md: 4px;
    --gc-radius-lg: 6px;
    --gc-border: 1px solid var(--gc-line);
    --gc-shadow-dropdown: 0 12px 24px -8px oklch(20% 0.02 40 / 0.18);
    --gc-transition: 150ms ease;

    /* ── Derivados: layout da casca do GC (não tokenizados na maquete) e cores compostas
       descritas em docs/design/README.md mas sem token próprio em tokens.css. */
    --gc-sidebar-width: 232px;
    --gc-subnav-width: 248px;
    --gc-topbar-height: 64px;
    --gc-content-max-width: 1280px;

    --gc-sidebar-ink: oklch(78% 0.01 50);        /* texto de entrada inactiva na sidebar escura */
    --gc-sidebar-bg-hover: oklch(28% 0.015 40);  /* hover da sidebar escura + fundo da pesquisa */
    --gc-sidebar-border: oklch(32% 0.015 40);
}

/* ── 2. Base / tipografia ───────────────────────────────────────────────── */

body {
    background-color: var(--gc-paper);
    color: var(--gc-ink);
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-body-md);
}

code {
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
    color: var(--gc-ink-soft);
    background-color: var(--gc-paper-raised);
    padding: 0.1rem 0.3rem;
    border-radius: var(--gc-radius-sm);
}

/* Foco visível consistente com o accent (substitui o azul default) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--gc-accent);
    box-shadow: 0 0 0 0.2rem var(--gc-accent-soft-line);
}

.form-control,
.form-select {
    border-color: var(--gc-line);
    border-radius: var(--gc-radius-md);
}

.form-check-input:checked {
    background-color: var(--gc-accent);
    border-color: var(--gc-accent);
}

/* Botões — Button da spec: raio md, 13px/600, sem sombra, sem uppercase.
   Aplica-se ao .btn base (todas as variantes, incl. as não recoloridas aqui,
   ex. btn-outline-danger); a COR de cada variante é definida à parte. */
.btn {
    --bs-btn-border-radius: var(--gc-radius-md);
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 600;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--gc-accent-soft-line);
    --bs-btn-active-box-shadow: none;
    text-transform: none;
}

/* primary: fundo --gc-ink */
.btn-primary {
    --bs-btn-color: var(--gc-paper);
    --bs-btn-bg: var(--gc-ink);
    --bs-btn-border-color: var(--gc-ink);
    --bs-btn-hover-color: var(--gc-paper);
    --bs-btn-hover-bg: var(--gc-accent-strong);
    --bs-btn-hover-border-color: var(--gc-accent-strong);
    --bs-btn-active-bg: var(--gc-accent-strong);
    --bs-btn-active-border-color: var(--gc-accent-strong);
}

/* outline: transparente, texto --gc-ink, borda --gc-border */
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--gc-ink);
    --bs-btn-border-color: var(--gc-line);
    --bs-btn-hover-color: var(--gc-ink);
    --bs-btn-hover-bg: var(--gc-paper-raised);
    --bs-btn-hover-border-color: var(--gc-line-strong);
    --bs-btn-active-bg: var(--gc-paper-raised);
    --bs-btn-active-border-color: var(--gc-line-strong);
    --bs-btn-active-color: var(--gc-ink);
}

/* accent: oxblood — acção primária de página. Definida, não aplicada em massa. */
.btn-accent {
    --bs-btn-color: var(--gc-paper);
    --bs-btn-bg: var(--gc-accent);
    --bs-btn-border-color: var(--gc-accent);
    --bs-btn-hover-color: var(--gc-paper);
    --bs-btn-hover-bg: var(--gc-accent-strong);
    --bs-btn-hover-border-color: var(--gc-accent-strong);
    --bs-btn-active-bg: var(--gc-accent-strong);
    --bs-btn-active-border-color: var(--gc-accent-strong);
}

a {
    color: var(--gc-accent);
}

a:hover {
    color: var(--gc-accent-strong);
}

/* ── 3. Shell & sidebar ─────────────────────────────────────────────────── */

.gc-shell {
    display: flex;
    min-height: 100vh;
}

.gc-sidebar {
    width: var(--gc-sidebar-width);
    flex-shrink: 0;
    background-color: var(--gc-ink);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gc-sidebar-border) transparent;
}

.gc-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--gc-sp-3);
    padding: var(--gc-sp-6) var(--gc-sp-5);
    border-bottom: 1px solid var(--gc-sidebar-border);
}

.gc-sidebar__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-accent);
    color: var(--gc-paper);
    font-family: var(--gc-font-display);
    font-size: 17px;
    line-height: 1;
}

.gc-sidebar__brand-name {
    color: var(--gc-paper);
    font-family: var(--gc-font-display);
    font-size: 20px;
    line-height: var(--gc-leading-tight);
}

/* Pesquisa da sidebar — filtro client-side (app.js: wireSidebarSearch) */
.gc-sidebar__search {
    padding: var(--gc-sp-2) var(--gc-sp-3);
}

.gc-sidebar__search-input {
    width: 100%;
    background-color: var(--gc-sidebar-bg-hover);
    border: 1px solid var(--gc-sidebar-border);
    border-radius: var(--gc-radius-md);
    color: var(--gc-paper);
    font-size: var(--gc-text-body-sm);
    padding: 0.35rem 0.6rem;
}

.gc-sidebar__search-input::placeholder {
    color: var(--gc-sidebar-ink);
}

.gc-sidebar__search-input:focus {
    outline: none;
    border-color: var(--gc-accent-soft-line);
}

.gc-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: var(--gc-sp-2) 0;
    flex: 1;
}

.gc-sidebar__link {
    display: block;
    padding: 12px 20px;
    color: var(--gc-sidebar-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.gc-sidebar__link:hover {
    background-color: var(--gc-sidebar-bg-hover);
    color: var(--gc-paper);
}

.gc-sidebar__link--active {
    color: var(--gc-paper);
    font-weight: 700;
    background-color: var(--gc-accent);
}

.gc-sidebar__section-label {
    padding: var(--gc-sp-3) var(--gc-sp-3) var(--gc-sp-1);
    font-size: var(--gc-text-mono-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-sidebar-ink);
}

/* Grupos colapsáveis (`<details>`/`<summary>` nativos, sem JS) — não usados hoje pela sidebar
   (a subnav é que tem grupos), mantidos por compatibilidade com o mesmo idioma visual. */
.gc-sidebar__group-item {
    list-style: none;
}

.gc-sidebar__group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-2);
    padding: 12px 20px;
    color: var(--gc-sidebar-ink);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.gc-sidebar__group-summary::-webkit-details-marker {
    display: none;
}

.gc-sidebar__group-summary::after {
    content: '\25B8';
    display: inline-block;
    font-size: 0.7rem;
    color: var(--gc-sidebar-ink);
    transition: transform var(--gc-transition);
}

.gc-sidebar__group[open] > .gc-sidebar__group-summary::after {
    transform: rotate(90deg);
}

.gc-sidebar__group-summary:hover {
    background-color: var(--gc-sidebar-bg-hover);
    color: var(--gc-paper);
}

.gc-sidebar__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gc-sidebar__link--nested {
    padding-left: calc(var(--gc-sp-3) + var(--gc-sp-3));
    font-size: 14px;
}

/* Secção colapsável inteira (ex.: Configuração do OS) — mesmo idioma dos
   grupos, mas ao nível do rótulo de secção. */
.gc-sidebar__section-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gc-sidebar__section-summary::-webkit-details-marker {
    display: none;
}

.gc-sidebar__section-summary::after {
    content: '\25B8';
    font-size: 0.65rem;
    transition: transform var(--gc-transition);
}

.gc-sidebar__section[open] > .gc-sidebar__section-summary::after {
    transform: rotate(90deg);
}

.gc-sidebar__footer {
    padding: var(--gc-sp-4);
    border-top: 1px solid var(--gc-sidebar-border);
}

.gc-shell__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Navegação 2 níveis (GC v2.1) ────────────────────────────────────────
 * A sidebar (acima) ficou com uma entrada por área — o nível 1. Quando a
 * área activa tem mais do que uma entrada, a subnav mostra-as como coluna
 * irmã, entre a sidebar e o conteúdo. Sidebar primária escura (--gc-ink);
 * subnav CLARA (--gc-paper-raised) — é já uma extensão da página, por isso
 * lê como ela.
 */

.gc-subnav {
    width: var(--gc-subnav-width);
    flex-shrink: 0;
    background-color: var(--gc-paper-raised);
    border-right: var(--gc-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gc-line-strong) transparent;
}

.gc-subnav__header {
    padding: 28px 24px 12px;
    border-bottom: 1px solid var(--gc-line);
}

.gc-subnav__title {
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-faint);
}

.gc-subnav__nav {
    list-style: none;
    margin: 0;
    padding: var(--gc-sp-2) 0;
}

.gc-subnav__link {
    display: block;
    padding: 12px 24px;
    color: var(--gc-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.gc-subnav__link:hover {
    background-color: var(--gc-paper);
}

.gc-subnav__link--active {
    border-left-color: var(--gc-accent);
    color: var(--gc-accent);
    font-weight: 700;
    background-color: var(--gc-accent-soft);
}

.gc-subnav__link--nested {
    padding-left: calc(var(--gc-sp-3) + var(--gc-sp-4));
}

/* Grupos colapsáveis, mesmo idioma nativo `<details>`/`<summary>` (sem JS), paleta clara. */
.gc-subnav__group-item {
    list-style: none;
}

.gc-subnav__group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-2);
    padding: 12px 24px;
    color: var(--gc-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.gc-subnav__group-summary:hover {
    background-color: var(--gc-paper);
}

.gc-subnav__group-summary::-webkit-details-marker {
    display: none;
}

.gc-subnav__group-summary::after {
    content: '\25B8';
    display: inline-block;
    font-size: 0.7rem;
    color: var(--gc-ink-faint);
    transition: transform var(--gc-transition);
}

.gc-subnav__group[open] > .gc-subnav__group-summary::after {
    transform: rotate(90deg);
}

.gc-subnav__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .gc-subnav {
        position: static;
        height: auto;
    }
}

/* ── 4. Topbar (trilha + actor; o título grande vive no page header) ───── */

.gc-topbar {
    min-height: var(--gc-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gc-sp-3);
    padding: 12px var(--gc-sp-8);
    background-color: var(--gc-paper);
    border-bottom: var(--gc-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.gc-topbar__trail {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
    color: var(--gc-ink-faint);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-topbar__trail a {
    color: var(--gc-ink-faint);
    text-decoration: none;
}

.gc-topbar__trail a:hover {
    color: var(--gc-accent);
}

.gc-topbar__trail-sep {
    color: var(--gc-ink-faint);
    margin: 0 6px;
}

.gc-topbar__trail-current {
    color: var(--gc-ink);
    font-weight: 500;
}

/* Selector de âmbito + menu de perfil (GC_UX_R1.md §2.7) — <details>
   nativo, sem JS próprio nem dependência do JS do Bootstrap. */
.gc-scope-switcher,
.gc-profile-menu {
    position: relative;
}

.gc-scope-switcher > summary,
.gc-profile-menu > summary {
    cursor: pointer;
    list-style: none;
}

.gc-scope-switcher > summary::-webkit-details-marker,
.gc-profile-menu > summary::-webkit-details-marker {
    display: none;
}

/* "A actuar em: X" — texto simples com borda, NÃO o StatusPill (secção 8):
   maquete mostra um badge `owner` em accent-soft aqui — não aplicar
   (GC_UX_R1.md §2.7). Compound selector para vencer .gc-badge--info em
   especificidade, independentemente da ordem no ficheiro. */
.gc-badge.gc-scope-indicator {
    display: inline-flex;
    align-items: center;
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-label);
    font-weight: 500;
    text-transform: none;
    color: var(--gc-ink-soft);
    background-color: transparent;
    border: var(--gc-border);
    border-radius: var(--gc-radius-sm);
    padding: 5px 10px;
}

.gc-profile-menu__summary {
    padding: 0.3rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-ink);
}

.gc-profile-menu__summary:hover {
    background-color: var(--gc-paper-raised);
}

.gc-scope-switcher__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 200;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-md);
    box-shadow: var(--gc-shadow-dropdown);
    padding: var(--gc-sp-2);
}

.gc-scope-switcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-2);
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    font-size: var(--gc-text-body-sm);
    color: var(--gc-ink);
}

.gc-scope-switcher__option:hover:not(:disabled) {
    background-color: var(--gc-accent-soft);
}

.gc-scope-switcher__option--active {
    color: var(--gc-accent);
    font-weight: 600;
}

.gc-scope-switcher__role {
    color: var(--gc-ink-faint);
    font-size: var(--gc-text-label);
}

.gc-profile-menu__panel a,
.gc-profile-menu__panel button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    font-size: var(--gc-text-body-sm);
    color: var(--gc-ink);
    text-decoration: none;
}

.gc-profile-menu__panel a:hover,
.gc-profile-menu__panel button:hover {
    background-color: var(--gc-accent-soft);
}

.gc-content {
    background-color: var(--gc-paper);
    padding: var(--gc-sp-10) var(--gc-sp-10) var(--gc-sp-12);
    max-width: var(--gc-content-max-width);
    width: 100%;
    margin: 0 auto;
}

/* ── 5. Page header & section header ────────────────────────────────────── */

.gc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gc-sp-3);
    margin-bottom: var(--gc-sp-6);
    flex-wrap: wrap;
}

.gc-page-header__title {
    font-family: var(--gc-font-display);
    font-size: var(--gc-text-display-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
    margin: 0;
    line-height: var(--gc-leading-tight);
}

.gc-page-header__subtitle {
    margin: var(--gc-sp-2) 0 0;
    color: var(--gc-ink-faint);
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-body-sm);
    max-width: 72ch;
}

.gc-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--gc-sp-2);
    flex-shrink: 0;
}

.gc-section {
    margin-bottom: var(--gc-sp-10);
}

.gc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-3);
    margin-bottom: var(--gc-sp-4);
}

.gc-section-header__title {
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-body-lg);
    font-weight: 600;
    color: var(--gc-ink);
    margin: 0;
}

.gc-section-header__hint {
    margin: var(--gc-sp-1) 0 0;
    color: var(--gc-ink-soft);
    font-size: var(--gc-text-body-sm);
}

/* ── 6. Cards & stats ───────────────────────────────────────────────────── */

.gc-card {
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: none;
}

.gc-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--gc-line);
    padding: var(--gc-sp-4);
    font-weight: 600;
}

.gc-stat-label {
    color: var(--gc-ink-soft);
    font-size: var(--gc-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
}

.gc-stat-value {
    font-family: var(--gc-font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: var(--gc-leading-tight);
    color: var(--gc-ink);
}

.gc-empty-state {
    color: var(--gc-ink-soft);
    text-align: center;
    padding: var(--gc-sp-10) var(--gc-sp-4);
}

/* ── 7. Tabelas & toolbar ───────────────────────────────────────────────── */

.gc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-4);
    margin-bottom: var(--gc-sp-4);
    flex-wrap: wrap;
}

.gc-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--gc-sp-2);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.gc-toolbar__count {
    color: var(--gc-ink-soft);
    font-size: var(--gc-text-body-sm);
    white-space: nowrap;
}

.gc-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--gc-sp-2);
    flex-shrink: 0;
}

/* Tabela GC — DataTable da spec: sem zebra, hover discreto, cabeçalho não pintado. */
.gc-table {
    --bs-table-striped-bg: transparent;
    font-family: var(--gc-font-body);
    font-size: var(--gc-text-body-md);
    margin-bottom: 0;
}

.gc-table thead th {
    /* A maquete tem padding-top 0 porque acima da tabela há sempre o contador;
       no GC a tabela cola ao topo do cartão/toolbar — dá-se respiro em cima
       (owner, 19/09: "pouca margem no header"). */
    padding: var(--gc-sp-5) var(--gc-sp-4) var(--gc-sp-3);
    font-size: var(--gc-text-label);
    font-weight: 700;
    /* GC_UX_R1.md §2.2 escreve <th>nome</th> em minúsculas; a maquete manda
       uppercase aqui (substitui o antigo text-transform: capitalize). */
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-soft);
    background-color: transparent;
    border-bottom: 2px solid var(--gc-line-strong);
    white-space: nowrap;
}

.gc-table tbody td {
    padding: var(--gc-sp-5) var(--gc-sp-4);
    font-size: var(--gc-text-body-md);
    color: var(--gc-ink);
    vertical-align: middle;
    border-bottom: 1px solid var(--gc-line);
}

.gc-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Sem zebra na maquete — hover discreto por usabilidade. */
.gc-table tbody tr:hover {
    background-color: var(--gc-paper-raised);
}

.gc-table td a {
    color: var(--gc-accent);
    text-decoration: underline;
}

/* Wrapper com cabeçalho fixo para listas longas (GC_UX_R1.md §2.2). Só
   aplicar quando a tabela puder crescer — não muda tabelas curtas. */
.gc-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 220px);
}

.gc-table-wrap .gc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--gc-paper);
}

/* Célula com lista resumida ("A, B +N" — ver gc_summarise_list()). */
.gc-cell-list {
    max-width: 24rem;
    white-space: normal;
    line-height: 1.4;
}

/* Variante densa — audit, logs, tabelas de 7+ colunas */
.gc-table--dense {
    font-size: var(--gc-text-label);
}

.gc-table--dense thead th {
    padding: 0 var(--gc-sp-2) var(--gc-sp-2);
}

.gc-table--dense tbody td {
    padding: var(--gc-sp-2) var(--gc-sp-2);
}

/* Coluna de acções encostada à direita, sem quebrar */
.gc-table__actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* ── 8. Forms & badges ──────────────────────────────────────────────────── */

.form-label {
    font-size: var(--gc-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-soft);
    margin-bottom: 0.25rem;
}

/* Grid de 2 colunas responsivo para forms/modais longos */
.gc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gc-sp-2) var(--gc-sp-4);
}

.gc-form-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .gc-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Bloco de auditoria (reason / organization_id / lock_version) — separado
   visualmente dos campos de negócio, sempre no fim do form. */
.gc-form-meta {
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-sm);
    padding: var(--gc-sp-2) var(--gc-sp-4) var(--gc-sp-4);
    margin-top: var(--gc-sp-4);
}

.gc-form-meta__legend {
    font-size: var(--gc-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-soft);
    margin-bottom: var(--gc-sp-2);
}

/* StatusPill da spec: mono, 12px/700, raio sm — não é mais uma pill 999px. */
.gc-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--gc-radius-sm);
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.gc-badge--neutral {
    background-color: var(--gc-paper);
    color: var(--gc-ink-soft);
    border: 1px solid var(--gc-line);
}

/* --info não está no mapa de 4 cores da StatusPill (§2.2 do GC_UX_R1: success/warning/neutral/
   danger) — mapeia para o accent, sobre accent-soft. */
.gc-badge--info {
    background-color: var(--gc-accent-soft);
    color: var(--gc-accent);
}

.gc-badge--warning {
    background-color: var(--gc-warning-bg);
    color: var(--gc-warning);
}

.gc-badge--success {
    background-color: var(--gc-success-bg);
    color: var(--gc-success);
}

.gc-badge--danger {
    background-color: var(--gc-danger-bg);
    color: var(--gc-danger);
}

.gc-alert {
    margin-bottom: var(--gc-sp-4);
}

/* ── 9. Tabs (páginas multi-entidade) ───────────────────────────────────── */

.gc-tabs {
    border-bottom: 1px solid var(--gc-line-strong);
    margin-bottom: var(--gc-sp-6);
    display: flex;
    gap: var(--gc-sp-1);
    flex-wrap: wrap;
}

.gc-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gc-ink-soft);
    font-size: var(--gc-text-body-sm);
    font-weight: 500;
    padding: var(--gc-sp-2) var(--gc-sp-4);
    margin-bottom: -1px;
}

.gc-tabs .nav-link:hover {
    color: var(--gc-ink);
    border-bottom-color: var(--gc-line-strong);
}

.gc-tabs .nav-link.active {
    color: var(--gc-accent);
    font-weight: 600;
    border-bottom-color: var(--gc-accent);
    background-color: transparent;
}

/* ── 10. JSON viewer / payload ──────────────────────────────────────────── */

.gc-payload {
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-sm);
    padding: var(--gc-sp-2) var(--gc-sp-4);
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
    max-height: 280px;
    overflow: auto;
    margin-bottom: 0;
}

.gc-json-viewer {
    position: relative;
}

.gc-json-viewer__copy {
    position: absolute;
    top: var(--gc-sp-2);
    right: var(--gc-sp-2);
    opacity: 0;
    transition: opacity var(--gc-transition);
}

.gc-json-viewer:hover .gc-json-viewer__copy {
    opacity: 1;
}

.gc-json-key { color: #5b21b6; }
.gc-json-string { color: #1a7f4e; }
.gc-json-number { color: #2563a8; }
.gc-json-bool { color: #b3402f; }
.gc-json-null { color: var(--gc-ink-faint); }

/* ── 11. Login / páginas bare ───────────────────────────────────────────── */

.gc-bare {
    background: linear-gradient(160deg, var(--gc-ink) 0%, color-mix(in oklch, var(--gc-ink), var(--gc-accent) 30%) 100%);
    min-height: 100vh;
}

.gc-bare__main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.gc-login {
    width: 100%;
    max-width: 26rem;
}

.gc-login__card {
    border: 0;
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-shadow-dropdown);
}

/* ── 12. Utilitários ────────────────────────────────────────────────────── */

.gc-mono {
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
}

.gc-muted {
    color: var(--gc-ink-soft);
}

.gc-nowrap {
    white-space: nowrap;
}

/* ── 13. Fichas (ecrã "Day Pass" — docs/design/README.md) ───────────────────
   Classes reutilizáveis por qualquer ficha de produto/entidade com edição +
   auditoria (hoje: pricing-products-subscriptions-detail.php e
   pricing-products-rooms-detail.php). Não usar fora de uma ficha — as
   listagens continuam com .gc-card/.gc-form-grid. */

/* Chip de identidade só de leitura (código de negócio, tipo em PT, …). */
.gc-id-chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--gc-radius-sm);
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-mono-sm);
    color: var(--gc-ink-soft);
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    white-space: nowrap;
}

/* Cabeçalho de secção da ficha (h2 + acção à direita), margem generosa
   acima para separar do que vem antes — Editar/Preços usam-no os dois. */
.gc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-sp-3);
    margin: var(--gc-sp-12) 0 var(--gc-sp-4);
}

.gc-section-head h2 {
    font-family: var(--gc-font-body);
    font-weight: 700;
    font-size: var(--gc-text-display-sm);
    color: var(--gc-ink);
    margin: 0;
}

.gc-form-card {
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: var(--gc-sp-8);
}

.gc-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gc-sp-6) var(--gc-sp-8);
}

@media (max-width: 767.98px) {
    .gc-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.gc-field {
    display: flex;
    flex-direction: column;
}

/* Campo que ocupa as duas colunas de .gc-form-grid-2 (textarea longa, nota). */
.gc-field--full {
    grid-column: 1 / -1;
}

.gc-field__label {
    font-family: var(--gc-font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-soft);
    margin-bottom: 6px;
}

.gc-field__help {
    font-size: 13px;
    color: var(--gc-ink-faint);
    margin: 4px 0 0;
}

/* Inputs/selects/textarea dentro da ficha — apanha o Bootstrap já usado
   nos formulários (form-control/form-select) sem reescrever templates. */
.gc-form-card .form-control,
.gc-form-card .form-select {
    padding: 10px 12px;
    font-size: 14px;
    background-color: var(--gc-paper-raised);
    border: var(--gc-border);
    border-radius: var(--gc-radius-md);
    box-shadow: none;
}

.gc-form-card textarea.form-control {
    min-height: 64px;
}

.gc-form-card .form-check-input {
    width: 16px;
    height: 16px;
    accent-color: var(--gc-accent);
}

.gc-form-card .form-check-label {
    font-size: 14px;
}

/* Bloco de auditoria (motivo obrigatório) no fim da ficha. */
.gc-audit-box {
    background-color: var(--gc-paper);
    border: var(--gc-border);
    border-radius: var(--gc-radius-md);
    padding: var(--gc-sp-6);
    margin-top: var(--gc-sp-4);
}

.gc-audit-box__legend {
    font-family: var(--gc-font-mono);
    font-size: var(--gc-text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--gc-tracking-label);
    color: var(--gc-ink-soft);
    margin-bottom: var(--gc-sp-2);
}

.gc-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--gc-sp-6);
}