/* ==========================================================================
 * 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;
  }
}