/* =========================================================
   ALFA STORE — Theme System (Robusto)
   - Dark é o padrão (:root)
   - Light via html[data-theme="light"]
   - Tudo via CSS variables para evitar sobreposição
   ========================================================= */

:root{
  /* Brand */
  --brand: #6f42c1;
  --brand-2: #5a33ad;
  --brand-soft: rgba(111, 66, 193, .18);
  --glow: rgba(111, 66, 193, .45);

  /* Dark (padrão) */
  --bg: #0b0b0f;
  --bg-2: #07070c;
  --card: rgba(21, 21, 29, 0.78);
  --card-solid: rgba(21, 21, 29, 0.92);
  --text: #f8fafc;
  --muted: rgba(248,250,252,.72);
  --border: rgba(248,250,252,.12);

  /* Inputs */
  --input-bg: rgba(255,255,255,.06);
  --input-text: var(--text);
  --input-border: rgba(248,250,252,.14);
  --placeholder: rgba(248,250,252,.55);

  /* Table */
  --thead-bg: rgba(255,255,255,.06);
  --row-hover: rgba(111, 66, 193, .14);

  /* Shadow */
  --shadow: 0 18px 40px rgba(0,0,0,.45);
}

html[data-theme="light"]{
  /* Light */
  --bg: #f8f9fa;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-solid: #ffffff;
  --text: #212529;
  --muted: rgba(33,37,41,.72);
  --border: rgba(33,37,41,.14);
  --header-bg: rgba(111, 66, 193, 0.75); /* roxo escuro translúcido */
  --input-bg: #ffffff;
  --input-text: var(--text);
  --input-border: rgba(33,37,41,.18);
  --placeholder: rgba(33,37,41,.48);

  --thead-bg: rgba(33,37,41,.05);
  --row-hover: rgba(111, 66, 193, .10);

  --shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* Base */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  background: var(--header-bg, var(--card));
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-2); }

/* ===== Video Background (index) ===== */
.video-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}
.video-bg video{ width: 100%; height: 100%; object-fit: cover; }
.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}
.navbar, .container{ position: relative; z-index: 2; }

/* ===== Navbar ===== */
.navbar-glass,
.navbar-glass-dark,
.navbar-theme{
  background: var(--header-bg, var(--card));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar .navbar-brand{ color: var(--text) !important; }
.navbar .nav-link{ color: var(--muted) !important; }
.navbar .nav-link:hover{ color: var(--text) !important; }
html[data-theme="light"] .navbar .navbar-brand,
html[data-theme="light"] .navbar .nav-link{
  color: #fff !important;
}
html[data-theme="light"] .navbar .nav-link:hover{
  color: #f8f9fa !important;
}
html[data-theme="light"] .navbar-glass,
html[data-theme="light"] .navbar-glass-dark,
html[data-theme="light"] .navbar-theme{
  border-bottom: 1px solid rgba(255,255,255,.35);
}

/* ===== Cards / Panels ===== */
.card, .card-glass, .card-glass-soft, .panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.card-glass-soft{ background: var(--card-solid); }

/* Index — filtro e grid de produtos (alinhamento / proporção) */
.filter-card{ max-width: 920px; width: 100%; }
.product-grid{ align-items: stretch; }
.product-card-item{ height: 100%; }

/* Mantém os elementos do card proporcionais e centralizados */
.product-card-item .img-frame{ height: 220px; display:flex; align-items:center; justify-content:center; }
.product-card-item .img-frame img{ max-height: 220px; width: auto; object-fit: contain; }
.product-card-item h5{ margin: .35rem 0 .5rem; font-weight: 700; }

/* Checkboxes de sabores: melhora espaçamento e evita “desalinhado” */
.product-card-item .small-help{ color: var(--muted); }
.product-card-item label{ display:flex; gap:.5rem; align-items:center; padding:.18rem 0; }
.product-card-item input[type="checkbox"]{ accent-color: var(--brand); }

/* ===== Forms / Inputs ===== */
.form-control, .form-select, textarea{
  border-radius: 12px;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}
.form-control::placeholder, textarea::placeholder{ color: var(--placeholder) !important; }

/* Compat */
.input-dark{
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}

/* ===== Buttons ===== */
.btn-roxo, .btn-primary, .btn.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
  color:#fff !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(111,66,193,.25);
}
.btn-roxo:hover, .btn-primary:hover, .btn.btn-primary:hover{
  filter: brightness(1.05);
  color:#fff !important;
}
.btn-outline-roxo, .btn-outline-primary{
  border-radius: 999px;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
  background: transparent !important;
}
.btn-outline-roxo:hover, .btn-outline-primary:hover{
  background: var(--brand) !important;
  color:#fff !important;
}

