/* ============================================================
   MatchCar — Componentes compartilhados (P2). Construídos sobre
   tokens.css (Dub). NÃO é um 2º design system: reusa os tokens e
   os padrões de app.css; só preenche o que faltava para as telas
   administrativas novas (Equipe/Lojas/Config/Plano/Solicitações) e
   para a navegação mobile.
   ============================================================ */

/* ---------- Página / cabeçalho de seção ---------- */
.pg{max-width:1100px}
.pg-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:var(--s20)}
.pg-head .pg-title{font-size:var(--t-heading-sm);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.pg-head .pg-sub{font-size:var(--t-body);color:var(--fog);margin:4px 0 0}
.pg-head .pg-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Card ---------- */
.card2{border:1px solid var(--ash);border-radius:var(--r-card);background:var(--canvas);padding:var(--s20)}
.card2 + .card2{margin-top:var(--s16)}
.card2-title{font-size:var(--t-body-lg);font-weight:600;color:var(--charcoal);margin:0 0 4px}
.card2-sub{font-size:var(--t-body);color:var(--fog);margin:0 0 var(--s16)}

/* ---------- Tabela de dados ---------- */
.tbl-wrap{border:1px solid var(--ash);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.tbl th{text-align:left;font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.06em;
  color:var(--silver);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--ash);background:var(--paper)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--ash);color:var(--charcoal);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fafcff}
.tbl .col-actions{text-align:right;white-space:nowrap}
.tbl .muted{color:var(--fog)}

/* ---------- Badges de status ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;line-height:18px;
  padding:0 8px;border-radius:var(--r-full);border:1px solid var(--ash);background:var(--paper);color:var(--steel)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.chip.ok{background:var(--mint);border-color:transparent;color:var(--green)}
.chip.off{background:var(--paper);color:var(--fog)}
.chip.warn{background:var(--amber-wash);border-color:transparent;color:var(--amber)}
.chip.info{background:var(--blue-wash);border-color:transparent;color:var(--blue-deep)}
.chip.no-dot::before{display:none}
.chip.pro{background:var(--blue-wash);color:var(--blue-deep)}
.chip.trial{background:var(--amber-wash);color:var(--amber)}
.chip.lock{background:var(--paper);color:var(--steel)}

/* ---------- Medidor de capacidade (x / limite) ---------- */
.meter{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fog)}
.meter .bar{flex:1;max-width:180px;height:6px;border-radius:var(--r-full);background:var(--ash);overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--blue);border-radius:var(--r-full)}
.meter.full .bar i{background:var(--tangerine)}
.meter b{color:var(--charcoal);font-variant-numeric:tabular-nums}

/* ---------- Estado vazio ---------- */
.empty{border:1px dashed var(--smoke);border-radius:var(--r-card);padding:var(--s40) var(--s24);
  text-align:center;color:var(--fog);background:var(--canvas)}
.empty .empty-ic{font-size:28px;opacity:.5}
.empty .empty-title{font-size:var(--t-body-lg);font-weight:600;color:var(--charcoal);margin:8px 0 4px}
.empty .empty-msg{font-size:var(--t-body);margin:0 auto var(--s16);max-width:420px}

/* ---------- Skeleton / loading ---------- */
.skel{background:linear-gradient(90deg,var(--paper) 25%,#eee 37%,var(--paper) 63%);
  background-size:400% 100%;animation:skel 1.2s ease infinite;border-radius:6px;height:14px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.htmx-indicator{opacity:0;transition:opacity .15s}
.htmx-request .htmx-indicator{opacity:1}
.htmx-request.htmx-indicator{opacity:1}
button[disabled],.btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none}

/* ---------- Formulários ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s16)}
.field label{font-size:12.5px;font-weight:600;color:var(--slate)}
.field .hint{font-size:11.5px;color:var(--fog)}
.field .err{font-size:12px;color:var(--tangerine)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-body);color:var(--charcoal);background:var(--canvas);
  border:1px solid var(--smoke);border-radius:var(--r-input);padding:8px 10px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:rgba(37,99,235,.15) 0 0 0 3px}
.field.invalid input,.field.invalid select{border-color:var(--tangerine)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s16)}
.form-row-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--s8)}

/* ---------- Modal / confirmação (overlay-based, HTMX-friendly) ----------
   Sem <dialog>.showModal(): o htmx injeta o overlay em #modal-root e ele já
   aparece; fechar = esvaziar #modal-root (OOB swap ou botão). */
.mc-modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.45);
  display:grid;place-items:center;padding:16px;overflow-y:auto}
