/* ==========================================================================
   PIXCONFIRM · DESIGN SYSTEM (app)
   Mesma linguagem visual das landing pages (resources/views/landing/*),
   portada para a área logada e para a página pública de pagamento.

   --pix é a única variável dinâmica (cor de marca por empresa, branding
   white-label) — sobrescrita por um <style> inline curto em cada página via
   resources/views/partials/design-tokens.blade.php. Todo o resto é fixo na
   plataforma inteira.

   Arquivo estático puro (sem pipeline de build neste projeto) — carregado
   via <link> nos pontos de entrada, cacheável pelo navegador/WebView.
   ========================================================================== */

:root{
  /* ---------- Base (fixos) ---------- */
  --ink:#0B1B2B;       --ink-soft:#22384C;   --slate:#54666F;
  --ice:#F2F7F5;        --paper:#FFFFFF;      --line:#DDE8E4;
  --caiu:#2BE8A6;

  /* ---------- Semânticos (fixos) ---------- */
  --amber:#EE9D1C;      --amber-soft:#FBF1DC;
  --rose:#E5484D;        --rose-soft:#FCE9EA;

  /* ---------- Painel escuro (fixo) ---------- */
  --panel:#081524;       --panel-2:#0D2437;   --panel-line:rgba(163,255,222,.12);
  --panel-text:#E8F4EF;  --panel-muted:#8AA3AE;

  /* ---------- Tipografia ---------- */
  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Spline Sans Mono','IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  /* ---------- Forma ---------- */
  --radius:18px; --radius-sm:12px;
  --shadow-card: 0 1px 2px rgba(11,27,43,.05), 0 12px 32px -14px rgba(11,27,43,.16);
  --shadow-pop:  0 24px 70px -24px rgba(8,21,36,.5);

  /* ---------- Marca (dinâmico — valor padrão, sobrescrito por empresa) ---------- */
  --pix:#0DAB8E; --pix-ink:#0A7E6A; --pix-soft:#E1F5EE;
}

[x-cloak]{ display:none !important; }

/* ==========================================================================
   Base
   ========================================================================== */
body{
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink);
  background-color:var(--ice);
  -webkit-font-smoothing:antialiased;
}
[data-bs-theme="dark"] body{ background-color:#0c1420; color:var(--panel-text); }

h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-stretch:112%; color:var(--ink); }

a{ color:var(--pix-ink); }
a:hover{ color:var(--pix); }

.money, .charge-amount, .stat-tile__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Botões — pill, gradiente de marca, sombra suave, elevação no hover
   ========================================================================== */
.btn{
  font-family:var(--font-display); font-stretch:110%; font-weight:640;
  border-radius:999px; padding:.62rem 1.3rem;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:.4rem .95rem; font-size:.85rem; }
.btn-lg{ padding:.85rem 1.7rem; font-size:1.05rem; }

.btn-primary, .btn-success{
  background:linear-gradient(135deg, var(--pix), color-mix(in srgb, var(--pix) 78%, black));
  border-color:transparent;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--pix) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--pix) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:disabled, .btn-success:disabled{ opacity:.55; box-shadow:none; transform:none; }

