/**
 * x99-bundle.css — WS1.9 Radical Lagom Purge
 * 
 * Bundle consolidado (era 7 arquivos separados):
 *   1. x99-tokens.css        — tokens dark + light override (:root[data-theme])
 *   2. x99-lagom-overrides   — remapeia vars Lagom → tokens x99
 *   3. x99-base.css          — helpers canonical (.x99-card, .x99-btn, etc.)
 *   4. x99-theme-overrides   — força elementos legacy via !important
 *   5. x99-vanilla-overrides — Tier C vanilla WHMCS (details/security/masspay/...)
 *   6. x99-navigation.css    — sidebar x99
 *   7. x99-footer.css        — footer bar x99
 *   + x99-icons.css          — ícones CSS-mask (substituindo FontAwesome)
 *   + x99-utilities.css      — .x99-tooltip, .x99-modal (CSS-only)
 *
 * Edgar 2026-04-30 (WS1.9). Cache-bust: mtime-based via x99_theme.php hook.
 * Ordem crítica preservada conforme docs/theme/theming-architecture.md.
 */


/* ============================================================================
   x99-tokens.css
   ============================================================================ */
/*
 * x99 design tokens — Opção B (Warmer + balanced)
 * Fonte canonical: docs/theme/conventions.md + ADR 0002 (copy conventions)
 *
 * Estratégia: :root contém tokens dark (default) + compartilhados (spacing,
 * radius, font, animation). :root[data-theme="light"] sobrescreve só cores
 * + shadows + glass.
 *
 * Consumo: zero hardcoded color/sp/radius/fs/shadow em CSS x99. Sempre
 * var(--c-*) / var(--sp-*) / var(--r-*) / var(--fs-*) / var(--sh-*).
 */

/* ==========================================================================
 * DEFAULTS (dark) + tokens compartilhados
 * ========================================================================== */
:root {
  /* ---- Cores base (dark) — sidebar/footer/headers e cards usam o
     mesmo cinza-escuro elevado (#1f2021) "flutuando" sobre o body
     mais escuro (#0e1013). Borders quase nulos, contraste vem da
     diferença de bg. Edgar 2026-04-29. */
  --c-bg-sunken: #1f2021;                     /* sidebar/footer/header chrome */
  --c-bg-base: #0e1013;                       /* body principal (mais escuro) */
  --c-bg-elevated: #1f2021;                   /* cards/widgets */
  --c-surface: rgba(255, 255, 255, 0.035);
  --c-surface-hover: rgba(255, 255, 255, 0.07);
  --c-border: rgba(255, 255, 255, 0.02);      /* praticamente nula: contraste vem do bg */
  --c-border-strong: rgba(255, 255, 255, 0.06);

  /* ---- Texto (dark) ---- */
  --c-text-primary: #f5f5f7;
  --c-text-secondary: rgba(245, 245, 247, 0.78);
  --c-text-muted: rgba(245, 245, 247, 0.50);
  --c-text-inverse: #0d0e11;

  /* ---- Accent + semantic (dark) — rose-400 punchier que rose-300 (Edgar 2026-04-28) ---- */
  --c-accent: #fb7185;                        /* rose-400, mais quente */
  --c-accent-soft: rgba(251, 113, 133, 0.14);
  --c-accent-warm: #fda4af;                   /* rose-300 */
  --c-success: #4ade80;
  --c-success-soft: rgba(74, 222, 128, 0.16);
  --c-warning: #fbbf24;
  --c-warning-soft: rgba(251, 191, 36, 0.16);
  --c-danger: #ef4444;
  --c-danger-soft: rgba(239, 68, 68, 0.16);
  --c-info: #60a5fa;
  --c-info-soft: rgba(96, 165, 250, 0.18);

  /* ---- Glass effects (dark) ---- */
  --glass-blur: blur(20px) saturate(160%);
  --glass-tint: rgba(15, 15, 17, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ---- RGB channels (pra rgba() com alpha variável) ---- */
  /* Dark: texto branco sobre fundo escuro */
  --text-rgb: 255, 255, 255;
  --bg-rgb: 13, 14, 17;
  --accent-rgb: 251, 113, 133;                /* rose-400 */
  --accent-warm-rgb: 253, 164, 175;           /* rose-300 */
  --success-rgb: 74, 222, 128;
  --warning-rgb: 251, 191, 36;
  --danger-rgb: 239, 68, 68;
  --info-rgb: 96, 165, 250;

  /* ---- Shimmer skeleton tokens (loading state) ----
     Dark: branco sutil pulsando sobre fundo escuro.
     Light: cinza-warm sutil pulsando sobre cream (override abaixo). */
  --sh-shimmer-base: rgba(255, 255, 255, 0.04);
  --sh-shimmer-peak: rgba(255, 255, 255, 0.10);

  /* ---- Shadows (dark) ---- */
  --sh-card: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-card-hover: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh-sticky: 0 0 32px rgba(251, 113, 133, 0.22);
  --sh-modal: 0 10px 40px rgba(0, 0, 0, 0.60);
  --sh-focus: 0 0 0 3px rgba(251, 113, 133, 0.40);

  /* ==========================================================================
   * COMPARTILHADOS (dark + light) — spacing, radius, font, animation
   * ========================================================================== */

  /* ---- Tipografia ---- */
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale (px declarado pra clareza; em produção consumir via var) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Line-heights (multipliers) */
  --lh-tight: 1.2;
  --lh-base: 1.4;
  --lh-loose: 1.5;
  --lh-looser: 1.55;

  /* Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Letter-spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-kicker: 0.08em;

  /* ---- Spacing scale ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 48px;

  /* ---- Border radius ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-full: 999px;

  /* ---- Animation tokens ---- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --dur-enter: 400ms;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;
}

/* ==========================================================================
 * LIGHT MODE — override colors + shadows + glass (ADR 0002)
 * ========================================================================== */
:root[data-theme="light"] {
  /* ---- Cores base — paleta creme 3 níveis (Edgar 2026-04-29 v5) ----
     Hierarquia visual: sidebar/footer mais saturados (sunken) >
     body principal (base) > cards (elevated). Delta sutil pra evitar cards muito brancos. */
  --c-bg-sunken: #e8e1d1;                     /* warm beige neutral, sidebar/footer/header chrome */
  --c-bg-base: #f4eedf;                       /* cream warm luminoso (93% L) body */
  --c-bg-elevated: #faeedf;                   /* cream elevado, warm off-white */
  --c-surface: rgba(9, 9, 11, 0.055);
  --c-surface-hover: rgba(9, 9, 11, 0.10);
  --c-border: rgba(9, 9, 11, 0.16);           /* cards/dividers — finas mas presentes */
  --c-border-strong: rgba(9, 9, 11, 0.30);

  /* ---- Texto (alto contraste sobre creme) ---- */
  --c-text-primary: #09090b;                  /* near-black (zinc-950) — títulos bem densos */
  --c-text-secondary: rgba(9, 9, 11, 0.78);
  --c-text-muted: rgba(9, 9, 11, 0.58);
  --c-text-inverse: #fafaf9;                  /* stone-50 */

  /* ---- Accent + semantic (mid-saturação) ---- */
  --c-accent: #ef4444;                        /* red-500 — meio termo (Edgar) */
  --c-accent-soft: rgba(239, 68, 68, 0.12);
  --c-accent-warm: #f87171;                   /* matches dark */
  --c-success: #16a34a;
  --c-success-soft: rgba(22, 163, 74, 0.14);
  --c-warning: #d97706;
  --c-warning-soft: rgba(217, 119, 6, 0.14);
  --c-danger: #dc2626;
  --c-danger-soft: rgba(220, 38, 38, 0.12);
  --c-info: #2563eb;
  --c-info-soft: rgba(37, 99, 235, 0.14);

  /* ---- Glass effects ---- */
  --glass-blur: blur(20px) saturate(130%);
  --glass-tint: rgba(250, 238, 223, 0.88);
  --glass-border: rgba(9, 9, 11, 0.20);

  /* ---- RGB channels (light: near-black sobre creme) ---- */
  --text-rgb: 9, 9, 11;                       /* zinc-950 */
  --bg-rgb: 244, 238, 223;                    /* matches bg-base */
  --accent-rgb: 239, 68, 68;
  --accent-warm-rgb: 248, 113, 113;
  --success-rgb: 22, 163, 74;
  --warning-rgb: 217, 119, 6;
  --danger-rgb: 220, 38, 38;
  --info-rgb: 37, 99, 235;

  /* ---- Shimmer (light: near-black sutil sobre creme) ---- */
  --sh-shimmer-base: rgba(9, 9, 11, 0.03);
  --sh-shimmer-peak: rgba(9, 9, 11, 0.07);

  /* ---- Shadows (folha em branco — sombras MUITO sutis,
         acento vai nas linhas/bordas, não em glow) ---- */
  --sh-card: 0 1px 2px rgba(9, 9, 11, 0.04);
  --sh-card-hover: 0 1px 2px rgba(9, 9, 11, 0.05);
  --sh-sticky: 0 0 24px rgba(239, 68, 68, 0.18);
  --sh-modal: 0 24px 48px rgba(9, 9, 11, 0.24);
  --sh-focus: 0 0 0 3px rgba(239, 68, 68, 0.30);
}

/* ==========================================================================
 * prefers-reduced-motion — respeita user setting
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-med: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-enter: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   x99-lagom-overrides.css
   ============================================================================ */
/*
 * x99 Lagom overrides — WS1.2
 *
 * Lagom2 define 100+ CSS vars pra controlar cores internamente (ex:
 * --primary-block-bg, --main-body-bg, --app-nav-left-bg). Esses vars
 * por padrão resolvem pra tokens dark do Lagom.
 *
 * Em light mode (data-theme="light"), remapeamos os Lagom vars pras
 * nossas tokens claras. Isso dá coverage TOTAL sem precisar tocar
 * cada classe do Lagom.
 *
 * Carregar DEPOIS de x99-tokens.css + x99-base.css.
 */

/* ==========================================================================
 * Dark default — garante que Lagom vars resolvam pros nossos tokens
 * ========================================================================== */
:root {
  /* Backgrounds */
  --primary-block-bg: var(--c-bg-base);
  --secondary-block-bg: var(--c-bg-elevated);
  --main-body-bg: var(--c-bg-base);
  --body-bg: var(--c-bg-base);
  --main-body-sidebar-bg: var(--c-bg-elevated);
  --main-body-content-bg: var(--c-bg-base);
  --main-body-sidebar-content-bg: var(--c-bg-elevated);

  /* Nav / topbar */
  --app-nav-left-bg: var(--c-bg-elevated);
  --app-nav-top-bg: var(--c-bg-elevated);
  --app-nav-navbar-bg: var(--c-bg-elevated);
  --app-nav-left-link-color: var(--c-text-secondary);
  --app-nav-left-link-hover-color: var(--c-text-primary);
  --app-nav-left-link-active-color: var(--c-accent);
  --app-nav-left-link-hover-bg: var(--c-surface-hover);
  --app-nav-left-link-active-bg: var(--c-accent-soft);
  --app-nav-left-icon-color: var(--c-text-muted);
  --app-nav-left-icon-hover-color: var(--c-text-primary);
  --app-nav-left-icon-active-color: var(--c-accent);

  /* Login / register backgrounds */
  --login-bg: var(--c-bg-base);
  --login-box-bg: var(--c-bg-elevated);
  --login-box-shadow: var(--sh-card);

  /* Form inputs */
  --form-control-bg: var(--c-bg-elevated);
  --form-control-border-color: var(--c-border-strong);
  --form-control-color: var(--c-text-primary);
  --form-control-placeholder-color: var(--c-text-muted);
  --form-control-focus-border-color: var(--c-accent);
  --form-control-focus-box-shadow: var(--sh-focus);

  /* Buttons */
  --btn-primary-bg: var(--c-accent);
  --btn-primary-color: var(--c-text-inverse);
  --btn-primary-border-color: var(--c-accent);
  --btn-primary-hover-bg: var(--c-accent-warm);
  --btn-default-bg: var(--c-bg-elevated);
  --btn-default-color: var(--c-text-primary);
  --btn-default-border-color: var(--c-border-strong);

  /* Badges */
  --badge-bg: var(--c-surface);
  --badge-color: var(--c-text-secondary);
  --badge-primary-bg: var(--c-accent);
  --badge-primary-color: var(--c-text-inverse);
  --badge-danger-bg: var(--c-danger-soft);
  --badge-danger-color: var(--c-danger);
  --badge-success-bg: var(--c-success-soft);
  --badge-success-color: var(--c-success);
  --badge-warning-bg: var(--c-warning-soft);
  --badge-warning-color: var(--c-warning);
  --badge-info-bg: var(--c-info-soft);
  --badge-info-color: var(--c-info);

  /* Tables */
  --table-bg: transparent;
  --table-head-bg: var(--c-surface);
  --table-color: var(--c-text-primary);
  --table-border-color: var(--c-border);
  --table-hover-bg: var(--c-surface-hover);

  /* Cards / panels */
  --card-bg: var(--c-bg-elevated);
  --card-border-color: var(--c-border);
  --card-color: var(--c-text-primary);
  --panel-bg: var(--c-bg-elevated);
  --panel-border-color: var(--c-border);

  /* Text / content */
  --text-color: var(--c-text-primary);
  --text-muted: var(--c-text-muted);
  --heading-color: var(--c-text-primary);
  --link-color: var(--c-accent);
  --link-hover-color: var(--c-accent-warm);

  /* Alerts */
  --alert-primary-bg: var(--c-accent-soft);
  --alert-primary-border: var(--c-accent);
  --alert-primary-text: var(--c-accent);
  --alert-success-bg: var(--c-success-soft);
  --alert-success-border: var(--c-success);
  --alert-success-text: var(--c-success);
  --alert-danger-bg: var(--c-danger-soft);
  --alert-danger-border: var(--c-danger);
  --alert-danger-text: var(--c-danger);
  --alert-warning-bg: var(--c-warning-soft);
  --alert-warning-border: var(--c-warning);
  --alert-warning-text: var(--c-warning);
  --alert-info-bg: var(--c-info-soft);
  --alert-info-border: var(--c-info);
  --alert-info-text: var(--c-info);

  /* Dropdown */
  --dropdown-bg: var(--c-bg-elevated);
  --dropdown-border-color: var(--c-border);
  --dropdown-link-color: var(--c-text-primary);
  --dropdown-link-hover-bg: var(--c-surface-hover);
  --dropdown-link-hover-color: var(--c-text-primary);

  /* Misc */
  --border-color: var(--c-border);
  --hr-border-color: var(--c-border);

  /* Brand gradients — dark */
  --brand-primary-gradient-v: var(--c-bg-base);
  --brand-secondary-gradient-v: var(--c-bg-elevated);
}

/* ==========================================================================
 * Light overrides — os mesmos vars resolvem pros tokens claros
 * ========================================================================== */
:root[data-theme="light"] {
  /* Brand gradients — light (sobrepõe gradientes escuros do Lagom) */
  --brand-primary-gradient-v: var(--c-bg-base);
  --brand-secondary-gradient-v: var(--c-bg-elevated);
}

/* ============================================================================
   x99-base.css
   ============================================================================ */
/*
 * x99 base — helpers + resets canonical que consomem tokens.
 * Carregar depois de x99-tokens.css, antes de CSS por-surface.
 */

/* ==========================================================================
 * Body scoped to canonical tokens (quando body.x99-theme class presente)
 * Lagom já tem seu próprio reset; este arquivo NÃO sobrescreve globals.
 * ========================================================================== */

/* Transições suaves de troca de tema */
html[data-theme] body,
html[data-theme] .x99-card,
html[data-theme] .x99-btn,
html[data-theme] .x99-theme-toggle {
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* ==========================================================================
 * Theme toggle component (top-right navbar)
 * ========================================================================== */
.x99-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.x99-theme-toggle:hover {
  background: var(--c-surface-hover);
  transform: translateY(-1px);
}

.x99-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

.x99-theme-toggle:active {
  transform: translateY(0);
}

/* Ícones sol/lua absolutos (um visível, outro hidden) */
.x99-theme-toggle .icon-sun,
.x99-theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  color: var(--c-text-primary);
  transform: translate(-50%, -50%) scale(1) rotate(0);
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

/* dark mode: sol visível (representa "mudar pra light") */
:root[data-theme="dark"] .x99-theme-toggle .icon-sun,
:root:not([data-theme]) .x99-theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}
:root[data-theme="dark"] .x99-theme-toggle .icon-moon,
:root:not([data-theme]) .x99-theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0);
}

