/* =====================================================================
   LocaEasy — Design System
   Tema escuro por padrão + tema claro via [data-theme="light"]
   Identidade: violeta/fintech
   ===================================================================== */

:root {
  /* Paleta LocaEasy — azul-marinho + ciano (nomes mantidos por compatibilidade) */
  --violet-300: #7fd4f5;
  --violet-400: #38b6ec;
  --violet-500: #16a3e6;
  --violet-600: #1565d8;
  --violet-700: #1145b0;

  --accent: var(--violet-500);
  --accent-strong: var(--violet-600);
  --grad: linear-gradient(135deg, #1bb2ee 0%, #1a6fe0 55%, #1538c9 100%);
  --grad-soft: linear-gradient(135deg, rgba(27,178,238,.18), rgba(21,56,201,.10));

  /* Tema DARK — Carbon Black */
  --bg: #0c0c0c;
  --bg-2: #131313;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --text: #f0f0f0;
  --text-muted: rgba(240, 240, 240, 0.42);
  --text-dim: rgba(240, 240, 240, 0.52);
  --positive: #34d399;
  --negative: #fb7185;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9);
  --glow: radial-gradient(70% 35% at 50% -5%, rgba(255, 255, 255, 0.065), transparent 65%);
}

[data-theme="light"] {
  --bg: #eef3fb;
  --bg-2: #e2eaf7;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-2: #ffffff;
  --border: rgba(12, 24, 56, 0.10);
  --border-strong: rgba(12, 24, 56, 0.18);
  --text: #0c1838;
  --text-muted: #47557a;
  --text-dim: #7d89a8;
  --positive: #059669;
  --negative: #e11d48;
  --shadow: 0 18px 50px -24px rgba(20, 50, 120, 0.35);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(27,178,238,.16), transparent 70%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Alguns navegadores/webviews (ex.: Safari/iOS) detectam automaticamente
   números, datas e valores como "dados clicáveis" e aplicam um azul padrão
   de link por cima do CSS da página. Forçamos a cor herdada para evitar
   textos (como "saldo R$...") ficando azuis sem que o app tenha definido
   essa cor em lugar nenhum. */
a[x-apple-data-detectors],
.tx-row a,
.text-xs.dim a {
  color: inherit !important;
  text-decoration: inherit !important;
}

body {
  font-family: 'Manrope', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}

/* Brilho de atmosfera */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--glow);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, .display {
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }

/* ---------- Componentes ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(27, 178, 238, .35);
}
.btn-primary:hover { box-shadow: 0 14px 40px -8px rgba(27, 178, 238, .5); transform: translateY(-1px); }
.btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .15);
}
.input::placeholder { color: var(--text-dim); }
.label { font-size: .82rem; color: var(--text-muted); font-weight: 600; margin-bottom: .4rem; display: block; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-violet { background: rgba(27,178,238,.16); color: var(--violet-300); border: 1px solid rgba(27,178,238,.3); }
.badge-green  { background: rgba(52,211,153,.14); color: var(--positive); border: 1px solid rgba(52,211,153,.3); }
.badge-amber  { background: rgba(251,191,36,.14); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.badge-gray   { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge-red    { background: rgba(239,68,68,.14); color: #f87171; border: 1px solid rgba(239,68,68,.35); }

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Layout app (sidebar) ---------- */
.app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.sidebar {
  width: 250px;
  flex-shrink: 0;
  padding: 1.6rem 1.1rem;
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }
.brand { display: flex; align-items: center; gap: .65rem; padding: .3rem .6rem 1.4rem; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--grad);
  display: grid; place-items: center;
  font-family: 'Sora'; font-weight: 800; color: #fff; font-size: 1.1rem;
  box-shadow: 0 8px 20px -6px rgba(124,58,237,.7);
}
.brand-name { font-family: 'Sora'; font-weight: 700; font-size: 1.15rem; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-light { display: block; }
.nav-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .9rem; border-radius: 12px;
  color: var(--text-muted); font-weight: 600; font-size: .95rem;
  transition: background .2s, color .2s, box-shadow .2s;
  position: relative;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.6), 0 0 18px -6px rgba(255, 255, 255, 0.06);
}
.nav-item.active svg { opacity: 1; color: #fff; }
.nav-item svg { width: 19px; height: 19px; opacity: .75; transition: color .2s, opacity .2s; }

/* Sidebar right border glow */
.sidebar {
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
}

.main { flex: 1; padding: 2rem 2.4rem; max-width: 1280px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; }

.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--border-strong); }

/* utilidades */
.grid { display: grid; gap: 1.2rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: .5rem; } .gap { gap: 1rem; } .gap-lg { gap: 1.6rem; }
.mt { margin-top: 1rem; } .mt-lg { margin-top: 2rem; }
.text-sm { font-size: .85rem; } .text-xs { font-size: .75rem; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .19s; } .rise-4 { animation-delay: .26s; }