.btn-warning{
  background:var(--amber); border-color:transparent; color:#3A2504;
}
.btn-warning:hover{ background:color-mix(in srgb, var(--amber) 88%, black); color:#3A2504; }

.btn-outline-secondary, .btn-ghost{
  background:transparent; border:1.5px solid var(--line); color:var(--ink-soft);
}
.btn-outline-secondary:hover, .btn-ghost:hover{
  border-color:var(--ink-soft); color:var(--ink); background:var(--ice); transform:translateY(-1px);
}
.btn-outline-primary{ background:transparent; border:1.5px solid var(--pix); color:var(--pix-ink); }
.btn-outline-primary:hover{ background:var(--pix-soft); border-color:var(--pix); color:var(--pix-ink); }
.btn-outline-danger{ background:transparent; border:1.5px solid var(--rose); color:var(--rose); }
.btn-outline-danger:hover{ background:var(--rose-soft); border-color:var(--rose); color:var(--rose); }

.btn-close:focus{ box-shadow:none; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  border:none; border-radius:var(--radius); box-shadow:var(--shadow-card); background:var(--paper);
}
.card--table, .charges-table-card{ overflow:hidden; }
.card--filter, .charges-filter-card{ box-shadow:0 4px 18px -10px rgba(15,41,66,.18); }

.card--brand-header, .pixexpress-card{ border:none; border-radius:1.25rem; overflow:hidden; box-shadow:0 20px 50px -20px rgba(11,27,43,.35); }
.card--brand-header .card-header-brand, .pixexpress-card-header{
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:#fff; padding:.9rem 1.25rem; font-family:var(--font-display); font-size:1.05rem;
}
.pixexpress-wrap{ max-width:380px; }
.pixexpress-edit-btn{ color:rgba(255,255,255,.7); }
.pixexpress-edit-btn:hover{ color:#fff; }

.mobile-row-card, .mobile-charge-card{
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 2px 10px -6px rgba(15,41,66,.12);
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stat-tile, .stat-card{ padding:1.25rem 1.4rem; position:relative; }
.stat-tile__icon{
  width:38px; height:38px; border-radius:12px; background:var(--pix-soft); color:var(--pix-ink);
  display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:.6rem;
}
.stat-tile__label, .stat-card .text-secondary{
  font:600 .78rem var(--font-body); text-transform:uppercase; letter-spacing:.04em; color:var(--slate) !important;
}
.stat-tile__value, .stat-card .value{
  font-weight:700; font-size:1.85rem; color:var(--ink);
}
.stat-tile__value.is-positive, .stat-card .value.text-success{ color:var(--pix-ink) !important; }
.stat-tile__value.is-warning, .stat-card .value.text-warning{ color:var(--amber) !important; }

/* Below ~360px (small Android phones inside the app WebView) even a
   full-width tile can be tight for a long "R$ 4.650,55" value at 1.85rem —
   confirmed breaking in production on a 720px-tall Android device. */
@media (max-width:380px){
  .stat-tile__value, .stat-card .value{ font-size:1.5rem; }
}

/* ==========================================================================
   Status pills — sobre as classes que Charge::statusColor() já retorna
   (bg-success/bg-warning/bg-secondary/bg-danger/bg-info), sem tocar no PHP
   ========================================================================== */
.status-pill{
  padding:.38rem .85rem; font:600 .72rem var(--font-body); border-radius:999px;
  text-transform:uppercase; letter-spacing:.04em;
}
.status-pill.bg-success{ background:var(--pix-soft) !important; color:var(--pix-ink) !important; }
.status-pill.bg-warning{ background:var(--amber-soft) !important; color:var(--amber) !important; }
.status-pill.bg-secondary{ background:var(--ice) !important; color:var(--slate) !important; }
.status-pill.bg-danger, .status-pill.bg-info{ background:var(--rose-soft) !important; color:var(--rose) !important; }

.charge-amount{ font-weight:700; color:var(--ink); }
.charge-amount.is-paid{ color:var(--pix-ink); }

/* ==========================================================================
   Tabelas — alta densidade (mais linhas visíveis por tela, estilo relatório
   financeiro), cabeçalho uppercase, hover suave, aplicado globalmente
   ========================================================================== */
.table{ margin-bottom:0; border-collapse:separate; border-spacing:0; }
.table thead th{
  text-transform:uppercase; font:700 .68rem var(--font-body); letter-spacing:.06em;
  color:var(--slate); background:var(--ice); border-bottom:1px solid var(--line);
  padding:.6rem .95rem; white-space:nowrap;
}
.table tbody td{ padding:.55rem .95rem; border-bottom:1px solid var(--line); font-size:.825rem; vertical-align:middle; }
.table tbody tr{ transition:background-color .15s ease; }
.table tbody tr:hover{ background:var(--ice); }
.table tbody tr:last-child td{ border-bottom:none; }
.charge-row-clickable{ cursor:pointer; }
.charge-row-clickable:hover{ background:var(--ice); }

/* ==========================================================================
   Abas de Configurações (Empresa / Integrações / Usuários / Assinatura)
   ========================================================================== */
.settings-tabs{ border-bottom:1px solid var(--line); gap:.25rem; }
.settings-tabs .nav-link{
  border:none; border-bottom:2px solid transparent; border-radius:0;
  color:var(--slate); font-weight:600; font-size:.88rem; padding:.6rem .9rem;
}
.settings-tabs .nav-link:hover{ color:var(--ink); border-bottom-color:var(--line); }
.settings-tabs .nav-link.active{ color:var(--pix-ink); border-bottom-color:var(--pix); background:transparent; }

/* ==========================================================================
   Estado vazio
   ========================================================================== */
.empty-state{ padding:3.5rem 1rem; text-align:center; color:var(--slate); }
.empty-state i{ font-size:2.4rem; display:block; margin-bottom:.75rem; color:var(--line); }

/* ==========================================================================
   Formulários
   ========================================================================== */
.form-label{ font:600 .85rem var(--font-body); color:var(--ink-soft); margin-bottom:.35rem; }
/* Cantos mais retos que os botões (8px vs a pílula de 999px) — diferencia
   visualmente "isto é um campo" de "isto é uma ação clicável" (2026-07-30). */
.form-control, .form-select{
  border-radius:8px; border-color:var(--line); font-family:var(--font-body);
  font-size:.875rem; padding:.5rem .85rem; box-shadow:0 1px 2px rgba(11,27,43,.03);
}
/* .form-select precisa de padding-direito extra pro espaço da setinha nativa
   do navegador — o padding uniforme acima sozinho fazia a seta ficar em cima
   do texto quando a opção selecionada era longa (confirmado em produção,
   "Todos os vendedores"). */
.form-select{ padding-right:2.25rem; }
.form-control:focus, .form-select:focus{
  border-color:var(--pix); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--pix) 20%, transparent);
}

/* ==========================================================================
   Alertas / flash
   ========================================================================== */
.alert{ border:none; border-radius:var(--radius-sm); font-family:var(--font-body); }
.alert-success{ background:var(--pix-soft); color:var(--pix-ink); }
.alert-danger{ background:var(--rose-soft); color:var(--rose); }
.alert-warning{ background:var(--amber-soft); color:#7A5205; }

/* ==========================================================================
   Toast de pagamento (JS em layouts/app.blade.php mantém os IDs/classes)
   ========================================================================== */
.toast-stack{ position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:.6rem; width:320px; max-width:calc(100vw - 40px); }
.payment-toast{
  background:var(--paper); border-left:4px solid var(--pix); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop); padding:.85rem 2rem .85rem 1rem; position:relative;
  font-family:var(--font-body); animation:toast-in .35s ease-out;
}
[data-bs-theme="dark"] .payment-toast{ background:var(--panel-2); color:var(--panel-text); }
.payment-toast.removing{ animation:toast-out .25s ease-in forwards; }
.payment-toast .btn-close{ font-size:.7rem; }
@keyframes toast-in{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes toast-out{ to{ transform:translateY(-16px); opacity:0; } }

/* ==========================================================================
   Sidebar / topbar (shell autenticado) — verde profundo, não navy
   (2026-07-30, a pedido do usuário). Misturado com --ink em vez de preto
   puro pra não ficar com cara de app de consumo/delivery — continua sóbrio.
   ========================================================================== */
.sidebar{
  min-height:100vh; flex-shrink:0; width:220px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pix) 38%, var(--ink)) 0%, color-mix(in srgb, var(--pix) 28%, var(--ink)) 100%);
  border-right:1px solid var(--panel-line);
}
main{ min-width:0; }
.sidebar .nav-link{
  color:rgba(255,255,255,.72); padding:.55rem .8rem; border-radius:6px; font-family:var(--font-body); font-weight:600; font-size:.86rem;
  transition:background-color .15s ease, color .15s ease;
}
/* Sem deslocamento lateral no hover (translateX) — estabilidade institucional
   em vez de efeito lúdico, a pedido do usuário (2026-07-30). */
.sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.1); }
.sidebar .nav-link.active{
  color:#fff; font-weight:700; background:rgba(255,255,255,.14);
  border-left:3px solid var(--caiu); border-radius:0 6px 6px 0; padding-left:calc(.8rem - 3px);
}
.sidebar .nav-link.pixexpress-link:not(.active){
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3); color:#fff;
}
.sidebar .nav-link.pixexpress-link:hover{ background:rgba(255,255,255,.2); }
.sidebar-section-label{
  color:rgba(255,255,255,.55); font:700 .68rem var(--font-body); text-transform:uppercase; letter-spacing:.06em; padding:1rem .8rem .35rem;
}
.sidebar hr{ border-color:rgba(255,255,255,.14); }
.brand-logo{ height:32px; }
.mobile-topbar{
  display:none; color:#fff;
  background:color-mix(in srgb, var(--pix) 34%, var(--ink));
}

@media (max-width:991.98px){
  .mobile-topbar{ display:flex; }
  .sidebar{ position:fixed; top:0; left:0; z-index:1045; transform:translateX(-100%); transition:transform .25s ease-in-out; visibility:hidden; }
  .sidebar.is-open{ transform:translateX(0); visibility:visible; }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1044; opacity:0; pointer-events:none; transition:opacity .25s ease-in-out; }
  .sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* ==========================================================================
   Auth (login/registro/recuperação de senha)
   ========================================================================== */
