/* ===========================================================
   Área do cliente sobre a galáxia.

   O painel do Botble é todo em utilitários Bootstrap pensados para
   fundo branco (bg-primary bg-opacity-10, card, text-muted...). Aqui
   eles são reinterpretados no vocabulário escuro da home.

   Escopo: tudo sob .bb-customer-page. Os utilitários do Bootstrap
   vêm com !important, então as sobrescritas também precisam.
   =========================================================== */

.bb-customer-page {
  --g-void: #05050a;
  --g-ink: #ffffff;
  --g-ink-2: rgba(255, 255, 255, .72);
  --g-ink-3: rgba(255, 255, 255, .5);
  --g-ink-4: rgba(255, 255, 255, .32);
  --g-line: rgba(255, 255, 255, .12);
  --g-line-2: rgba(255, 255, 255, .22);
  --g-pane: rgba(10, 10, 16, .62);
  --g-ease: cubic-bezier(.22, .68, .28, 1);

  /* paleta dos braços da galáxia, reaproveitada nos destaques */
  --g-a1: #dc4646;
  --g-a2: #e87a4d;
  --g-a3: #c0567f;
  --g-a4: #6e6bd6;
  --g-a5: #3f8fd0;

  position: relative;
  isolation: isolate;
  color: var(--g-ink-2);
  padding-block: clamp(28px, 5vh, 56px) clamp(60px, 9vh, 110px);
  min-height: 70svh;
}

/* ---------- Fundo ----------
   Nada aqui: o fundo da galáxia é global (html.galaxy-bg, de
   partials/galaxy-background + css/galaxy-site.css). Este arquivo tinha um
   canvas e um véu próprios, que empilhavam sobre os de lá e deixavam a
   página cinza e opaca. */

.bb-customer-page > * { position: relative; z-index: 2; }

/* ---------- Tipografia ---------- */
.bb-customer-page :is(h1, h2, h3, h4, h5, h6, .h3, .h4, .h5, .h6) { color: var(--g-ink); }
.bb-customer-page :is(.text-muted, .cl-text-2, .cl-text-3, small) { color: var(--g-ink-3) !important; }
.bb-customer-page a { color: var(--g-ink); }
.bb-customer-page a:hover { color: var(--g-a1); }

.bb-profile-header {
  border-bottom: 1px solid var(--g-line);
  padding-bottom: 18px;
  margin-bottom: clamp(22px, 4vh, 38px);
}
/* O CSS do plugin vem com especificidade alta nestes três; sem !important
   o painel fica com título e nome escuros sobre o fundo escuro. */
.bb-customer-page .bb-profile-header-title { color: var(--g-ink) !important; letter-spacing: -.02em; }
.bb-customer-page .bb-customer-sidebar-heading .name,
.bb-customer-page .name.fw-semibold { color: var(--g-ink) !important; }

/* Painel branco do topo da visão geral — não usa .card, por isso escapava. */
.bb-customer-page :is(.bb-customer-profile, .bb-customer-profile-wrapper) {
  background: var(--g-pane) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* ---------- Barra lateral ---------- */
.bb-customer-sidebar-wrapper {
  background: var(--g-pane);
  border: 1px solid var(--g-line);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.bb-customer-sidebar-heading {
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--g-line);
}
.bb-customer-sidebar-heading .name { color: var(--g-ink); }
.bb-customer-sidebar-heading .email { color: var(--g-ink-4) !important; }

/* !important: o CSS do plugin fixa os itens em slate (#64748b), invisível aqui. */
.bb-customer-page .bb-customer-navigation .nav-link {
  color: var(--g-ink-2) !important;
  border: 1px solid transparent;
  transition: background .25s var(--g-ease), color .25s, border-color .25s;
}
.bb-customer-page .bb-customer-navigation .nav-link:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--g-ink) !important;
}
.bb-customer-page .bb-customer-navigation .nav-link.active {
  background: var(--g-a1) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px var(--g-a1);
}
.bb-customer-navigation .nav-icon { opacity: .85; }

/* ---------- Cartões ---------- */
.bb-customer-page .card {
  background: var(--g-pane) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  color: var(--g-ink-2);
  transition: border-color .35s, transform .35s var(--g-ease);
}
.bb-customer-page .card:hover { border-color: var(--g-line-2) !important; transform: translateY(-2px); }
.bb-customer-page .card-title { color: var(--g-ink); }

/* Os quatro destaques coloridos do Bootstrap passam a usar a paleta
   dos braços da galáxia, com faixa de cor no topo em vez de fundo chapado. */