/* ── Botão hamburger (só aparece em mobile) ── */
.menu-btn {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); flex-shrink: 0;
  transition: border-color .15s;
}
.menu-btn:hover { border-color: var(--border-strong); }

/* ── Overlay escuro por trás do drawer ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(4, 6, 20, .72);
  z-index: 399;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sidebar-overlay.show { display: block; }

@media (max-width: 820px) {
  /* Sidebar vira drawer deslizante */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 400;
    transform: translateX(-270px);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px -4px rgba(4,6,20,.8); }

  .main { padding: 1.2rem 1rem; }
  .topbar { margin-bottom: 1.4rem; gap: .6rem; }
  .topbar h1 { font-size: 1.3rem !important; }

  /* Hamburger visível */
  .menu-btn { display: flex; }

  /* Tabelas: scroll horizontal em vez de overflow */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; }
  .table-wrap .table { min-width: 600px; }

  /* Pager: centraliza em mobile */
  .pager { justify-content: center; }
  .pg-info { margin-left: 0; width: 100%; text-align: center; }
}

/* ---------- Tabelas e modais (admin) ---------- */
.table { width:100%; border-collapse: collapse; }
.table th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; padding:.7rem .8rem; border-bottom:1px solid var(--border); }
.table td { padding:.85rem .8rem; border-bottom:1px solid var(--border); font-size:.92rem; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--surface); }
.btn-sm { padding:.45rem .85rem; font-size:.82rem; border-radius:9px; }
.row-actions { display:flex; gap:.4rem; flex-wrap:wrap; }

.modal-bg { position:fixed; inset:0; background:rgba(3,2,10,.82); backdrop-filter:blur(8px); display:none; place-items:center; z-index:1000; padding:1rem; }
.modal-bg.show { display:grid; }
.modal { width:100%; max-width:460px; padding:1.8rem; max-height:90vh; overflow:auto; }
.modal h3 { margin-bottom:1.2rem; }
.select { width:100%; padding:.85rem 1rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'Manrope'; font-size:1rem; }

/* ---------- Opções de <select> legíveis (corrige texto "em branco") ---------- */
select option, .select option, .input option {
  background-color: #131313;
  color: #f0f0f0;
}
[data-theme="light"] select option, [data-theme="light"] .select option, [data-theme="light"] .input option {
  background-color: #ffffff;
  color: #1a1430;
}
select, .select { color: var(--text); }

/* ---------- Rodapé da sidebar: rank + usuário + sair ---------- */
.sidebar-footer { margin-top:auto; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:.45rem; }

/* ── Rank card ── */
.sb-rank-card { padding:.85rem .95rem; border-radius:14px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); }
.sb-rank-hd { display:flex; align-items:center; gap:.65rem; margin-bottom:.7rem; }
.sb-rank-ico { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.15); display:grid; place-items:center; font-size:.85rem; flex-shrink:0; }
.sb-rank-nm { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; line-height:1; }
.sb-rank-lv { font-size:.64rem; color:var(--text-muted); margin-top:.22rem; font-weight:600; letter-spacing:.04em; }
.sb-rank-bar { height:5px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; position:relative; margin-bottom:.45rem; }
.sb-rank-fill { height:100%; border-radius:999px; width:0%; transition:width 1.15s cubic-bezier(.22,1,.36,1); }
.sb-rank-sub { font-size:.68rem; color:var(--text-muted); line-height:1.4; }

/* ── User row (avatar + info + logout ícone) ── */
.sb-user-row { display:flex; align-items:center; gap:.55rem; padding:.35rem .4rem; }
.user-avatar { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.85rem; box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.user-name { font-size:.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-info { flex:1; min-width:0; }
.sb-logout-ico { width:32px; height:32px; border-radius:9px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); color:var(--text-muted); cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:all .18s; }
.sb-logout-ico svg { width:16px; height:16px; }
.sb-logout-ico:hover { background:rgba(251,113,133,.12); color:#f87171; border-color:rgba(251,113,133,.3); }

/* legado — mantidos para compat */
.user-chip { display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem; }
.logout-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.7rem; border-radius:12px; cursor:pointer; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); font-weight:600; font-size:.9rem; font-family:inherit; transition:all .18s ease; }
.logout-btn svg { width:18px; height:18px; }
.logout-btn:hover { background:rgba(251,113,133,.12); color:var(--negative); border-color:rgba(251,113,133,.4); transform:translateY(-1px); }

/* ---------- Animação de rendimento (tela do investidor) ---------- */
#earn-anim { position:fixed; inset:0; z-index:9998; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(27,178,238,.16), rgba(4,8,22,.94) 60%);
  backdrop-filter:blur(10px); animation:eaIn .4s ease; }
