/* Design system Gerizim — tokens --gz-* e remapeamento de framework/plugins.
   Fase 24 do ciclo "Tema escuro, mobile e PWA" (Macrofase 40).
   Carregado logo após css/main.min.css e antes de qualquer CSS de tela.
   Claro em :root; escuro em :root[data-theme="dark"]; fallback do sistema no
   bloco de prefers-color-scheme (:root:not([data-theme="light"])).
   Regra de legibilidade: toda cor de texto vem de um token pareado com a
   superfície onde está. Proibido declarar novas cores com prioridade forçada. */

:root {
  color-scheme: light;

  /* Superfícies */
  --gz-bg: #F4F6F9;
  --gz-surface: #FAFAFA;
  --gz-card: #FFFFFF;
  --gz-card-alt: #F5F7F5;
  --gz-elevated: #FFFFFF;
  --gz-border: #E0E0E0;
  --gz-border-strong: #BDBDBD;
  --gz-divider: #EEEEEE;

  /* Texto */
  --gz-text: #212121;
  --gz-text-secondary: #424242;
  --gz-text-muted: #616161;
  --gz-text-disabled: #8A8A8A;
  --gz-text-on-primary: #FFFFFF;
  --gz-link: #1B5E20;
  --gz-link-hover: #2E7D32;

  /* Marca (texto branco só sobre primary, primary-mid-aa e primary-dark) */
  --gz-primary: #2E7D32;
  --gz-primary-mid: #43A047;
  --gz-primary-mid-aa: #318136;
  --gz-primary-dark: #1B5E20;
  --gz-primary-bg: #E8F5E9;
  --gz-primary-border: #A5D6A7;
  --gz-icon: #1B5E20;

  /* Semânticas */
  --gz-success-bg: #E8F5E9;
  --gz-success-border: #A5D6A7;
  --gz-success-text: #1B5E20;
  --gz-info-bg: #E3F2FD;
  --gz-info-border: #90CAF9;
  --gz-info-text: #0D47A1;
  --gz-warning-bg: #FFF3E0;
  --gz-warning-border: #FFCC80;
  --gz-warning-text: #7A4F00;
  --gz-danger-bg: #FDECEA;
  --gz-danger-border: #F5B7B1;
  --gz-danger-text: #B3261E;

  /* Campos */
  --gz-field-bg: #F8FCF8;
  --gz-field-border: #A5D6A7;
  --gz-field-text: #212121;
  --gz-field-placeholder: #616161;
  --gz-field-focus: rgba(46, 125, 50, .35);
  --gz-field-disabled-bg: #EEEEEE;

  /* Tabelas */
  --gz-table-head-bg: #ECEFF1;
  --gz-table-head-text: #212121;
  --gz-table-stripe: #F5F7F5;
  --gz-table-hover: #E8F5E9;
  --gz-table-border: #E0E0E0;

  /* Navegação */
  --gz-navbar-bg: #FFFFFF;
  --gz-navbar-text: #212121;
  --gz-sidebar-bg: #FFFFFF;
  --gz-sidebar-text: #0F2A13;
  --gz-sidebar-active-bg: #D3E6D0;
  --gz-sidebar-active-text: #0F2A13;
  --gz-sidebar-hover-bg: rgba(37, 235, 53, .10);

  /* Estruturais (sem par claro/escuro, exceto as sombras) */
  --gz-radius-sm: 8px;
  --gz-radius-md: 14px;
  --gz-radius-lg: 20px;
  --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, .06);
  --gz-shadow-elevated: 0 14px 40px rgba(0, 0, 0, .10);
  --gz-font: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gz-focus-ring: 0 0 0 3px var(--gz-field-focus);

  /* Sobre imagem e camadas */
  --gz-text-on-hero: #FFFFFF;
  --gz-backdrop: rgba(15, 23, 42, .55);
  /* Scrim do hero do app (Fase 30): mesmo véu do DashboardInstitutionalHero
     (0x66000000 → 0x1A000000). Invariante de tema: declarado só aqui e herdado
     pelos escopos escuros, como o texto sobre imagem. */
  --gz-hero-scrim-top: rgba(0, 0, 0, .40);
  --gz-hero-scrim-mid: rgba(0, 0, 0, .10);

  /* Gráficos */
  --gz-chart-1: #1B5E20;
  --gz-chart-2: #0D47A1;
  --gz-chart-3: #9C2C2C;
  --gz-chart-4: #7A4F00;
  --gz-chart-5: #4A148C;
  --gz-chart-6: #00695C;
  --gz-chart-grid: #E0E0E0;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Superfícies */
  --gz-bg: #0F1112;
  --gz-surface: #121212;
  --gz-card: #1E1E1E;
  --gz-card-alt: #242424;
  --gz-elevated: #2A2A2A;
  --gz-border: #333333;
  --gz-border-strong: #4A4A4A;
  --gz-divider: #2C2C2C;

  /* Texto */
  --gz-text: #FAFAFA;
  --gz-text-secondary: #E0E0E0;
  --gz-text-muted: #B0B0B0;
  --gz-text-disabled: #7A7A7A;
  --gz-text-on-primary: #FFFFFF;
  --gz-link: #A5D6A7;
  --gz-link-hover: #C8E6C9;

  /* Marca (texto branco só sobre primary, primary-mid-aa e primary-dark) */
  --gz-primary: #2E7D32;
  --gz-primary-mid: #43A047;
  --gz-primary-mid-aa: #318136;
  --gz-primary-dark: #1B5E20;
  --gz-primary-bg: #1B2E1C;
  --gz-primary-border: #2E7D32;
  --gz-icon: #A5D6A7;

  /* Semânticas */
  --gz-success-bg: #1B2E1C;
  --gz-success-border: #2E7D32;
  --gz-success-text: #A5D6A7;
  --gz-info-bg: #12243A;
  --gz-info-border: #1E4A7A;
  --gz-info-text: #9EC9FF;
  --gz-warning-bg: #3A2A10;
  --gz-warning-border: #8A6516;
  --gz-warning-text: #FFD79A;
  --gz-danger-bg: #3B1513;
  --gz-danger-border: #8C1D18;
  --gz-danger-text: #FFB4AB;

  /* Campos */
  --gz-field-bg: #1F2A20;
  --gz-field-border: #2E7D32;
  --gz-field-text: #FAFAFA;
  --gz-field-placeholder: #B0B0B0;
  --gz-field-focus: rgba(165, 214, 167, .35);
  --gz-field-disabled-bg: #2A2A2A;

  /* Tabelas */
  --gz-table-head-bg: #242424;
  --gz-table-head-text: #FAFAFA;
  --gz-table-stripe: #1A1A1A;
  --gz-table-hover: #233024;
  --gz-table-border: #333333;

  /* Navegação */
  --gz-navbar-bg: #1B1B1B;
  --gz-navbar-text: #FAFAFA;
  --gz-sidebar-bg: #343A40;
  --gz-sidebar-text: #F9FAFB;
  --gz-sidebar-active-bg: #D3E6D0;
  --gz-sidebar-active-text: #0F2A13;
  --gz-sidebar-hover-bg: rgba(255, 255, 255, .08);

  /* Sombras */
  --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, .16);
  --gz-shadow-elevated: 0 14px 40px rgba(0, 0, 0, .45);

  /* Sobre imagem e camadas */
  --gz-text-on-hero: #FFFFFF;
  --gz-backdrop: rgba(15, 23, 42, .55);

  /* Gráficos */
  --gz-chart-1: #A5D6A7;
  --gz-chart-2: #90CAF9;
  --gz-chart-3: #F5A3A3;
  --gz-chart-4: #FFD79A;
  --gz-chart-5: #CE93D8;
  --gz-chart-6: #80CBC4;
  --gz-chart-grid: #333333;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Superfícies */
    --gz-bg: #0F1112;
    --gz-surface: #121212;
    --gz-card: #1E1E1E;
    --gz-card-alt: #242424;
    --gz-elevated: #2A2A2A;
    --gz-border: #333333;
    --gz-border-strong: #4A4A4A;
    --gz-divider: #2C2C2C;

    /* Texto */
    --gz-text: #FAFAFA;
    --gz-text-secondary: #E0E0E0;
    --gz-text-muted: #B0B0B0;
    --gz-text-disabled: #7A7A7A;
    --gz-text-on-primary: #FFFFFF;
    --gz-link: #A5D6A7;
    --gz-link-hover: #C8E6C9;

    /* Marca (texto branco só sobre primary, primary-mid-aa e primary-dark) */
    --gz-primary: #2E7D32;
    --gz-primary-mid: #43A047;
    --gz-primary-mid-aa: #318136;
    --gz-primary-dark: #1B5E20;
    --gz-primary-bg: #1B2E1C;
    --gz-primary-border: #2E7D32;
    --gz-icon: #A5D6A7;

    /* Semânticas */
    --gz-success-bg: #1B2E1C;
    --gz-success-border: #2E7D32;
    --gz-success-text: #A5D6A7;
    --gz-info-bg: #12243A;
    --gz-info-border: #1E4A7A;
    --gz-info-text: #9EC9FF;
    --gz-warning-bg: #3A2A10;
    --gz-warning-border: #8A6516;
    --gz-warning-text: #FFD79A;
    --gz-danger-bg: #3B1513;
    --gz-danger-border: #8C1D18;
    --gz-danger-text: #FFB4AB;

    /* Campos */
    --gz-field-bg: #1F2A20;
    --gz-field-border: #2E7D32;
    --gz-field-text: #FAFAFA;
    --gz-field-placeholder: #B0B0B0;
    --gz-field-focus: rgba(165, 214, 167, .35);
    --gz-field-disabled-bg: #2A2A2A;

    /* Tabelas */
    --gz-table-head-bg: #242424;
    --gz-table-head-text: #FAFAFA;
    --gz-table-stripe: #1A1A1A;
    --gz-table-hover: #233024;
    --gz-table-border: #333333;

    /* Navegação */
    --gz-navbar-bg: #1B1B1B;
    --gz-navbar-text: #FAFAFA;
    --gz-sidebar-bg: #343A40;
    --gz-sidebar-text: #F9FAFB;
    --gz-sidebar-active-bg: #D3E6D0;
    --gz-sidebar-active-text: #0F2A13;
    --gz-sidebar-hover-bg: rgba(255, 255, 255, .08);

    /* Sombras */
    --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, .16);
    --gz-shadow-elevated: 0 14px 40px rgba(0, 0, 0, .45);

    /* Sobre imagem e camadas */
    --gz-text-on-hero: #FFFFFF;
    --gz-backdrop: rgba(15, 23, 42, .55);

    /* Gráficos */
    --gz-chart-1: #A5D6A7;
    --gz-chart-2: #90CAF9;
    --gz-chart-3: #F5A3A3;
    --gz-chart-4: #FFD79A;
    --gz-chart-5: #CE93D8;
    --gz-chart-6: #80CBC4;
    --gz-chart-grid: #333333;
  }
}