.bb-customer-page .card.bg-primary.bg-opacity-10 { --tile: var(--g-a1); }
.bb-customer-page .card.bg-success.bg-opacity-10 { --tile: var(--g-a5); }
.bb-customer-page .card.bg-warning.bg-opacity-10 { --tile: var(--g-a2); }
.bb-customer-page .card.bg-info.bg-opacity-10 { --tile: var(--g-a4); }

.bb-customer-page .card[class*="bg-opacity-10"] {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile, var(--g-a1)) 16%, transparent), transparent 55%),
    var(--g-pane) !important;
  border-color: color-mix(in srgb, var(--tile, var(--g-a1)) 28%, transparent) !important;
}
.bb-customer-page .card[class*="bg-opacity-10"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--tile, var(--g-a1));
  border-radius: 14px 14px 0 0;
}
.bb-customer-page [class*="bg-opacity-20"].rounded-circle,
.bb-customer-page .bg-info.rounded-circle {
  background: color-mix(in srgb, var(--tile, var(--g-a1)) 24%, transparent) !important;
  color: var(--tile, var(--g-a1));
}

/* ---------- Botões ---------- */
.bb-customer-page :is(.btn-primary, .btn-success, .btn-warning, .btn-info) {
  border: 0 !important;
  color: #fff !important;
  background: var(--tile, var(--g-a1)) !important;
}
.bb-customer-page :is(.btn-primary, .btn-success, .btn-warning, .btn-info):hover {
  filter: brightness(1.12);
  color: #fff !important;
}
.bb-customer-page :is(.btn-outline-info, .btn-outline-secondary, .btn-outline-primary) {
  background: transparent !important;
  border-color: var(--g-line-2) !important;
  color: var(--g-ink) !important;
}
.bb-customer-page :is(.btn-outline-info, .btn-outline-secondary, .btn-outline-primary):hover {
  border-color: var(--g-a1) !important;
  background: color-mix(in srgb, var(--g-a1) 14%, transparent) !important;
}

/* ---------- Formulários ---------- */
.bb-customer-page :is(.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="password"]) {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--g-line-2) !important;
  color: var(--g-ink) !important;
}
.bb-customer-page :is(.form-control, .form-select)::placeholder { color: var(--g-ink-4) !important; }
.bb-customer-page :is(.form-control, .form-select):focus {
  border-color: var(--g-a1) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--g-a1) 22%, transparent) !important;
}
.bb-customer-page .form-label { color: var(--g-ink-2); }

/* ---------- Tabelas (pedidos, faturas) ---------- */
.bb-customer-page .table {
  --bs-table-color: var(--g-ink-2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--g-line);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-striped-color: var(--g-ink-2);
  --bs-table-hover-bg: rgba(255, 255, 255, .06);
  --bs-table-hover-color: var(--g-ink);
}
.bb-customer-page .table :is(th, thead th) { color: var(--g-ink) !important; border-color: var(--g-line) !important; }
.bb-customer-page .table td { border-color: var(--g-line) !important; }

/* ---------- Estados vazios e alertas ---------- */
.bb-customer-page :is(.alert, .bb-empty-state) {
  background: var(--g-pane) !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-ink-2) !important;
}
.bb-customer-page .badge.bg-light { background: rgba(255, 255, 255, .12) !important; color: var(--g-ink) !important; }

