/*
 * 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 grid system (WS1.8.2) — substitui Bootstrap row-eq-height + col-md-N
 * Usar em estruturas BM/VPS detail (sidebar fixa + main content).
 * ========================================================================== */

.x99-grid-page {
  display: grid;
  gap: var(--sp-4, 16px);
  grid-template-columns: 1fr;          /* mobile: stack */
  align-items: stretch;
}
@media (min-width: 768px) {
  .x99-grid-page {
    grid-template-columns: 3fr 1fr;    /* desktop: 75% main + 25% sidebar */
  }
  .x99-grid-page__main {
    min-width: 0;                       /* fix overflow em flex/grid children */
  }
  .x99-grid-page__side {
    min-width: 0;
  }
  .x99-grid-page--reverse {
    grid-template-columns: 1fr 3fr;     /* sidebar à esquerda */
  }
}
@media (min-width: 992px) {
  .x99-grid-page {
    grid-template-columns: 4fr 1fr;    /* col-md-9 + col-md-3 equivalente */
  }
}

/* Bootstrap compat shim (enquanto markup ainda usa row-eq-height/col-md-9) */
.row-eq-height {
  display: grid;
  gap: var(--sp-4, 16px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .row-eq-height {
    grid-template-columns: 4fr 1fr;
  }
  .row-eq-height > .col-md-9 { min-width: 0; }
  .row-eq-height > .col-md-3 { min-width: 0; }
}

/* ==========================================================================
 * x99 modal (HTML5 <dialog>) — WS1.8.5
 * Substitui Bootstrap modal #modalAjax pra novo código x99.
 * Uso:
 *   <dialog class="x99-modal" id="myModal">
 *     <header class="x99-modal__header">
 *       <h2 class="x99-modal__title">Título</h2>
 *       <button class="x99-modal__close" formmethod="dialog">×</button>
 *     </header>
 *     <div class="x99-modal__body">...</div>
 *     <footer class="x99-modal__footer">...</footer>
 *   </dialog>
 *   document.getElementById('myModal').showModal();
 * ========================================================================== */

.x99-modal {
  border: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
  color: var(--c-text-primary);
  border-radius: var(--r-md, 12px);
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
  width: 480px;
  box-shadow: var(--sh-modal, 0 12px 40px rgba(0, 0, 0, 0.25));
  font-family: var(--font-ui);
}
.x99-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.x99-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4, 16px);
  border-bottom: 1px solid var(--c-border);
}
.x99-modal__title {
  margin: 0;
  font-size: var(--fs-md, 16px);
  font-weight: 600;
  color: var(--c-text-primary);
}
.x99-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text-secondary);
  padding: 4px;
  border-radius: var(--r-sm, 6px);
  transition: background var(--dur-base) var(--ease-out);
}
.x99-modal__close:hover {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}
.x99-modal__body {
  padding: var(--sp-4, 16px);
  overflow-y: auto;
}
.x99-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2, 8px);
  padding: var(--sp-4, 16px);
  border-top: 1px solid var(--c-border);
}

/* ==========================================================================
 * x99 alerts — WS1.8.5
 * Standalone substitution pra Lagom alerts ($lagomClientAlerts).
 * 4 variants: info (default) / success / warning / danger.
 * ========================================================================== */

.x99-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm, 6px);
  color: var(--c-text-primary);
  font-size: var(--fs-sm, 13px);
}
.x99-alert--info     { border-left-color: var(--c-info, var(--c-accent)); }
.x99-alert--success  { border-left-color: var(--c-success); }
.x99-alert--warning  { border-left-color: var(--c-warning); }
.x99-alert--danger   { border-left-color: var(--c-danger); }
.x99-alert__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}
.x99-alert__body {
  flex: 1;
  line-height: 1.5;
}
.x99-alert__title {
  font-weight: 600;
  margin-bottom: 2px;
}
.x99-alert__close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text-muted);
  padding: 0 4px;
}
.x99-alert__close:hover { color: var(--c-text-primary); }