/* light mode: lua visível (representa "mudar pra dark") */
:root[data-theme="light"] .x99-theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}
:root[data-theme="light"] .x99-theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

/* ==========================================================================
 * Theme control container (toggle + dropdown menu + hint)
 * ========================================================================== */
.x99-theme-control {
  position: relative;
}

.x99-theme-control--fixed {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 1000;
}

/* Toggle button (within control) */
.x99-theme-control .x99-theme-toggle {
  width: 40px;
  height: 40px;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--sh-card), 0 0 0 4px var(--c-bg-base);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.x99-theme-control .x99-theme-toggle:hover {
  border-color: var(--c-accent);
}

.x99-theme-control .x99-theme-toggle .icon-sun,
.x99-theme-control .x99-theme-toggle .icon-moon {
  width: 20px;
  height: 20px;
}

/* Mobile: toggle dentro do mobile-topbar (não fixed). Topbar JS adiciona
   `.x99-mobile-topbar-active` no body quando topbar está visível. */
@media (max-width: 991px) {
  .x99-theme-control--fixed {
    position: fixed;
    top: var(--sp-3);
    right: 60px;             /* deixa espaço pro hamburger menu */
    z-index: 1060;           /* acima do mobile-topbar (z 1050) */
  }
  .x99-theme-control .x99-theme-toggle {
    width: 36px;
    height: 36px;
    box-shadow: none;
  }
  .x99-theme-control .x99-theme-toggle .icon-sun,
  .x99-theme-control .x99-theme-toggle .icon-moon {
    width: 18px;
    height: 18px;
  }
}

/* Pulse ring pra atrair atenção em primeira visita (removido via JS) */
.x99-theme-toggle-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  border: 2px solid var(--c-accent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: x99ThemeTogglePulse 2.4s ease-out infinite;
  animation-delay: 0.6s;
}

@keyframes x99ThemeTogglePulse {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1);   }
  60%  { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
}

/* ==========================================================================
 * Theme menu (dropdown com Auto / Light / Dark)
 * ========================================================================== */
.x99-theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  min-width: 240px;
  padding: var(--sp-2);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-modal);
  z-index: 1002;
}

.x99-theme-menu--open {
  display: block;
  animation: x99ThemeMenuIn var(--dur-fast) var(--ease-out);
}

@keyframes x99ThemeMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.x99-theme-menu-header {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.x99-theme-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}

.x99-theme-menu-item:hover,
.x99-theme-menu-item:focus-visible {
  background: var(--c-surface-hover);
  outline: none;
}

.x99-theme-menu-item > svg:first-child {
  flex-shrink: 0;
  color: var(--c-text-secondary);
}

.x99-theme-menu-item-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.x99-theme-menu-item-title {
  font-weight: var(--fw-semi);
  color: var(--c-text-primary);
}

.x99-theme-menu-item-desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.x99-theme-menu-check {
  flex-shrink: 0;
  color: var(--c-accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.x99-theme-menu-item--active .x99-theme-menu-check,
.x99-theme-menu-item[aria-checked="true"] .x99-theme-menu-check {
  opacity: 1;
}

.x99-theme-menu-item--active .x99-theme-menu-item-title,
.x99-theme-menu-item[aria-checked="true"] .x99-theme-menu-item-title {
  color: var(--c-accent);
}

@media (max-width: 640px) {
  .x99-theme-menu {
    min-width: 220px;
    right: 0;
  }
}

/* ==========================================================================
 * Theme hint tooltip — discoverability na primeira visita
 * ========================================================================== */
.x99-theme-hint {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 260px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-elevated);
  color: var(--c-text-primary);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-modal);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.x99-theme-hint--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.x99-theme-hint--leaving {
  opacity: 0;
  transform: translateY(-6px);
}

/* Seta apontando pro toggle */
.x99-theme-hint::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--c-bg-elevated);
  border-top: 1px solid var(--c-border-strong);
  border-left: 1px solid var(--c-border-strong);
  transform: rotate(45deg);
}

.x99-theme-hint-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  background: var(--c-accent);
  color: var(--c-text-inverse);
}

.x99-theme-hint-text {
  flex: 1;
  color: var(--c-text-secondary);
}

.x99-theme-hint-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: -2px -4px -2px 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.x99-theme-hint-close:hover {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.x99-theme-hint-close:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

@media (max-width: 640px) {
  .x99-theme-hint {
    width: auto;
    right: 0;
    left: auto;
    max-width: calc(100vw - var(--sp-7));
  }
}

/* ==========================================================================
 * Helpers canonical (opt-in — adicione classe pra usar)
 * ========================================================================== */

/* Cards canonical */
.x99-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-card);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.x99-card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-card-hover);
  background: var(--c-surface-hover);
}
.x99-card-divider {
  border-top: 1px dashed var(--c-border-strong);
  margin: var(--sp-4) 0;
}

/* Kicker (uppercase label) */
.x99-kicker {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

/* CTA primário canonical */
.x99-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.x99-btn:hover { transform: translateY(-1px); }
.x99-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.x99-btn:active { transform: translateY(0); }
.x99-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.x99-btn-primary {
  background: var(--c-accent);
  color: var(--c-text-inverse);
}
.x99-btn-primary:hover {
  background: var(--c-accent-warm);
}

.x99-btn-secondary {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}
.x99-btn-secondary:hover {
  background: var(--c-surface-hover);
}

/* Pills/chips */
.x99-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}
.x99-pill--ddr4  { background: var(--c-info-soft); color: var(--c-info); }
.x99-pill--ddr5  { background: var(--c-accent-soft); color: var(--c-accent); }
.x99-pill--nvme  { background: var(--c-accent-soft); color: var(--c-accent); }
.x99-pill--ssd   { background: var(--c-info-soft); color: var(--c-info); }
.x99-pill--hdd   { background: var(--c-surface); color: var(--c-text-muted); }
.x99-pill--last-stock { background: var(--c-danger-soft); color: var(--c-danger); }
.x99-pill--success { background: var(--c-success-soft); color: var(--c-success); }
.x99-pill--warning { background: var(--c-warning-soft); color: var(--c-warning); }

/* Focus visible global (opt-in via body class .x99-focus-ring se desejar) */
.x99-focus-ring :focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

/* ============================================================================
   x99-theme-overrides.css
   ============================================================================ */
/* ==========================================================================
 * Light mode — main containers forced light (specificity wins Lagom CSS)
 * ========================================================================== */
:root[data-theme="light"] body,
:root[data-theme="light"] .app-container,
:root[data-theme="light"] .app-main,
:root[data-theme="light"] .main-body,
:root[data-theme="light"] .main-body-content {
  background: var(--c-bg-base) !important;
  color: var(--c-text-primary) !important;
}

:root[data-theme="light"] .app-nav,
:root[data-theme="light"] .app-nav-default,
:root[data-theme="light"] .x99-sidebar,
:root[data-theme="light"] .main-body-sidebar {
  background: var(--c-bg-sunken) !important;        /* deeper cream, 1-2 tons acima do body */
  color: var(--c-text-primary) !important;
  border-right-color: var(--c-border) !important;
  border-color: var(--c-border) !important;
}

/* ==========================================================================
 * Light mode — invert brand logos (AMD, Intel) from white → black
 * PNGs are white+alpha; brightness(0) makes them solid black while keeping
 * transparency intact.
 * ========================================================================== */
:root[data-theme="light"] img.x99-brand-logo,
:root[data-theme="light"] img.x99-order-bmcard-brandlogo,
:root[data-theme="light"] img[src*="/amd.png"],
:root[data-theme="light"] img[src*="/intel.png"] {
  filter: brightness(0) !important;
}

/* ==========================================================================
 * Light mode — cards, widgets, panels (dashboard, BM, VPS, viewinvoice, support)
 * Surfaces que eram white-transparent agora ficam visivelmente elevadas sobre
 * o cinza do bg-base com borda definida + sombra suave.
 * ========================================================================== */
:root[data-theme="light"] .x99-card,
:root[data-theme="light"] .x99-dashboard-card,
:root[data-theme="light"] .x99-dashboard-widget,
:root[data-theme="light"] .x99-dashboard-hero,
:root[data-theme="light"] .x99-bm-card,
:root[data-theme="light"] .x99-bm-widget,
:root[data-theme="light"] .x99-bm-panel,
:root[data-theme="light"] .x99-bm-section,
:root[data-theme="light"] .x99-vps-card,
:root[data-theme="light"] .x99-vps-widget,
:root[data-theme="light"] .x99-vps-panel,
:root[data-theme="light"] .x99-vps-section,
:root[data-theme="light"] .x99-support-card,
:root[data-theme="light"] .x99-support-panel,
:root[data-theme="light"] .x99-support-sidebar,
:root[data-theme="light"] .x99-support-tab,
:root[data-theme="light"] .x99-support-ticket,
:root[data-theme="light"] .x99-support-message,
:root[data-theme="light"] .x99-invoice-card,
:root[data-theme="light"] .x99-invoice-summary,
:root[data-theme="light"] .x99-invoice-section,
:root[data-theme="light"] .x99-invoice-line,
:root[data-theme="light"] .x99-order-splash-card,
:root[data-theme="light"] .x99-order-bmcard,
:root[data-theme="light"] .x99-order-checkout-card,
:root[data-theme="light"] .x99-order-checkout-hwcard,
:root[data-theme="light"] .x99-order-checkout-rcard,
:root[data-theme="light"] .x99-order-checkout-summary,
:root[data-theme="light"] .x99-order-bench-card,
:root[data-theme="light"] .x99-share-card,
:root[data-theme="light"] .x99-reg-card,
:root[data-theme="light"] .x99-reg-tier,
:root[data-theme="light"] .x99-login-card,
:root[data-theme="light"] .x99-register-card,
:root[data-theme="light"] .x99-cancel-card,
:root[data-theme="light"] .x99-dash-list,
:root[data-theme="light"] .x99-dash-traffic-card,
:root[data-theme="light"] .bm-traffic-card,
:root[data-theme="light"] .bm-details-card,
:root[data-theme="light"] .bm-info-card,
:root[data-theme="light"] .bm-stats-box,
:root[data-theme="light"] .vps-details-card,
:root[data-theme="light"] .vps-info-card,
:root[data-theme="light"] .vps-traffic-card,
:root[data-theme="light"] .x99-inv-card,
:root[data-theme="light"] .x99-inv-summary-card,
:root[data-theme="light"] .x99-vi-card,
:root[data-theme="light"] .x99-vi-receipt,
:root[data-theme="light"] .x99-vi-summary,
:root[data-theme="light"] .x99-vi-sidebar,
:root[data-theme="light"] .x99-af-section,
:root[data-theme="light"] .x99-af-balance-badge,
:root[data-theme="light"] .x99-af-info-card,
:root[data-theme="light"] .x99-af-gateway-card,
:root[data-theme="light"] .x99-order-bm-filters,
:root[data-theme="light"] .cancel-section,
:root[data-theme="light"] .cancel-help-card,
:root[data-theme="light"] .support-card,
:root[data-theme="light"] .support-panel,
:root[data-theme="light"] .support-sidebar,
:root[data-theme="light"] .support-ticket-card,
:root[data-theme="light"] .submit-ticket-card {
  background: var(--c-bg-elevated) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-primary) !important;
  box-shadow: var(--sh-card) !important;
}

