/* ==========================================================================
   IT Drone — Eventos ao Vivo  ·  app.css
   OVERLAY sobre o design system do site (site.css). Mesma paleta/fontes/tokens
   (--ink/--amber/--panel/--line, --disp/--body/--mono). Aqui ficam so os
   componentes proprios do app (cards de evento, formularios, admin, checkout,
   multiview, invoice). Carregar sempre DEPOIS de site.css.
   ========================================================================== */

/* ---------- header extras ---------- */
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-dim);border-left:1px solid var(--border);padding-left:10px;margin-left:4px}
.navlinks .navform{margin:0;display:inline}
.navlinkbtn{background:none;border:0;color:var(--fg-muted);cursor:pointer;font:inherit;
  font-size:13.5px;padding:4px 0;transition:color .2s}
.navlinkbtn:hover{color:var(--fg)}

/* ---------- main / tipografia das paginas ---------- */
main.wrap{max-width:1040px;padding-top:48px;padding-bottom:88px}
main h1{font-size:clamp(28px,4.2vw,42px);line-height:1.08;letter-spacing:-.01em;margin:0 0 6px}
main h3{font-family:var(--disp);font-size:19px;color:var(--fg);margin:34px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--border)}
main p{color:var(--fg-muted)}
main hr{border:0;border-top:1px solid var(--border);margin:30px 0}
main code{font-family:var(--mono);font-size:.86em;background:var(--surface2);
  border:1px solid var(--border);color:var(--mint);padding:2px 6px;border-radius:2px}
.muted{color:var(--fg-dim)}

/* ---------- botoes: no app, .btn simples = primario (ambar) ---------- */
main .btn,.navlinks .btn{background:var(--accent);color:var(--ink);border-color:var(--accent);
  text-decoration:none;margin:6px 8px 6px 0}
main .btn:hover,.navlinks .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);color:var(--ink)}
main .btn.ghost{background:transparent;color:var(--fg);border-color:var(--border)}
main .btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}

/* ---------- cards de evento (home) ---------- */
main a.card{display:block;border:1px solid var(--border);border-radius:3px;padding:22px 24px;
  margin:14px 0;background:var(--surface);text-decoration:none!important;color:inherit;
  transition:border-color .2s,background .2s,transform .2s}
main a.card,main a.card *{text-decoration:none!important}
main a.card:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}
main a.card h3{margin:0 0 8px;border:0;padding:0;color:var(--fg);font-size:20px}
main a.card p{margin:0 0 14px;color:var(--fg-muted)}
/* card nao-link (conta) */
main .card{border:1px solid var(--border);border-radius:3px;padding:16px 18px;margin:12px 0;background:var(--surface)}
main .card a{color:var(--fg)}
main .card a,main .card a *{text-decoration:none!important}
main .card a:hover{color:var(--accent)}

/* ---------- tag/preco (pill ambar) ---------- */
.tag{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  background:var(--accent);color:var(--ink);padding:5px 12px;border-radius:2px}

/* ---------- "acesso liberado" ---------- */
.good{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);border-radius:2px;
  padding:7px 13px;margin:10px 0;background:color-mix(in srgb,var(--ok) 10%,transparent)}
.good::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* ---------- flash ---------- */
.flash{font-size:14px;padding:12px 16px;border-radius:3px;margin:0 0 20px;
  border:1px solid var(--border);border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--fg)}
.flash.err{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 10%,var(--surface))}

/* ---------- formularios (mesmo look do .field do site) ---------- */
.form{max-width:480px;margin:6px 0 10px}
.form label{display:block;margin:0 0 16px;font-family:var(--body);font-size:15px;color:var(--fg)}
.form label>input,.form label>select,.form label>textarea{display:block;width:100%;margin-top:7px;
  background:var(--surface);border:1px solid var(--border);color:var(--fg);padding:12px 14px;
  border-radius:2px;font-family:var(--body);font-size:15px;transition:border-color .2s}
.form textarea{resize:vertical;min-height:90px}
.form label>input:focus,.form label>select:focus,.form label>textarea:focus{
  outline:none;border-color:var(--accent)}
/* os rotulos mono/uppercase, como no site */
.form label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.form label>input,.form label>select,.form label>textarea{font-family:var(--body);font-size:15px;
  letter-spacing:normal;text-transform:none;color:var(--fg)}
.form .chk{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.form .chk input{width:auto;margin:0;accent-color:var(--accent)}
.chk-hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-dim)}

/* ---------- KPIs (admin) — estilo .stat do site ---------- */
.kpi{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);border:1px solid var(--border);margin:18px 0 8px}
.kpi .box{flex:1 1 150px;background:var(--surface);padding:20px 22px;text-align:left}
.kpi .box b{display:block;font-family:var(--disp);font-size:32px;color:var(--accent);line-height:1}
.kpi .box span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:6px;display:block}