/* ---------- Cabeçalho mobile do painel ---------- */
.bb-customer-page .d-lg-none.bg-white {
  background: var(--g-pane) !important;
  border-color: var(--g-line) !important;
  border-radius: 14px;
  color: var(--g-ink-2);
}
.offcanvas { background: #0b0b12; color: var(--g-ink-2); }
.offcanvas .offcanvas-title { color: #fff; }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- Trilha e breadcrumb da página ---------- */
body:has(.bb-customer-page) :is(.tf-breadcrumb, .breadcrumb) { background: transparent !important; }
body:has(.bb-customer-page) :is(.tf-breadcrumb a, .breadcrumb a) { color: rgba(255, 255, 255, .5); }
body:has(.bb-customer-page) :is(.tf-breadcrumb, .breadcrumb) :is(.active, li:last-child) { color: #fff; }
body:has(.bb-customer-page) :is(.main-page-title, .tf-breadcrumb, .page-title, .tf-page-title) :is(h1, h2, h3, .title) { color: #fff !important; }

/* ---------- Header e rodapé da loja nas páginas do painel ----------
   Eles ficam FORA de .bb-customer-page (são irmãos de .main-content), mas a
   página inteira passou a ser escura — sem isto o menu some no fundo. */
body:has(.bb-customer-page) :is(.tf-header, .tf-topbar) { background: transparent !important; }
body:has(.bb-customer-page) :is(.tf-header, .tf-topbar) :is(a, button, .icon, span) { color: #fff; }
body:has(.bb-customer-page) .tf-header img.logo-light { display: none !important; }
body:has(.bb-customer-page) .tf-header img.logo-dark { display: inline-block !important; }
body:has(.bb-customer-page) .tf-header :is(.form-control, input) {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
body:has(.bb-customer-page) .tf-header input::placeholder { color: rgba(255, 255, 255, .45) !important; }
body:has(.bb-customer-page) .tf-footer { border-top: 1px solid rgba(255, 255, 255, .1); }

/* ---------- Foco visível ---------- */
.bb-customer-page :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--g-a1);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-customer-page .card,
  .bb-customer-navigation .nav-link { transition: none; }
}

/* ===========================================================
   Fluxo de entrega de sistema (/customer/entregas)
   =========================================================== */

/* Botões: a home define .galaxy-btn no galaxy-home.css, que não carrega
   aqui — então o painel traz a própria cópia. */
.bb-customer-page .galaxy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 26px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .3s var(--g-ease);
}
.bb-customer-page .galaxy-btn-primary { background: var(--g-a1); color: #fff; }
.bb-customer-page .galaxy-btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px var(--g-a1);
}

.vrv-project {
  background: var(--g-pane);
  border: 1px solid var(--g-line);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 20px;
}
.vrv-project-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 26px;
}
.vrv-project-code {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  margin: 0 0 6px;
}
.vrv-project-title { color: var(--g-ink); font-size: clamp(19px, 2vw, 24px); margin: 0; letter-spacing: -.015em; }

.vrv-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--g-line-2);
  color: var(--g-ink);
  white-space: nowrap;
}
.vrv-badge--call_agendada { background: color-mix(in srgb, var(--g-a5) 22%, transparent); border-color: var(--g-a5); }
.vrv-badge--em_producao { background: color-mix(in srgb, var(--g-a2) 22%, transparent); border-color: var(--g-a2); }
.vrv-badge--entregue { background: color-mix(in srgb, var(--g-a5) 30%, transparent); border-color: var(--g-a5); }

/* ---------- Linha do tempo ---------- */
.vrv-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.vrv-step { position: relative; padding-top: 24px; text-align: center; }
/* trilho: começa e termina no centro dos pontos das pontas */
.vrv-step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}
.vrv-step:first-child::before { left: 50%; }
.vrv-step:last-child::before { right: 50%; }
.vrv-step.is-done::before,
.vrv-step.is-current::before { background: var(--g-a1); }
.vrv-step.is-current::before { background: linear-gradient(90deg, var(--g-a1) 50%, rgba(255, 255, 255, .12) 50%); }
.vrv-step:first-child.is-current::before { background: rgba(255, 255, 255, .12); }

.vrv-step-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #14141c;
  border: 2px solid rgba(255, 255, 255, .22);
  z-index: 1;
}
.vrv-step.is-done .vrv-step-dot { background: var(--g-a1); border-color: var(--g-a1); }
.vrv-step.is-current .vrv-step-dot {
  background: var(--g-a1);
  border-color: var(--g-a1);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--g-a1) 24%, transparent);
}
.vrv-step-label { font-size: 11.5px; line-height: 1.35; color: var(--g-ink-4); display: block; padding-inline: 4px; }
.vrv-step.is-current .vrv-step-label { color: var(--g-ink); font-weight: 500; }
.vrv-step.is-done .vrv-step-label { color: var(--g-ink-3); }

.vrv-project-hint { color: var(--g-ink-2); margin: 0 0 20px; font-size: 14.5px; }

.vrv-callbox {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--g-line);
  border-left: 2px solid var(--g-a5);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.vrv-callbox strong { display: block; color: var(--g-ink); margin-bottom: 8px; }
.vrv-callbox p { color: var(--g-ink-2); }
.vrv-callbox--done { border-left-color: var(--g-a2); }

.vrv-form { margin-top: 6px; }
.vrv-form .form-label { color: var(--g-ink-2); margin-bottom: 8px; display: block; }

.vrv-empty {
  background: var(--g-pane);
  border: 1px solid var(--g-line);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  color: var(--g-ink-2);
}

@media (max-width: 680px) {
  .vrv-steps { grid-template-columns: 1fr; gap: 14px; }
  .vrv-step { padding-top: 0; padding-left: 26px; text-align: left; }
  .vrv-step::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .vrv-step:first-child::before { left: 5px; top: 50%; }
  .vrv-step:last-child::before { bottom: 50%; }
  .vrv-step-dot { top: 50%; left: 0; transform: translateY(-50%); }
  .vrv-step-label { font-size: 13px; }
}