/* "Folha em branco": NENHUM hover acende linhas nos cards de listagem
   (servers/invoices/tickets/status/traffic/info). Só elementos interativos
   pequenos (botões, gateway cards do addfunds) recebem realce na borda.
   Edgar 2026-04-29. */
:root[data-theme="light"] .x99-dash-list:hover,
:root[data-theme="light"] .x99-dash-traffic-card:hover,
:root[data-theme="light"] .bm-info-card:hover,
:root[data-theme="light"] .vps-info-card:hover,
:root[data-theme="light"] .x99-inv-card:hover,
:root[data-theme="light"] .x99-vi-receipt:hover {
  border-color: var(--c-border) !important;
}
:root[data-theme="light"] .x99-af-gateway-card:hover {
  border-color: var(--c-border-strong) !important;
}

/* ============================================================================
 * Dark mode: bg-elevated (#1f2021) sobre bg-base (#0e1013) já cria
 * contraste suficiente. Removemos borders dos cards principais —
 * o "lift" vem do delta de cor + sombra sutil. Edgar 2026-04-29.
 * ============================================================================ */
:root[data-theme="dark"] .x99-dash-list,
:root[data-theme="dark"] .x99-dash-traffic-card,
:root[data-theme="dark"] .bm-traffic-card,
:root[data-theme="dark"] .bm-details-card,
:root[data-theme="dark"] .bm-info-card,
:root[data-theme="dark"] .bm-stats-box,
:root[data-theme="dark"] .vps-details-card,
:root[data-theme="dark"] .vps-info-card,
:root[data-theme="dark"] .vps-traffic-card,
:root[data-theme="dark"] .x99-inv-card,
:root[data-theme="dark"] .x99-inv-summary-card,
:root[data-theme="dark"] .x99-vi-card,
:root[data-theme="dark"] .x99-vi-receipt,
:root[data-theme="dark"] .x99-vi-summary,
:root[data-theme="dark"] .x99-vi-sidebar,
:root[data-theme="dark"] .x99-af-section,
:root[data-theme="dark"] .x99-af-balance-badge,
:root[data-theme="dark"] .x99-af-info-card,
:root[data-theme="dark"] .x99-af-gateway-card,
:root[data-theme="dark"] .x99-order-bm-filters,
:root[data-theme="dark"] .cancel-section,
:root[data-theme="dark"] .cancel-help-card,
:root[data-theme="dark"] .support-card,
:root[data-theme="dark"] .support-panel,
:root[data-theme="dark"] .support-sidebar,
:root[data-theme="dark"] .support-ticket-card,
:root[data-theme="dark"] .submit-ticket-card,
:root[data-theme="dark"] .x99-card,
:root[data-theme="dark"] .x99-dashboard-card,
:root[data-theme="dark"] .x99-bm-card,
:root[data-theme="dark"] .x99-vps-card,
:root[data-theme="dark"] .x99-order-bmcard,
:root[data-theme="dark"] .x99-order-checkout-summary,
:root[data-theme="dark"] .x99-order-checkout-hwcard,
:root[data-theme="dark"] .x99-order-checkout-card,
:root[data-theme="dark"] .x99-order-checkout-rcard,
:root[data-theme="dark"] .x99-share-card,
:root[data-theme="dark"] .x99-login-card,
:root[data-theme="dark"] .x99-register-card,
:root[data-theme="dark"] .x99-cancel-card,
:root[data-theme="dark"] .x99-order-splash-card {
  border: none !important;
}

/* Hover continua usando contorno sutil (nada chamativo) somente em
   elementos de seleção. Usamos `outline` em vez de `border` pra não
   causar layout shift / flicker (border altera o box model; outline
   não). Edgar 2026-04-29. */
:root[data-theme="dark"] .x99-af-gateway-card:hover,
:root[data-theme="dark"] .x99-order-bmcard:hover,
:root[data-theme="dark"] .x99-order-splash-card:hover {
  outline: 1px solid var(--c-border-strong);
  outline-offset: -1px;
}

/* Cards de listagem/dashboard/BM/VPS NÃO acendem no hover.
   Exceção: cards de seleção no fluxo de order (escolha de tipo/servidor)
   onde o hover é o próprio feedback de escolha. */
:root[data-theme="light"] .x99-order-bmcard:hover,
:root[data-theme="light"] .x99-order-splash-card:hover {
  border-color: var(--c-border-strong) !important;
}

/* Headings e labels importantes ganham cor near-black (--c-text-primary)
   em light mode SEM forçar peso — os pesos originais (light/medium/semi)
   são respeitados. Edgar 2026-04-29. */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] .x99-dash-list-name,
:root[data-theme="light"] .x99-af-section-title,
:root[data-theme="light"] .x99-af-sidebar-title,
:root[data-theme="light"] .x99-af-balance-badge-value,
:root[data-theme="light"] .x99-af-info-card-title,
:root[data-theme="light"] .x99-inv-title,
:root[data-theme="light"] .x99-vi-title,
:root[data-theme="light"] .bm-info-card-title,
:root[data-theme="light"] .bm-info-card-value,
:root[data-theme="light"] .vps-info-card-title,
:root[data-theme="light"] .x99-order-checkout-title,
:root[data-theme="light"] .x99-order-bmcard-cpu,
:root[data-theme="light"] .x99-order-bmcard-price,
:root[data-theme="light"] .cancel-section h2,
:root[data-theme="light"] .cancel-section h3,
/* Sidebar / navbar */
:root[data-theme="light"] .x99-menu-text,
:root[data-theme="light"] .x99-vps-host,
:root[data-theme="light"] .x99-bm-host,
:root[data-theme="light"] .x99-prefs-trigger,
/* Support (support.php, support-triage, submit-ticket, chat, modals) */
:root[data-theme="light"] .support-panel-title,
:root[data-theme="light"] .support-tickets-title,
:root[data-theme="light"] .support-success-modal-title,
:root[data-theme="light"] .support-modal-title,
:root[data-theme="light"] .support-empty-state-title,
:root[data-theme="light"] .support-triage-section-title,
:root[data-theme="light"] .support-triage-form-card-title,
:root[data-theme="light"] .support-chat-subject,
:root[data-theme="light"] .support-ticket-subject,
:root[data-theme="light"] .ticket-triage-title,
:root[data-theme="light"] .ticket-success-title,
/* Manage Bare Metal / VPS */
:root[data-theme="light"] .bm-ip-item-value,
:root[data-theme="light"] .bm-ip-detail-value,
:root[data-theme="light"] .bm-ip-address,
:root[data-theme="light"] .vps-info-card-value,
:root[data-theme="light"] .vps-ip-item-value,
:root[data-theme="light"] .vps-ip-address {
  color: var(--c-text-primary) !important;
}

/* Labels (Netmask/Gateway/IPv4/IPv6) ganham near-black mas com peso
   medium, pra não competir com os valores. */
:root[data-theme="light"] .bm-ip-item-label,
:root[data-theme="light"] .bm-ip-detail-label,
:root[data-theme="light"] .vps-ip-item-label {
  color: var(--c-text-secondary) !important;
}

/* Exceção: saudação do dashboard mantém font-weight light + accent no
   nome do usuário (regra canonical em dashboard.css). */
:root[data-theme="light"] h1.x99-dash-greeting-text {
  font-weight: 300 !important;
}
:root[data-theme="light"] .x99-dash-greeting-name {
  color: var(--c-accent) !important;
  font-weight: 700 !important;
}

/* Cabeçalhos dentro de cards (override text white) */
:root[data-theme="light"] .x99-bm-card h1,
:root[data-theme="light"] .x99-bm-card h2,
:root[data-theme="light"] .x99-bm-card h3,
:root[data-theme="light"] .x99-vps-card h1,
:root[data-theme="light"] .x99-vps-card h2,
:root[data-theme="light"] .x99-vps-card h3,
:root[data-theme="light"] .x99-support-card h1,
:root[data-theme="light"] .x99-support-card h2,
:root[data-theme="light"] .x99-support-card h3,
:root[data-theme="light"] .x99-dashboard-card h1,
:root[data-theme="light"] .x99-dashboard-card h2,
:root[data-theme="light"] .x99-dashboard-card h3,
:root[data-theme="light"] .x99-invoice-card h1,
:root[data-theme="light"] .x99-invoice-card h2,
:root[data-theme="light"] .x99-invoice-card h3 {
  color: var(--c-text-primary) !important;
}

/* Labels / kickers / muted text */
:root[data-theme="light"] .x99-bm-label,
:root[data-theme="light"] .x99-vps-label,
:root[data-theme="light"] .x99-support-label,
:root[data-theme="light"] .x99-dashboard-label,
:root[data-theme="light"] .x99-invoice-label,
:root[data-theme="light"] .x99-kicker,
:root[data-theme="light"] .x99-order-bmcard-spec-v,
:root[data-theme="light"] .x99-order-checkout-kicker {
  color: var(--c-text-muted) !important;
}

/* Inputs em cards — garantir contraste */
:root[data-theme="light"] .x99-card input,
:root[data-theme="light"] .x99-card textarea,
:root[data-theme="light"] .x99-card select,
:root[data-theme="light"] .x99-bm-card input,
:root[data-theme="light"] .x99-vps-card input,
:root[data-theme="light"] .x99-support-card input,
:root[data-theme="light"] .x99-support-card textarea,
:root[data-theme="light"] .x99-support-card select {
  background: var(--c-bg-base) !important;
  border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text-primary) !important;
}

/* Tabs (support, BM, VPS) */
:root[data-theme="light"] .x99-tab,
:root[data-theme="light"] .x99-support-tabs,
:root[data-theme="light"] .x99-bm-tabs,
:root[data-theme="light"] .x99-vps-tabs,
:root[data-theme="light"] .nav-tabs > li {
  border-color: var(--c-border) !important;
}
:root[data-theme="light"] .nav-tabs > li > a,
:root[data-theme="light"] .x99-tab-link {
  color: var(--c-text-secondary) !important;
  background: transparent !important;
}
:root[data-theme="light"] .nav-tabs > li.active > a,
:root[data-theme="light"] .x99-tab-link.active {
  color: var(--c-accent) !important;
  background: var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
}

/*
 * x99 theme overrides — WS1.1
 *
 * Ponte temporária entre CSS legacy hardcoded e novo token layer.
 * Força os containers principais (body, sidebar, cards) a consumirem
 * tokens, fazendo light mode funcionar em TODAS as superfícies mesmo
 * antes de migrar cada CSS por surface.
 *
 * Remover quando cada Tier (A/B/C) estiver 100% migrado pra tokens
 * (tracked em ROADMAP WS1.2–WS1.3 · css-migration-status.md).
 *
 * Estratégia: overrides com especificidade mínima + !important apenas
 * quando strictly necessary. Ordem de carregamento: ÚLTIMA entre x99
 * (depois de surface-specific CSS).
 */

/* ==========================================================================
 * Body + document roots — força background tema-aware
 * ========================================================================== */
:root[data-theme] body,
:root[data-theme] .app-container,
:root[data-theme] .app-body,
:root[data-theme] .main-content,
:root[data-theme] .app-main {
  background-color: var(--c-bg-base) !important;
  color: var(--c-text-primary);
}

/* Mobile: reduz o gap herdado do Lagom (.main-body{padding:48px 0})
   nas páginas custom x99 que ainda não substituíram o padding pra zero.
   Edgar 2026-04-29. */
@media (max-width: 991px) {
  body.page-clientareahome .main-body,
  body.page-login .main-body,
  body.page-clientregister .main-body,
  body.page-password-reset-container .main-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.page-login .x99-login-page,
  body.page-clientregister .x99-login-page,
  body.page-password-reset-container .x99-login-page {
    padding: 16px 12px !important;
    min-height: auto !important;
  }
}

/* ==========================================================================
 * Sidebar + top nav — usa bg-elevated em light (branco puro)
 * ========================================================================== */
:root[data-theme] .app-nav,
:root[data-theme] .app-nav-default,
:root[data-theme] .x99-sidebar,
:root[data-theme] .app-topbar,
:root[data-theme] .app-nav-menu,
:root[data-theme] .navbar,
:root[data-theme] .navbar-default {
  background-color: var(--c-bg-elevated) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-primary);
}

/* Menu items hover */
:root[data-theme="light"] .x99-menu-item .x99-menu-link:hover,
:root[data-theme="light"] .app-nav-menu a:hover {
  background-color: var(--c-surface-hover) !important;
  color: var(--c-text-primary) !important;
}

:root[data-theme="light"] .x99-menu-link,
:root[data-theme="light"] .app-nav-menu li a {
  color: var(--c-text-secondary) !important;
}

:root[data-theme="light"] .x99-menu-active .x99-menu-link {
  color: var(--c-accent) !important;
  background: var(--c-accent-soft) !important;
}

/* ==========================================================================
 * Hovers em light mode: os rgba(text, 0.03-0.06) usados nos CSS legacy
 * ficam invisíveis sobre o cream. Reforça alpha pra ~0.08-0.12 e também
 * acende cor/texto onde a base já era sutil. Edgar 2026-04-29.
 * ========================================================================== */