/* ---------- tabelas de listagem (admin) ---------- */
.list{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.list th,.list td{border:1px solid var(--border);padding:10px 12px;text-align:left}
.list th{background:var(--surface2);color:var(--fg);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.list td{color:var(--fg-muted)}
.list tr:nth-child(even) td{background:var(--surface)}
.list a{color:var(--accent-2)}
.list a:hover{color:var(--accent)}

/* ---------- checkout Square ---------- */
.sq-card{max-width:480px;border:1px solid var(--border);border-radius:2px;padding:14px;
  margin:14px 0;background:#fff;min-height:54px}
#sq-msg{font-family:var(--mono);font-size:12px;letter-spacing:.04em}

/* ---------- multiview / player ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--border);
  border:1px solid var(--border);max-width:980px;margin:18px 0}
.mv[data-n="1"]{grid-template-columns:1fr}
.mv-tile{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.mv-tile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.mv-label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:2px}
.mv-over{display:none;font-family:var(--mono);font-size:13px;color:#fff;
  border:1px solid var(--err);border-left:3px solid var(--err);
  background:color-mix(in srgb,var(--err) 16%,var(--surface));padding:12px 15px;border-radius:2px;margin:12px 0}
.player-slot{border:1px dashed var(--border);border-radius:3px;padding:30px;margin:18px 0;
  background:var(--surface);text-align:center;color:var(--fg-dim)}
@media(max-width:720px){.mv{grid-template-columns:1fr}}

/* ---------- invoice (documento — fica claro mesmo no tema escuro, imprime bem) ---------- */
.inv{max-width:720px;background:#fff;color:#161b24;border:1px solid #d9dee7;border-radius:4px;
  padding:26px 28px;margin:14px 0}
.inv *{color:inherit}
.inv-head{display:flex;justify-content:space-between;gap:16px;border-bottom:3px solid var(--amber);padding-bottom:14px}
.inv-seller{font-family:var(--disp);font-weight:800;color:#0A2342;font-size:1.05rem}
.inv-muted{color:#5a6473;font-size:.85rem}
.inv-title{text-align:right;color:#0A2342;font-family:var(--disp);font-weight:800}
.inv-title span{color:var(--amber-deep);font-size:1.3rem;letter-spacing:1px}
.inv-meta{display:flex;justify-content:space-between;gap:16px;margin:16px 0;font-size:.9rem}
.inv-table{width:100%;border-collapse:collapse;margin:12px 0}
.inv-table th,.inv-table td{border-bottom:1px solid #e2e6ee;padding:9px 6px;text-align:left}
.inv-table .r,.inv-totals .r{text-align:right}
.inv-totals{width:100%;max-width:300px;margin-left:auto;border-collapse:collapse;font-size:.92rem}
.inv-totals td{padding:6px}
.inv-totals .grand td{border-top:2px solid #0A2342;font-weight:800;color:#0A2342;font-size:1.05rem}
.inv-foot{color:#5a6473;font-size:.85rem;margin-top:18px}

/* ---------- footer do app (compacto) ---------- */
footer.site .foot-inner{padding:6px 0}
.foot-brand{font-family:var(--disp);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;color:var(--fg)}
.foot-brand img{border-radius:50%}
.foot-brand b{color:var(--accent)}
.foot-tag{font-size:13.5px;color:var(--fg-muted);max-width:52ch;margin:12px 0}

/* ---------- acoes na linha da tabela (editar / arquivar / excluir) ---------- */
.row-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.row-actions form{margin:0;display:inline}
.row-actions a{color:var(--accent-2)}
.row-actions a:hover{color:var(--accent)}

/* ---------- link-botoes (arquivar / reembolsar / acoes de foto) ---------- */
.linkbtn{background:none;border:0;color:var(--accent-2);cursor:pointer;font:inherit;font-size:13px;padding:0;transition:color .2s}
.linkbtn:hover{color:var(--accent)}
.linkbtn.danger{color:var(--err)}
.linkbtn.danger:hover{color:#ff9b9b}

/* ---------- cards de evento COM capa (home) ---------- */
main a.card.has-media{display:flex;padding:0;overflow:hidden;align-items:stretch;gap:0}
.card-media{width:40%;max-width:320px;min-height:150px;object-fit:cover;display:block;background:#000;flex:0 0 auto}
.card-body{padding:22px 24px;flex:1 1 auto;min-width:0}
main a.card .card-body h3{margin:0 0 8px}
@media(max-width:640px){
  main a.card.has-media{flex-direction:column}
  .card-media{width:100%;max-width:none;height:190px}
}

/* ---------- pagina do evento: hero + galeria ---------- */
.ev-hero{margin:6px 0 20px;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#0b1524;line-height:0}
.ev-hero img{display:block;width:100%;height:auto}
.ev-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:12px 0 22px}
.ev-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);border-radius:2px;background:#000}

/* ---------- checkout: cabecalho com imagem ---------- */
.co-head{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.co-head p{margin:0}
.co-media{width:132px;height:84px;object-fit:cover;border:1px solid var(--border);border-radius:3px;background:#000;flex:0 0 auto}

/* ---------- "seus eventos" (conta) ---------- */
main .card.ev-row{display:flex;align-items:center;gap:14px}
.ev-row .thumb{width:68px;height:46px;object-fit:cover;border-radius:3px;flex:0 0 auto;background:#000}

/* ---------- miniatura na lista admin ---------- */
.list td img.thumb{width:48px;height:32px;object-fit:cover;border-radius:2px;vertical-align:middle;margin-right:10px;background:#000}

/* ---------- gestor de fotos (admin) ---------- */
.img-manager{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:12px 0 20px}
.img-item{position:relative;margin:0;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--surface)}
.img-item.is-cover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.img-item>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#000}
.img-badge{position:absolute;top:7px;left:7px;background:var(--accent);color:var(--ink);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:2px}
.img-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px}
.img-actions form{margin:0;display:inline}
.img-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0}
.img-upload .file{display:inline-flex;flex-direction:column;gap:7px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.img-upload input[type=file]{color:var(--fg-muted);font-family:var(--body);font-size:13px;max-width:100%}
.img-upload input[type=file]::file-selector-button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--surface2);color:var(--fg);border:1px solid var(--border);
  border-radius:2px;padding:9px 13px;margin-right:12px;cursor:pointer;transition:.2s}
.img-upload input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- print (invoice) ---------- */
@media print{
  header.site,footer.site,.nav-toggle,.noprint{display:none!important}
  main.wrap{padding:0;max-width:100%}
  body{background:#fff}
  .inv{border:0;max-width:100%}
}