#earn-anim.ea-closing { animation:eaOut .5s ease forwards; }
@keyframes eaIn { from{opacity:0} to{opacity:1} }
@keyframes eaOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.88) translateY(-26px)} }
.ea-card { position:relative; text-align:center; padding:1.5rem; }
.ea-title { font-family:'Sora'; font-weight:800; font-size:1.55rem; }
.ea-sub { color:var(--text-muted); margin-top:.3rem; margin-bottom:1.1rem; }
.ea-ring { position:relative; width:264px; height:264px; margin:0 auto; }
.ea-ring svg { width:100%; height:100%; }
.ea-track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:16; }
.ea-prog { fill:none; stroke:url(#eaGrad); stroke-width:16; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; filter:drop-shadow(0 0 12px rgba(27,178,238,.85)); }
.ea-center { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ea-val { font-family:'Sora'; font-weight:800; font-size:2.1rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ea-pct { color:var(--text-muted); margin-top:.2rem; font-weight:600; }
.ea-bike { position:absolute; font-size:30px; filter:drop-shadow(0 0 10px rgba(27,178,238,.95)); will-change:left,top,transform; }
.ea-pop { position:absolute; color:#3fc0f5; font-weight:700; pointer-events:none; text-shadow:0 0 10px rgba(27,178,238,.6); animation:eaUp 1.7s linear forwards; }
@keyframes eaUp { 0%{opacity:0;transform:translateY(16px)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-78px)} }
.ea-skip { margin-top:1.4rem; padding:.65rem 1.6rem; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-family:inherit; font-weight:600; cursor:pointer; transition:all .16s; }
.ea-skip:hover { background:var(--grad-soft); transform:translateY(-1px); }

/* ── Notificações in-app ── */
.notif-wrap { position:relative; flex-shrink:0; }
.notif-btn {
  position:relative; width:40px; height:40px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
  display:grid; place-items:center; cursor:pointer; color:var(--text);
  transition:border-color .15s;
}
.notif-btn:hover { border-color:var(--border-strong); }
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:18px; height:18px; border-radius:999px; padding:0 4px;
  background:var(--negative); color:#fff;
  font-size:.65rem; font-weight:800; font-family:'Manrope',sans-serif;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
}
.notif-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  width:340px; max-height:420px; overflow:auto;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 20px 60px -12px rgba(0,0,0,.7);
  z-index:500;
}
.notif-dropdown.show { display:block; }
.notif-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem .6rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg-2); z-index:1;
}
.notif-read-all {
  font-size:.74rem; color:var(--accent); font-weight:600; cursor:pointer;
  background:none; border:none; font-family:inherit; padding:0;
}
.notif-read-all:hover { text-decoration:underline; }
.notif-item {
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.8rem 1rem; border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit; transition:background .15s; cursor:pointer;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--surface); }
.notif-item.unread { background:rgba(255,255,255,.03); }
.notif-icon { flex-shrink:0; margin-top:.1rem; }
.notif-title { font-size:.85rem; font-weight:600; line-height:1.35; }
.notif-body { font-size:.78rem; color:var(--text-muted); margin-top:.15rem; line-height:1.4; }
.notif-ago { font-size:.72rem; color:var(--text-dim); margin-top:.25rem; }
.notif-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:.3rem; box-shadow:0 0 6px rgba(27,178,238,.5); }
.notif-empty { padding:2rem; text-align:center; color:var(--text-dim); font-size:.85rem; }

@media (max-width:480px) {
  .notif-dropdown { width:calc(100vw - 2rem); right:-1rem; }
}

/* ── Pill de saldo no topbar (investidor) ── */
.tb-wallet { display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:.45rem .55rem .45rem .75rem; backdrop-filter:blur(6px); }
.tb-wallet-info { display:flex; flex-direction:column; }
.tb-wallet-label { font-size:.62rem; color:var(--text-muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1; margin-bottom:2px; }
.tb-wallet-val { font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700; color:#3fe08f; line-height:1; }
.tb-wallet-btn { padding:6px 13px; border-radius:9px; border:none; background:rgba(255,255,255,.10); color:#fff; font-family:'Manrope'; font-weight:700; font-size:.78rem; cursor:pointer; white-space:nowrap; transition:box-shadow .18s,transform .14s; text-decoration:none; display:inline-flex; align-items:center; }
.tb-wallet-btn:hover { box-shadow:0 0 14px rgba(255,255,255,.15); transform:translateY(-1px); }

/* ── Paginação (compartilhado entre páginas admin) ── */
.pager { display:flex; align-items:center; gap:.35rem; padding:.9rem 0 .2rem; flex-wrap:wrap; }
.pg-btn { padding:.36rem .68rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-family:inherit; font-weight:600; font-size:.82rem; line-height:1; transition:.12s; }
.pg-btn:hover:not(:disabled) { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#fff; }
.pg-btn.pg-on { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:#fff; }
.pg-btn:disabled { opacity:.32; cursor:default; }
.pg-info { margin-left:auto; font-size:.78rem; color:var(--text-muted); white-space:nowrap; }