/* =====================================================================
   PADRÃO VISUAL PCNET · CAMADA DO PEGAPROX

   Carregada por último no <head> (aplicar.sh), depois de pcnet-tokens.css e
   pcnetui-tema-escuro.css. Só aparência: nenhuma regra aqui muda posição,
   tamanho ou espaçamento (trava: checar-layout.py).

   Ordem, a de references/migrar-legado.md:
     1. alias das variáveis do PegaProx para --pk-*  (a maior parte da tela)
     2. forma PCNet nas classes que o PegaProx já usa
     3. o laranja que o Modern escreve em classe, gradiente, SVG e inline
     4. login/setup e splash
     5. layout Cloud

   Vale nos layouts Modern e Corporate (`body:not([data-layout="cloud"])`); o
   Cloud tem paleta própria e recebe só a marca (seção 5). O Modern só existe
   escuro no PegaProx, então lá o tema é sempre o escuro PCNet.

   Especificidade: o Corporate escreve `body[data-layout="corporate"] X` com
   !important; aqui vai `html body:not([...]) X`, um tipo a mais, e a folha vem
   depois. Cor inline no JSX só cai com !important.
   ===================================================================== */


/* --- 1. ALIAS --------------------------------------------------------- */

html body:not([data-layout="cloud"]) {
  --color-primary: var(--pk-green);
  --color-primaryHover: var(--pk-green-hover);
  --color-dark: var(--pk-surface-2);
  --color-darker: var(--pk-bg);
  --color-card: var(--pk-surface);
  --color-border: var(--pk-border);
  --color-hover: var(--pk-hover-bg);
  --color-text: var(--pk-ink);
  --color-textMuted: var(--pk-ink-2);
  --color-success: var(--pk-green-ink);
  --color-warning: var(--pk-warning-ink);
  --color-error: var(--pk-danger-ink);
  --color-info: var(--pk-info-ink);
  --color-orange: var(--pk-green-ink);
  --color-proxmox-orange: var(--pk-green);
  --proxmox-darker: var(--pk-surface-2);

  /* --corp-accent é texto e ícone na maior parte dos usos; os preenchimentos
     verdes são pintados explicitamente na seção 2 */
  --corp-accent: var(--pk-green-ink);
  --corp-accent-hover: var(--pk-green-hover);
  --corp-selection: var(--pk-green-soft);
  --corp-surface-0: var(--pk-bg);
  --corp-surface-1: var(--pk-surface-2);
  --corp-surface-2: var(--pk-surface-2);
  --corp-surface-3: var(--pk-surface);
  --corp-surface-raised: var(--pk-surface);
  --corp-surface: var(--pk-surface);
  --corp-card-bg: var(--pk-surface);
  --corp-input-bg: var(--pk-surface);
  --corp-header-bg: var(--pk-surface-2);
  --corp-bar-track: var(--pk-border);
  --corp-border: var(--pk-border);
  --corp-border-subtle: var(--pk-hairline);
  --corp-border-medium: var(--pk-border);
  --corp-border-strong: var(--pk-border-hover);
  --corp-divider: var(--pk-border);
  --corp-text: var(--pk-ink);
  --corp-text-primary: var(--pk-ink);
  --corp-text-secondary: var(--pk-ink-2);
  --corp-text-muted: var(--pk-ink-3);
  --corp-radius-sm: var(--pk-radius-xs);
  --corp-radius-md: var(--pk-radius-sm);
  --corp-radius-lg: var(--pk-radius);
  --corp-shadow-sm: var(--pk-shadow-sm);
  --corp-shadow-md: var(--pk-shadow-md);
  --corp-shadow-lg: var(--pk-shadow-lg);
  --corp-shadow-xl: var(--pk-shadow-lg);
  /* --corp-metric-* e --corp-thresh-* ficam com os valores do PegaProx:
     são cores de série e de limiar, não de marca */

  font-family: var(--pk-font) !important;
}

/* O Tailwind do PegaProx lê rgba(var(--color-*-rgb), alfa), que só aceita o
   triplet numérico. Cada linha é o RGB do token citado, claro e escuro. */
html body:not([data-layout="cloud"]) {
  --color-primary-rgb: 140, 198, 63;     /* --pk-green */
  --color-card-rgb: 255, 255, 255;       /* --pk-surface */
  --color-secondary-rgb: 255, 255, 255;  /* --pk-surface */
  --color-dark-rgb: 246, 248, 251;       /* --pk-surface-2 */
  --color-darker-rgb: 238, 241, 246;     /* --pk-bg */
  --color-border-rgb: 227, 232, 239;     /* --pk-border */
  --color-hover-rgb: 246, 250, 240;      /* --pk-hover-bg sobre --pk-surface */
}
html[data-pcnet-tema="escuro"] body:not([data-layout="cloud"]) {
  --color-card-rgb: 26, 39, 29;
  --color-secondary-rgb: 26, 39, 29;
  --color-dark-rgb: 34, 49, 37;
  --color-darker-rgb: 17, 26, 19;
  --color-border-rgb: 47, 70, 52;
  --color-hover-rgb: 41, 60, 33;
}

html body:not([data-layout="cloud"]) code,
html body:not([data-layout="cloud"]) pre,
html body:not([data-layout="cloud"]) kbd,
html body:not([data-layout="cloud"]) .font-mono {
  font-family: var(--pk-font-mono) !important;
}


/* --- 2. FORMA ---------------------------------------------------------- */