:root[data-theme="light"] .x99-dash-list-item:hover,
:root[data-theme="light"] .x99-dash-country-option:hover,
:root[data-theme="light"] .x99-dash-srvcount:hover,
:root[data-theme="light"] .x99-dash-panel-item:hover,
:root[data-theme="light"] .x99-dash-panel-alert:hover,
:root[data-theme="light"] .x99-dash-new-ticket-circle:hover,
:root[data-theme="light"] .x99-dash-country-trigger:hover {
  background: rgba(var(--text-rgb), 0.08) !important;
  color: var(--c-text-primary) !important;
}

:root[data-theme="light"] .x99-dash-list-item:hover .x99-dash-list-manage {
  color: var(--c-accent) !important;
}

:root[data-theme="light"] .x99-dash-logout:hover,
:root[data-theme="light"] .x99-dash-balance-addfunds:hover,
:root[data-theme="light"] .x99-dash-list-viewall:hover,
:root[data-theme="light"] .x99-dash-list-footer a:hover {
  color: var(--c-text-primary) !important;
}
:root[data-theme="light"] .x99-dash-panel-item--alert:hover {
  color: var(--c-danger) !important;
}

/* Links/botões ghost em geral — garantem feedback no hover em light */
:root[data-theme="light"] a:not(.btn):not(.x99-btn):not(.x99-menu-link):not(.x99-af-btn):not(.x99-af-preset):not(.x99-vi-pay-btn):not(.x99-dash-list-item):hover {
  color: var(--c-accent-warm) !important;
}

:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):hover,
:root[data-theme="light"] .x99-btn--ghost:hover,
:root[data-theme="light"] .x99-af-btn--ghost:hover {
  background: var(--c-surface-hover) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text-primary) !important;
}

/* ==========================================================================
 * Cards genéricos (Lagom + custom)
 * ========================================================================== */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .well,
:root[data-theme="light"] .x99-card,
:root[data-theme="light"] .x99-login-card,
:root[data-theme="light"] .x99-register-card {
  background-color: var(--c-bg-elevated) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-primary);
  box-shadow: var(--sh-card);
}

:root[data-theme="light"] .x99-order-bmcard,
:root[data-theme="light"] .x99-order-checkout-summary,
:root[data-theme="light"] .x99-order-checkout-hwcard,
:root[data-theme="light"] .x99-order-checkout-card,
:root[data-theme="light"] .x99-order-checkout-rcard,
:root[data-theme="light"] .x99-share-card {
  background-color: var(--c-bg-elevated) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-primary);
}

/* ==========================================================================
 * Inputs / form fields (email, password, textarea)
 * ========================================================================== */
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background-color: var(--c-bg-elevated) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text-primary) !important;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: var(--c-text-muted) !important;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
  border-color: var(--c-accent) !important;
  box-shadow: var(--sh-focus) !important;
  outline: none !important;
}

/* ==========================================================================
 * Text colors (headings, paragraphs, labels)
 * ========================================================================== */
:root[data-theme="light"] body,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] p,
:root[data-theme="light"] label,
:root[data-theme="light"] span:not(.x99-menu-badge):not(.label):not(.badge),
:root[data-theme="light"] td,
:root[data-theme="light"] th {
  color: var(--c-text-primary);
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .text-secondary,
:root[data-theme="light"] small,
:root[data-theme="light"] .x99-order-bmcard-spec-v,
:root[data-theme="light"] .x99-order-checkout-kicker,
:root[data-theme="light"] .x99-kicker {
  color: var(--c-text-muted) !important;
}

/* Links */
:root[data-theme="light"] a:not(.btn):not(.x99-btn):not(.x99-menu-link) {
  color: var(--c-accent);
}

:root[data-theme="light"] a:not(.btn):not(.x99-btn):not(.x99-menu-link):hover {
  color: var(--c-accent-warm);
}

/* ==========================================================================
 * Borders / dividers
 * ========================================================================== */
:root[data-theme="light"] hr,
:root[data-theme="light"] .divider,
:root[data-theme="light"] .x99-order-checkout-divider,
:root[data-theme="light"] .x99-order-checkout-hr {
  border-color: var(--c-border-strong) !important;
  background-color: var(--c-border-strong);
}

:root[data-theme="light"] .panel-heading,
:root[data-theme="light"] .panel-footer,
:root[data-theme="light"] .card-header,
:root[data-theme="light"] .card-footer,
:root[data-theme="light"] .list-group-item,
:root[data-theme="light"] .x99-dash-list-header,
:root[data-theme="light"] .x99-dash-list-item,
:root[data-theme="light"] .x99-dash-list-footer,
:root[data-theme="light"] .bm-chart-header,
:root[data-theme="light"] .bm-overview-section,
:root[data-theme="light"] .bm-info-card,
:root[data-theme="light"] .vps-overview-section,
:root[data-theme="light"] .vps-info-card,
:root[data-theme="light"] .x99-af-section,
:root[data-theme="light"] .x99-af-balance-badge,
:root[data-theme="light"] .x99-af-info-card,
:root[data-theme="light"] .x99-order-bm-filters,
:root[data-theme="light"] .x99-order-checkout-summary-row,
:root[data-theme="light"] .x99-vi-receipt,
:root[data-theme="light"] .x99-vi-line,
:root[data-theme="light"] .cancel-section,
:root[data-theme="light"] .cancel-help-card {
  border-color: var(--c-border) !important;
}

:root[data-theme="light"] .x99-order-checkout-summary-row + .x99-order-checkout-summary-row,
:root[data-theme="light"] .x99-order-checkout-rline,
:root[data-theme="light"] .x99-vi-divider,
:root[data-theme="light"] .x99-vi-table-row,
:root[data-theme="light"] .x99-support-divider {
  border-color: var(--c-border-strong) !important;
}

/* ==========================================================================
 * Buttons (genéricos, custom passa por cima)
 * ========================================================================== */
:root[data-theme="light"] .btn-primary {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-text-inverse) !important;
}

:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .btn-primary:focus {
  background-color: var(--c-accent-warm) !important;
  border-color: var(--c-accent-warm) !important;
}

:root[data-theme="light"] .btn-default,
:root[data-theme="light"] .btn-secondary {
  background-color: var(--c-bg-elevated) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text-primary) !important;
}

/* ==========================================================================
 * Tables (invoices, tickets, dashboards)
 * ========================================================================== */
:root[data-theme="light"] table,
:root[data-theme="light"] .table {
  background-color: transparent !important;
  color: var(--c-text-primary);
}

:root[data-theme="light"] thead,
:root[data-theme="light"] thead tr,
:root[data-theme="light"] thead th {
  background-color: var(--c-surface) !important;
  color: var(--c-text-secondary) !important;
  border-color: var(--c-border) !important;
}

:root[data-theme="light"] tbody tr {
  border-color: var(--c-border) !important;
}

:root[data-theme="light"] tbody tr:hover {
  background-color: var(--c-surface-hover) !important;
}

/* ==========================================================================
 * Alerts / notifications
 * ========================================================================== */
:root[data-theme="light"] .alert-success {
  background: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}

:root[data-theme="light"] .alert-warning {
  background: var(--c-warning-soft);
  border-color: var(--c-warning);
  color: var(--c-warning);
}

:root[data-theme="light"] .alert-danger,
:root[data-theme="light"] .alert-error {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

:root[data-theme="light"] .alert-info {
  background: var(--c-info-soft);
  border-color: var(--c-info);
  color: var(--c-info);
}

/* ==========================================================================
 * Footer — mesma cor do sidebar (--c-bg-sunken, deeper cream)
 * ========================================================================== */
:root[data-theme="light"] .app-footer,
:root[data-theme="light"] footer,
:root[data-theme="light"] .x99-footer {
  background: var(--c-bg-sunken) !important;        /* deeper cream, igual sidebar */
  border-top: 1px solid var(--c-border) !important;
  color: var(--c-text-muted) !important;
}

:root[data-theme="light"] .x99-footer-copy,
:root[data-theme="light"] .x99-footer-center,
:root[data-theme="light"] #x99MadeIn {
  color: var(--c-text-muted) !important;
}

/* ============================================================================
 * Mobile: o topbar (.x99-mobile-topbar) é fixed top:0 com 56px e a
 * regra de Lagom `.app-main { padding-top: 56px }` já reserva esse
 * espaço. Por isso, em mobile, zeramos o padding-top do .main-body
 * em todas as páginas x99 (Lagom default = 40px) para evitar empilhar
 * gap em cima do gap do topbar. Edgar 2026-04-29.
 * ============================================================================ */
@media (max-width: 991px) {
  body.page-x99-order .main-body,
  body.page-clientareahome .main-body,
  body.page-login .main-body,
  body.page-password-reset-container .main-body,
  body.page-clientregister .main-body,
  body.support-page .main-body,
  body.viewinvoice-page .main-body,
  body.invoices-page .main-body,
  body.cancel-page .main-body,
  body.addfunds-page .main-body {
    padding-top: 0 !important;
  }
}

/* ============================================================================
   x99-vanilla-overrides.css
   ============================================================================ */
/* =============================================================================
   x99 Tier C1 vanilla overrides — Edgar 2026-04-29
   ----------------------------------------------------------------------------
   Aplica identidade x99 às páginas WHMCS vanilla (forms Bootstrap stock)
   sem reescrever os TPLs. Cobre:
     - clientareadetails (Account details)
     - user-password (Change password)
     - clientareasecurity (Security settings / 2FA)
     - masspay (Mass payment)
     - printinvoice (Print/PDF invoice)
     - creditcard (saved cards management)

   Filosofia: detecta via body.page-* e estiliza .section/.panel-form/.form-control
   pra usar tokens canonical. Não muda HTML, não quebra fluxo WHMCS.
   ============================================================================= */

/* Surfaces alvo */
body.page-clientareadetails .section,
body.page-changepw .section,
body.page-clientareasecurity .section,
body.page-masspay .section,
body.page-printinvoice .section,
body.page-creditcard .section {
    margin-bottom: 24px;
}

body.page-clientareadetails .section-header,
body.page-changepw .section-header,
body.page-clientareasecurity .section-header,
body.page-masspay .section-header,
body.page-printinvoice .section-header,
body.page-creditcard .section-header {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 16px;
}

body.page-clientareadetails .section-title,
body.page-changepw .section-title,
body.page-clientareasecurity .section-title,
body.page-masspay .section-title,
body.page-printinvoice .section-title,
body.page-creditcard .section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text-primary);
    letter-spacing: -0.005em;
}

/* Painel ⇒ card x99 */
body.page-clientareadetails .panel,
body.page-changepw .panel,
body.page-clientareasecurity .panel,
body.page-masspay .panel,
body.page-printinvoice .panel,
body.page-creditcard .panel {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--sh-card) !important;
    margin-bottom: 0;
}

body.page-clientareadetails .panel-heading,
body.page-changepw .panel-heading,
body.page-clientareasecurity .panel-heading,
body.page-masspay .panel-heading,
body.page-printinvoice .panel-heading,
body.page-creditcard .panel-heading {
    background: var(--c-bg-sunken) !important;
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text-primary) !important;
    padding: 14px 18px !important;
}

body.page-clientareadetails .panel-title,
body.page-changepw .panel-title,
body.page-clientareasecurity .panel-title,
body.page-masspay .panel-title,
body.page-printinvoice .panel-title,
body.page-creditcard .panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.page-clientareadetails .panel-body,
body.page-changepw .panel-body,
body.page-clientareasecurity .panel-body,
body.page-masspay .panel-body,
body.page-printinvoice .panel-body,
body.page-creditcard .panel-body {
    padding: 20px 24px !important;
    color: var(--c-text-primary);
}

/* Form labels + inputs */
body.page-clientareadetails .control-label,
body.page-changepw .control-label,
body.page-clientareasecurity .control-label,
body.page-masspay .control-label,
body.page-creditcard .control-label,
body.page-clientareadetails label,
body.page-changepw label,
body.page-clientareasecurity label,
body.page-masspay label,
body.page-creditcard label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--c-text-secondary) !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.02em;
}

body.page-clientareadetails .form-control,
body.page-changepw .form-control,
body.page-clientareasecurity .form-control,
body.page-masspay .form-control,
body.page-creditcard .form-control,
body.page-clientareadetails input[type="text"],
body.page-clientareadetails input[type="email"],
body.page-clientareadetails input[type="tel"],
body.page-clientareadetails input[type="password"],
body.page-clientareadetails select,
body.page-clientareadetails textarea,
body.page-changepw input[type="password"],
body.page-clientareasecurity input,
body.page-clientareasecurity select,
body.page-creditcard input,
body.page-creditcard select {
    background: var(--c-bg-base) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 8px !important;
    color: var(--c-text-primary) !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.page-clientareadetails .form-control:focus,
body.page-changepw .form-control:focus,
body.page-clientareasecurity .form-control:focus,
body.page-masspay .form-control:focus,
body.page-creditcard .form-control:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
    outline: none !important;
}

body.page-clientareadetails .form-control[readonly],
body.page-changepw .form-control[readonly],
body.page-clientareasecurity .form-control[readonly] {
    background: var(--c-surface) !important;
    color: var(--c-text-muted) !important;
    cursor: not-allowed;
}

body.page-clientareadetails .form-group,
body.page-changepw .form-group,
body.page-clientareasecurity .form-group,
body.page-masspay .form-group,
body.page-creditcard .form-group {
    margin-bottom: 18px;
}

/* Buttons primários — pattern x99 invertido (danger default → accent hover) */
body.page-clientareadetails .btn-primary,
body.page-changepw .btn-primary,
body.page-clientareasecurity .btn-primary,
body.page-masspay .btn-primary,
body.page-creditcard .btn-primary {
    background: var(--c-danger) !important;
    border: 1px solid var(--c-danger) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: background 150ms ease !important;
}

