/* ==========================================================================
 * 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-elevated) !important;
  color: var(--c-text-primary) !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 {
  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;
}

:root[data-theme="light"] .x99-card:hover,
:root[data-theme="light"] .x99-dashboard-card:hover,
:root[data-theme="light"] .x99-bm-card:hover,
:root[data-theme="light"] .x99-vps-card:hover,
:root[data-theme="light"] .x99-order-bmcard:hover,
:root[data-theme="light"] .x99-order-splash-card:hover {
  box-shadow: var(--sh-card-hover) !important;
  border-color: var(--c-border-strong) !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);
}

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

/* ==========================================================================
 * 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) !important;
  background-color: var(--c-border);
}

/* ==========================================================================
 * 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
 * ========================================================================== */
:root[data-theme="light"] .app-footer,
:root[data-theme="light"] footer {
  background-color: var(--c-bg-elevated) !important;
  border-top-color: var(--c-border) !important;
  color: var(--c-text-muted);
}