/* ============================================================
   FACELIFT — camada de harmonizacao "jovem/vibrante"
   Carregada por ULTIMO. So sobrepoe estilo (cor, tipografia,
   cantos, glass). NAO altera markup nem comportamento.
   Reverter = remover o <link> do head.php/login.php.
   Paleta puxada da logo: roxo #A855F7 -> magenta #EC4899.
   ============================================================ */

:root {
  --fl-bg-1: #1A1030;
  --fl-bg-2: #0F1117;
  --fl-ink: #F1F5F9;
  --fl-ink-dim: #A9B2C3;
  --fl-purple: #A855F7;
  --fl-magenta: #EC4899;
  --fl-grad: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
  --fl-grad-soft: linear-gradient(135deg, rgba(168,85,247,.18), rgba(236,72,153,.18));
  --fl-glass: rgba(255, 255, 255, .055);
  --fl-glass-2: rgba(255, 255, 255, .08);
  --fl-border: rgba(255, 255, 255, .10);
  --fl-border-strong: rgba(255, 255, 255, .16);
  --fl-radius: 16px;
  --fl-radius-sm: 12px;
  --fl-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --fl-ring: 0 0 0 .18rem rgba(168, 85, 247, .35);
}

/* ---------- Tipografia + fundo ---------- */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--fl-ink) !important;
  background: var(--fl-bg-2) !important;
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(168,85,247,.14), transparent 60%),
    radial-gradient(1000px 560px at 100% 0%, rgba(236,72,153,.12), transparent 55%),
    linear-gradient(180deg, var(--fl-bg-1) 0%, var(--fl-bg-2) 42%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .page-title, .card-title, .header-title {
  font-family: 'Sora', 'Inter', sans-serif !important;
  letter-spacing: -.01em;
  color: var(--fl-ink) !important;
}
a { color: #C9A9FF; }
a:hover { color: #E7C6FF; }

/* ---------- Sidebar (glass) ---------- */
.vertical-menu {
  background: rgba(17, 12, 34, .72) !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-right: 1px solid var(--fl-border) !important;
  box-shadow: none !important;
}
.navbar-brand-box, .logo-box { background: transparent !important; }
#sidebar-menu .menu-title {
  color: var(--fl-ink-dim) !important;
  text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .12em; font-weight: 600;
  opacity: .8;
}
#sidebar-menu > ul > li > a {
  color: var(--fl-ink-dim) !important;
  border-radius: var(--fl-radius-sm);
  margin: 2px 10px; padding: 10px 14px !important;
  font-weight: 500; transition: all .18s ease;
}
#sidebar-menu > ul > li > a:hover {
  color: #fff !important;
  background: var(--fl-glass) !important;
}
#sidebar-menu > ul > li > a i { color: var(--fl-purple) !important; }
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu li.mm-active > a {
  color: #fff !important;
  background: var(--fl-grad) !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, .32);
}
#sidebar-menu > ul > li > a.active i,
#sidebar-menu li.mm-active > a i { color: #fff !important; }
/* submenu (ul.sub-menu): itens no mesmo padrao pill do indice principal, so indentados */
#sidebar-menu .sub-menu > li > a {
  color: var(--fl-ink-dim) !important;
  border-radius: 12px !important;
  margin: 2px 10px 2px 18px !important;
  padding: 8px 14px 8px 42px !important;
  transition: all .18s ease;
}
#sidebar-menu .sub-menu > li > a:hover { color: #fff !important; background: var(--fl-glass) !important; }
#sidebar-menu .sub-menu > li.mm-active > a,
#sidebar-menu .sub-menu > li > a.active {
  color: #fff !important;
  background: var(--fl-grad) !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, .30);
}
/* a regra geral de ativo so vale pro 1o nivel (nao vaza pro submenu como faixa) */
#sidebar-menu > ul > li.mm-active > .sub-menu > li > a { background: transparent; }

/* ---------- Topbar (glass) ---------- */
#page-topbar {
  background: rgba(17, 12, 34, .55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fl-border) !important;
  box-shadow: none !important;
}
body[data-topbar="colored"] #page-topbar { background: rgba(17, 12, 34, .55) !important; }
.navbar-header .header-item { color: var(--fl-ink) !important; }
.navbar-header .header-item:hover { background: var(--fl-glass) !important; border-radius: 12px; }