/* Botão LOGIN */
.btn-login{
  border-radius: 999px;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .btn-login{ background: rgba(255,255,255,.85); }
.btn-login:hover{
  background: var(--brand-soft);
  border-color: rgba(111,66,193,.25);
  color: var(--text) !important;
}

/* ===== Tables ===== */
.table-theme{ background: transparent; color: var(--text); }
/* Bootstrap 5 aplica background em células via seletor :not(caption)>*>*.
   Forçamos transparência para respeitar o tema por variáveis (dark/light). */
.table-theme > :not(caption) > * > *{
  background-color: transparent;
  color: var(--text);
  box-shadow: none;
}
.table-theme tbody tr{ background-color: transparent; }
.table-theme thead th{
  background: var(--thead-bg);
  color: var(--text);
  border-color: var(--border);
}
.table-theme tbody td, .table-theme tbody th{
  color: var(--text);
  border-color: var(--border);
}
.table-theme.table-hover tbody tr:hover{ background: var(--row-hover); }

/* ===== Badges ===== */
.badge-soft{
  background: rgba(111, 66, 193, .22);
  color: #fff;
  border: 1px solid rgba(111, 66, 193, .55);
}
.badge-danger-soft{
  background: rgba(220, 53, 69, .22);
  color: #fff;
  border: 1px solid rgba(220, 53, 69, .55);
}
.badge-warn-soft{
  background: rgba(255, 193, 7, .18);
  color: #fff;
  border: 1px solid rgba(255, 193, 7, .45);
}

/* ===== Theme Toggle ===== */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
}
.theme-toggle__dot{
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  position: relative;
  outline: 1px solid var(--border);
}
.theme-toggle__dot::after{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--brand);
  box-shadow: 0 0 18px var(--glow);
  transition: transform .18s ease;
}
/* Dark default: direita */
.theme-toggle__dot::after{ transform: translateX(16px); }
/* Light: esquerda */
html[data-theme="light"] .theme-toggle__dot::after{ transform: translateX(0); }

.u-theme-toggle-fixed{ position: fixed; top: 14px; right: 14px; z-index: 9999; }

/* ===== Utilities ===== */
.u-nowrap{ white-space: nowrap; }
.u-thumb-46{
  width:46px; height:46px; object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
}
/* ===== Logs com scroll (20 linhas) ===== */
.logs-scroll{
  max-height: calc(10 * 2.2rem); /* ~10 linhas */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox */
}

/* Scrollbar (Chrome / Edge) */
.logs-scroll::-webkit-scrollbar{
  width: 8px;
}
.logs-scroll::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 8px;
}
.logs-scroll::-webkit-scrollbar-track{
  background: transparent;
}
/* ===== Navbar roxa no tema claro: botões outline legíveis ===== */
html[data-theme="light"] .navbar .btn-outline-roxo,
html[data-theme="light"] .navbar .btn-outline-primary{
  color: #fff !important;
  border-color: rgba(255,255,255,.65) !important;
}

html[data-theme="light"] .navbar .btn-outline-roxo:hover,
html[data-theme="light"] .navbar .btn-outline-primary:hover{
  background: #fff !important;
  color: var(--brand) !important;
}
/* ===== Index: cards de produtos com efeito glass no tema claro ===== */
html[data-theme="light"] .product-card-item.card,
html[data-theme="light"] .product-card-item.card-glass{
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.45);
}
/* ===== Index (tema claro): forçar glass no card e conteúdo interno ===== */
html[data-theme="light"] .product-card-item{
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.45) !important;
}

/* Se existir "body" interno herdando branco sólido */
html[data-theme="light"] .product-card-item .card-body,
html[data-theme="light"] .product-card-item .card-content,
html[data-theme="light"] .product-card-item .body,
html[data-theme="light"] .product-card-item .content{
  background: transparent !important;
}
html[data-theme="light"] .product-card-item.card,
html[data-theme="light"] .product-card-item.card-glass,
html[data-theme="light"] .product-card-item.card-solid{
  background: rgba(255,255,255,.45) !important;
  border-color: rgba(255,255,255,.45) !important;
}


/* ===== Dashboard KPIs ===== */
.container-xl{ max-width: 1200px; }
.kpi-tile{
  background: rgba(111, 66, 193, .10);
  border: 1px solid rgba(111, 66, 193, .22);
  border-radius: 14px;
  padding: 12px 14px;
}
html[data-theme="light"] .kpi-tile{
  background: rgba(111, 66, 193, .08);
  border-color: rgba(33,37,41,.14);
}
.kpi-mini{
  background: rgba(111, 66, 193, .12);
  border: 1px solid rgba(111, 66, 193, .22);
  border-radius: 14px;
  padding: 10px 12px;
}
html[data-theme="light"] .kpi-mini{
  background: rgba(111, 66, 193, .08);
  border-color: rgba(33,37,41,.14);
}

/* Dashboard charts: mantém proporção e evita ficar "estreito" */
.card canvas{ width: 100% !important; }

/* ===== Badge Esgotado — roxo padrão (index e geral) ===== */
.badge.badge-esgotado,
.badge-esgotado{
  background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border: 0 !important;
}