/**
 * Estoqfy — botões “glass” no tema classic: translúcidos, sem backdrop-filter nem sombras externas.
 * Tema completo opt-in: ?ui=glass + liquid-glass.css
 */

html:not([data-ui="liquid-glass"]) {
  --lg-btn-radius-pill: 999px;
  --lg-btn-glass-border: 0 0% 100% / 0.2;
  --lg-btn-glass-fill: 0 0% 100% / 0.1;
  --lg-btn-glass-fill-hover: 0 0% 100% / 0.16;
  --lg-system-blue: 211 100% 50%;
  --lg-system-blue-hover: 211 100% 56%;
}

html:not([data-ui="liquid-glass"]) .btn {
  border-radius: var(--lg-btn-radius-pill);
  font-weight: 590;
  letter-spacing: -0.012em;
  box-shadow: none;
  filter: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

/* ── Secundário: vidro fosco (só cor + borda) ── */
html:not([data-ui="liquid-glass"]) .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf) {
  color: hsl(var(--text));
  border: 1px solid hsl(var(--lg-btn-glass-border));
  background: hsl(var(--lg-btn-glass-fill));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not([data-ui="liquid-glass"])[data-theme="light"]
  .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf) {
  color: hsl(220 12% 28%);
  background: hsl(0 0% 100% / 0.55);
  border-color: hsl(0 0% 100% / 0.65);
  font-weight: 500;
  letter-spacing: 0.01em;
}

html:not([data-ui="liquid-glass"]) .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf):hover {
  background: hsl(var(--lg-btn-glass-fill-hover));
  border-color: hsl(0 0% 100% / 0.28);
}

html:not([data-ui="liquid-glass"])[data-theme="light"]
  .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf):hover {
  background: hsl(0 0% 100% / 0.72);
  border-color: hsl(215 12% 78%);
}

html:not([data-ui="liquid-glass"]) .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf):active {
  background: hsl(0 0% 100% / 0.08);
  border-color: hsl(0 0% 100% / 0.14);
}

html:not([data-ui="liquid-glass"])[data-theme="light"]
  .btn:not(.btnPrimary):not(.btnDanger):not(.btnExcel):not(.btnPdf):active {
  background: hsl(0 0% 100% / 0.62);
}

/* ── Variantes: gradiente semitransparente, sem sombra ── */
html:not([data-ui="liquid-glass"]) .btnPrimary {
  color: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 100% / 0.35);
  background:
    linear-gradient(
      180deg,
      hsl(var(--lg-system-blue-hover) / 0.85) 0%,
      hsl(var(--lg-system-blue) / 0.75) 100%
    );
}

html:not([data-ui="liquid-glass"]) .btnPrimary:hover {
  background:
    linear-gradient(
      180deg,
      hsl(var(--lg-system-blue-hover) / 0.92) 0%,
      hsl(var(--lg-system-blue) / 0.82) 100%
    );
  border-color: hsl(0 0% 100% / 0.42);
}

html:not([data-ui="liquid-glass"]) .btnDanger {
  color: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 100% / 0.28);
  background: linear-gradient(180deg, hsl(0 72% 54% / 0.82), hsl(0 68% 42% / 0.78));
}

html:not([data-ui="liquid-glass"]) .btnDanger:hover {
  background: linear-gradient(180deg, hsl(0 72% 58% / 0.88), hsl(0 68% 46% / 0.84));
}

html:not([data-ui="liquid-glass"]) .btnExcel {
  color: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 100% / 0.28);
  background: linear-gradient(180deg, hsl(142 55% 42% / 0.82), hsl(142 50% 32% / 0.78));
}

html:not([data-ui="liquid-glass"]) .btnExcel:hover {
  background: linear-gradient(180deg, hsl(142 55% 46% / 0.88), hsl(142 50% 36% / 0.84));
}

html:not([data-ui="liquid-glass"]) .btnPdf {
  color: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 100% / 0.28);
  background: linear-gradient(180deg, hsl(0 72% 52% / 0.82), hsl(0 65% 40% / 0.78));
}

html:not([data-ui="liquid-glass"]) .btnPdf:hover {
  background: linear-gradient(180deg, hsl(0 72% 56% / 0.88), hsl(0 65% 44% / 0.84));
}

html:not([data-ui="liquid-glass"]) .btnPrimary:active,
html:not([data-ui="liquid-glass"]) .btnDanger:active,
html:not([data-ui="liquid-glass"]) .btnExcel:active,
html:not([data-ui="liquid-glass"]) .btnPdf:active {
  opacity: 0.92;
}

html:not([data-ui="liquid-glass"]) .btnSm {
  border-radius: var(--lg-btn-radius-pill);
}

html:not([data-ui="liquid-glass"]) table tbody td .btn,
html:not([data-ui="liquid-glass"]) .listSearchTable tbody td .btn,
html:not([data-ui="liquid-glass"]) .purchaseItemsTable tbody td .btn,
html:not([data-ui="liquid-glass"]) .saleItemsTable tbody td .btn {
  min-height: 0;
  height: auto;
  border-radius: 8px;
}

html:not([data-ui="liquid-glass"]) table tbody td .btnSm,
html:not([data-ui="liquid-glass"]) .listSearchTable tbody td .btnSm,
html:not([data-ui="liquid-glass"]) .purchaseItemsTable tbody td .btnSm,
html:not([data-ui="liquid-glass"]) .saleItemsTable tbody td .btnSm {
  border-radius: 7px;
}

html:not([data-ui="liquid-glass"]) .btn:hover,
html:not([data-ui="liquid-glass"]) .btn:active,
html:not([data-ui="liquid-glass"]) .btnPrimary:hover,
html:not([data-ui="liquid-glass"]) .btnPrimary:active,
html:not([data-ui="liquid-glass"]) .btnDanger:hover,
html:not([data-ui="liquid-glass"]) .btnDanger:active,
html:not([data-ui="liquid-glass"]) .btnExcel:hover,
html:not([data-ui="liquid-glass"]) .btnPdf:hover {
  box-shadow: none;
  filter: none;
  transform: none;
}

html:not([data-ui="liquid-glass"]) .btn:disabled,
html:not([data-ui="liquid-glass"]) .btnPrimary:disabled,
html:not([data-ui="liquid-glass"]) .btnDanger:disabled {
  opacity: 0.5;
  transform: none;
}