/* ============================================================
   Engeradios Admin Web — SaaS Premium UI
   Visual nível produto SaaS, com vermelho institucional.
   ============================================================ */

:root {
  --er-primary: #B42318;
  --er-primary-700: #912018;
  --er-primary-900: #55160F;

  --er-bg: #F8FAFC;
  --er-bg-soft: #F1F5F9;
  --er-surface: #FFFFFF;
  --er-surface-soft: #FCFCFD;

  --er-text: #0F172A;
  --er-muted: #64748B;
  --er-border: #E2E8F0;

  --er-ok: #16A34A;
  --er-warn: #D97706;
  --er-fail: #DC2626;

  --er-sidebar: #020617;
  --er-sidebar-soft: #0F172A;

  --er-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --er-shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
  --er-shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);

  --er-radius: 18px;
  --er-sidebar-width: 282px;
  --er-topbar-height: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  background: var(--er-bg) !important;
}

body {
  margin: 0 !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at top right, rgba(180, 35, 24, .12), transparent 30rem),
    linear-gradient(180deg, #FFFFFF 0%, var(--er-bg) 360px) !important;
  color: var(--er-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  line-height: 1.5 !important;
}

/* O JS premium adiciona er-prod-ready. Mantemos suporte a er-saas-ready também. */
body.er-prod-ready,
body.er-saas-ready {
  padding-left: var(--er-sidebar-width) !important;
  padding-top: var(--er-topbar-height) !important;
}

/* Esconde headers antigos azuis/inline das páginas. */
body.er-prod-ready > .container > header,
body.er-prod-ready > header:not(.er-topbar),
body.er-saas-ready > header:not(.er-topbar) {
  display: none !important;
}

/* Container antigo criado nos HTMLs */
body.er-prod-ready > .container,
body.er-saas-ready > .container {
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Conteúdo principal */
body.er-prod-ready main,
body.er-saas-ready main,
.er-main-wrap {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2vw, 30px) !important;
}

/* Sidebar premium */
.er-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--er-sidebar-width) !important;
  height: 100vh !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  color: #FFFFFF !important;
  background:
    linear-gradient(180deg, var(--er-primary-900) 0%, #111827 36%, #020617 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 18px 0 44px rgba(15, 23, 42, .28) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.er-brand {
  min-height: var(--er-topbar-height) !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.er-brand img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}

.er-brand-title strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  letter-spacing: -.015em !important;
}

.er-brand-title span {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(255,255,255,.65) !important;
  font-size: 12px !important;
}

.er-menu {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 12px !important;
}

.er-menu-section {
  margin: 18px 12px 8px !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
}

.er-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  margin: 3px 0 !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.75) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: .16s ease !important;
}

.er-menu a:hover,
.er-menu a.er-active,
.er-menu a:focus-visible {
  color: #FFFFFF !important;
  background: rgba(255,255,255,.12) !important;
  transform: translateX(2px) !important;
}

.er-sidebar-footer {
  padding: 14px 18px 18px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}

/* Topbar premium */
.er-topbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--er-sidebar-width) !important;
  right: 0 !important;
  height: var(--er-topbar-height) !important;
  z-index: 9997 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 clamp(16px, 2vw, 30px) !important;
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.er-topbar-title strong {
  display: block !important;
  color: var(--er-text) !important;
  font-size: clamp(17px, 1.4vw, 21px) !important;
  font-weight: 850 !important;
  letter-spacing: -.03em !important;
}

.er-topbar-title span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--er-muted) !important;
  font-size: 13px !important;
}

.er-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.er-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--er-border) !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--er-text) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  box-shadow: var(--er-shadow-sm) !important;
}

/* Cards */
.card,
.er-card,
section.card,
main > section {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--er-border) !important;
  border-radius: var(--er-radius) !important;
  padding: clamp(16px, 1.6vw, 22px) !important;
  margin-bottom: 18px !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.card:hover,
.er-card:hover,
main > section:hover {
  box-shadow: var(--er-shadow-md) !important;
}

.card h1,
.card h2,
.er-card h2,
main h1,
main h2 {
  color: var(--er-text) !important;
  margin-top: 0 !important;
  letter-spacing: -.03em !important;
}

/* Formulários */
label {
  display: block !important;
  margin-bottom: 6px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

input,
select,
textarea {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: #FFFFFF !important;
  color: var(--er-text) !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: var(--er-shadow-sm) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--er-primary) !important;
  box-shadow: 0 0 0 4px rgba(180,35,24,.13) !important;
}

/* Botões */
button,
.er-btn,
input[type="button"],
input[type="submit"] {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  background: var(--er-primary) !important;
  color: #FFFFFF !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(180,35,24,.18) !important;
  transition: .14s ease !important;
}

button:hover,
.er-btn:hover {
  background: var(--er-primary-700) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 32px rgba(180,35,24,.22) !important;
}

button.secundario,
button.secondary,
button.sec {
  background: #475569 !important;
  box-shadow: 0 10px 22px rgba(71,85,105,.14) !important;
}

button:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Tabelas */
table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--er-border) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: var(--er-shadow-sm) !important;
}

thead,
table tr:first-child {
  background: #F8FAFC !important;
}

th,
td {
  padding: 12px !important;
  border-bottom: 1px solid var(--er-border) !important;
  text-align: left !important;
  vertical-align: top !important;
}

th {
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}

td {
  color: var(--er-text) !important;
  font-size: 14px !important;
}

tr:hover td {
  background: #FAFAFA !important;
}

/* Badges e mensagens */
.muted {
  color: var(--er-muted) !important;
  font-size: 12px !important;
}

.empty {
  padding: 26px !important;
  text-align: center !important;
  color: var(--er-muted) !important;
  border: 1px dashed #CBD5E1 !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}

.ok,
.warn,
.fail,
.badge,
.er-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.ok {
  background: #ECFDF5 !important;
  color: var(--er-ok) !important;
}

.warn {
  background: #FFFBEB !important;
  color: var(--er-warn) !important;
}

.fail,
.erro,
.error {
  background: #FEF2F2 !important;
  color: var(--er-fail) !important;
}

/* KPIs */
.er-kpi-grid,
.dashboard-grid,
.resumo {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 16px !important;
}

.er-kpi,
.kpi {
  position: relative !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid var(--er-border) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.er-kpi::after,
.kpi::after {
  content: "" !important;
  position: absolute !important;
  top: -36px !important;
  right: -36px !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 999px !important;
  background: rgba(180,35,24,.08) !important;
}

.er-kpi-value,
.kpi strong {
  color: var(--er-primary) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;
}

/* Mobile */
.er-mobile-menu-btn {
  display: none !important;
}

@media (max-width: 1180px) {
  body.er-prod-ready,
  body.er-saas-ready {
    padding-left: 0 !important;
  }

  .er-sidebar {
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
  }

  body.er-sidebar-open .er-sidebar {
    transform: translateX(0) !important;
  }

  .er-topbar {
    left: 0 !important;
  }

  .er-mobile-menu-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 760px) {
  :root {
    --er-topbar-height: 66px;
  }

  body.er-prod-ready main,
  body.er-saas-ready main {
    padding: 14px !important;
  }

  .er-pill,
  .er-topbar-title span {
    display: none !important;
  }

  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}