/* ---------- Cards (glass) ---------- */
.card, .card-block {
  background: var(--fl-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow: var(--fl-shadow) !important;
  color: var(--fl-ink) !important;
}
.card-body { color: var(--fl-ink) !important; }
.card .header-title, .card-title { color: var(--fl-ink) !important; }

/* cards de status coloridos viram tinta translucida + borda */
.card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-warning, .card.bg-danger {
  border-radius: var(--fl-radius) !important;
  border: 1px solid var(--fl-border-strong) !important;
}
/* cards de status: harmonizados na familia roxo/magenta (nada de verde) */
.card.bg-success { background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(139,92,246,.10)) !important; border-color: rgba(139,92,246,.30) !important; }
.card.bg-primary { background: var(--fl-grad-soft) !important; }
.card.bg-info    { background: linear-gradient(135deg, rgba(129,140,248,.28), rgba(99,102,241,.10)) !important; border-color: rgba(129,140,248,.28) !important; }
.card.bg-warning { background: linear-gradient(135deg, rgba(217,70,239,.26), rgba(217,70,239,.10)) !important; border-color: rgba(217,70,239,.26) !important; }
.card.bg-danger  { background: linear-gradient(135deg, rgba(236,72,153,.28), rgba(236,72,153,.10)) !important; border-color: rgba(236,72,153,.28) !important; }
/* o "Gerar teste" e so um wrapper do botao (col-lg-4, unico na pagina): sem tint/borda/sombra */
.col-lg-4 > .card.bg-success {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
/* cards de status (col-lg-3): mesma altura... */
.col-lg-3 > .card.bg-success { height: 100%; }
/* ...e o espacamento entre as linhas vai na COLUNA (flex item), nao no card,
   pra nao conflitar com o height:100% */
.col-lg-3:has(> .card.bg-success),
.col-lg-4:has(> .card.bg-success) { margin-bottom: 1.5rem; }
/* titulo do card um tico menor: cabe em 1 linha e uniformiza a altura */
.card .font-size-20 { font-size: 1.02rem !important; line-height: 1.25; }

/* o card que era vermelho (#F73164) agora e magenta da marca */
.card.fl-magenta { background: linear-gradient(135deg, rgba(236,72,153,.30), rgba(236,72,153,.10)) !important; border-color: rgba(236,72,153,.32) !important; }

/* icones (badge redondo) dentro dos cards de status: entram na paleta */
.card .btn-floating.btn-success { background-color: transparent !important; }
/* cor semantica por icone (so o badge; o card nao muda) */
.card .btn-floating.fl-ic-clientes { background-image: linear-gradient(135deg,#22C55E,#16A34A) !important; box-shadow: 0 4px 12px rgba(34,197,94,.38); }
.card .btn-floating.fl-ic-revendas { background-image: linear-gradient(135deg,#3B82F6,#2563EB) !important; box-shadow: 0 4px 12px rgba(59,130,246,.38); }
.card .btn-floating.fl-ic-vsemana  { background-image: linear-gradient(135deg,#F59E0B,#D97706) !important; box-shadow: 0 4px 12px rgba(245,158,11,.38); }
.card .btn-floating.fl-ic-vhoje    { background-image: linear-gradient(135deg,#EC4899,#DB2777) !important; box-shadow: 0 4px 12px rgba(236,72,153,.38); }

/* fundos chapados do tema antigo que destoam do gradiente */
.page-title-box { background: transparent !important; }
.footer { background: transparent !important; border-top: 1px solid var(--fl-border) !important; color: var(--fl-ink-dim) !important; }

/* ---------- Botoes (pill + gradiente) ---------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600; letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  border: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background-image: var(--fl-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, .30);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(236, 72, 153, .38); }
.btn-success { background-image: linear-gradient(135deg, #10B981, #059669) !important; color: #fff !important; }
.btn-info    { background-image: linear-gradient(135deg, #38BDF8, #0EA5E9) !important; color: #fff !important; }
.btn-danger  { background-image: linear-gradient(135deg, #FB7185, #E11D48) !important; color: #fff !important; }
.btn-warning { background-image: linear-gradient(135deg, #FBBF24, #F59E0B) !important; color: #111 !important; }
.btn-default, .btn-secondary {
  background: var(--fl-glass-2) !important; color: var(--fl-ink) !important;
  border: 1px solid var(--fl-border) !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--fl-border) !important; }
.btn-floating, .btn-icon.btn-pure { box-shadow: none; }
.btn-pure, .btn-icon { border-radius: 12px !important; }

/* ---------- Filtros de selecao (um ativo por vez): ativo vibrante, resto apagado ----------
   So os botoes de filtro (ids do grupo de escopo + .filtro do grupo de status).
   NAO mexe nos botoes de submit que tambem usam .btn-gradient (Finalizar/Atualizar). */
#meus_clientes, #clientes_revendas, #todos_clientes,
.btn-gradient.filtro {
  background-image: none !important;
  background-color: var(--fl-glass-2) !important;
  color: var(--fl-ink-dim) !important;
  box-shadow: none !important;
}
#meus_clientes.active, #clientes_revendas.active, #todos_clientes.active,
.btn-gradient.filtro.active {
  background-image: var(--fl-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, .30) !important;
}

/* ---------- Inputs / selects ---------- */
.form-control, .custom-select, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--fl-border) !important;
  color: var(--fl-ink) !important;
  border-radius: var(--fl-radius-sm) !important;
}
.form-control::placeholder { color: #7C879B !important; }
.form-control:focus {
  border-color: var(--fl-purple) !important;
  box-shadow: var(--fl-ring) !important;
  background: rgba(255, 255, 255, .07) !important;
}
label, .control-label { color: var(--fl-ink-dim) !important; font-weight: 500; }

/* ---------- Tabelas / DataTables ---------- */
.table { color: var(--fl-ink) !important; }
.table thead th {
  color: var(--fl-ink-dim) !important;
  border-bottom: 1px solid var(--fl-border) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .06em;
}
.table td, .table th { border-color: rgba(255, 255, 255, .06) !important; }
.table-hover tbody tr:hover { background: var(--fl-grad-soft) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
  background: var(--fl-grad) !important; border: none !important; color: #fff !important; border-radius: 10px;
}
.page-link { background: transparent !important; border: 1px solid var(--fl-border) !important; color: var(--fl-ink-dim) !important; border-radius: 10px; margin: 0 2px; }

/* ---------- Badges / modais / diversos ---------- */
.badge-primary { background-image: var(--fl-grad) !important; }
.badge { border-radius: 999px; padding: .35em .7em; font-weight: 600; }
.modal-content {
  background: rgba(20, 15, 38, .92) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fl-border-strong) !important;
  border-radius: var(--fl-radius) !important;
  color: var(--fl-ink) !important;
}
.modal-header, .modal-footer { border-color: var(--fl-border) !important; }
.dropdown-menu {
  background: rgba(20, 15, 38, .96) !important;
  border: 1px solid var(--fl-border) !important; border-radius: var(--fl-radius-sm) !important;
  box-shadow: var(--fl-shadow) !important;
}
.dropdown-item { color: var(--fl-ink-dim) !important; }
.dropdown-item:hover { background: var(--fl-glass) !important; color: #fff !important; }
hr { border-color: var(--fl-border) !important; }

/* ---------- Icones de acao nas grids (Meus clientes / Revendas): cor semantica ---------- */
.actions a[href*="editar_cliente"], .actions a[href*="editar_cliente"] i,
.actions a[href*="editar_revendedor"], .actions a[href*="editar_revendedor"] i { color: #3B82F6 !important; }   /* editar - azul */
.btconfianca, .btconfianca i { color: #06B6D4 !important; }                                                      /* desbloqueio confianca - ciano */
.btlink, .btlink i           { color: #A855F7 !important; }                                                      /* gerar link - roxo */
.btrenew, .btrenew i,
.btrenewplus, .btrenewplus i { color: #22C55E !important; }                                                      /* renovar - verde */
.btblock, .btblock i         { color: #F59E0B !important; }                                                      /* bloquear - ambar */
.btdelete, .btdelete i       { color: #EF4444 !important; }                                                      /* deletar - vermelho */
/* acoes extras da grid de revendedores */
.actions a[onclick*="verDetalhesDoRevendedor"], .actions a[onclick*="verDetalhesDoRevendedor"] i { color: #06B6D4 !important; } /* ver detalhes - ciano */
.actions a[onclick*="alterar_dono"], .actions a[onclick*="alterar_dono"] i { color: #A855F7 !important; }        /* alterar dono - roxo */
.btcredits, .btcredits i     { color: #22C55E !important; }                                                      /* creditos - verde */
.actions .btn-icon:hover { filter: brightness(1.25); }

/* ---------- Wrappers internos herdados (AdminLTE .box) que vinham brancos ---------- */
.card .box,
.card .box-body,
.card .box-header,
.card .box-footer,
.card .form-group,
.card .input-group,
#avisos,
#avisos .input-group {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--fl-ink) !important;
}
.card .box-header.with-border { border-bottom: 1px solid var(--fl-border) !important; }
.card .box-title { color: var(--fl-ink) !important; }
.bootstrap-touchspin { background: transparent !important; box-shadow: none !important; }
.input-group-text { background: var(--fl-glass-2) !important; border: 1px solid var(--fl-border) !important; color: var(--fl-ink-dim) !important; }

/* ---------- Tickets: thread de mensagens ---------- */
.tk-msg { max-width: 78%; display: block; margin-bottom: 12px; border-radius: 14px !important; }
.tk-msg .card-body { border-radius: 14px; }
.tk-msg-admin   { background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(99,102,241,.07)) !important; border: 1px solid rgba(129,140,248,.28) !important; }
.tk-msg-revenda { background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(236,72,153,.08)) !important; border: 1px solid rgba(168,85,247,.26) !important; }
.tk-texto { margin-top: 4px; white-space: normal; word-break: break-word; }
.tk-anexos { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-thumb { max-width: 120px; max-height: 120px; border-radius: 10px; border: 1px solid var(--fl-border); cursor: pointer; background: rgba(255,255,255,.04); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(236, 72, 153, .5); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Notificacoes (fa-rss) — dropdown responsivo ===== */
.noti-dropdown { width: 360px; max-width: 92vw; }

@media (max-width: 767.98px) {
  /* Em celular: ocupa a largura disponivel, ancorado na tela, sem cortar nos lados */
  .noti-dropdown {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
  .noti-dropdown #noti_lista { max-height: 70vh !important; }
}