/* Raios: o Corporate crava 3px em tudo. Cartão 16, controle 12, item 10. */
html body:not([data-layout="cloud"]) .rounded,
html body:not([data-layout="cloud"]) .rounded-md { border-radius: var(--pk-radius-xs) !important; }
html body:not([data-layout="cloud"]) .rounded-lg { border-radius: var(--pk-radius-sm) !important; }
html body:not([data-layout="cloud"]) .rounded-xl,
html body:not([data-layout="cloud"]) .rounded-2xl,
html body:not([data-layout="cloud"]) .rounded-3xl,
html body:not([data-layout="cloud"]) .fixed.inset-0 .rounded-xl { border-radius: var(--pk-radius) !important; }
html body:not([data-layout="cloud"]) .rounded-full:not(.w-2):not(.w-1\.5):not(.h-2):not(.h-1\.5):not(.w-1):not(.h-1) {
  border-radius: var(--pk-radius-pill) !important;
}
html body:not([data-layout="cloud"]) input,
html body:not([data-layout="cloud"]) select,
html body:not([data-layout="cloud"]) textarea { border-radius: var(--pk-radius-sm) !important; }

/* Sombras: o Corporate zera; a casa tem elevação. */
html body:not([data-layout="cloud"]) .shadow-lg { box-shadow: var(--pk-shadow-md) !important; }
html body:not([data-layout="cloud"]) .shadow-xl,
html body:not([data-layout="cloud"]) .shadow-2xl { box-shadow: var(--pk-shadow-lg) !important; }

/* Fundo da área de conteúdo */
html body:not([data-layout="cloud"]) .bg-proxmox-darker { background: var(--pk-bg) !important; }
html body:not([data-layout="cloud"]) .bg-proxmox-dark { background: var(--pk-surface-2) !important; }
html body:not([data-layout="cloud"]) .bg-proxmox-hover { background: var(--pk-hover-bg) !important; }
html body:not([data-layout="cloud"]) .border-proxmox-border { border-color: var(--pk-border) !important; }
html body:not([data-layout="cloud"]) .divide-proxmox-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--pk-hairline) !important; }