.mc-modal{background:var(--canvas);border-radius:var(--r-large);max-width:min(94vw,520px);width:100%;
  box-shadow:var(--sh-md);max-height:92vh;overflow-y:auto}
.mc-modal .m-head{padding:var(--s20) var(--s24) 0;display:flex;align-items:flex-start;gap:12px}
.mc-modal .m-title{font-size:var(--t-subheading);font-weight:600;color:var(--ink);margin:0;flex:1}
.mc-modal .m-close{background:none;border:none;font-size:22px;line-height:1;color:var(--silver);cursor:pointer}
.mc-modal .m-body{padding:var(--s16) var(--s24);color:var(--slate);font-size:var(--t-body)}
.mc-modal .m-foot{padding:var(--s16) var(--s24) var(--s20);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mc-modal.danger .m-title{color:var(--tangerine)}

/* ---------- Toast de sucesso (reusa .mc-toast do base) ---------- */
.mc-toast.ok{background:#065f46}
.mc-toast.warn{background:#92400e}

/* ---------- Ajuda de cargo / preview de permissões ---------- */
.role-help{font-size:12.5px;color:var(--fog);margin-top:4px}
.perm-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.perm-list .chip{background:var(--paper)}

/* =====================================================================
   NAVEGAÇÃO MOBILE (P2.3) — o bug histórico era `.sidebar{display:none}`
   a ≤820px sem alternativa. Agora vira off-canvas com hambúrguer+overlay.
   ===================================================================== */
.mc-hamburger{display:none}
.mc-overlay{display:none}
.nav-sec + .nav-sec{margin-top:6px}

@media(max-width:820px){
  /* topbar ganha o botão de menu */
  .mc-hamburger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border:1px solid var(--ash);border-radius:var(--r-button);background:var(--canvas);color:var(--charcoal);
    font-size:18px;cursor:pointer;margin-right:10px;flex:none}
  /* a sidebar deixa de sumir: vira gaveta fora da tela */
  .shell{flex-direction:column}
  .sidebar{display:flex!important;position:fixed;top:0;left:0;bottom:0;z-index:70;width:82vw;max-width:300px;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--sh-md);overflow-y:auto}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .mc-overlay{display:block;position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:60}
  .content{width:100%}
  .topbar{position:sticky;top:0;z-index:40;background:var(--canvas)}
}
@media(min-width:821px){
  /* garante que a gaveta nunca vaze no desktop */
  .sidebar{transform:none}
  .mc-overlay{display:none}
}

/* =====================================================================
   INBOX (P2.19/2.21) — mobile single-pane + composer de envio.
   Desktop mantém o split (list | thread). Mobile: só a lista OU só a
   thread (com "← Conversas"), nunca 300px+resto espremido.
   ===================================================================== */
.mc-inbox-back{display:none}
.msg-composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--ash);background:var(--canvas)}
.msg-composer textarea{flex:1;resize:vertical;min-height:40px;max-height:140px;font:inherit;
  border:1px solid var(--smoke);border-radius:var(--r-input);padding:8px 10px;color:var(--charcoal)}
.msg-composer textarea:focus{outline:none;border-color:var(--blue);box-shadow:rgba(37,99,235,.15) 0 0 0 3px}

@media(max-width:820px){
  .mc-inbox-back{display:inline-flex;margin-right:8px}
  .inbox{grid-template-columns:1fr!important;display:grid}
  /* sem thread selecionada: mostra a lista, esconde o painel vazio */
  .inbox .thread-panel{display:none}
  .inbox .convo-list{display:block}
  /* com thread: mostra a thread (full-width), esconde a lista */
  .inbox.has-thread .convo-list{display:none}
  .inbox.has-thread .thread-panel{display:flex}
}