/* Remapeamento (seletor duplo): [data-theme="dark"] X, body.dark-mode X.
   O tema claro usa o visual do framework; só o escuro é reescrito aqui. */

/* ── Remapeamento: estrutura ─────────────────────────────── */
[data-theme="dark"] body,
body.dark-mode {
  background-color: var(--gz-bg);
  color: var(--gz-text);
}

[data-theme="dark"] .wrapper,
body.dark-mode .wrapper,
[data-theme="dark"] .content-wrapper,
body.dark-mode .content-wrapper,
[data-theme="dark"] .content,
body.dark-mode .content,
[data-theme="dark"] .content-header,
body.dark-mode .content-header {
  background-color: var(--gz-bg);
  color: var(--gz-text);
}

[data-theme="dark"] hr,
body.dark-mode hr {
  border-top-color: var(--gz-divider);
}

[data-theme="dark"] code,
body.dark-mode code {
  background-color: var(--gz-card-alt);
  color: var(--gz-text-secondary);
}

[data-theme="dark"] pre,
body.dark-mode pre {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
}

[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
  background-color: var(--gz-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
  background-color: var(--gz-surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--gz-border-strong);
  border-radius: var(--gz-radius-sm);
}

[data-theme="dark"] .overlay,
body.dark-mode .overlay {
  background-color: var(--gz-bg);
  color: var(--gz-text);
  opacity: .85;
}

/* ── Remapeamento: cartões e caixas ──────────────────────── */
[data-theme="dark"] .card,
body.dark-mode .card {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .card-header,
body.dark-mode .card-header {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-bottom-color: var(--gz-divider);
}

[data-theme="dark"] .card-body,
body.dark-mode .card-body {
  color: var(--gz-text);
}

[data-theme="dark"] .card-footer,
body.dark-mode .card-footer {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-top-color: var(--gz-divider);
}

[data-theme="dark"] .card-title,
body.dark-mode .card-title {
  color: var(--gz-text);
}

[data-theme="dark"] .card-outline,
body.dark-mode .card-outline {
  background-color: var(--gz-card);
  color: var(--gz-text);
}

[data-theme="dark"] .info-box,
body.dark-mode .info-box {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .small-box,
body.dark-mode .small-box {
  border-color: var(--gz-border);
}

[data-theme="dark"] .callout,
body.dark-mode .callout {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-top-color: var(--gz-border);
  border-right-color: var(--gz-border);
  border-bottom-color: var(--gz-border);
}

/* ── Remapeamento: tabelas ───────────────────────────────── */
[data-theme="dark"] .table,
body.dark-mode .table {
  color: var(--gz-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .table td,
body.dark-mode .table td,
[data-theme="dark"] .table th,
body.dark-mode .table th {
  color: var(--gz-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .table thead th,
body.dark-mode .table thead th {
  background-color: var(--gz-table-head-bg);
  color: var(--gz-table-head-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--gz-table-stripe);
}

[data-theme="dark"] .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--gz-table-hover);
  color: var(--gz-text);
}

[data-theme="dark"] .table-bordered,
body.dark-mode .table-bordered,
[data-theme="dark"] .table-bordered td,
body.dark-mode .table-bordered td,
[data-theme="dark"] .table-bordered th,
body.dark-mode .table-bordered th {
  border-color: var(--gz-table-border);
}

/* Classes de zebra das DataTables (stripeClasses em script.js) */
[data-theme="dark"] .bg-white,
body.dark-mode .bg-white {
  background-color: var(--gz-card);
  color: var(--gz-text);
}

[data-theme="dark"] .bg-stripe,
body.dark-mode .bg-stripe {
  background-color: var(--gz-table-stripe);
  color: var(--gz-text);
}

/* ── Remapeamento: formulários ───────────────────────────── */
[data-theme="dark"] .form-control,
body.dark-mode .form-control,
[data-theme="dark"] .custom-select,
body.dark-mode .custom-select {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .form-control:focus,
body.dark-mode .form-control:focus,
[data-theme="dark"] .custom-select:focus,
body.dark-mode .custom-select:focus {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-primary-mid);
  box-shadow: var(--gz-focus-ring);
}

[data-theme="dark"] .custom-control-label,
body.dark-mode .custom-control-label {
  color: var(--gz-text);
}

[data-theme="dark"] .input-group-text,
body.dark-mode .input-group-text {
  background-color: var(--gz-card-alt);
  color: var(--gz-text-secondary);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .form-check-input,
body.dark-mode .form-check-input {
  accent-color: var(--gz-primary);
}

[data-theme="dark"] .form-control:disabled,
body.dark-mode .form-control:disabled {
  background-color: var(--gz-field-disabled-bg);
  color: var(--gz-text-disabled);
}

[data-theme="dark"] .form-control[readonly],
body.dark-mode .form-control[readonly] {
  background-color: var(--gz-field-disabled-bg);
  color: var(--gz-text-muted);
}

[data-theme="dark"] ::placeholder,
body.dark-mode ::placeholder {
  color: var(--gz-field-placeholder);
  opacity: 1;
}

/* ── Remapeamento: botões e badges ───────────────────────── */
[data-theme="dark"] .btn-light,
body.dark-mode .btn-light,
[data-theme="dark"] .btn-default,
body.dark-mode .btn-default {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-color: var(--gz-border-strong);
}

[data-theme="dark"] .btn-light:hover,
body.dark-mode .btn-light:hover,
[data-theme="dark"] .btn-default:hover,
body.dark-mode .btn-default:hover {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
}

[data-theme="dark"] .btn-outline-secondary,
body.dark-mode .btn-outline-secondary,
[data-theme="dark"] .btn-outline-dark,
body.dark-mode .btn-outline-dark {
  color: var(--gz-text-secondary);
  border-color: var(--gz-border-strong);
}

[data-theme="dark"] .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-dark:hover,
body.dark-mode .btn-outline-dark:hover {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
}

[data-theme="dark"] .badge-light,
body.dark-mode .badge-light {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
}

[data-theme="dark"] .badge-secondary,
body.dark-mode .badge-secondary {
  background-color: var(--gz-border-strong);
  color: var(--gz-text);
}

/* ── Remapeamento: alertas semânticos ────────────────────── */
[data-theme="dark"] .alert-success,
body.dark-mode .alert-success {
  background-color: var(--gz-success-bg);
  border-color: var(--gz-success-border);
  color: var(--gz-success-text);
}

[data-theme="dark"] .alert-info,
body.dark-mode .alert-info {
  background-color: var(--gz-info-bg);
  border-color: var(--gz-info-border);
  color: var(--gz-info-text);
}

[data-theme="dark"] .alert-warning,
body.dark-mode .alert-warning {
  background-color: var(--gz-warning-bg);
  border-color: var(--gz-warning-border);
  color: var(--gz-warning-text);
}

[data-theme="dark"] .alert-danger,
body.dark-mode .alert-danger {
  background-color: var(--gz-danger-bg);
  border-color: var(--gz-danger-border);
  color: var(--gz-danger-text);
}

/* ── Remapeamento: modais e dropdowns ────────────────────── */
[data-theme="dark"] .modal-content,
body.dark-mode .modal-content {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .modal-header,
body.dark-mode .modal-header,
[data-theme="dark"] .modal-footer,
body.dark-mode .modal-footer {
  border-color: var(--gz-divider);
}

[data-theme="dark"] .close,
body.dark-mode .close {
  color: var(--gz-text);
  text-shadow: none;
}

/* COMANDO 4 (2026-09-30, C4-0930-11): o "X" de vários modais é um .btn sem variante com
   ícone bx-x; herdava a cor fixa do .btn do Bootstrap 4 e sumia no tema escuro. */
.modal-header .btn[data-dismiss="modal"]:not([class*="btn-"]),
.modal-header .btn[data-dismiss="modal"]:not([class*="btn-"]):hover,
.modal-header .btn[data-dismiss="modal"]:not([class*="btn-"]):focus {
  color: var(--gz-text);
}

[data-theme="dark"] .dropdown-menu,
body.dark-mode .dropdown-menu {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
  color: var(--gz-text);
}

[data-theme="dark"] .dropdown-item:hover,
body.dark-mode .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
body.dark-mode .dropdown-item:focus {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
}

[data-theme="dark"] .dropdown-item.active,
body.dark-mode .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active,
body.dark-mode .dropdown-item:active {
  background-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

[data-theme="dark"] .dropdown-divider,
body.dark-mode .dropdown-divider {
  border-top-color: var(--gz-divider);
}

/* ── Remapeamento: navegação e paginação ─────────────────── */
[data-theme="dark"] .nav-tabs,
body.dark-mode .nav-tabs {
  border-bottom-color: var(--gz-border);
}

[data-theme="dark"] .nav-tabs .nav-link,
body.dark-mode .nav-tabs .nav-link {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
body.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--gz-border);
  color: var(--gz-text);
}

[data-theme="dark"] .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-border);
  border-bottom-color: var(--gz-card);
}

[data-theme="dark"] .nav-pills .nav-link,
body.dark-mode .nav-pills .nav-link {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link.active,
body.dark-mode .nav-pills .nav-link.active {
  background-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

[data-theme="dark"] .tab-content,
body.dark-mode .tab-content {
  color: var(--gz-text);
}

[data-theme="dark"] .pagination,
body.dark-mode .pagination {
  color: var(--gz-text);
}

[data-theme="dark"] .page-link,
body.dark-mode .page-link {
  background-color: var(--gz-card);
  color: var(--gz-link);
  border-color: var(--gz-border);
}

[data-theme="dark"] .page-link:hover,
body.dark-mode .page-link:hover {
  background-color: var(--gz-card-alt);
  color: var(--gz-link-hover);
  border-color: var(--gz-border-strong);
}

[data-theme="dark"] .page-item.active .page-link,
body.dark-mode .page-item.active .page-link {
  background-color: var(--gz-primary);
  border-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

[data-theme="dark"] .page-item.disabled .page-link,
body.dark-mode .page-item.disabled .page-link {
  background-color: var(--gz-card);
  border-color: var(--gz-border);
  color: var(--gz-text-disabled);
}

[data-theme="dark"] .list-group-item,
body.dark-mode .list-group-item {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .breadcrumb,
body.dark-mode .breadcrumb {
  background-color: var(--gz-card-alt);
  color: var(--gz-text-muted);
}

[data-theme="dark"] .breadcrumb-item a,
body.dark-mode .breadcrumb-item a {
  color: var(--gz-link);
}

[data-theme="dark"] .breadcrumb-item.active,
body.dark-mode .breadcrumb-item.active {
  color: var(--gz-text-muted);
}

[data-theme="dark"] .progress,
body.dark-mode .progress {
  background-color: var(--gz-border);
}

[data-theme="dark"] .tooltip-inner,
body.dark-mode .tooltip-inner {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
}

[data-theme="dark"] .popover,
body.dark-mode .popover {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .popover-header,
body.dark-mode .popover-header {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-bottom-color: var(--gz-divider);
}

[data-theme="dark"] .popover-body,
body.dark-mode .popover-body {
  color: var(--gz-text);
}

/* ── Remapeamento: utilitários Bootstrap de cor ──────────── */
/* Causa raiz dos textos brancos sobre fundo claro. O framework declara
   .bg-light e .bg-white com prioridade forçada e por isso vence estas regras
   enquanto a Fase 02 não migrar o CSS de tela; não há solução sem repetir a
   prioridade forçada, que é proibida aqui. */
[data-theme="dark"] .text-muted,
body.dark-mode .text-muted {
  color: var(--gz-text-muted);
}

[data-theme="dark"] .text-dark,
body.dark-mode .text-dark {
  color: var(--gz-text);
}

[data-theme="dark"] .text-secondary,
body.dark-mode .text-secondary {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .bg-light,
body.dark-mode .bg-light {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
}

[data-theme="dark"] .border,
body.dark-mode .border {
  border-color: var(--gz-border);
}

/* ── Remapeamento: navbar e sidebar (AdminLTE) ───────────── */
/* Fornece a cor que vinha das classes fixas navbar-white/navbar-light e
   sidebar-dark-primary, removidas do HTML. Sem prefixo de tema: os tokens já
   carregam o par claro/escuro. */
.main-header {
  border-bottom-color: var(--gz-border);
}

.main-header.navbar {
  background-color: var(--gz-navbar-bg);
  color: var(--gz-navbar-text);
}

.main-header .navbar-nav .nav-link {
  color: var(--gz-navbar-text);
}

.brand-link {
  color: var(--gz-sidebar-text);
  border-bottom-color: var(--gz-divider);
}

.main-sidebar {
  background-color: var(--gz-sidebar-bg);
  color: var(--gz-sidebar-text);
}

.nav-sidebar .nav-link {
  color: var(--gz-sidebar-text);
}

.nav-sidebar .nav-link:hover {
  background-color: var(--gz-sidebar-hover-bg);
}

.nav-sidebar .nav-link.active {
  background-color: var(--gz-sidebar-active-bg);
  color: var(--gz-sidebar-active-text);
}

.user-panel {
  border-bottom-color: var(--gz-divider);
  color: var(--gz-sidebar-text);
}

/* ── Remapeamento: plugins ───────────────────────────────── */
/* DataTables */
[data-theme="dark"] .dataTables_wrapper,
body.dark-mode .dataTables_wrapper {
  color: var(--gz-text);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .dataTables_wrapper .dtr-control,
body.dark-mode .dataTables_wrapper .dtr-control {
  color: var(--gz-text);
}

/* bootstrap-table */
[data-theme="dark"] .bootstrap-table .fixed-table-toolbar,
body.dark-mode .bootstrap-table .fixed-table-toolbar {
  color: var(--gz-text);
}

[data-theme="dark"] .bootstrap-table .fixed-table-container,
body.dark-mode .bootstrap-table .fixed-table-container {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .bootstrap-table .fixed-table-footer,
body.dark-mode .bootstrap-table .fixed-table-footer {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-top-color: var(--gz-table-border);
}

[data-theme="dark"] .bootstrap-table .pagination-detail,
body.dark-mode .bootstrap-table .pagination-detail,
[data-theme="dark"] .bootstrap-table .page-list,
body.dark-mode .bootstrap-table .page-list {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .bootstrap-table .search input,
body.dark-mode .bootstrap-table .search input {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .bootstrap-table .keep-open label,
body.dark-mode .bootstrap-table .keep-open label {
  color: var(--gz-text);
}

/* Selectize */
[data-theme="dark"] .selectize-input,
body.dark-mode .selectize-input,
[data-theme="dark"] .selectize-input.full,
body.dark-mode .selectize-input.full {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .selectize-input input,
body.dark-mode .selectize-input input {
  color: var(--gz-field-text);
}

[data-theme="dark"] .selectize-input .item,
body.dark-mode .selectize-input .item,
[data-theme="dark"] .selectize-control.multi .selectize-input > div,
body.dark-mode .selectize-control.multi .selectize-input > div {
  background-color: var(--gz-card-alt);
  color: var(--gz-field-text);
}

[data-theme="dark"] .selectize-dropdown,
body.dark-mode .selectize-dropdown {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .selectize-dropdown .option,
body.dark-mode .selectize-dropdown .option {
  color: var(--gz-text);
}

[data-theme="dark"] .selectize-dropdown .active,
body.dark-mode .selectize-dropdown .active {
  background-color: var(--gz-table-hover);
  color: var(--gz-text);
}

/* select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--gz-field-bg);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--gz-field-text);
}

[data-theme="dark"] .select2-dropdown,
body.dark-mode .select2-dropdown {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field,
body.dark-mode .select2-search--dropdown .select2-search__field {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .select2-results__option--highlighted,
body.dark-mode .select2-results__option--highlighted {
  background-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

/* daterangepicker */
[data-theme="dark"] .daterangepicker,
body.dark-mode .daterangepicker {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .daterangepicker .calendar-table,
body.dark-mode .daterangepicker .calendar-table {
  background-color: var(--gz-elevated);
  border-color: var(--gz-elevated);
}

[data-theme="dark"] .daterangepicker .calendar-table th,
body.dark-mode .daterangepicker .calendar-table th,
[data-theme="dark"] .daterangepicker .calendar-table td,
body.dark-mode .daterangepicker .calendar-table td {
  color: var(--gz-text);
}

[data-theme="dark"] .daterangepicker td.off,
body.dark-mode .daterangepicker td.off {
  background-color: var(--gz-elevated);
  color: var(--gz-text-muted);
}

[data-theme="dark"] .daterangepicker td.in-range,
body.dark-mode .daterangepicker td.in-range {
  background-color: var(--gz-primary-bg);
  color: var(--gz-text);
}

[data-theme="dark"] .daterangepicker td.available:hover,
body.dark-mode .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover,
body.dark-mode .daterangepicker th.available:hover {
  background-color: var(--gz-card-alt);
}

[data-theme="dark"] .daterangepicker .ranges li,
body.dark-mode .daterangepicker .ranges li {
  color: var(--gz-link);
}

[data-theme="dark"] .daterangepicker .ranges li:hover,
body.dark-mode .daterangepicker .ranges li:hover {
  background-color: var(--gz-card-alt);
}

[data-theme="dark"] .daterangepicker .ranges li.active,
body.dark-mode .daterangepicker .ranges li.active {
  background-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

[data-theme="dark"] .daterangepicker .drp-buttons,
body.dark-mode .daterangepicker .drp-buttons {
  border-top-color: var(--gz-divider);
  color: var(--gz-text-secondary);
}

/* SweetAlert2 (os botões .swal2-styled confirm/cancel/deny mantêm a cor atual) */
[data-theme="dark"] .swal2-popup,
body.dark-mode .swal2-popup,
[data-theme="dark"] .swal2-toast,
body.dark-mode .swal2-toast {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
}

[data-theme="dark"] .swal2-title,
body.dark-mode .swal2-title {
  color: var(--gz-text);
}

[data-theme="dark"] .swal2-html-container,
body.dark-mode .swal2-html-container,
[data-theme="dark"] .swal2-content,
body.dark-mode .swal2-content {
  color: var(--gz-text-secondary);
}

[data-theme="dark"] .swal2-input,
body.dark-mode .swal2-input,
[data-theme="dark"] .swal2-textarea,
body.dark-mode .swal2-textarea,
[data-theme="dark"] .swal2-select,
body.dark-mode .swal2-select {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

/* Summernote */
[data-theme="dark"] .note-editor,
body.dark-mode .note-editor {
  background-color: var(--gz-field-bg);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .note-toolbar,
body.dark-mode .note-toolbar {
  background-color: var(--gz-card-alt);
  border-bottom-color: var(--gz-field-border);
}

[data-theme="dark"] .note-editable,
body.dark-mode .note-editable {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
}

[data-theme="dark"] .note-statusbar,
body.dark-mode .note-statusbar {
  background-color: var(--gz-card-alt);
  border-top-color: var(--gz-field-border);
}

[data-theme="dark"] .note-btn,
body.dark-mode .note-btn {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-color: var(--gz-border-strong);
}

[data-theme="dark"] .note-btn:hover,
body.dark-mode .note-btn:hover {
  background-color: var(--gz-elevated);
}

[data-theme="dark"] .note-dropdown-menu,
body.dark-mode .note-dropdown-menu {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

/* Summernote renderiza popover, diálogos e paleta no <body>, fora do escopo
   da tela: o tema desses elementos vive aqui (Macrofase 43). */
[data-theme="dark"] .note-dropdown-item,
body.dark-mode .note-dropdown-item,
[data-theme="dark"] .note-dropdown-menu .note-palette-title,
body.dark-mode .note-dropdown-menu .note-palette-title {
  color: var(--gz-text);
}

[data-theme="dark"] .note-dropdown-item:hover,
body.dark-mode .note-dropdown-item:hover {
  background-color: var(--gz-table-hover);
  color: var(--gz-text);
}

[data-theme="dark"] .note-popover .popover-content,
body.dark-mode .note-popover .popover-content,
[data-theme="dark"] .note-popover.popover,
body.dark-mode .note-popover.popover {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .note-modal .note-modal-content,
body.dark-mode .note-modal .note-modal-content {
  background-color: var(--gz-elevated);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .note-modal .note-modal-header,
body.dark-mode .note-modal .note-modal-header,
[data-theme="dark"] .note-modal .note-modal-footer,
body.dark-mode .note-modal .note-modal-footer {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-color: var(--gz-divider);
}

[data-theme="dark"] .note-modal .note-modal-title,
body.dark-mode .note-modal .note-modal-title,
[data-theme="dark"] .note-modal .close,
body.dark-mode .note-modal .close,
[data-theme="dark"] .note-modal label,
body.dark-mode .note-modal label {
  color: var(--gz-text);
}

[data-theme="dark"] .note-modal .note-form-control,
body.dark-mode .note-modal .note-form-control,
[data-theme="dark"] .note-modal .form-control,
body.dark-mode .note-modal .form-control {
  background-color: var(--gz-field-bg);
  color: var(--gz-field-text);
  border-color: var(--gz-field-border);
}

[data-theme="dark"] .note-color-palette div .note-color-btn,
body.dark-mode .note-color-palette div .note-color-btn {
  border-color: var(--gz-border);
}

[data-theme="dark"] .note-placeholder,
body.dark-mode .note-placeholder {
  color: var(--gz-field-placeholder);
}

/* Tabulator */
[data-theme="dark"] .tabulator,
body.dark-mode .tabulator {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .tabulator-header,
body.dark-mode .tabulator-header,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
body.dark-mode .tabulator .tabulator-header .tabulator-col {
  background-color: var(--gz-table-head-bg);
  color: var(--gz-table-head-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .tabulator-row,
body.dark-mode .tabulator-row {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-table-border);
}

[data-theme="dark"] .tabulator-row-even,
body.dark-mode .tabulator-row-even {
  background-color: var(--gz-table-stripe);
}

[data-theme="dark"] .tabulator-footer,
body.dark-mode .tabulator-footer {
  background-color: var(--gz-card-alt);
  color: var(--gz-text);
  border-top-color: var(--gz-table-border);
}

[data-theme="dark"] .tabulator-page,
body.dark-mode .tabulator-page {
  background-color: var(--gz-card);
  color: var(--gz-text);
  border-color: var(--gz-border);
}

[data-theme="dark"] .tabulator-page.active,
body.dark-mode .tabulator-page.active {
  background-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}

/* overlayScrollbars */
[data-theme="dark"] .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
body.dark-mode .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
[data-theme="dark"] .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
body.dark-mode .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background-color: var(--gz-border-strong);
}

/* pace */
[data-theme="dark"] .pace .pace-progress,
body.dark-mode .pace .pace-progress {
  background: var(--gz-primary);
}

/* icheck */
[data-theme="dark"] [class*="icheck-"] > label,
body.dark-mode [class*="icheck-"] > label {
  color: var(--gz-text);
}

[data-theme="dark"] [class*="icheck-"] > input:first-child + label::before,
body.dark-mode [class*="icheck-"] > input:first-child + label::before {
  background-color: var(--gz-field-bg);
  border-color: var(--gz-field-border);
}

/* ── Logos e ícones ──────────────────────────────────────── */
/* PNG não é recolorido: recebe fundo de cartão para manter a legibilidade.
   Ícones Font Awesome e boxicons herdam currentColor. */
[data-theme="dark"] .brand-link img,
body.dark-mode .brand-link img,
[data-theme="dark"] img[src*="regional_logo"],
body.dark-mode img[src*="regional_logo"] {
  background-color: var(--gz-card);
  border-radius: var(--gz-radius-sm);
  padding: 2px;
}

/* ── Foco ────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--gz-focus-ring);
}

/* ── Shell mobile global (§5.1) ─────────────────────────────────── */
.gz-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.gz-table-scroll > table thead th { white-space: nowrap; }
.gz-table-scroll { background:
  linear-gradient(90deg, var(--gz-card) 30%, transparent),
  linear-gradient(90deg, transparent, var(--gz-card) 70%) 100% 0,
  linear-gradient(90deg, var(--gz-border), transparent),
  linear-gradient(90deg, transparent, var(--gz-border)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* COMANDO 4 (2026-09-28, lote E): o bootstrap-table deixa o aviso "Carregando" sempre no
   layout (só visibility hidden, z-index 1000, posicionado pelo .fixed-table-container) cobrindo
   todo o corpo da tabela. No iPhone essa camada invisível recebia o arrasto e a tabela não rolava
   para o lado (Fonte Pagadora, Prestação de Contas, Blocos). Fora do carregamento ele sai do layout. */
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading:not(.open) { display: none; }

/* COMANDO 4 (2026-09-28, lote E): no Bootstrap 4 só o .modal-body filho direto do
   .modal-content rola em .modal-dialog-scrollable; com um <form> no meio (perfis financeiros,
   plano de contas, membros do Admin) o conteúdo passava da altura da tela e o botão Salvar
   ficava cortado, sem rolagem. O form vira a coluna flexível que encolhe. */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

.main-header.navbar { min-height: 56px; }
.main-header.navbar .navbar-nav.ml-auto { gap: .25rem; }
.main-header.navbar .nav-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* Título da página no navbar (Fase 24 §5.1.2): só abaixo de 768 px (d-md-none), uma linha com reticências. */
.gz-navbar-title { display: flex; align-items: center; min-width: 0; }
.gz-navbar-title__text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 .25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gz-navbar-text);
}

.btn-group, .card-tools { display: flex; flex-wrap: wrap; gap: .25rem; }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  /* B-M4: o seletor de período sai da linha do navbar e ganha a sua (§5.1.2).
     Mesmos id/class/name; só muda a posição no contêiner. */
  .main-header.navbar { flex-wrap: wrap; }
  .main-header.navbar > .navbar-nav:first-child { flex: 1 1 0; min-width: 0; }
  .main-header.navbar .gz-navbar-period { order: 99; flex: 0 0 100%; padding: .25rem .5rem; }
  .main-header.navbar .gz-navbar-period .d-flex { justify-content: flex-start !important; }
}

@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
  .modal-content { max-height: calc(100vh - 1rem); }
  .modal-body { overflow-y: auto; }
  .modal-footer { flex-wrap: wrap; }
  .swal2-popup { width: min(32em, calc(100vw - 2rem)); }
  /* COMANDO 4 (2026-09-28, lote E): paginação da DataTable ("Anterior 1 2 3 4 5 … N Próximo")
     não cabe em 360–390 px; quebra em linhas centralizadas em vez de sair pela lateral. */
  div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  /* COMANDO 4 (2026-09-28 G): com 5 posições (script.js) e botões compactos a paginação cabe
     numa linha só; a quebra acima fica apenas como rede de segurança. */
  div.dataTables_wrapper div.dataTables_paginate .page-link { padding: .375rem .55rem; }
}
.swal2-container.swal2-top-end, .swal2-container.swal2-top { align-items: flex-start; }

/* ── PWA: aviso de instalação e de nova versão (Fase 29) ──
   Barras injetadas por public/js/pwa.js (#gz-pwa-install no rodapé, #gz-pwa-update no topo),
   cores só por tokens e tema herdado. Enquanto o aviso de instalação está visível, o body
   reserva o espaço dele (--gz-pwa-reserve, calculado pelo JS) para não cobrir o conteúdo. */
.gz-pwa-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1045;
  width: calc(100% - 2rem);
  max-width: 28rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--gz-elevated);
  color: var(--gz-text);
  border: 1px solid var(--gz-border);
  border-radius: var(--gz-radius-md);
  box-shadow: var(--gz-shadow-elevated);
  font-family: var(--gz-font);
}
.gz-pwa-bar[hidden] { display: none; }
#gz-pwa-install { bottom: 1rem; }
#gz-pwa-update { top: .75rem; }
.gz-pwa-bar__text { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 12rem; min-width: 0; }
.gz-pwa-bar__hint { color: var(--gz-text-muted); font-size: .875rem; }
.gz-pwa-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.gz-pwa-bar__btn {
  min-height: 44px;
  padding: .375rem 1rem;
  border-radius: var(--gz-radius-sm);
  border: 1px solid var(--gz-border-strong);
  background: var(--gz-card);
  color: var(--gz-text);
  font: inherit;
  cursor: pointer;
}
.gz-pwa-bar__btn--primary {
  background: var(--gz-primary);
  border-color: var(--gz-primary);
  color: var(--gz-text-on-primary);
}
.gz-pwa-bar__btn:focus-visible { outline: none; box-shadow: var(--gz-focus-ring); }
body.gz-pwa-has-install { padding-bottom: var(--gz-pwa-reserve, 6rem); }

@media (max-width: 575.98px) {
  .gz-pwa-bar { width: calc(100% - 1rem); }
  #gz-pwa-install { bottom: .5rem; }
  .gz-pwa-bar__actions { width: 100%; }
  .gz-pwa-bar__btn { flex: 1 1 0; }
}