/* ==========================================================================
   Modo escuro da conta (protótipo Figma "Darkmode"; mesmas variáveis do admin).
   Carregado por último. Tudo fica sob html.pf-v5-theme-dark, classe que o Keycloak coloca no <html> quando
   darkMode=true no theme.properties e o sistema do usuário está em modo escuro (o switch "Modo escuro" do realm
   desliga isso). Sem a classe nada daqui vale, então o tema claro não muda.
   Os CSS do tema só usam variáveis para cores: aqui são redefinidas apenas as variáveis.
   [Figma] = valor lido do protótipo; [analogia] = aceito por analogia; [provisório] = ainda sem definição de design.
   ========================================================================== */
html.pf-v5-theme-dark {
  color-scheme: dark;

  /* ---- tokens do tema ---- */
  --omni-page: #0e1b2b;                 /* [Figma] fundo da página */
  --omni-surface: #1b263a;              /* [Figma] cards, menu lateral, tabela, dropdown, campos */
  --omni-line: #2b3a56;                 /* [Figma] bordas e divisores */
  --omni-control-border: #93afd0;       /* [Figma] borda de campos e controles */
  --omni-input-text: #dbe0e6;           /* [pedido] texto digitado (o placeholder continua #93afd0) */
  --omni-text: #93afd0;                 /* [Figma] texto padrão */
  --omni-text-strong: #dbe0e6;          /* [Figma] texto forte */
  --omni-title: #dbe0e6;                /* [Figma] títulos do admin */
  --omni-nav-title: #dbe0e6;            /* [Figma] títulos de seção do menu lateral */
  --omni-primary: #2a83ea;              /* [Figma] azul de ação / links */
  --omni-primary-strong: #2a83ea;       /* [Figma] */
  --omni-primary-hover: #1f6ec7;        /* [provisório] hover/clique do botão primário */
  --omni-hover: #1e385d;                /* [analogia] hover de menus e linhas de tabela */
  --omni-row-selected: #234577;         /* [pedido] linha de tabela selecionada */
  --omni-masthead-icon: #ffffff;        /* [pedido] ícones da topbar (menu e ajuda) */
  --omni-selected: #1e385d;             /* [Figma] aba atual, item selecionado; [analogia] menu lateral e linha selecionada */
  --omni-on-accent: #ffffff;            /* [Figma] texto sobre o azul */
  --omni-on-accent-divider: #89b7ed;    /* [Figma] divisor do botão split */
  --omni-masthead: #0b396d;             /* [Figma] topbar */

  /* ---- Cerrado DS (forms.css, tabs.css, tags.css) ---- */
  --cds-color-primary: #2a83ea;         /* [Figma] borda/texto do botão outlined, tag primary */
  --cds-color-primary-medium: #2a83ea;  /* [Figma] fundo do botão primário e do split; hover do outlined */
  --cds-color-primary-weak: #2a83ea;    /* [Figma] sublinhado da aba atual */
  --cds-color-neutral: #6481a4;         /* [Figma] tag neutral */
  --cds-color-neutral-strong: #93afd0;  /* [Figma] texto de aba inativa e ícones */
  --cds-color-success: #10b975;         /* [Figma] tag verde */
  --cds-color-alert: #f9a200;           /* [Figma] tag amarela */
  --cds-color-critical: #f30058;        /* [Figma] tag vermelha */
  --cds-color-critical-strong: #f30058; /* [provisório] erro e asterisco obrigatório */
  --cds-switch-on: #10b975;             /* [analogia] switch ligado */
  --cds-color-disabled: #4a5d7a;        /* [provisório] desabilitado */
  --cds-color-grey: #93afd0;            /* [analogia] ícones dos campos */
  --cds-color-black: #dbe0e6;           /* [analogia] */
  --cds-color-offblack: #dbe0e6;        /* [analogia] */
  --cds-color-offblue: #1e385d;         /* [analogia] */
  --cds-color-grey-light: #2b3a56;      /* [Figma] linha sob as abas */
  --cds-color-offwhite: #2b3a56;        /* [analogia] */
  --cds-text-grey: #93afd0;             /* [analogia] rótulos e texto de campos */
  --cds-text-black: #dbe0e6;            /* [analogia] texto digitado */
  --cds-text-offblack: #dbe0e6;         /* [analogia] */
  --cds-body-color: #2b3a56;            /* [Figma] botões da paginação */
  --cds-form-background-strong: #243149;/* [provisório] fundo de campo desabilitado */
  --cds-form-selected: #1e385d;         /* [analogia] */
  --cds-form-selected-border: #2b3a56;  /* [analogia] */
  --cds-form-small-background: #243149; /* [provisório] */
  --cds-form-inner-shadow-strong: inset 0px 1px 4px rgba(0, 0, 0, 0.5);   /* [provisório] */
  --cds-form-outer-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);                /* [provisório] */
  --cds-form-outer-glow: 0 0 0 3px rgba(42, 131, 234, 0.35);              /* [provisório] */
  --cds-form-dropdown-shadow: rgba(0, 0, 0, 0.5);
  --cds-panel-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);                       /* [Figma] sombra dos cards */
  --cds-inner-panel-shadow: 0 0 4px #00000080;                            /* [pedido] painel dentro de painel */

  /* ---- PatternFly: o modo escuro dele usa cinzas próprios; aqui vira a paleta do Figma ---- */
  --pf-v5-global--BackgroundColor--100: #1b263a;
  --pf-v5-global--BackgroundColor--200: #0e1b2b;
  --pf-v5-global--BackgroundColor--300: #1b263a;   /* menus, modais e popovers */
  --pf-v5-global--BackgroundColor--400: #1e385d;
  --pf-v5-global--Color--100: #dbe0e6;
  --pf-v5-global--Color--200: #93afd0;
  --pf-v5-global--Color--300: #93afd0;
  --pf-v5-global--Color--400: #93afd0;
  --pf-v5-global--BorderColor--100: #2b3a56;
  --pf-v5-global--BorderColor--200: #2b3a56;
  --pf-v5-global--BorderColor--300: #2b3a56;
  --pf-v5-global--BorderColor--dark-100: #2b3a56;  /* linhas das tabelas e do menu lateral */
  --pf-v5-global--BorderColor--light-100: #2b3a56;
  --pf-v5-global--link--Color: #2a83ea;
  --pf-v5-global--link--Color--hover: #2a83ea;
  --pf-v5-global--primary-color--100: #2a83ea;
  --pf-v5-global--primary-color--200: #2a83ea;
  --pf-v5-global--active-color--100: #2a83ea;
  --pf-v5-c-page__main-section--m-light--BackgroundColor: #1b263a;
  --pf-v5-c-page--BackgroundColor: #0e1b2b;
  --pf-v5-global--disabled-color--100: #4a5d7a;   /* [provisório] */
  --pf-v5-global--disabled-color--200: #4a5d7a;   /* [provisório] */
  --pf-v5-global--BoxShadow--sm: 0 2px 2px rgba(0, 0, 0, 0.5);    /* [Figma] cards */
  --pf-v5-global--BoxShadow--md: 0 4px 3px rgba(0, 0, 0, 0.5);    /* [Figma] dropdown */
  --pf-v5-global--BoxShadow--lg: 0 4px 3px rgba(0, 0, 0, 0.5);    /* [analogia] */
  --pf-v5-global--BoxShadow--xl: 0 12px 24px rgba(0, 0, 0, 0.5);  /* [analogia] modais (card mobile do login) */
  --pf-v5-global--danger-color--100: #f30058;     /* [provisório] botão de perigo = vermelho da tag */
  --pf-v5-global--danger-color--200: #f30058;     /* [provisório] */
  --pf-v5-c-button--m-danger--Color: #ffffff;     /* [provisório] */
  --pf-v5-c-menu__item-select-icon--Color: #2a83ea;  /* [pedido] check do menu em #2a83ea, como os links */
}