body.page-clientareadetails .btn-primary:hover,
body.page-clientareadetails .btn-primary:focus,
body.page-changepw .btn-primary:hover,
body.page-clientareasecurity .btn-primary:hover,
body.page-masspay .btn-primary:hover,
body.page-creditcard .btn-primary:hover,
body.page-clientareadetails .btn-primary:focus,
body.page-changepw .btn-primary:focus,
body.page-clientareasecurity .btn-primary:focus,
body.page-masspay .btn-primary:focus,
body.page-creditcard .btn-primary:focus {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
    outline: none !important;
}

/* Botões secundários e cancelar */
body.page-clientareadetails .btn-default,
body.page-changepw .btn-default,
body.page-clientareasecurity .btn-default,
body.page-masspay .btn-default,
body.page-creditcard .btn-default,
body.page-clientareadetails .btn-secondary,
body.page-changepw .btn-secondary,
body.page-clientareasecurity .btn-secondary,
body.page-masspay .btn-secondary,
body.page-creditcard .btn-secondary {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    color: var(--c-text-primary) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}

body.page-clientareadetails .btn-default:hover,
body.page-changepw .btn-default:hover,
body.page-clientareasecurity .btn-default:hover,
body.page-masspay .btn-default:hover,
body.page-creditcard .btn-default:hover {
    background: var(--c-surface-hover) !important;
}

/* Alerts / messages */
body.page-clientareadetails .alert,
body.page-changepw .alert,
body.page-clientareasecurity .alert,
body.page-masspay .alert,
body.page-creditcard .alert,
body.page-clientareadetails .message,
body.page-changepw .message,
body.page-clientareasecurity .message,
body.page-masspay .message,
body.page-creditcard .message {
    border-radius: 10px !important;
    padding: 12px 18px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    border-width: 1px !important;
}

body.page-clientareadetails .alert-success,
body.page-changepw .alert-success,
body.page-clientareasecurity .alert-success,
body.page-masspay .alert-success,
body.page-creditcard .alert-success {
    background: var(--c-success-soft) !important;
    border: 1px solid var(--c-success) !important;
    color: var(--c-success) !important;
}

body.page-clientareadetails .alert-danger,
body.page-changepw .alert-danger,
body.page-clientareasecurity .alert-danger,
body.page-masspay .alert-danger,
body.page-creditcard .alert-danger,
body.page-clientareadetails .alert-error,
body.page-changepw .alert-error,
body.page-clientareasecurity .alert-error,
body.page-masspay .alert-error,
body.page-creditcard .alert-error {
    background: var(--c-danger-soft) !important;
    border: 1px solid var(--c-danger) !important;
    color: var(--c-danger) !important;
}

body.page-clientareadetails .alert-info,
body.page-changepw .alert-info,
body.page-clientareasecurity .alert-info,
body.page-masspay .alert-info,
body.page-creditcard .alert-info {
    background: var(--c-info-soft) !important;
    border: 1px solid var(--c-info) !important;
    color: var(--c-info) !important;
}

body.page-clientareadetails .alert-warning,
body.page-changepw .alert-warning,
body.page-clientareasecurity .alert-warning,
body.page-masspay .alert-warning,
body.page-creditcard .alert-warning {
    background: var(--c-warning-soft) !important;
    border: 1px solid var(--c-warning) !important;
    color: var(--c-warning) !important;
}

/* Tables (creditcard, masspay, security backups) */
body.page-clientareadetails .table,
body.page-clientareasecurity .table,
body.page-masspay .table,
body.page-creditcard .table {
    background: transparent !important;
    color: var(--c-text-primary) !important;
}

body.page-clientareadetails .table > thead > tr > th,
body.page-clientareasecurity .table > thead > tr > th,
body.page-masspay .table > thead > tr > th,
body.page-creditcard .table > thead > tr > th {
    background: var(--c-bg-sunken) !important;
    color: var(--c-text-secondary) !important;
    border-bottom: 1px solid var(--c-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px !important;
}

body.page-clientareadetails .table > tbody > tr > td,
body.page-clientareasecurity .table > tbody > tr > td,
body.page-masspay .table > tbody > tr > td,
body.page-creditcard .table > tbody > tr > td {
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text-primary) !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
}

body.page-clientareadetails .table > tbody > tr:hover > td,
body.page-clientareasecurity .table > tbody > tr:hover > td,
body.page-masspay .table > tbody > tr:hover > td,
body.page-creditcard .table > tbody > tr:hover > td {
    background: var(--c-surface-hover) !important;
}

/* Modal/dialog (creditcard remove confirmations, etc) */
body.page-clientareadetails .modal-content,
body.page-clientareasecurity .modal-content,
body.page-creditcard .modal-content {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 14px !important;
}

body.page-clientareadetails .modal-header,
body.page-clientareasecurity .modal-header,
body.page-creditcard .modal-header {
    background: var(--c-bg-sunken) !important;
    border-bottom: 1px solid var(--c-border) !important;
    border-radius: 14px 14px 0 0 !important;
}

/* Help text / form-text */
body.page-clientareadetails .help-block,
body.page-changepw .help-block,
body.page-clientareasecurity .help-block,
body.page-masspay .help-block,
body.page-creditcard .help-block,
body.page-clientareadetails .form-text,
body.page-changepw .form-text,
body.page-clientareasecurity .form-text,
body.page-masspay .form-text,
body.page-creditcard .form-text {
    color: var(--c-text-muted) !important;
    font-size: 12px !important;
    margin-top: 4px;
}

/* Checkboxes / radios — accent x99 */
body.page-clientareadetails input[type="checkbox"],
body.page-changepw input[type="checkbox"],
body.page-clientareasecurity input[type="checkbox"],
body.page-masspay input[type="checkbox"],
body.page-creditcard input[type="checkbox"],
body.page-clientareadetails input[type="radio"],
body.page-clientareasecurity input[type="radio"] {
    accent-color: var(--c-accent);
}

/* Page title hide (manda canonical x99 sem main-header) — opt-in via class
   `body.x99-canonical-vanilla` se quisermos esconder o title default; por
   default deixamos o title visível pra usuário ter contexto. */

/* Margem confortável no main-body pra não colar o conteúdo nas margens */
body.page-clientareadetails .main-body,
body.page-changepw .main-body,
body.page-clientareasecurity .main-body,
body.page-masspay .main-body,
body.page-printinvoice .main-body,
body.page-creditcard .main-body {
    padding: 24px 16px !important;
}

/* ============================================================================
   x99-navigation.css
   ============================================================================ */
/**
 * X99 Navigation - Sidebar Styles
 * 
 * @package    WHMCS Lagom2 Template
 * @file       x99-navigation.css
 * 
 * This file contains all CSS styles for the X99 custom navigation sidebar.
 * Extracted from mainmenu.tpl for better maintainability.
 */

/* X99 Navigation - Full Height Sidebar */

/* Nav container - Full height sidebar */
.app-nav, .app-nav.app-nav-default {
    background: rgba(var(--text-rgb), 0.01) !important;
    border: none !important;
    border-right: 1px solid var(--c-border) !important;
    box-shadow: none !important;
}

#main-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 54px) !important;
    overflow: hidden !important;
}

#main-menu > .container {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.app-nav #header {
    background: var(--c-bg-sunken) !important;       /* mesma cor do footer */
    border: none !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 14px 16px !important;
}

/* Header: logo + new server button side by side */
.app-nav #header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Hide X99NEWSERVER from sidebar — moved to header */
#Primary_Navbar-X99NEWSERVER {
    display: none !important;
}

/* Red "New Server" button in the header */
.x99-header-new-btn,
.x99-header-new-btn:link,
.x99-header-new-btn:visited,
.x99-header-new-btn:active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-danger);
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px 5px 5px;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
    letter-spacing: 0.01em;
    opacity: 1 !important;
}
.x99-header-new-btn:hover {
    background: var(--c-accent);
    color: #fff !important;
    text-decoration: none !important;
}
.x99-header-new-btn span {
    color: #fff !important;
    opacity: 1 !important;
}
.x99-header-new-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--text-rgb), 0.2);
}
.x99-header-new-icon svg {
    width: 12px;
    height: 12px;
    stroke: #fff !important;
    opacity: 1 !important;
}

/* Primary Menu - Full width, constrained height */
.menu.menu-primary {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Menu Items */
.x99-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.x99-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(var(--text-rgb), 0.5) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Menu Icon */
.x99-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: rgba(var(--text-rgb), 0.35) !important;
    transition: all 150ms ease !important;
}

.x99-menu-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.x99-menu-text {
    flex: 1 !important;
}

.x99-menu-badge {
    font-size: 10px;
    font-weight: 600;
    color: rgba(var(--text-rgb), 0.4);
    background: rgba(var(--text-rgb), 0.06);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
}
.x99-menu-badge--danger {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--c-danger);
}
.x99-menu-item:not(.x99-has-submenu) .x99-menu-badge {
    margin-right: 22px;
}

.x99-chevron {
    width: 12px !important;
    height: 12px !important;
    color: rgba(var(--text-rgb), 0.25) !important;
    transition: transform 150ms ease !important;
    flex-shrink: 0 !important;
}

/* Hover - subtle, minimal glow */
.x99-menu-link:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    color: rgba(var(--text-rgb), 0.8) !important;
}

.x99-menu-link:hover .x99-menu-icon {
    color: rgba(var(--text-rgb), 0.55) !important;
}

.x99-menu-link:hover .x99-chevron {
    color: rgba(var(--text-rgb), 0.35) !important;
}

/* Active - reduced glow */
.x99-menu-item.active > .x99-menu-link,
.x99-menu-item.x99-menu-active > .x99-menu-link {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: rgba(var(--text-rgb), 0.9) !important;
}

.x99-menu-item.active > .x99-menu-link .x99-menu-icon,
.x99-menu-item.x99-menu-active > .x99-menu-link .x99-menu-icon {
    color: var(--c-accent) !important;
}

.x99-menu-item.active > .x99-menu-link::before,
.x99-menu-item.x99-menu-active > .x99-menu-link::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2px !important;
    height: 16px !important;
    background: var(--c-accent) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* Open state */
.x99-menu-item.open > .x99-menu-link {
    background: rgba(var(--text-rgb), 0.03) !important;
    color: rgba(var(--text-rgb), 0.8) !important;
}

.x99-menu-item.open > .x99-menu-link .x99-menu-icon {
    color: rgba(var(--text-rgb), 0.55) !important;
}

.x99-menu-item.open > .x99-menu-link .x99-chevron {
    transform: rotate(180deg) !important;
}

/* Submenu */
.x99-submenu {
    display: none !important;
    padding: 4px 0 4px 28px !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
}

.x99-menu-item.open > .x99-submenu {
    display: block !important;
}

.x99-submenu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.x99-submenu-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: rgba(var(--text-rgb), 0.4) !important;
    font-size: 12px !important;
    font-weight: 450 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
}

.x99-submenu-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(var(--text-rgb), 0.2) !important;
    flex-shrink: 0 !important;
    transition: all 150ms ease !important;
}

.x99-submenu-link:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    color: rgba(var(--text-rgb), 0.65) !important;
}

.x99-submenu-link:hover .x99-submenu-dot {
    background: rgba(var(--text-rgb), 0.4) !important;
}

.x99-submenu-item.active > .x99-submenu-link {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: rgba(var(--text-rgb), 0.9) !important;
}

.x99-submenu-item.active > .x99-submenu-link .x99-submenu-dot {
    background: var(--c-accent) !important;
}

/* ============================================
   VPS Menu - Compact List (shadcn-inspired)
   ============================================ */
.x99-vps-menu {
    display: none;
    flex-direction: column;
    padding: 4px 5px 4px 5px;
    gap: 1px;
}

.x99-menu-item.open > .x99-vps-menu {
    display: flex !important;
}