body.auth-body{
  background:linear-gradient(135deg, var(--ink) 0%, var(--pix) 100%);
  min-height:100vh;
}
.auth-card{ max-width:400px; border-radius:var(--radius); border:none; box-shadow:var(--shadow-pop); }
.auth-card--wide{ max-width:760px; }
.plan-option, .setup-option{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s ease, background-color .15s ease;
}
.plan-option.selected, .setup-option.selected{ border-color:var(--pix); background:var(--pix-soft); }

/* ==========================================================================
   PIXExpress / QR / valor grande
   ========================================================================== */
.qr-box{ background:#fff; padding:.9rem; border-radius:var(--radius-sm); display:inline-block; max-width:100%; box-shadow:0 1px 3px rgba(11,27,43,.08); }
.qr-box svg{ max-width:100%; height:auto; display:block; }

.amount-input-group, .pixexpress-amount-group{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  border:2px solid var(--line); border-radius:var(--radius-sm); padding:.75rem 1rem;
  transition:border-color .15s ease;
}
.amount-input-group:focus-within, .pixexpress-amount-group:focus-within{ border-color:var(--pix); }
.pixexpress-currency{ font-size:1.4rem; font-weight:700; color:var(--slate); }
.pixexpress-amount-input{
  border:none; outline:none; font-family:var(--font-mono); font-size:2.2rem; font-weight:800;
  text-align:center; width:100%; color:var(--ink); background:transparent;
}
.brand-name{ font-family:var(--font-display); letter-spacing:-.02em; font-weight:700; }
.brand-name .accent{ color:var(--pix-ink); }

/* ==========================================================================
   Página pública de pagamento
   ========================================================================== */
.pay-card{ max-width:460px; border-radius:var(--radius); border:none; box-shadow:var(--shadow-pop); }
.copy-field{ font-family:var(--font-mono); font-size:.78rem; word-break:break-all; border-radius:var(--radius-sm); }
.pulse{ animation:pulse-op 1.6s infinite; }
@keyframes pulse-op{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.company-logo{ max-height:90px; max-width:260px; }

/* ==========================================================================
   Live beacon — sinalizador de conexão em tempo real (Pusher/WebSocket).
   Usado onde o lojista está ativamente esperando uma confirmação de
   pagamento (PIXExpress aguardando QR, Pix recebidos) para deixar visível
   que a tela está monitorando ao vivo, sem precisar de F5.
   ========================================================================== */
.live-indicator{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border-radius:999px;
  background:var(--pix-soft); color:var(--pix-ink);
  font:600 .72rem var(--font-body); text-transform:uppercase; letter-spacing:.04em;
}
.live-beacon{
  position:relative; display:inline-block; width:7px; height:7px;
  background-color:var(--pix); border-radius:50%; flex:none;
}
.live-beacon::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background-color:var(--pix); opacity:.7;
  animation:pulse-beacon 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pulse-beacon{
  0%{ transform:scale(.95); opacity:.8; }
  70%{ transform:scale(2.4); opacity:0; }
  100%{ transform:scale(.95); opacity:0; }
}