/* ---- regras que o PatternFly escuro define com mais especificidade que o tema ---- */
html.pf-v5-theme-dark .pf-v5-c-page { background-color: var(--omni-page); }
html.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-toolbar { background-color: transparent; }
/* faixa de aviso (a conta não tem, mas o PatternFly pode exibir banners) */
html.pf-v5-theme-dark .pf-v5-c-banner.pf-m-gold { --pf-v5-c-banner--m-gold--BackgroundColor: #f9a200; background-color: #f9a200; color: #1a1a1a; }  /* [Figma] */
html.pf-v5-theme-dark .pf-v5-c-banner.pf-m-gold * { color: #1a1a1a; }


/* tabela: fundo = superfície; texto das células = texto padrão (links continuam azuis) */
html.pf-v5-theme-dark .pf-v5-c-table { --pf-v5-c-table--BackgroundColor: transparent; background-color: transparent; }
html.pf-v5-theme-dark .pf-v5-c-table .pf-v5-c-table__td { color: var(--omni-text); }
/* aba atual: texto forte (o sublinhado e o fundo vêm dos tokens) */
html.pf-v5-theme-dark :is(button, a).cds-tab-btn.active { color: var(--omni-text-strong); }

/* botão split (primário com dropdown e menu do usuário): hover/clique mais escuro [provisório] */
html.pf-v5-theme-dark body .pf-v5-c-menu-toggle.pf-m-primary:hover,
html.pf-v5-theme-dark body .pf-v5-c-menu-toggle.pf-m-primary:focus,
html.pf-v5-theme-dark body .pf-v5-c-menu-toggle.pf-m-primary[aria-expanded="true"],
html.pf-v5-theme-dark .pf-v5-c-toolbar__item.cds-select .pf-v5-c-menu-toggle:hover,
html.pf-v5-theme-dark .pf-v5-c-toolbar__item.cds-select .pf-v5-c-menu-toggle:focus,
html.pf-v5-theme-dark .pf-v5-c-toolbar__item.cds-select .pf-v5-c-menu-toggle[aria-expanded="true"] { background-color: var(--omni-primary-hover); }

/* botão de perigo preenchido: texto branco [provisório] */
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-danger:not(.pf-m-secondary):not(.pf-m-link):not(.pf-m-tertiary) { color: #ffffff; }

/* menu lateral: só linhas horizontais, sem a linha vertical que acompanha a altura do menu */
html.pf-v5-theme-dark .pf-v5-c-page__sidebar { border-right: 0; box-shadow: none; --pf-v5-c-page__sidebar--BoxShadow: none; }
/* botão que acompanha o campo (copiar nome do realm): a borda esquerda do PatternFly escuro era quase preta */
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-control { border-left-color: var(--omni-control-border); }
/* o PatternFly escuro põe border-inline-start (quase preto) nos itens vizinhos do grupo do clipboard */
html.pf-v5-theme-dark .pf-v5-c-clipboard-copy__group > * + * { border-inline-start-color: var(--omni-control-border) !important; --pf-v5-global--palette--black-700: #93afd0; }

/* paginação: o ícone do seletor de itens por página tem a mesma cor do número (Figma: ambos #dbe0e6) */
html.pf-v5-theme-dark body .pf-v5-c-pagination .pf-v5-c-menu-toggle .pf-v5-c-menu-toggle__toggle-icon { color: var(--omni-text-strong); }

/* listas de dados (conta: senha, dispositivos, provedores): fundo = superfície */
html.pf-v5-theme-dark .pf-v5-c-data-list { --pf-v5-c-data-list--BackgroundColor: var(--omni-surface); }
html.pf-v5-theme-dark .pf-v5-c-data-list__item { --pf-v5-c-data-list__item--BackgroundColor: var(--omni-surface); background-color: var(--omni-surface); }

/* ícones da topbar (menu hambúrguer e ajuda) em branco [pedido] */
html.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
html.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain { color: var(--omni-masthead-icon); }
/* títulos de coluna da tabela: peso 400 e texto forte [pedido] */
html.pf-v5-theme-dark .pf-v5-c-table th,
html.pf-v5-theme-dark .pf-v5-c-table .pf-v5-c-table__th { font-weight: 400; color: var(--omni-text-strong); }