/* Add New VPS Button */
.x99-vps-add {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    color: var(--c-accent) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.x99-vps-add:hover {
    background: rgba(var(--accent-rgb), 0.12) !important;
    color: var(--c-accent) !important;
    text-decoration: none !important;
}

.x99-vps-add-icon {
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed currentColor !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
}

.x99-vps-add-icon svg {
    width: 10px !important;
    height: 10px !important;
}

.x99-vps-add:hover .x99-vps-add-icon {
    opacity: 1 !important;
    border-style: solid !important;
}

/* Divider */
.x99-vps-divider {
    height: 1px !important;
    margin: 4px 0 !important;
    background: var(--c-border) !important;
}

/* VPS Server Items - Compact */
.x99-vps-server {
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.x99-vps-server.x99-hidden,
.x99-vps-more.x99-hidden {
    display: none !important;
}

.x99-vps-server:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    text-decoration: none !important;
}

/* Hide Status Dot */
.x99-vps-status {
    display: none !important;
}

/* Server Info - Full width, hostname left, IP right */
.x99-vps-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Hostname */
.x99-vps-host {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(var(--text-rgb), 0.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Bare Metal host with barcode - use flexbox for truncation */
.x99-vps-host.x99-bm-has-barcode {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Alias text - only truncates when necessary */
.x99-bm-alias-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Barcode suffix (small text next to alias) - never truncates */
.x99-bm-barcode-suffix {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: rgba(var(--text-rgb), 0.35) !important;
    margin-left: 6px !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* IP Address - Right aligned */
.x99-vps-ip {
    font-size: 10px !important;
    font-family: 'SF Mono', Monaco, Consolas, monospace !important;
    color: rgba(var(--text-rgb), 0.3) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-left: 8px !important;
}

.x99-vps-server:hover .x99-vps-host {
    color: rgba(var(--text-rgb), 0.9) !important;
}

.x99-vps-server:hover .x99-vps-ip {
    color: rgba(var(--text-rgb), 0.45) !important;
}

/* Active State */
.x99-vps-server.active {
    background: rgba(var(--accent-rgb), 0.08) !important;
}

.x99-vps-server.active .x99-vps-host {
    color: rgba(var(--text-rgb), 0.95) !important;
}

.x99-vps-server.active .x99-vps-ip {
    color: rgba(var(--text-rgb), 0.5) !important;
}

/* Ver Mais Link */
.x99-vps-more {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    margin-top: 4px !important;
    border-radius: 6px !important;
    background: rgba(var(--text-rgb), 0.02) !important;
    border: 1px dashed rgba(var(--text-rgb), 0.08) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.x99-vps-more:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    border-color: rgba(var(--text-rgb), 0.12) !important;
    text-decoration: none !important;
}

.x99-vps-more-text {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(var(--text-rgb), 0.5) !important;
    transition: color 0.15s ease !important;
}

.x99-vps-more:hover .x99-vps-more-text {
    color: rgba(var(--text-rgb), 0.8) !important;
}

.x99-vps-more-arrow {
    width: 14px !important;
    height: 14px !important;
    color: rgba(var(--text-rgb), 0.3) !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.x99-vps-more:hover .x99-vps-more-arrow {
    color: rgba(var(--text-rgb), 0.6) !important;
    transform: translateX(2px) !important;
}

/* Badge */
.menu.menu-primary .badge {
    background: var(--c-accent) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}

/* ============================================
   Bottom Section - Language/Currency & User
   ============================================ */
.x99-sidebar-bottom {
    margin-top: auto !important;
    padding: 12px !important;
    border-top: 1px solid var(--c-border) !important;
    background: var(--c-bg-sunken) !important;       /* mesma cor do header/footer */
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

/* Remove any bottom border/line from sidebar elements */
.x99-sidebar-bottom::after,
.x99-sidebar-bottom::before,
#main-menu::after,
#main-menu::before,
#main-menu > .container::after,
#main-menu > .container::before,
.app-nav::after,
.app-nav::before,
.app-nav-menu::after,
.app-nav-menu::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Ensure no white/light borders at bottom of sidebar */
.app-nav,
.app-nav.app-nav-default,
#main-menu,
#main-menu > .container,
.x99-sidebar-bottom {
    border-bottom: none !important;
}

/* Remove bottom border from last child in sidebar */
.x99-sidebar-bottom > *:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Support Button */
.x99-support-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    background: rgba(var(--danger-rgb), 0.12) !important;
    border: 1px solid rgba(var(--danger-rgb), 0.25) !important;
    color: var(--c-danger) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}

.x99-support-btn:hover {
    background: rgba(var(--danger-rgb), 0.2) !important;
    border-color: rgba(var(--danger-rgb), 0.4) !important;
    color: var(--c-danger) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.x99-support-btn i {
    font-size: 14px !important;
}

/* Preferences Dropdown (Language/Currency) */
.x99-prefs-wrapper {
    position: relative !important;
}

.x99-prefs-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    background: rgba(var(--text-rgb), 0.02) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}

.x99-prefs-trigger:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
}

.x99-prefs-wrapper.open .x99-prefs-trigger {
    background: rgba(var(--text-rgb), 0.04) !important;
}

.x99-prefs-current {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.x99-prefs-flag {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.x99-prefs-label {
    font-size: 12px !important;
    font-weight: 450 !important;
    color: rgba(var(--text-rgb), 0.6) !important;
}

.x99-prefs-value {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(var(--text-rgb), 0.85) !important;
}

.x99-prefs-chevron {
    width: 12px !important;
    height: 12px !important;
    color: rgba(var(--text-rgb), 0.3) !important;
    transition: transform 150ms ease !important;
}

.x99-prefs-wrapper.open .x99-prefs-chevron {
    transform: rotate(180deg) !important;
}

/* Preferences Dropdown Panel */
.x99-prefs-dropdown {
    display: none !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 4px !important;
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    z-index: 100 !important;
    box-shadow: var(--sh-card) !important;
}

.x99-prefs-wrapper.open .x99-prefs-dropdown {
    display: block !important;
}

.x99-prefs-section {
    margin-bottom: 8px !important;
}

.x99-prefs-section:last-child {
    margin-bottom: 0 !important;
}

.x99-prefs-section-title {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(var(--text-rgb), 0.35) !important;
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
}

.x99-prefs-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: rgba(var(--text-rgb), 0.6) !important;
    font-size: 12px !important;
    font-weight: 450 !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
}

.x99-prefs-option:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    color: rgba(var(--text-rgb), 0.85) !important;
}

.x99-prefs-option.active {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: rgba(var(--text-rgb), 0.9) !important;
}

.x99-prefs-option .x99-prefs-flag {
    width: 20px !important;
    height: 20px !important;
}

.x99-prefs-divider {
    height: 1px !important;
    background: var(--c-border) !important;
    margin: 8px 0 !important;
}

/* User Row - Container for user section + logout button */
.x99-user-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
}

/* User Section */
.x99-user-section {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: rgba(var(--text-rgb), 0.02) !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.x99-user-section:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
}

/* Logout Button - Red icon */
.x99-logout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    border-radius: 8px !important;
    background: rgba(var(--danger-rgb), 0.1) !important;
    color: var(--c-danger) !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
    flex-shrink: 0 !important;
}

.x99-logout-btn:hover {
    background: rgba(var(--danger-rgb), 0.2) !important;
    color: var(--c-accent) !important;
}

.x99-logout-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.x99-user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--c-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.x99-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.x99-user-avatar svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(var(--text-rgb), 0.4) !important;
}

.x99-user-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.x99-user-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(var(--text-rgb), 0.85) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.x99-user-company {
    font-size: 11px !important;
    color: rgba(var(--text-rgb), 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.x99-user-email {
    font-size: 10px !important;
    color: rgba(var(--text-rgb), 0.35) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.x99-user-chevron {
    width: 14px !important;
    height: 14px !important;
    color: rgba(var(--text-rgb), 0.3) !important;
    flex-shrink: 0 !important;
    transition: transform 150ms ease !important;
}

.x99-user-section.open .x99-user-chevron {
    transform: rotate(180deg) !important;
}

/* User Dropdown */
.x99-user-dropdown {
    display: none !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 4px !important;
    background: var(--c-bg-elevated) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    z-index: 100 !important;
}

.x99-user-section.open .x99-user-dropdown {
    display: block !important;
}

.x99-user-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: rgba(var(--text-rgb), 0.6) !important;
    font-size: 12px !important;
    font-weight: 450 !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
}

.x99-user-dropdown-item:hover {
    background: rgba(var(--text-rgb), 0.04) !important;
    color: rgba(var(--text-rgb), 0.85) !important;
}

.x99-user-dropdown-item svg {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.5 !important;
}

.x99-user-dropdown-item:hover svg {
    opacity: 0.7 !important;
}

.x99-user-dropdown-divider {
    height: 1px !important;
    background: var(--c-border) !important;
    margin: 4px 0 !important;
}

.x99-user-dropdown-item.logout {
    color: rgba(var(--accent-rgb), 0.8) !important;
}

.x99-user-dropdown-item.logout:hover {
    background: rgba(var(--accent-rgb), 0.1) !important;
    color: var(--c-accent) !important;
}

/* Login Button (when not logged in) — invertido como o New Server header. */
.x99-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    background: var(--c-danger) !important;       /* default saturado (= New Server) */
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 150ms ease, color 150ms ease !important;
}

.x99-login-btn:hover,
.x99-login-btn:focus {
    background: var(--c-accent) !important;       /* hover mais claro */
    color: #fff !important;
    outline: none !important;
}

.x99-login-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Top Navigation - Clean */
.main-top {
    background: transparent !important;
    border: none !important;
    padding: 6px 0 !important;
}

.main-top::before, .main-top::after {
    display: none !important;
}

/* Hide account/language from top nav since it's now in sidebar */
.top-nav > li[id*="Account"],
.top-nav > li[id*="Language"],
.top-nav > li[data-language-select] {
    display: none !important;
}

.top-nav > li > a {
    padding: 4px 8px !important;
    font-size: 12px !important;
    color: rgba(var(--text-rgb), 0.5) !important;
    border-radius: 6px !important;
    transition: all 150ms ease !important;
}

.top-nav > li > a:hover {
    color: rgba(var(--text-rgb), 0.8) !important;
    background: rgba(var(--text-rgb), 0.04) !important;
}

/* Footer - Clean & Hidden Elements */
.main-footer, .footer {
    background: transparent !important;
    border: none !important;
}

.main-footer::before, .main-footer::after,
.footer::before, .footer::after {
    display: none !important;
}

.footer-bottom {
    display: none !important;
}

/* Hide copyright and footer language selector */
.footer-copyright,
.footer-nav,
.footer-nav-h {
    display: none !important;
}

/* ============================================
   Mobile Navigation - Custom FAB Toggle
   ============================================ */

/* Hide Lagom's original toggle on mobile - we use our own FAB */
@media (max-width: 991px) {
    .app-nav-toggle.navbar-toggle {
        display: none !important;
    }
}

/* ============================================
   Mobile Top Bar - shadcn inspired
   ============================================ */
.x99-mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--glass-tint);
    border-bottom: 1px solid var(--c-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    z-index: 1050;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .x99-mobile-topbar {
        display: flex !important;
    }
}

.x99-mobile-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.x99-mobile-logo img {
    height: 26px;
    width: auto;
    opacity: 0.95;
}

/* Right-side cluster: [Login (logged-out)] [theme-toggle floats here] [Hamburger] */
.x99-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Match theme-toggle mobile size (36px) e estilo "pill" curtinho;
   cores invertidas como o New Server header (danger default → accent
   no hover). Edgar 2026-04-29. */
.x99-mobile-login-link,
.x99-mobile-login-link:link,
.x99-mobile-login-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;                       /* same height as theme toggle */
    padding: 0 12px;
    border: 1px solid var(--c-danger);
    border-radius: 999px;               /* full pill, alinhada com o ícone redondo */
    background: var(--c-danger);
    color: #fff !important;             /* trava texto e arrow em branco */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease;
    /* Reserva espaço para o theme toggle flutuante (right: 60px, ~36px). */
    margin-right: 48px;
}
.x99-mobile-login-link:hover,
.x99-mobile-login-link:focus {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
}
.x99-mobile-login-link span {
    color: inherit !important;
}
.x99-mobile-login-link svg {
    width: 14px;
    height: 14px;
    color: #fff;                        /* fallback */
    stroke: currentColor;
    flex-shrink: 0;
}

/* Mobile Toggle Button - shadcn style */
.x99-mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: rgba(var(--text-rgb), 0.04) !important;
    border: 1px solid rgba(var(--text-rgb), 0.08) !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    padding: 0 !important;
}

.x99-mobile-toggle:hover,
.x99-mobile-toggle:focus {
    background: rgba(var(--text-rgb), 0.08) !important;
    border-color: rgba(var(--text-rgb), 0.12) !important;
    outline: none !important;
}

/* Hamburger bars */
.x99-mobile-toggle .bar {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: rgba(var(--text-rgb), 0.7) !important;
    border-radius: 1px !important;
    transition: all 200ms ease !important;
    transform-origin: center center !important;
}

/* Transform to X when active */
.x99-mobile-toggle.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

.x99-mobile-toggle.active .bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

.x99-mobile-toggle.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* Body class when menu is open */
body.x99-menu-open {
    overflow: hidden !important;
}