/* Cartão é vidro */
html body:not([data-layout="cloud"]) div.bg-proxmox-card,
html body:not([data-layout="cloud"]) .corp-card,
html body:not([data-layout="cloud"]) .corp-overview-card,
html body:not([data-layout="cloud"]) .corp-node-detail-card,
html body:not([data-layout="cloud"]) .corp-storage-card {
  background: var(--pk-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border-color: var(--pk-hairline) !important;
  box-shadow: var(--pk-shadow-sm);
}
html body:not([data-layout="cloud"]) .corp-overview-card:hover,
html body:not([data-layout="cloud"]) .corp-card:hover,
html body:not([data-layout="cloud"]) .corp-storage-card:hover {
  background: var(--pk-glass-2) !important;
  border-color: var(--pk-hairline-hover) !important;
  box-shadow: var(--pk-shadow-md) !important;
}
html body:not([data-layout="cloud"]) .corp-card-header { background: transparent !important; border-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .card-hover:hover { box-shadow: var(--pk-shadow-md); }

/* Cabeçalho e barra de status */
html body:not([data-layout="cloud"]) header.sticky,
html body:not([data-layout="cloud"]) header.bg-proxmox-darker {
  background: var(--pk-glass-bar) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
          backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom-color: var(--pk-hairline) !important;
  box-shadow: var(--pk-shadow-sm) !important;
}
html body:not([data-layout="cloud"]) .corp-content-header { background: transparent !important; border-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .corp-header-title { color: var(--pk-ink) !important; }
html body:not([data-layout="cloud"]) .corp-status-bar { background: var(--pk-glass-bar) !important; border-color: var(--pk-hairline) !important; color: var(--pk-ink-3) !important; }
html body:not([data-layout="cloud"]) .corp-breadcrumb-segment { color: var(--pk-ink-2) !important; }
html body:not([data-layout="cloud"]) .corp-breadcrumb-segment:hover { color: var(--pk-ink) !important; background: var(--pk-hover-bg) !important; }
html body:not([data-layout="cloud"]) .corp-breadcrumb-current { color: var(--pk-ink) !important; }
html body:not([data-layout="cloud"]) header.sticky [style*="color: rgb(74, 96, 112)"] { color: var(--pk-ink-3) !important; }

/* Barra lateral e árvore */
html body:not([data-layout="cloud"]) .corporate-sidebar {
  background: var(--pk-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border-right-color: var(--pk-hairline) !important;
  box-shadow: none !important;
}
html body:not([data-layout="cloud"]) .corp-inline-tree { background: transparent !important; }
html body:not([data-layout="cloud"]) .corp-tree-item,
html body:not([data-layout="cloud"]) .corp-tree-child { border-radius: var(--pk-radius-xs); }
html body:not([data-layout="cloud"]) .corp-tree-item:hover,
html body:not([data-layout="cloud"]) .corp-tree-child:hover { background: var(--pk-hover-bg) !important; }
/* item selecionado: o PegaProx marca por style inline (background + border-left) */
html body:not([data-layout="cloud"]) .corp-tree-item[style*="border-left"],
html body:not([data-layout="cloud"]) .corp-tree-child[style*="border-left"],
html body:not([data-layout="cloud"]) .corp-tree-item.selected,
html body:not([data-layout="cloud"]) .corp-selected {
  background: var(--pk-green-soft) !important;
  border-left-color: var(--pk-green) !important;
  color: var(--pk-green-ink) !important;
  box-shadow: none !important;
}
html body:not([data-layout="cloud"]) .corp-sidebar-search {
  background: var(--pk-surface) !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-ink) !important;
}
html body:not([data-layout="cloud"]) .corp-sidebar-search::placeholder { color: var(--pk-ink-3) !important; }
html body:not([data-layout="cloud"]) .corp-view-switcher { background: var(--pk-surface-2) !important; border-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .corp-view-switcher button { color: var(--pk-ink-2) !important; }
html body:not([data-layout="cloud"]) .corp-view-switcher button:hover { color: var(--pk-ink) !important; background: var(--pk-hover-bg) !important; }
html body:not([data-layout="cloud"]) .corp-view-switcher button.active {
  background: var(--pk-green) !important;
  color: var(--pk-on-green) !important;
  box-shadow: none !important;
}
html body:not([data-layout="cloud"]) .corp-resize-handle:hover,
html body:not([data-layout="cloud"]) .corp-resize-handle.active {
  background: var(--pk-green-line) !important;
  border-left-color: var(--pk-green) !important;
}

/* Botão primário: verde chapado, texto --pk-on-green (nunca branco) */
html body:not([data-layout="cloud"]) .bg-proxmox-orange,
html body:not([data-layout="cloud"]) .fixed.inset-0 button[class*="bg-proxmox-orange"],
html body:not([data-layout="cloud"]) .corp-vm-btn-primary,
html body:not([data-layout="cloud"]) .corp-vm-btn-create {
  background: var(--pk-green) !important;
  border-color: var(--pk-green) !important;
  color: var(--pk-on-green) !important;
}
html body:not([data-layout="cloud"]) button.bg-proxmox-orange,
html body:not([data-layout="cloud"]) .corp-vm-btn-primary,
html body:not([data-layout="cloud"]) .corp-vm-btn-create {
  box-shadow: var(--pk-shadow-green) !important;
  font-weight: 700;
}
html body:not([data-layout="cloud"]) button.bg-proxmox-orange:hover,
html body:not([data-layout="cloud"]) .fixed.inset-0 button[class*="bg-proxmox-orange"]:hover,
html body:not([data-layout="cloud"]) .hover\:bg-proxmox-orange:hover,
html body:not([data-layout="cloud"]) .hover\:bg-orange-600:hover,
html body:not([data-layout="cloud"]) .corp-vm-btn-primary:hover,
html body:not([data-layout="cloud"]) .corp-vm-btn-create:hover {
  background: var(--pk-green-hover) !important;
  border-color: var(--pk-green-hover) !important;
  color: var(--pk-on-green) !important;
  box-shadow: var(--pk-shadow-green-hover) !important;
}

/* Tons do acento */
html body:not([data-layout="cloud"]) .text-proxmox-orange { color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) .bg-proxmox-orange\/5,
html body:not([data-layout="cloud"]) .bg-proxmox-orange\/10 { background: var(--pk-green-wash) !important; }
html body:not([data-layout="cloud"]) .bg-proxmox-orange\/20,
html body:not([data-layout="cloud"]) .bg-proxmox-orange\/30 { background: var(--pk-green-soft) !important; }
html body:not([data-layout="cloud"]) .border-proxmox-orange,
html body:not([data-layout="cloud"]) .border-proxmox-orange\/30,
html body:not([data-layout="cloud"]) .focus-within\:border-proxmox-orange\/50:focus-within { border-color: var(--pk-green-line) !important; }
html body:not([data-layout="cloud"]) .ring-proxmox-orange,
html body:not([data-layout="cloud"]) .ring-proxmox-orange\/50 { --tw-ring-color: var(--pk-green-line) !important; }

/* Botões neutros (Cancelar, barra de ferramentas, ghost) */
html body:not([data-layout="cloud"]) button.bg-proxmox-dark,
html body:not([data-layout="cloud"]) button.bg-proxmox-hover,
html body:not([data-layout="cloud"]) button.bg-gray-700,
html body:not([data-layout="cloud"]) .corp-toolbar button,
html body:not([data-layout="cloud"]) .corp-vm-btn-ghost {
  background: var(--pk-surface) !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-ink-2) !important;
}
html body:not([data-layout="cloud"]) button.bg-proxmox-dark:hover:not(:disabled),
html body:not([data-layout="cloud"]) button.bg-proxmox-hover:hover:not(:disabled),
html body:not([data-layout="cloud"]) button.bg-gray-700:hover:not(:disabled),
html body:not([data-layout="cloud"]) .corp-toolbar button:hover:not(:disabled),
html body:not([data-layout="cloud"]) .corp-vm-btn-ghost:hover:not(:disabled),
html body:not([data-layout="cloud"]) button.bg-proxmox-card:hover:not(:disabled) {
  background: var(--pk-hover-bg) !important;
  border-color: var(--pk-green) !important;
  color: var(--pk-ink) !important;
}
html body:not([data-layout="cloud"]) .corp-toolbar-filter.active,
html body:not([data-layout="cloud"]) .corp-type-filter-btn.active {
  color: var(--pk-green-ink) !important;
  background: var(--pk-green-wash) !important;
  border-color: var(--pk-green) !important;
}
html body:not([data-layout="cloud"]) .corp-type-filter-btn:hover { background: var(--pk-hover-bg) !important; color: var(--pk-ink) !important; }

/* Botões de ícone e ações de linha */
html body:not([data-layout="cloud"]) .corp-action-btn,
html body:not([data-layout="cloud"]) .corp-rename-btn { color: var(--pk-ink-3); }
html body:not([data-layout="cloud"]) .corp-action-btn:hover:not(:disabled),
html body:not([data-layout="cloud"]) .corp-action-group button:hover,
html body:not([data-layout="cloud"]) .corp-modal-close:hover {
  background: var(--pk-hover-bg) !important;
  color: var(--pk-green-ink) !important;
  border-color: var(--pk-hairline-hover) !important;
}
html body:not([data-layout="cloud"]) .corp-rename-btn:hover,
html body:not([data-layout="cloud"]) .corp-consumer-name:hover { color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) .corp-action-btn.danger:hover:not(:disabled),
html body:not([data-layout="cloud"]) .corp-vm-btn-danger-ghost:hover {
  background: var(--pk-danger-soft) !important;
  color: var(--pk-danger-ink) !important;
  border-color: var(--pk-danger-line) !important;
}

/* Perigo: sólido chapado, texto --pk-on-dark; suave em -soft/-ink */
html body:not([data-layout="cloud"]) button.bg-red-500,
html body:not([data-layout="cloud"]) button.bg-red-600 {
  background: var(--pk-danger) !important;
  border-color: var(--pk-danger) !important;
  color: var(--pk-on-dark) !important;
}
html body:not([data-layout="cloud"]) button.bg-red-500:hover:not(:disabled),
html body:not([data-layout="cloud"]) button.bg-red-600:hover:not(:disabled) {
  background: var(--pk-danger-ink) !important;
  border-color: var(--pk-danger-ink) !important;
}
html body:not([data-layout="cloud"]) button.bg-red-500\/10,
html body:not([data-layout="cloud"]) button.bg-red-500\/20 {
  background: var(--pk-danger-soft) !important;
  border-color: var(--pk-danger-line) !important;
  color: var(--pk-danger-ink) !important;
}

/* Campos */
html body:not([data-layout="cloud"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html body:not([data-layout="cloud"]) select,
html body:not([data-layout="cloud"]) textarea,
html body:not([data-layout="cloud"]) .fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.corp-sidebar-search),
html body:not([data-layout="cloud"]) .fixed.inset-0 select,
html body:not([data-layout="cloud"]) .fixed.inset-0 textarea {
  background: var(--pk-surface) !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-ink) !important;
}
html body:not([data-layout="cloud"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover:not(:focus),
html body:not([data-layout="cloud"]) select:hover:not(:focus),
html body:not([data-layout="cloud"]) textarea:hover:not(:focus) { border-color: var(--pk-border-hover) !important; }
html body:not([data-layout="cloud"]) input:focus,
html body:not([data-layout="cloud"]) select:focus,
html body:not([data-layout="cloud"]) textarea:focus,
html body:not([data-layout="cloud"]) .corp-sidebar-search:focus,
html body:not([data-layout="cloud"]) .fixed.inset-0 input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.corp-sidebar-search),
html body:not([data-layout="cloud"]) .fixed.inset-0 select:focus,
html body:not([data-layout="cloud"]) .fixed.inset-0 textarea:focus {
  border-color: var(--pk-green-dark) !important;
  outline-color: var(--pk-green-dark) !important;
  box-shadow: var(--pk-focus) !important;
}
html body:not([data-layout="cloud"]) input::placeholder,
html body:not([data-layout="cloud"]) textarea::placeholder { color: var(--pk-ink-3) !important; }
html body:not([data-layout="cloud"]) input[type="checkbox"],
html body:not([data-layout="cloud"]) input[type="radio"],
html body:not([data-layout="cloud"]) input[type="range"] { accent-color: var(--pk-green-dark); }
html body:not([data-layout="cloud"]) .toggle-switch.active { background: var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .custom-slider::-webkit-slider-thumb { background: var(--pk-green); box-shadow: var(--pk-shadow-green); }
html body:not([data-layout="cloud"]) .custom-slider::-moz-range-thumb { background: var(--pk-green); box-shadow: var(--pk-shadow-green); }
html body:not([data-layout="cloud"]) .custom-slider::-webkit-slider-thumb:hover { box-shadow: var(--pk-shadow-green-hover); }

/* Foco visível: anel da casa, na espessura que o PegaProx já usa */
html body:not([data-layout="cloud"]) [tabindex]:focus-visible,
html body:not([data-layout="cloud"]) button:focus-visible,
html body:not([data-layout="cloud"]) a:focus-visible,
html body:not([data-layout="cloud"]) .corp-tree-item:focus-visible,
html body:not([data-layout="cloud"]) .corp-tree-child:focus-visible,
html body:not([data-layout="cloud"]) .corp-toolbar button:focus-visible,
html body:not([data-layout="cloud"]) .corp-tab-strip button:focus-visible { outline-color: var(--pk-green-dark) !important; }

/* Desabilitado se desenha, não se apaga (regra 10 da skill): o PegaProx usa
   opacity .5, que some com o texto do botão verde. `:not(#pcnet)` só soma o
   peso de um id, para vencer as regras de botão de modal e de login. */
html body:not([data-layout="cloud"]) button[class*="disabled:opacity"]:disabled:not(#pcnet) {
  opacity: 1 !important;
  background: var(--pk-surface-2) !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-ink-3) !important;
  box-shadow: none !important;
}

/* Modal: véu da casa (--pk-bg translúcido) e caixa de superfície */
html body:not([data-layout="cloud"]) .fixed.inset-0.bg-black\/50,
html body:not([data-layout="cloud"]) .fixed.inset-0.bg-black\/60,
html body:not([data-layout="cloud"]) .fixed.inset-0.bg-black\/70,
html body:not([data-layout="cloud"]) .fixed.inset-0.bg-black\/80,
html body:not([data-layout="cloud"]) .fixed.inset-0.modal-backdrop,
html body:not([data-layout="cloud"]) .corp-vm-modal-overlay {
  background: color-mix(in srgb, var(--pk-bg) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) !important;
          backdrop-filter: blur(6px) !important;
}
html body:not([data-layout="cloud"]) .fixed.inset-0 [class*="bg-proxmox-card"],
html body:not([data-layout="cloud"]) .corp-vm-modal {
  background: var(--pk-surface) !important;
  border-color: var(--pk-hairline) !important;
  box-shadow: var(--pk-shadow-lg) !important;
}
/* o Corporate crava 3px em `.fixed.inset-0 > div > div` (0,3,3); a caixa volta ao raio da casa */
html body:not([data-layout="cloud"]) .fixed.inset-0 > div > div.rounded-xl,
html body:not([data-layout="cloud"]) .fixed.inset-0 > div > div.rounded-2xl { border-radius: var(--pk-radius) !important; }
html body:not([data-layout="cloud"]) .fixed.inset-0 > div > div.rounded-lg { border-radius: var(--pk-radius-sm) !important; }
html body:not([data-layout="cloud"]) .fixed.inset-0 [class*="border-b"][class*="border-proxmox"],
html body:not([data-layout="cloud"]) .corp-vm-modal-header { background: transparent !important; border-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .corp-modal-footer,
html body:not([data-layout="cloud"]) .corp-vm-modal-footer { background: var(--pk-surface-2) !important; border-color: var(--pk-hairline) !important; }

/* Menus, dropdowns, dicas */
html body:not([data-layout="cloud"]) .absolute.bg-proxmox-card.border-proxmox-border,
html body:not([data-layout="cloud"]) .absolute.bg-proxmox-darker.border-proxmox-border,
html body:not([data-layout="cloud"]) .corp-dropdown,
html body:not([data-layout="cloud"]) .corp-context-menu,
html body:not([data-layout="cloud"]) .corp-hover-tip {
  background: var(--pk-glass-2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
          backdrop-filter: blur(16px) saturate(1.3) !important;
  border-color: var(--pk-hairline) !important;
  box-shadow: var(--pk-shadow-lg) !important;
}
html body:not([data-layout="cloud"]) .corp-ctx-item,
html body:not([data-layout="cloud"]) .corp-dropdown button { color: var(--pk-ink) !important; border-radius: var(--pk-radius-xs); }
html body:not([data-layout="cloud"]) .corp-ctx-item:hover:not(:disabled),
html body:not([data-layout="cloud"]) .corp-dropdown button:hover,
html body:not([data-layout="cloud"]) .corp-context-menu [class~="bg-[#29414e]"] {
  background: var(--pk-hover-bg) !important;
  color: var(--pk-ink) !important;
}
html body:not([data-layout="cloud"]) .corp-ctx-item.ctx-danger { color: var(--pk-danger-ink) !important; }
html body:not([data-layout="cloud"]) .corp-ctx-item.ctx-danger:hover:not(:disabled) { background: var(--pk-danger-soft) !important; }

/* Abas: verde escreve em --pk-green-ink, o traço é verde cheio */
html body:not([data-layout="cloud"]) .corp-tab-strip { border-bottom-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .corp-tab-strip button,
html body:not([data-layout="cloud"]) .corp-subnav-item { color: var(--pk-ink-2) !important; }
html body:not([data-layout="cloud"]) .corp-tab-strip button:hover,
html body:not([data-layout="cloud"]) .corp-subnav-item:hover { color: var(--pk-ink) !important; background: var(--pk-hover-bg) !important; }
html body:not([data-layout="cloud"]) .corp-tab-strip button.active {
  color: var(--pk-green-ink) !important;
  background: transparent !important;
  border-bottom-color: var(--pk-green) !important;
  font-weight: 600;
}
html body:not([data-layout="cloud"]) .corp-tab-strip button::after,
html body:not([data-layout="cloud"]) .corp-tab-strip button.active::after { background: var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .corp-tab-strip button:hover::after { background: var(--pk-green-line) !important; }
html body:not([data-layout="cloud"]) .corp-subnav-item.active {
  color: var(--pk-green-ink) !important;
  background: var(--pk-green-soft) !important;
  border-left-color: var(--pk-green) !important;
}
/* aba ativa dos modais de configuração (classe arbitrária que o Tailwind purgado não tem) */
html body:not([data-layout="cloud"]) [class~="border-b-2"][class~="border-[#49afd9]"],
html body:not([data-layout="cloud"]) [class~="border-b-2"][class~="border-proxmox-orange"] {
  border-bottom-color: var(--pk-green) !important;
  color: var(--pk-green-ink) !important;
}

/* Tabelas */
html body:not([data-layout="cloud"]) .corp-datagrid th,
html body:not([data-layout="cloud"]) thead.bg-proxmox-dark,
html body:not([data-layout="cloud"]) tr.bg-proxmox-dark {
  background: var(--pk-surface-2) !important;
  color: var(--pk-thead-ink, var(--pk-ink-2)) !important;
  border-bottom-color: var(--pk-border) !important;
}
html body:not([data-layout="cloud"]) .corp-datagrid td { color: var(--pk-ink) !important; border-color: var(--pk-hairline) !important; }
html body:not([data-layout="cloud"]) .corp-datagrid tr:hover td,
html body:not([data-layout="cloud"]) .corp-datagrid-striped tbody tr:nth-child(even):hover td,
html body:not([data-layout="cloud"]) .corp-snap-table tbody tr:hover td,
html body:not([data-layout="cloud"]) .corp-node-row:hover,
html body:not([data-layout="cloud"]) .table-row-hover:hover { background: var(--pk-hover-bg) !important; }
html body:not([data-layout="cloud"]) .corp-datagrid tr:hover td:first-child { box-shadow: none !important; }
html body:not([data-layout="cloud"]) .corp-datagrid tr.corp-row-selected td,
html body:not([data-layout="cloud"]) .table-row-hover.corp-row-selected { background: var(--pk-green-soft) !important; }
html body:not([data-layout="cloud"]) .corp-datagrid tr.corp-row-selected td:first-child { box-shadow: inset 2px 0 0 var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .corp-datagrid .sort-indicator { color: var(--pk-green-dark) !important; }
html body:not([data-layout="cloud"]) .corp-sort-icon path { fill: var(--pk-green-dark); }

/* Selos de estado: fundo -soft, texto -ink, fio -line */
html body:not([data-layout="cloud"]) [class~="bg-green-500/10"][class~="text-green-400"],
html body:not([data-layout="cloud"]) [class~="bg-green-500/20"][class~="text-green-400"],
html body:not([data-layout="cloud"]) .corp-badge-running {
  background: var(--pk-green-soft) !important;
  color: var(--pk-green-ink) !important;
  border-color: var(--pk-green-line) !important;
}
html body:not([data-layout="cloud"]) [class~="bg-red-500/10"][class~="text-red-400"],
html body:not([data-layout="cloud"]) [class~="bg-red-500/20"][class~="text-red-400"],
html body:not([data-layout="cloud"]) .corp-badge-stopped {
  background: var(--pk-danger-soft) !important;
  color: var(--pk-danger-ink) !important;
  border-color: var(--pk-danger-line) !important;
}
html body:not([data-layout="cloud"]) [class~="bg-yellow-500/20"][class~="text-yellow-400"],
html body:not([data-layout="cloud"]) [class~="bg-orange-500/10"][class~="text-orange-400"],
html body:not([data-layout="cloud"]) [class~="bg-orange-500/20"][class~="text-orange-400"] {
  background: var(--pk-warning-soft) !important;
  color: var(--pk-warning-ink) !important;
  border-color: var(--pk-warning-line) !important;
}
html body:not([data-layout="cloud"]) [class~="bg-blue-500/20"][class~="text-blue-400"],
html body:not([data-layout="cloud"]) .corp-badge-ha {
  background: var(--pk-info-soft) !important;
  color: var(--pk-info-ink) !important;
  border-color: var(--pk-info-line) !important;
}
html body:not([data-layout="cloud"]) [class~="bg-gray-500/10"][class~="text-gray-400"],
html body:not([data-layout="cloud"]) [class~="bg-gray-500/20"][class~="text-gray-400"] {
  background: var(--pk-surface-2) !important;
  color: var(--pk-ink-2) !important;
  border-color: var(--pk-border) !important;
}

/* Cores semânticas soltas do Tailwind: a mesma regra -ink para texto */
html body:not([data-layout="cloud"]) .text-green-400,
html body:not([data-layout="cloud"]) .text-green-500,
html body:not([data-layout="cloud"]) .text-emerald-400 { color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) .text-red-400,
html body:not([data-layout="cloud"]) .text-red-500 { color: var(--pk-danger-ink) !important; }
html body:not([data-layout="cloud"]) .text-yellow-400,
html body:not([data-layout="cloud"]) .text-yellow-500,
html body:not([data-layout="cloud"]) .text-orange-300,
html body:not([data-layout="cloud"]) .text-orange-400 { color: var(--pk-warning-ink) !important; }
html body:not([data-layout="cloud"]) .text-blue-400,
html body:not([data-layout="cloud"]) .text-blue-500 { color: var(--pk-info-ink) !important; }
html body:not([data-layout="cloud"]) .bg-blue-500\/20 { background: var(--pk-info-soft) !important; }
html body:not([data-layout="cloud"]) .bg-orange-500\/10,
html body:not([data-layout="cloud"]) .bg-orange-500\/20 { background: var(--pk-warning-soft) !important; }
html body:not([data-layout="cloud"]) .border-orange-500\/30 { border-color: var(--pk-warning-line) !important; }
html body:not([data-layout="cloud"]) .bg-blue-500,
html body:not([data-layout="cloud"]) .bg-blue-600 { background: var(--pk-info) !important; }
html body:not([data-layout="cloud"]) .bg-emerald-500,
html body:not([data-layout="cloud"]) .bg-emerald-600,
html body:not([data-layout="cloud"]) .hover\:bg-emerald-600:hover { background: var(--pk-green) !important; color: var(--pk-on-green) !important; }

/* Tinta: branco e cinzas do Tailwind viram os três degraus da casa.
   Só fora de elemento com fundo próprio (botão verde, selo vermelho...). */
html body:not([data-layout="cloud"]) .text-white:not([class*="bg-"]):not(button),
html body:not([data-layout="cloud"]) .text-gray-100:not([class*="bg-"]),
html body:not([data-layout="cloud"]) .text-gray-200:not([class*="bg-"]) { color: var(--pk-ink) !important; }
html body:not([data-layout="cloud"]) .text-gray-300:not([class*="bg-"]),
html body:not([data-layout="cloud"]) .text-gray-400:not([class*="bg-"]) { color: var(--pk-ink-2) !important; }
html body:not([data-layout="cloud"]) .text-gray-500:not([class*="bg-"]),
html body:not([data-layout="cloud"]) .text-gray-600:not([class*="bg-"]) { color: var(--pk-ink-3) !important; }
html body:not([data-layout="cloud"]) .corp-overview-label,
html body:not([data-layout="cloud"]) .corp-overview-sub { color: var(--pk-ink-3) !important; }
html body:not([data-layout="cloud"]) .corp-overview-value { color: var(--pk-ink) !important; }
html body:not([data-layout="cloud"]) .corp-stat-icon { background: var(--pk-green-soft) !important; color: var(--pk-green-dark) !important; }
html body:not([data-layout="cloud"]) .corp-dc-section-icon { color: var(--pk-green-dark) !important; }
html body:not([data-layout="cloud"]) .corp-event-type-action { color: var(--pk-info-ink) !important; }
/* conteúdo de botão cheio: fica DEPOIS da tinta de propósito (o svg empata em especificidade) */
html body:not([data-layout="cloud"]) .bg-proxmox-orange .text-white:not([class*="bg-"]),
html body:not([data-layout="cloud"]) .bg-proxmox-orange svg:not([class*="bg-"]) { color: var(--pk-on-green) !important; }
html body:not([data-layout="cloud"]) button.bg-red-500 .text-white:not([class*="bg-"]),
html body:not([data-layout="cloud"]) button.bg-red-600 .text-white:not([class*="bg-"]) { color: var(--pk-on-dark) !important; }

/* Barras de uso: trilho neutro; preenchimento ok em verde (cor inline do JSX) */
html body:not([data-layout="cloud"]) .h-1\.5.rounded-full.bg-proxmox-border,
html body:not([data-layout="cloud"]) .h-1\.5.bg-proxmox-dark.rounded-full,
html body:not([data-layout="cloud"]) .h-2.bg-proxmox-dark.rounded-full,
html body:not([data-layout="cloud"]) .corp-capacity-bar { background: var(--pk-border) !important; }
html body:not([data-layout="cloud"]) .overflow-hidden > .h-full.rounded-full { border-radius: var(--pk-radius-pill) !important; }
html body:not([data-layout="cloud"]) .overflow-hidden > .h-full[style*="rgb(59, 130, 246)"],
html body:not([data-layout="cloud"]) .overflow-hidden > .h-full[style*="rgb(34, 197, 94)"] { background: var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .overflow-hidden > .h-full[style*="rgb(234, 179, 8)"] { background: var(--pk-warning) !important; }
html body:not([data-layout="cloud"]) .overflow-hidden > .h-full[style*="rgb(239, 68, 68)"] { background: var(--pk-danger) !important; }
html body:not([data-layout="cloud"]) .corp-progress-indeterminate::after { background: var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .timeline-line { background: var(--pk-green-line) !important; }
html body:not([data-layout="cloud"]) .sparkline-path { stroke: var(--pk-green-dark); }

/* Toasts: superfície da casa, borda na cor do tipo (sem faixa lateral) */
html body:not([data-layout="cloud"]) .toast-enter {
  background: var(--pk-surface) !important;
  box-shadow: var(--pk-shadow-lg);
}
html body:not([data-layout="cloud"]) .toast-enter.bg-green-500\/10 { border-color: var(--pk-green) !important; color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) .toast-enter.bg-red-500\/10 { border-color: var(--pk-danger) !important; color: var(--pk-danger-ink) !important; }
html body:not([data-layout="cloud"]) .toast-enter.bg-proxmox-orange\/10 { border-color: var(--pk-info) !important; color: var(--pk-info-ink) !important; }

/* Rolagem */
html body:not([data-layout="cloud"]) { scrollbar-color: var(--pk-border-hover) transparent; }
html body:not([data-layout="cloud"]) ::-webkit-scrollbar-track { background: transparent !important; }
html body:not([data-layout="cloud"]) ::-webkit-scrollbar-thumb { background: var(--pk-border) !important; }
html body:not([data-layout="cloud"]) ::-webkit-scrollbar-thumb:hover { background: var(--pk-border-hover) !important; }

/* Laranja inline de legenda (o SVG do grafo está na seção 3) */
html body:not([data-layout="cloud"]) [style*="background: rgb(229, 112, 0)"] { background: var(--pk-green) !important; }


/* --- 3. LARANJA DO MODERN ----------------------------------------------
   O Modern usa o laranja Proxmox em classe Tailwind, gradiente, SVG e style
   inline. Acento vira verde; laranja com sentido de alerta vira --pk-warning.
   Os hex nos seletores daqui (e os [class~="…[#hex]"] da seção 2) casam o que
   o PegaProx grava: são seletor, não cor aplicada. */

html body:not([data-layout="cloud"]) .hover\:text-proxmox-orange:hover,
html body:not([data-layout="cloud"]) .group:hover .group-hover\:text-proxmox-orange { color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) .hover\:border-proxmox-orange:hover,
html body:not([data-layout="cloud"]) .hover\:border-proxmox-orange\/50:hover,
html body:not([data-layout="cloud"]) .hover\:border-proxmox-orange\/30:hover,
html body:not([data-layout="cloud"]) .border-proxmox-orange\/50,
html body:not([data-layout="cloud"]) .focus\:border-proxmox-orange:focus { border-color: var(--pk-green) !important; }
html body:not([data-layout="cloud"]) .hover\:bg-proxmox-orange\/20:hover,
html body:not([data-layout="cloud"]) .hover\:bg-proxmox-orange\/30:hover { background: var(--pk-green-soft) !important; }

/* gradientes de marca: botão da casa é chapado */
html body:not([data-layout="cloud"]) [class~="from-proxmox-orange"] {
  background-image: none !important;
  background-color: var(--pk-green) !important;
  color: var(--pk-on-green) !important;
}
html body:not([data-layout="cloud"]) [class~="from-proxmox-orange/5"],
html body:not([data-layout="cloud"]) [class~="from-proxmox-orange/20"],
html body:not([data-layout="cloud"]) [class~="to-orange-600/20"] {
  background-image: none !important;
  background-color: var(--pk-green-wash) !important;
}
html body:not([data-layout="cloud"]) [class*="shadow-orange"],
html body:not([data-layout="cloud"]) .glow-orange { box-shadow: var(--pk-shadow-green) !important; }
html body:not([data-layout="cloud"]) .gradient-mesh { background-image: none !important; }

/* laranja semântico (aviso) */
html body:not([data-layout="cloud"]) .bg-orange-500 {
  background: var(--pk-warning) !important;
  color: var(--pk-on-dark) !important;
}
html body:not([data-layout="cloud"]) .bg-orange-500.hover\:bg-orange-600:hover { background: var(--pk-warning-ink) !important; }
html body:not([data-layout="cloud"]) .hover\:text-orange-300:hover,
html body:not([data-layout="cloud"]) .hover\:text-orange-400:hover { color: var(--pk-warning-ink) !important; }
html body:not([data-layout="cloud"]) .hover\:bg-orange-500\/20:hover,
html body:not([data-layout="cloud"]) .hover\:bg-orange-500\/30:hover,
html body:not([data-layout="cloud"]) .bg-orange-500\/30 { background: var(--pk-warning-soft) !important; }

/* laranja como SELEÇÃO (aba "Proxmox VE" ativa no Adicionar Cluster): é marca, não aviso */
html body:not([data-layout="cloud"]) [class~="bg-orange-500/20"][class~="border-orange-500/40"] {
  background: var(--pk-green-soft) !important;
  color: var(--pk-green-ink) !important;
  border-color: var(--pk-green-line) !important;
}

/* grafo de topologia: cor vem como atributo SVG e como style inline */
html body:not([data-layout="cloud"]) svg [fill="#e57000" i] { fill: var(--pk-green-dark); }
html body:not([data-layout="cloud"]) svg [stroke="#e57000" i] { stroke: var(--pk-green); }
html body:not([data-layout="cloud"]) svg [fill="rgba(229,112,0,0.04)"] { fill: var(--pk-green-wash); }
html body:not([data-layout="cloud"]) svg [stroke="rgba(229,112,0,0.6)"] { stroke: var(--pk-green-line); }
html body:not([data-layout="cloud"]) [style*="background: rgba(229, 112, 0"] { background: var(--pk-green-soft) !important; }
html body:not([data-layout="cloud"]) [style*="color: rgb(229, 112, 0)"] { color: var(--pk-green-ink) !important; }
html body:not([data-layout="cloud"]) [style*="solid rgb(229, 112, 0)"],
html body:not([data-layout="cloud"]) [style*="solid rgba(229, 112, 0"] { border-color: var(--pk-green) !important; }


/* Linha de licença (#pegaprox-legal-notice): obrigatória pela AGPL §7(b), tem
   de continuar visível e legível. Fica discreta: --pk-ink-3 (≥ 4,5:1 nos dois
   temas) no lugar do texto a 72% de opacidade, sublinhado quase apagado. */
#pegaprox-legal-notice {
  color: var(--pk-ink-3) !important;
  opacity: 1 !important;
  font-family: var(--pk-font) !important;
}
#pegaprox-legal-notice a { text-decoration-color: color-mix(in srgb, var(--pk-ink-3) 35%, transparent); }
#pegaprox-legal-notice a:hover {
  color: var(--pk-ink-2) !important;
  text-decoration-color: currentColor;
}


/* --- 4. LOGIN E SETUP --------------------------------------------------
   O login roda com data-layout="modern" (nunca corporate). O tema vem de
   html[data-pcnet-tema], que o pcnet-pegaprox.js tira da preferência salva. */

html body #root > .min-h-screen.bg-proxmox-darker.p-4 {
  background: var(--pk-bg) !important;
  color: var(--pk-ink);
  font-family: var(--pk-font);
}
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .bg-proxmox-card {
  background: var(--pk-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border-color: var(--pk-hairline) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: var(--pk-shadow-lg) !important;
}
html body #root > .min-h-screen.bg-proxmox-darker.p-4 h1,
html body #root > .min-h-screen.bg-proxmox-darker.p-4 h2 { color: var(--pk-ink) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .text-gray-300,
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .text-gray-400 { color: var(--pk-ink-2) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .text-gray-500 { color: var(--pk-ink-3) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 input:not([type="checkbox"]):not([type="radio"]),
html body #root > .min-h-screen.bg-proxmox-darker.p-4 select {
  background: var(--pk-surface) !important;
  border-color: var(--pk-border) !important;
  color: var(--pk-ink) !important;
  border-radius: var(--pk-radius-sm) !important;
}
html body #root > .min-h-screen.bg-proxmox-darker.p-4 input::placeholder { color: var(--pk-ink-3) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 input:focus,
html body #root > .min-h-screen.bg-proxmox-darker.p-4 select:focus {
  border-color: var(--pk-green-dark) !important;
  box-shadow: var(--pk-focus) !important;
}
html body #root > .min-h-screen.bg-proxmox-darker.p-4 input[type="checkbox"] { accent-color: var(--pk-green-dark); }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .bg-proxmox-orange {
  background: var(--pk-green) !important;
  color: var(--pk-on-green) !important;
  border-radius: var(--pk-radius-sm) !important;
  box-shadow: var(--pk-shadow-green) !important;
  font-weight: 700;
}
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .bg-proxmox-orange:hover,
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .hover\:bg-orange-600:hover { background: var(--pk-green-hover) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .text-proxmox-orange { color: var(--pk-green-ink) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .bg-proxmox-dark { background: var(--pk-surface-2) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .border-proxmox-border { border-color: var(--pk-border) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 .bg-proxmox-border { background: var(--pk-hairline) !important; }
html body #root > .min-h-screen.bg-proxmox-darker.p-4 [class~="bg-red-500/10"] {
  background: var(--pk-danger-soft) !important;
  border-color: var(--pk-danger-line) !important;
  color: var(--pk-danger-ink) !important;
}
/* O src do login é fixo na versão para fundo escuro; no claro, a outra. */
html:not([data-pcnet-tema="escuro"]) body #root img[src="/images/pegaprox-logo-dark.png"] {
  content: url("img/logo-fundo-claro.png");
}

/* Tela "Loading..." do React: o body ainda não tem data-layout */
html body:not([data-layout]) #root > .min-h-screen.bg-proxmox-darker { background: var(--pk-bg) !important; }
html body:not([data-layout]) #root > .min-h-screen > .text-center > .bg-proxmox-orange {
  background: var(--pk-green) !important;
  color: var(--pk-on-green) !important;
  box-shadow: var(--pk-shadow-green);
}

/* Splash estático (HTML inline, antes do React) */
#loading-screen {
  background: var(--pk-bg) !important;
  font-family: var(--pk-font) !important;
}
#loading-screen > div:nth-child(1) {
  border-color: var(--pk-green-soft) !important;
  border-top-color: var(--pk-green) !important;
}
#loading-screen > div:nth-child(2) { color: var(--pk-ink) !important; }
#loading-screen > div:nth-child(3) { color: var(--pk-ink-3) !important; }


/* --- 5. CLOUD -----------------------------------------------------------
   Layout fora do alvo: recebe só a marca (verde e fontes). */

html body[data-layout="cloud"] {
  --color-primary: var(--pk-green);
  --color-primary-rgb: 140, 198, 63;
  --cloud-accent: var(--pk-green-ink);
  --cloud-accent-hover: var(--pk-green-hover);
  --cloud-selection: var(--pk-green-soft);
  font-family: var(--pk-font);
}