/* ==========================================================
   Vem Pro Pagode — Custom styles
   Luxo moderno, responsivo e acessível (Bootstrap 5.3+)
   ========================================================== */

/* ---------- Design tokens / tema ---------- */
:root {
  /* Base escuro (app interno) */
  --vp-bg: #0f1320;
  --vp-bg-2: #12182b;
  --vp-surface: #161d31;
  --vp-surface-2: #1b233a;
  --vp-border: rgba(255,255,255,.08);
  --vp-text: #e8ecf7;
  --vp-text-muted: #b7c0d9;

  /* Acentos */
  --vp-primary: #6ea8fe;
  --vp-primary-600: #4d90fe;
  --vp-primary-700: #3b7bfd;

  --vp-success: #2ecc71;
  --vp-warning: #f7b731;
  --vp-danger:  #ff6b6b;
  --vp-info:    #64d2ff;

  /* Realces */
  --vp-shadow: 0 10px 30px rgba(0,0,0,.35);
  --vp-radius: 16px;

  /* Tabelas */
  --vp-row-hover: rgba(255,255,255,.03);

  /* Gradientes (interno) */
  --vp-grad-1: linear-gradient(135deg, #0f1320 0%, #202a44 100%);
  --vp-grad-2: radial-gradient(1200px 600px at 10% -20%, rgba(110,168,254,.18), transparent 60%),
               radial-gradient(1000px 800px at 100% 10%, rgba(46,56,80,.22), transparent 60%);

  /* Foco acessível */
  --vp-focus: 0 0 0 .2rem rgba(110,168,254,.4);

  /* ---------- Tema claro só para AUTH (login/register/forgot) ---------- */
  --auth-bg: #f6f8fc;
  --auth-surface: #ffffff;
  --auth-text: #1b2b41;
  --auth-muted: #5f6c86;
  --auth-border: rgba(0,0,0,.08);
  --auth-shadow: 0 12px 36px rgba(16,24,40,.12);
  --auth-radius: 16px;
  --auth-grad: radial-gradient(1200px 800px at 10% -10%, rgba(110,168,254,.18), transparent 60%),
               radial-gradient(800px 800px at 100% -10%, rgba(46,56,80,.08), transparent 60%),
               linear-gradient(180deg, #f9fbff 0%, #f3f6ff 100%);
}

/* ---------- Reset seguro ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  background: var(--vp-grad-1), var(--vp-grad-2), var(--vp-bg);
  color: var(--vp-text);
}
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
pre, code, .pre-wrap { white-space: pre-wrap; word-break: break-word; }

/* ---------- Acessibilidade: foco visível ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: none !important;
  box-shadow: var(--vp-focus) !important;
}

/* ==========================================================
   NAVBAR (mais respiro, logo e brand maiores)
   ========================================================== */
.navbar-custom {
  background: linear-gradient(180deg, #242c45 0%, #1c243b 100%);
  border-bottom: 1px solid var(--vp-border);
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #d4d9e3;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #d4d9e3;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.55);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  z-index: 1040;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-text { color: #fff !important; }

.navbar-custom .navbar-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; letter-spacing: .2px;
  font-size: 1.15rem;
}
.brand-logo { height: 44px; width: auto; display: inline-block; }

@media (min-width: 992px) {
  .navbar-custom .navbar-nav { align-items: center; gap: .35rem; }
  .navbar-custom .nav-link { padding: .35rem .6rem; }
  .navbar-custom .navbar-brand { font-size: 1.25rem; }
  .brand-logo { height: 48px; }
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus { color: #e6e9f2 !important; }
.navbar-custom .navbar-toggler { border-color: var(--bs-navbar-toggler-border-color) !important; box-shadow: none; }
.navbar-custom .navbar-toggler:focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
.navbar-custom .navbar-toggler-icon { background-image: var(--bs-navbar-toggler-icon-bg) !important; }

.navbar-custom .dropdown-menu {
  --bs-dropdown-bg: #1b233a;
  --bs-dropdown-color: #e5e8ef;
  --bs-dropdown-link-color: #e5e8ef;
  --bs-dropdown-link-hover-bg: #2a3450;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: var(--bs-dropdown-link-color);
  border: 1px solid var(--vp-border);
  box-shadow: var(--vp-shadow);
}
.navbar-custom .dropdown-menu .dropdown-item:hover { background-color: #2a3450; color: #fff; }
.navbar-custom .dropdown-menu .dropdown-item.active,
.navbar-custom .dropdown-menu .dropdown-item:active { background: transparent !important; }
.navbar-custom .nav-link.active,
.navbar-custom .nav-link.show,
.navbar-custom .nav-item.show > .nav-link { color: #fff !important; }

/* ==========================================================
   LAYOUT / CONTAINERS
   ========================================================== */
.container { position: relative; }
.container.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
@media (max-width: 576px) { .container.py-4 { padding-top: 1rem !important; } }

/* barra de ações rolável (import/export) */
.toolbar-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 4px;
}
.toolbar-scroll .btn { display: inline-block; }
@media (max-width: 576px) { .toolbar-scroll .btn { margin-bottom: 4px; } }

/* ==========================================================
   CARDS
   ========================================================== */
.card {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  color: var(--vp-text);
}
.card .card-title { margin-bottom: .75rem; }
.card .card-body { color: var(--vp-text); }

/* ==========================================================
   GRÁFICOS
   ========================================================== */
.chart-box {
  width: 100%; height: 340px; position: relative; border-radius: 12px; overflow: hidden;
  background: var(--vp-surface-2);
  border: 1px solid var(--vp-border);
}
.chart-box canvas { display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 576px) { .chart-box { height: 260px; } }

/* ==========================================================
   TABELAS
   ========================================================== */
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
.table {
  --bs-table-color: var(--vp-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-striped-color: var(--vp-text);
  --bs-table-hover-bg: var(--vp-row-hover);
  --bs-table-hover-color: var(--vp-text);
  border-color: var(--vp-border);
}
.table td, .table th { vertical-align: middle; border-color: var(--vp-border); }
.table tr { transition: background-color .15s ease; }
.table tr:hover { background-color: var(--vp-row-hover); }
.table td.text-end, .table th.text-end { text-align: right; }

/* Tfoot destacado (ex.: total geral) */
.table tfoot th, .table tfoot td {
  background: rgba(255,255,255,.03);
  border-top: 2px solid var(--vp-border);
}

/* Badge (estoque baixo) com melhor contraste */
.badge.bg-danger { background-color: #d0342c !important; }

/* ==========================================================
   FORMULÁRIOS
   ========================================================== */
.form-control, .form-select {
  color: var(--vp-text);
  background-color: #0f1425;
  border: 1px solid var(--vp-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vp-primary-600);
  box-shadow: var(--vp-focus);
}
input[type="date"].form-control-sm { min-width: 150px; }
label.form-label { color: var(--vp-text-muted); }

/* Filtros (dashboard) — quebra correta no mobile */
@media (max-width: 576px) {
  form.d-flex.align-items-end.gap-2 { flex-wrap: wrap; justify-content: flex-start; }
  form.d-flex.align-items-end.gap-2 > div { flex: 1 1 100%; }
  form.d-flex.align-items-end.gap-2 .d-flex {
    width: 100%; justify-content: space-between; margin-top: 6px; gap: 8px;
  }
  form.d-flex.align-items-end.gap-2 .btn { flex: 1 1 auto; }
}

/* Botões primários mais “premium” */
.btn-primary {
  background: linear-gradient(180deg, var(--vp-primary) 0%, var(--vp-primary-700) 100%);
  border: 0;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-light:focus { box-shadow: var(--vp-focus); }

/* Botão de excluir (visual consistente) */
.btn-danger {
  background: linear-gradient(180deg, #ff7b7b 0%, #ff5959 100%);
  border: 0;
}

/* ==========================================================
   IMPORT / EXPORT (UI de luxo)
   ========================================================== */
.import-hero, .export-hero {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(110,168,254,.12), rgba(46,56,80,.12));
  border: 1px dashed rgba(110,168,254,.35);
  border-radius: var(--vp-radius);
  color: var(--vp-text);
}
.import-hero .title, .export-hero .title { font-weight: 600; }
.import-hero .subtitle, .export-hero .subtitle { color: var(--vp-text-muted); }

.dropzone {
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 1.25rem;
  text-align: center;
  background: rgba(255,255,255,.03);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.5); }
.dropzone.dragover {
  border-color: var(--vp-primary); background: rgba(110,168,254,.12); transform: translateY(-1px);
}
.dropzone input[type="file"] { display: none; }
.dropzone .hint { color: var(--vp-text-muted); font-size: .95rem; }

/* Resultado de exportação / etiquetas */
.export-label {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--vp-text);
  border: 1px solid var(--vp-border);
}

/* Toast/alert bonito p/ feedback */
.toast-vp, .alert-vp {
  background: #172037; color: var(--vp-text);
  border: 1px solid var(--vp-border); box-shadow: var(--vp-shadow);
  border-radius: 12px;
}

/* ==========================================================
   MODALS
   ========================================================== */
.modal-content {
  background: var(--vp-surface);
  color: var(--vp-text);
  border: 1px solid var(--vp-border);
  border-radius: 18px;
  box-shadow: var(--vp-shadow);
}
.modal-header { border-bottom-color: var(--vp-border); }
.modal-footer { border-top-color: var(--vp-border); }

/* ==========================================================
   FOOTER (clean com versão)
   ========================================================== */
.footer {
  background: linear-gradient(135deg, #111 0%, #1b1b1b 50%, #242424 100%);
  color: #fff;
  border-top: 1px solid var(--vp-border);
}
.footer a { color: #fff; text-decoration: underline; }
.footer a:hover { opacity: .85; }
.version-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .825rem; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--vp-border);
}

/* Flutuante “voltar ao topo” */
.btn-to-top{
  position: fixed; right: 16px; bottom: 16px; z-index: 1030;
  border-radius: 999px; width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ==========================================================
   TIPOGRAFIA / UI
   ========================================================== */
.text-muted, .text-secondary { color: var(--vp-text-muted) !important; }
.display-6 { letter-spacing: .2px; }
.small, small { color: var(--vp-text-muted); }
h1,h2,h3,h4,h5,h6 { color: var(--vp-text); }

/* ==========================================================
   UTILITÁRIAS
   ========================================================== */
.rounded-2xl { border-radius: 20px !important; }
.shadow-vp { box-shadow: var(--vp-shadow) !important; }
.border-vp { border: 1px solid var(--vp-border) !important; }
.surface-2 { background: var(--vp-surface-2) !important; }

/* Loader sutil (pontos) */
@keyframes vp-dots { 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }
.loading-dots > span { animation: vp-dots 1.2s infinite; }
.loading-dots > span:nth-child(2){ animation-delay:.2s }
.loading-dots > span:nth-child(3){ animation-delay:.4s }

/* Transições suaves somente se permitido */
@media (prefers-reduced-motion: no-preference) {
  .btn, .form-control, .form-select, .card, .table tr {
    transition: all .15s ease;
  }
}

/* ==========================================================
   PRINT (relatórios / export visual)
   ========================================================== */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .navbar, .footer, .btn, .modal, .dropzone, .toolbar-scroll { display: none !important; }
  .card { box-shadow: none !important; border-color: #ddd !important; }
  .table { color: #000 !important; }
}

/* ==========================================================
   COMPONENTES ESPECÍFICOS
   ========================================================== */
/* Header dos blocos de Exportar/Importar */
.export-header, .import-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.export-header .title, .import-header .title {
  font-weight: 600; display: flex; align-items: center; gap: .5rem;
}

/* Barra de progresso (se usar no import) */
.progress-vp {
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.08);
  overflow: hidden; border: 1px solid var(--vp-border);
}
.progress-vp .bar {
  height: 100%; width: 0; background: linear-gradient(90deg, var(--vp-primary), #9cc0ff);
  transition: width .2s ease;
}

/* Inline tags para status */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--vp-border); background: rgba(255,255,255,.06);
}
.tag.success { color: #bff3d2; border-color: rgba(46,204,113,.4); background: rgba(46,204,113,.15); }
.tag.warn    { color: #ffe6ad; border-color: rgba(247,183,49,.4);  background: rgba(247,183,49,.15); }
.tag.danger  { color: #ffd1d1; border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.15); }

/* ==========================================================
   AUTH (login, register, forgot) — tema claro, sem rolagem
   ========================================================== */

/* Wrapper da página de autenticação */
.auth-page {
  min-height: 100dvh;
  background: var(--auth-grad), var(--auth-bg);
  color: var(--auth-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;   /* respiro sem estourar a tela */
  position: relative;
  overflow: hidden;     /* impede rolagem lateral */
}

/* Se quiser usar uma imagem (você vai subir), aplique .auth-has-bg + .auth-bg-cover */
.auth-has-bg .auth-bg-cover {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(110%) contrast(102%);
  opacity: .18;
}
.auth-content { position: relative; z-index: 1; width: 100%; max-width: 420px; }

/* Card de login/register/forgot */
.auth-card {
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  box-shadow: var(--auth-shadow);
  color: var(--auth-text);
  padding: 22px 18px;
}
.auth-card .form-label { color: var(--auth-muted); }
.auth-card .form-control,
.auth-card .form-select {
  color: #1b2b41;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.12);
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: #9cc0ff;
  box-shadow: 0 0 0 .2rem rgba(110,168,254,.25);
}

/* Títulos e logo maiores */
.auth-brand { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.auth-logo { width: 120px; height: auto; }
.auth-title { font-weight: 700; font-size: 1.35rem; color: var(--auth-text); margin: .25rem 0 .75rem; }

/* Links auxiliares */
.auth-links a { color: #1b51ff; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* Evita rolagem vertical em celulares pequenos (altura limitada) */
@media (max-height: 720px) {
  .auth-content { max-width: 420px; }
  .auth-card { padding: 18px 16px; }
  .auth-logo { width: 108px; }
  .auth-title { font-size: 1.25rem; }
}

/* Mobile “pequeno” — reduz ainda mais para evitar barra de rolagem */
@media (max-width: 400px) {
  .auth-card { padding: 16px 14px; }
  .auth-logo { width: 96px; }
  .auth-title { font-size: 1.15rem; }
}

/* Rodapé na auth (badge de versão) */
.auth-footer {
  text-align: center; margin-top: 10px; color: var(--auth-muted); font-size: .9rem;
}
.auth-footer .version-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; padding: .18rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.08); color: var(--auth-muted);
}

/* ==========================================================
   FIM
   ========================================================== */