/* Mobile Overlay */
.x99-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.x99-mobile-overlay.active {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Responsive Styles */
@media (max-width: 991px) {
    /* Hide sidebar completely by default on mobile */
    .app-nav, .app-nav.app-nav-default {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        transition: transform 250ms ease, visibility 0ms 250ms !important;
        z-index: 1045 !important;
        background: var(--c-bg-elevated) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-right: 1px solid rgba(var(--text-rgb), 0.08) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Show sidebar when .open class is added */
    .app-nav.open,
    .app-nav.app-nav-default.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        transition: transform 250ms ease, visibility 0ms 0ms !important;
    }
    
    /* Ensure all content inside sidebar is visible when open */
    .app-nav.open,
    .app-nav.app-nav-default.open {
        visibility: visible !important;
        display: block !important;
    }
    
    .app-nav.open *,
    .app-nav.app-nav-default.open * {
        visibility: visible !important;
    }
    
    /* Header adjustments */
    .app-nav.open #header,
    .app-nav.open .app-nav-header,
    .app-nav #header,
    .app-nav .app-nav-header {
        padding: 16px !important;
        border-bottom: 1px solid rgba(var(--text-rgb), 0.06) !important;
        background: transparent !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide the toggle inside header - we're using FAB */
    .app-nav #header .app-nav-toggle,
    .app-nav .app-nav-header .app-nav-toggle {
        display: none !important;
    }
    
    /* Main menu - ensure visibility and proper display */
    .app-nav.open #main-menu,
    #main-menu {
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    /* Menu container */
    .app-nav.open #main-menu > .container,
    #main-menu > .container {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Make sure menu is visible */
    .app-nav.open .menu.menu-primary,
    .menu.menu-primary {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    .app-nav.open .menu.menu-primary > li,
    .menu.menu-primary > li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open .x99-menu-item,
    .app-nav.open .x99-menu-link,
    .app-nav.open .x99-submenu,
    .app-nav.open .x99-sidebar-bottom,
    .x99-menu-item,
    .x99-menu-link,
    .x99-submenu,
    .x99-sidebar-bottom {
        visibility: visible !important;
        opacity: 1 !important;
        color: rgba(var(--text-rgb), 0.6) !important;
    }
    
    /* Menu items - larger touch targets */
    .app-nav.open .x99-menu-link,
    .x99-menu-link {
        padding: 14px 16px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: rgba(var(--text-rgb), 0.6) !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        background: transparent !important;
    }
    
    .app-nav.open .x99-menu-link:hover,
    .x99-menu-link:hover {
        background: var(--c-border) !important;
        color: rgba(var(--text-rgb), 0.9) !important;
    }
    
    .app-nav.open .x99-menu-link.active,
    .x99-menu-link.active {
        background: rgba(var(--text-rgb), 0.08) !important;
        color: rgba(var(--text-rgb), 0.95) !important;
    }
    
    .app-nav.open .x99-menu-icon,
    .x99-menu-icon {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(var(--text-rgb), 0.4) !important;
    }
    
    .app-nav.open .x99-menu-icon svg,
    .x99-menu-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .app-nav.open .x99-menu-text,
    .x99-menu-text {
        flex: 1 !important;
        color: inherit !important;
    }
    
    /* Sidebar bottom section */
    .app-nav.open .x99-sidebar-bottom,
    .x99-sidebar-bottom {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px !important;
        border-top: 1px solid rgba(var(--text-rgb), 0.06) !important;
        background: transparent !important;
        margin-top: auto !important;
    }
    
    /* Submenu items */
    .x99-submenu-link {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* Bottom section */
    .x99-sidebar-bottom {
        padding: 16px !important;
        gap: 12px !important;
        margin-top: auto !important;
    }
    
    .x99-prefs-trigger {
        padding: 12px !important;
    }
    
    .x99-user-section {
        padding: 12px !important;
    }
    
    .x99-user-row {
        gap: 4px !important;
    }
    
    .x99-logout-btn {
        width: 32px !important;
    }
    
    .x99-logout-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Dropdowns - full width on mobile */
    .x99-prefs-dropdown,
    .x99-user-dropdown {
        position: fixed !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 48px) !important;
        max-width: 320px !important;
        margin: 0 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    .x99-prefs-wrapper.open .x99-prefs-dropdown,
    .x99-user-section.open .x99-user-dropdown {
        display: block !important;
    }
    
    /* Main content area - full width */
    .app-main {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    /* Main body container */
    .main-body {
        padding-top: 10px !important;
    }
    
    /* Ensure content is visible */
    .lagom-layout-left-wide .app-main,
    .lagom-layout-left .app-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .app-nav, .app-nav.app-nav-default {
        width: 100% !important;
    }
    
    .app-nav-toggle.navbar-toggle {
        bottom: 16px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
}

/* Prevent body scroll when menu is open */
.app-nav.open ~ .app-main,
body.nav-open {
    overflow: hidden !important;
}

/* Show overlay when sidebar is open */
.x99-mobile-overlay.active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================
   CRITICAL: Force Mobile Menu Visibility
   ============================================ */
@media (max-width: 991px) {
    /* Hide the sidebar header on mobile - we have the topbar */
    .app-nav.open #header,
    .app-nav.open .app-nav-header {
        display: none !important;
    }
    
    /* FORCE ALL CONTENT VISIBLE */
    .app-nav.open,
    .app-nav.open *,
    .app-nav.open .app-nav-menu,
    .app-nav.open #main-menu,
    .app-nav.open #main-menu *,
    .app-nav.open .container,
    .app-nav.open .container *,
    .app-nav.open .menu.menu-primary,
    .app-nav.open .menu.menu-primary *,
    .app-nav.open .menu.menu-primary > li,
    .app-nav.open .menu.menu-primary > li *,
    .app-nav.open li,
    .app-nav.open li *,
    .app-nav.open a,
    .app-nav.open span,
    .app-nav.open svg,
    .app-nav.open .x99-menu-item,
    .app-nav.open .x99-menu-item *,
    .app-nav.open .x99-menu-link,
    .app-nav.open .x99-menu-link *,
    .app-nav.open .x99-menu-icon,
    .app-nav.open .x99-menu-icon *,
    .app-nav.open .x99-menu-text,
    .app-nav.open .x99-sidebar-bottom,
    .app-nav.open .x99-sidebar-bottom * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open #main-menu {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    .app-nav.open #main-menu > .container {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    .app-nav.open .menu.menu-primary {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 12px !important;
        margin: 0 !important;
        list-style: none !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Force LI elements to display */
    .app-nav.open .menu.menu-primary > li,
    .app-nav.open .x99-menu-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Force A links to display properly */
    .app-nav.open .menu.menu-primary > li > a,
    .app-nav.open .x99-menu-item > a,
    .app-nav.open .x99-menu-link,
    .app-nav.open a.x99-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: rgba(var(--text-rgb), 0.7) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 150ms ease !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        overflow: visible !important;
    }
    
    .app-nav.open .x99-menu-link:hover,
    .app-nav.open .x99-menu-link:focus,
    .app-nav.open a.x99-menu-link:hover {
        background: var(--c-border) !important;
        color: rgba(var(--text-rgb), 0.95) !important;
    }
    
    .app-nav.open .x99-menu-item.active > .x99-menu-link,
    .app-nav.open .x99-menu-link.active,
    .app-nav.open li.active > a {
        background: rgba(var(--text-rgb), 0.08) !important;
        color: rgba(var(--text-rgb), 0.95) !important;
    }
    
    .app-nav.open .x99-menu-icon,
    .app-nav.open span.x99-menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        color: rgba(var(--text-rgb), 0.5) !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open .x99-menu-icon svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        stroke: currentColor !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open .x99-menu-text,
    .app-nav.open span.x99-menu-text {
        flex: 1 !important;
        color: inherit !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    .app-nav.open .x99-chevron {
        width: 14px !important;
        height: 14px !important;
        color: rgba(var(--text-rgb), 0.3) !important;
        flex-shrink: 0 !important;
        transition: transform 150ms ease !important;
    }
    
    .app-nav.open .x99-menu-item.open > .x99-menu-link .x99-chevron {
        transform: rotate(180deg) !important;
    }
    
    /* Submenu on mobile */
    .app-nav.open .x99-submenu {
        display: none !important;
        padding: 4px 0 8px 32px !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .app-nav.open .x99-menu-item.open > .x99-submenu {
        display: block !important;
    }
    
    .app-nav.open .x99-submenu-item {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .app-nav.open .x99-submenu-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 14px !important;
        border-radius: 6px !important;
        color: rgba(var(--text-rgb), 0.5) !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }
    
    .app-nav.open .x99-submenu-link:hover {
        color: rgba(var(--text-rgb), 0.9) !important;
        background: rgba(var(--text-rgb), 0.04) !important;
    }
    
    .app-nav.open .x99-submenu-item.active > .x99-submenu-link {
        color: rgba(var(--text-rgb), 0.95) !important;
    }
    
    .app-nav.open .x99-submenu-dot {
        width: 4px !important;
        height: 4px !important;
        border-radius: 50% !important;
        background: currentColor !important;
        opacity: 0.5 !important;
    }
    
    /* Sidebar bottom on mobile */
    .app-nav.open .x99-sidebar-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 16px !important;
        border-top: 1px solid rgba(var(--text-rgb), 0.06) !important;
        margin-top: auto !important;
        background: transparent !important;
    }
    
    .app-nav.open .x99-prefs-wrapper,
    .app-nav.open .x99-user-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open .x99-prefs-trigger,
    .app-nav.open .x99-user-trigger {
        display: flex !important;
        align-items: center !important;
        padding: 12px !important;
        border-radius: 8px !important;
        background: rgba(var(--text-rgb), 0.02) !important;
        border: 1px solid rgba(var(--text-rgb), 0.04) !important;
        color: rgba(var(--text-rgb), 0.6) !important;
        cursor: pointer !important;
        width: 100% !important;
    }
    
    .app-nav.open .x99-support-btn {
        width: 100% !important;
        padding: 14px 16px !important;
    }
    
    .app-nav.open .x99-user-avatar {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        background: rgba(var(--text-rgb), 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: rgba(var(--text-rgb), 0.7) !important;
        flex-shrink: 0 !important;
    }
    
    .app-nav.open .x99-user-info {
        flex: 1 !important;
        margin-left: 10px !important;
        min-width: 0 !important;
    }
    
    .app-nav.open .x99-user-name {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(var(--text-rgb), 0.9) !important;
        display: block !important;
    }
    
    .app-nav.open .x99-user-company {
        font-size: 11px !important;
        color: rgba(var(--text-rgb), 0.4) !important;
        display: block !important;
    }
    
    .app-nav.open .x99-user-email {
        font-size: 11px !important;
        color: rgba(var(--text-rgb), 0.4) !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   FINAL OVERRIDE - Ensure mobile menu visibility
   ============================================ */
@media screen and (max-width: 991px) {
    /* FORCE: Hide the header - we have topbar */
    .app-nav.open #header,
    .app-nav.open .app-nav-header,
    .app-nav.open > #header,
    .app-nav.open > .app-nav-header,
    #header,
    .app-nav-header {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    /* FORCE: Main menu full height */
    .app-nav.open #main-menu,
    .app-nav.open .app-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Container */
    .app-nav.open #main-menu > .container,
    .app-nav.open .app-nav-menu > .container {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Primary menu UL */
    .app-nav.open ul.menu.menu-primary,
    .app-nav.open .menu.menu-primary {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 16px !important;
        margin: 0 !important;
        list-style: none !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Menu items LI */
    .app-nav.open ul.menu.menu-primary > li,
    .app-nav.open .menu.menu-primary > li,
    .app-nav.open li.x99-menu-item {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        overflow: visible !important;
    }
    
    /* FORCE: Links A inside menu */
    .app-nav.open ul.menu.menu-primary > li > a,
    .app-nav.open .menu.menu-primary > li > a,
    .app-nav.open li.x99-menu-item > a,
    .app-nav.open a.x99-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background: rgba(var(--text-rgb), 0.02) !important;
        border: 1px solid rgba(var(--text-rgb), 0.04) !important;
        color: rgba(var(--text-rgb), 0.7) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
    
    .app-nav.open ul.menu.menu-primary > li > a:hover,
    .app-nav.open a.x99-menu-link:hover {
        background: var(--c-border) !important;
        border-color: rgba(var(--text-rgb), 0.08) !important;
        color: rgba(var(--text-rgb), 0.95) !important;
    }
    
    /* FORCE: Icon spans */
    .app-nav.open span.x99-menu-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex-shrink: 0 !important;
        color: rgba(var(--text-rgb), 0.5) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .app-nav.open span.x99-menu-icon svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        stroke: currentColor !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Text spans */
    .app-nav.open span.x99-menu-text {
        display: block !important;
        flex: 1 1 auto !important;
        color: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Chevron */
    .app-nav.open svg.x99-chevron {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
        color: rgba(var(--text-rgb), 0.3) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* FORCE: Sidebar bottom */
    .app-nav.open .x99-sidebar-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
        margin-top: auto !important;
        border-top: 1px solid rgba(var(--text-rgb), 0.06) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Se o menu injetado cobrir a nav original, esconde os elementos
       originais pra evitar "fantasma" atrás do painel. */
    .app-nav.open #x99-injected-menu ~ #header,
    .app-nav.open:has(#x99-injected-menu) #main-menu,
    .app-nav.open:has(#x99-injected-menu) .app-nav-menu {
        visibility: hidden !important;
    }
}

/* ============================================================================
   X99 Mobile Menu v2 (.x99-mm) — consome tokens, suporta dark + light
   Edgar 2026-04-29. Substitui o legado .app-nav.open > … inline-style.
   ============================================================================ */
@media (max-width: 991px) {
    .x99-mm {
        position: absolute;
        top: 56px;              /* altura do topbar mobile */
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        padding: 16px;
        background: var(--c-bg-elevated);
        color: var(--c-text-primary);
        z-index: 999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .x99-mm-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* ---- Items ---- */
    .x99-mm-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        color: var(--c-text-secondary);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    }
    .x99-mm-item:hover,
    .x99-mm-item:focus {
        background: var(--c-surface-hover);
        border-color: var(--c-border-strong);
        color: var(--c-text-primary);
        text-decoration: none;
        outline: none;
    }
    .x99-mm-item.is-active {
        background: var(--c-accent-soft);
        border-color: rgba(var(--accent-rgb), 0.35);
        color: var(--c-accent);
    }

    .x99-mm-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        color: var(--c-text-muted);
    }
    .x99-mm-ico svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }
    .x99-mm-item:hover .x99-mm-ico,
    .x99-mm-item:focus .x99-mm-ico,
    .x99-mm-item.is-active .x99-mm-ico {
        color: currentColor;
    }
    .x99-mm-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .x99-mm-chevron {
        width: 14px;
        height: 14px;
        color: var(--c-text-muted);
        flex-shrink: 0;
        transition: transform 150ms ease;
    }
    .x99-mm-item--toggle[aria-expanded="true"] .x99-mm-chevron {
        transform: rotate(180deg);
    }

    /* ---- Group + submenu ---- */
    .x99-mm-group {
        display: flex;
        flex-direction: column;
    }
    .x99-mm-sub {
        display: none;
        padding: 4px 0 8px 20px;
        margin-top: 2px;
        flex-direction: column;
        gap: 2px;
    }
    .x99-mm-group[data-open="true"] .x99-mm-sub {
        display: flex;
    }
    .x99-mm-sub-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 8px;
        color: var(--c-text-secondary);
        font-size: 13px;
        text-decoration: none;
        transition: background 150ms ease, color 150ms ease;
    }
    .x99-mm-sub-item:hover,
    .x99-mm-sub-item:focus {
        background: var(--c-surface-hover);
        color: var(--c-text-primary);
        text-decoration: none;
        outline: none;
    }
    .x99-mm-sub-item.is-active {
        background: var(--c-accent-soft);
        color: var(--c-accent);
    }
    .x99-mm-sub-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.5;
        flex-shrink: 0;
    }

    /* ---- Footer (prefs + user) ---- */
    .x99-mm-foot {
        padding-top: 16px;
        margin-top: auto;
        border-top: 1px solid var(--c-border);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .x99-mm-prefs,
    .x99-mm-user {
        position: relative;
    }

    .x99-mm-prefs-trigger,
    .x99-mm-user-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 10px;
        color: var(--c-text-secondary);
        font-size: 13px;
        cursor: pointer;
        text-align: left;
        transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    }
    .x99-mm-prefs-trigger:hover,
    .x99-mm-prefs-trigger:focus,
    .x99-mm-user-trigger:hover,
    .x99-mm-user-trigger:focus {
        background: var(--c-surface-hover);
        border-color: var(--c-border-strong);
        color: var(--c-text-primary);
        outline: none;
    }
    .x99-mm-prefs-trigger[aria-expanded="true"] .x99-mm-chevron,
    .x99-mm-user-trigger[aria-expanded="true"] .x99-mm-chevron {
        transform: rotate(180deg);
    }

    .x99-mm-flag {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .x99-mm-flag-ph {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--c-surface-hover);
        flex-shrink: 0;
    }
    .x99-mm-prefs-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .x99-mm-prefs-menu,
    .x99-mm-user-menu {
        display: none;
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        background: var(--c-bg-elevated);
        border: 1px solid var(--c-border-strong);
        border-radius: 10px;
        padding: 6px;
        z-index: 100;
        box-shadow: var(--sh-modal);
    }
    .x99-mm-prefs[data-open="true"] .x99-mm-prefs-menu,
    .x99-mm-user[data-open="true"] .x99-mm-user-menu {
        display: block;
    }

    .x99-mm-prefs-item,
    .x99-mm-user-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        color: var(--c-text-secondary);
        font-size: 13px;
        text-decoration: none;
        transition: background 150ms ease, color 150ms ease;
    }
    .x99-mm-prefs-item:hover,
    .x99-mm-user-item:hover {
        background: var(--c-surface-hover);
        color: var(--c-text-primary);
        text-decoration: none;
    }
    .x99-mm-prefs-item.is-active {
        background: var(--c-accent-soft);
        color: var(--c-accent);
    }
    .x99-mm-prefs-item-label {
        flex: 1;
    }

    .x99-mm-user-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .x99-mm-user-divider {
        height: 1px;
        background: var(--c-border);
        margin: 6px 0;
    }
    .x99-mm-user-item--danger {
        color: var(--c-danger);
    }
    .x99-mm-user-item--danger:hover {
        background: var(--c-danger-soft);
        color: var(--c-danger);
    }

    .x99-mm-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--c-surface-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--c-text-secondary);
        flex-shrink: 0;
    }
    .x99-mm-user-info {
        flex: 1;
        min-width: 0;
    }
    .x99-mm-user-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--c-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .x99-mm-user-meta {
        font-size: 11px;
        color: var(--c-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .x99-mm-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 20px;
        background: var(--c-danger);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
        transition: background 150ms ease;
    }
    .x99-mm-login:hover {
        background: var(--c-accent);
        color: #fff;
        text-decoration: none;
    }
    .x99-mm-login svg {
        width: 18px;
        height: 18px;
    }
}


/* ============================================================================
   x99-footer.css
   ============================================================================ */
/* ─── X99 Custom Footer ─── */

.main-footer {
    display: none !important;
}

.x99-footer {
    border-top: 1px solid var(--c-border);
    background: var(--glass-tint);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.x99-footer-inner {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    position: relative;
}
.x99-footer-copy {
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(var(--text-rgb), 0.22);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.x99-footer-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(var(--text-rgb), 0.22);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
#x99MadeIn {
    cursor: default;
}

/* ============================================================================
   x99-utilities.css — WS1.9: CSS-only tooltip + modal (substitui Bootstrap/jQuery)
   ============================================================================ */

/* Tooltip CSS-only — substitui $('[data-toggle="tooltip"]').tooltip() */
.x99-tooltip {
    position: relative;
}
.x99-tooltip[data-title]::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--c-bg-elevated);
    color: var(--c-text-primary);
    border: 1px solid var(--c-border-strong);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 9999;
    box-shadow: var(--sh-card, 0 4px 12px rgba(0,0,0,0.15));
}
.x99-tooltip[data-title]:hover::after,
.x99-tooltip[data-title]:focus::after,
.x99-tooltip[data-title]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.x99-tooltip--bottom[data-title]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.x99-tooltip--bottom[data-title]:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* Modal CSS-only baseado em HTML5 <dialog> (substitui Bootstrap modal) */
.x99-modal {
    border: none;
    padding: 0;
    background: var(--c-bg-elevated);
    color: var(--c-text-primary);
    border-radius: 12px;
    max-width: 560px;
    width: calc(100vw - 32px);
    box-shadow: var(--sh-modal, 0 12px 40px rgba(0,0,0,0.25));
}
.x99-modal::backdrop {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}


/* ============================================================================
   x99-icons.css — WS1.9: substitui FontAwesome (-156KB)
   55 ícones Lucide-style como CSS mask. Usar com <i class="x99-icon x99-icon--NOME">
   Suporta color: currentColor via background-color.
   ============================================================================ */

.x99-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.x99-icon--arrow-down { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><polyline points='19 12 12 19 5 12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><polyline points='19 12 12 19 5 12'/></svg>"); }
.x99-icon--arrow-up { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='19' x2='12' y2='5'/><polyline points='5 12 12 5 19 12'/></svg>"); }
.x99-icon--ban { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'/></svg>"); }
.x99-icon--bolt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>"); }
.x99-icon--calendar-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
.x99-icon--calendar-check { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><path d='M9 15l2 2 4-4'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><path d='M9 15l2 2 4-4'/></svg>"); }
.x99-icon--chart-bar { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>"); }
.x99-icon--chart-line { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>"); }
.x99-icon--check { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }
.x99-icon--check-circle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"); }
.x99-icon--chevron-right { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>"); }
.x99-icon--circle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/></svg>"); }
.x99-icon--clone { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3H4a2 2 0 0 0-2 2v12'/><path d='M22 7H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3H4a2 2 0 0 0-2 2v12'/><path d='M22 7H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>"); }
.x99-icon--cloud { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/></svg>"); }
.x99-icon--cog { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); }
.x99-icon--compact-disc { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='3'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='3'/></svg>"); }
.x99-icon--desktop { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2' ry='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2' ry='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>"); }
.x99-icon--download { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>"); }
.x99-icon--eraser { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20H7L3 16a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4L13 20'/><line x1='18' y1='12' x2='12' y2='6'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20H7L3 16a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4L13 20'/><line x1='18' y1='12' x2='12' y2='6'/></svg>"); }
.x99-icon--exchange-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>"); }
.x99-icon--exclamation-circle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>"); }
.x99-icon--exclamation-triangle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"); }
.x99-icon--external-link-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>"); }
.x99-icon--eye { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.x99-icon--file-invoice-dollar { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='12' y1='18' x2='12' y2='12'/><path d='M9 14h4a1.5 1.5 0 0 1 0 3h-4'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='12' y1='18' x2='12' y2='12'/><path d='M9 14h4a1.5 1.5 0 0 1 0 3h-4'/></svg>"); }
.x99-icon--globe-americas { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); }
.x99-icon--handshake { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13l5-5 5 5'/><path d='M8 8h8l4 4-8 8-5-5'/><path d='M12 4l4 4'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13l5-5 5 5'/><path d='M8 8h8l4 4-8 8-5-5'/><path d='M12 4l4 4'/></svg>"); }
.x99-icon--hashtag { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='9' x2='20' y2='9'/><line x1='4' y1='15' x2='20' y2='15'/><line x1='10' y1='3' x2='8' y2='21'/><line x1='16' y1='3' x2='14' y2='21'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='9' x2='20' y2='9'/><line x1='4' y1='15' x2='20' y2='15'/><line x1='10' y1='3' x2='8' y2='21'/><line x1='16' y1='3' x2='14' y2='21'/></svg>"); }
.x99-icon--hdd { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='13' width='20' height='8' rx='2' ry='2'/><line x1='6' y1='17' x2='6.01' y2='17'/><line x1='10' y1='17' x2='10.01' y2='17'/><path d='M6 3h12l4 10H2L6 3z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='13' width='20' height='8' rx='2' ry='2'/><line x1='6' y1='17' x2='6.01' y2='17'/><line x1='10' y1='17' x2='10.01' y2='17'/><path d='M6 3h12l4 10H2L6 3z'/></svg>"); }
.x99-icon--headset { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-6a9 9 0 0 1 18 0v6'/><path d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zm-18 0a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-6a9 9 0 0 1 18 0v6'/><path d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zm-18 0a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/></svg>"); }
.x99-icon--infinity { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18.4 4A6 6 0 0 0 12 12a6 6 0 0 1-6.4 8 6 6 0 0 1 0-12A6 6 0 0 1 12 12a6 6 0 0 0 6.4-8 6 6 0 0 1 0 12z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18.4 4A6 6 0 0 0 12 12a6 6 0 0 1-6.4 8 6 6 0 0 1 0-12A6 6 0 0 1 12 12a6 6 0 0 0 6.4-8 6 6 0 0 1 0 12z'/></svg>"); }
.x99-icon--info-circle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>"); }
.x99-icon--key { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>"); }
.x99-icon--life-ring { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='4'/><line x1='4.93' y1='4.93' x2='9.17' y2='9.17'/><line x1='14.83' y1='14.83' x2='19.07' y2='19.07'/><line x1='14.83' y1='9.17' x2='19.07' y2='4.93'/><line x1='4.93' y1='19.07' x2='9.17' y2='14.83'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='4'/><line x1='4.93' y1='4.93' x2='9.17' y2='9.17'/><line x1='14.83' y1='14.83' x2='19.07' y2='19.07'/><line x1='14.83' y1='9.17' x2='19.07' y2='4.93'/><line x1='4.93' y1='19.07' x2='9.17' y2='14.83'/></svg>"); }
.x99-icon--memory { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='10' rx='1'/><line x1='6' y1='12' x2='6' y2='14'/><line x1='10' y1='12' x2='10' y2='14'/><line x1='14' y1='12' x2='14' y2='14'/><line x1='18' y1='12' x2='18' y2='14'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='10' rx='1'/><line x1='6' y1='12' x2='6' y2='14'/><line x1='10' y1='12' x2='10' y2='14'/><line x1='14' y1='12' x2='14' y2='14'/><line x1='18' y1='12' x2='18' y2='14'/></svg>"); }
.x99-icon--microchip { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2' ry='2'/><rect x='9' y='9' width='6' height='6'/><line x1='9' y1='2' x2='9' y2='4'/><line x1='15' y1='2' x2='15' y2='4'/><line x1='9' y1='20' x2='9' y2='22'/><line x1='15' y1='20' x2='15' y2='22'/><line x1='20' y1='9' x2='22' y2='9'/><line x1='20' y1='14' x2='22' y2='14'/><line x1='2' y1='9' x2='4' y2='9'/><line x1='2' y1='14' x2='4' y2='14'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2' ry='2'/><rect x='9' y='9' width='6' height='6'/><line x1='9' y1='2' x2='9' y2='4'/><line x1='15' y1='2' x2='15' y2='4'/><line x1='9' y1='20' x2='9' y2='22'/><line x1='15' y1='20' x2='15' y2='22'/><line x1='20' y1='9' x2='22' y2='9'/><line x1='20' y1='14' x2='22' y2='14'/><line x1='2' y1='9' x2='4' y2='9'/><line x1='2' y1='14' x2='4' y2='14'/></svg>"); }
.x99-icon--network-wired { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='16' y='16' width='6' height='6' rx='1'/><path d='M5 16v-4h14v4'/><line x1='12' y1='8' x2='12' y2='12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='16' y='16' width='6' height='6' rx='1'/><path d='M5 16v-4h14v4'/><line x1='12' y1='8' x2='12' y2='12'/></svg>"); }
.x99-icon--paste { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/></svg>"); }
.x99-icon--pencil-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>"); }
.x99-icon--percentage { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>"); }
.x99-icon--plug { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); }
.x99-icon--plus { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>"); }
.x99-icon--power-off { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18.36 6.64a9 9 0 1 1-12.73 0'/><line x1='12' y1='2' x2='12' y2='12'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18.36 6.64a9 9 0 1 1-12.73 0'/><line x1='12' y1='2' x2='12' y2='12'/></svg>"); }
.x99-icon--redo { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>"); }
.x99-icon--server { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2' ry='2'/><rect x='2' y='14' width='20' height='8' rx='2' ry='2'/><line x1='6' y1='6' x2='6.01' y2='6'/><line x1='6' y1='18' x2='6.01' y2='18'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2' ry='2'/><rect x='2' y='14' width='20' height='8' rx='2' ry='2'/><line x1='6' y1='6' x2='6.01' y2='6'/><line x1='6' y1='18' x2='6.01' y2='18'/></svg>"); }
.x99-icon--shield-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"); }
.x99-icon--stop { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='12' height='12' rx='1'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='12' height='12' rx='1'/></svg>"); }
.x99-icon--stop-circle { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><rect x='9' y='9' width='6' height='6'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><rect x='9' y='9' width='6' height='6'/></svg>"); }
.x99-icon--sync-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>"); }
.x99-icon--tachometer-alt { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/><polyline points='12 6 12 12 16 14'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.x99-icon--tag { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>"); }
.x99-icon--terminal { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 17 10 11 4 5'/><line x1='12' y1='19' x2='20' y2='19'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 17 10 11 4 5'/><line x1='12' y1='19' x2='20' y2='19'/></svg>"); }
.x99-icon--th-large { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>"); }
.x99-icon--times { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>"); }
.x99-icon--trash { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>"); }