/* ═══════════════════════════════════════════════
   SCREENS, BUTTONS & SHARED COMPONENTS
   ═══════════════════════════════════════════════ */

/* Screens */
.screen{display:none}
.screen.active{display:block}
.screen-app.active{display:flex;min-height:100vh}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.4rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all var(--tr)}
.btn-p{background:var(--primary);color:#fff}
.btn-p:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 20px var(--primary-glow)}
.btn-o{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-o:hover{border-color:var(--primary);color:var(--primary)}
.btn-w{background:#fff;color:var(--primary)}
.btn-w:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-d{background:var(--danger);color:#fff}
.btn-d:hover{background:#c0392b}
.btn-lg{padding:.8rem 2rem;font-size:.95rem;border-radius:12px}
.btn-full{width:100%;justify-content:center}
.btn-sm{padding:.4rem .8rem;font-size:.78rem;border-radius:8px}
.btn-ghost{background:none;border:none;cursor:pointer;font-family:inherit;color:var(--text-muted);font-size:.82rem}
.btn-ghost:hover{color:var(--text)}

/* Brand */
.brand{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;color:var(--primary)}
.brand span{color:var(--accent)}

/* Cards */
.card{background:#fff;border-radius:var(--radius);padding:1.2rem;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.card-head h3{font-size:.88rem;font-weight:700}
.card-head a{font-size:.75rem;color:var(--primary);text-decoration:none;font-weight:600}

/* Empty state */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--text-muted)}
.empty-icon{font-size:2.5rem;margin-bottom:.6rem}
.empty h4{font-size:.95rem;font-weight:600;color:var(--text-sec);margin-bottom:.3rem}
.empty p{font-size:.82rem}

/* Debug Panel */
.dbg-btn{width:100%;padding:.65rem 1rem;background:#313244;color:#cdd6f4;border:none;border-radius:10px;font-size:.85rem;font-weight:500;cursor:pointer;text-align:left;transition:background .15s}
.dbg-btn:hover{background:#45475a}

/* Toast */
.toast{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--sidebar-bg);color:#fff;padding:.5rem .9rem;border-radius:8px;font-size:.75rem;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;transition:all .3s;z-index:200;white-space:nowrap;max-width:calc(100vw - 2rem);text-overflow:ellipsis;overflow:hidden;display:flex;align-items:center;gap:.6rem}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast-undo-btn{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:5px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s}
.toast-undo-btn:hover{background:rgba(255,255,255,.15)}

/* Modal */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center;padding:1rem}
.modal-ov.active{display:flex}
.modal{background:#fff;border-radius:18px;padding:1.8rem;width:92%;max-width:420px;box-shadow:var(--shadow-lg);animation:tutIn .3s ease-out}
.modal h2{font-size:1.05rem;font-weight:700;margin-bottom:1.1rem}
/* keep legacy modal-tog for other modals */
.modal-tog{display:flex;gap:.4rem;margin-bottom:.9rem}
.modal-tb{flex:1;padding:.5rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:none;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.modal-tb.a-inc{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.modal-tb.a-exp{border-color:var(--danger);background:var(--danger-light);color:var(--danger)}
.modal-fd{margin-bottom:.7rem}
.modal-fd label{display:block;font-size:.72rem;font-weight:600;color:var(--text-sec);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px}
.modal-fd input,.modal-fd select{width:100%;padding:.55rem .75rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;outline:none;transition:border-color .2s;box-sizing:border-box}
.modal-fd input:focus,.modal-fd select:focus{border-color:var(--primary)}
.modal-acts{display:flex;gap:.5rem;margin-top:1rem}
.modal-acts button{flex:1;padding:.6rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.m-cancel{background:var(--bg);border:none;color:var(--text-muted)}
.m-save{background:var(--primary);border:none;color:#fff;transition:background .2s}
.m-save:hover{background:var(--primary-dark)}

/* ─── Novo Modal: mod-new ─────────────────────── */
.mod-new{max-height:90vh;overflow-y:auto;padding:1.5rem}
.mod-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.mod-header h2{font-size:1.05rem;font-weight:700;margin:0}
.mod-close{background:none;border:none;font-size:1rem;color:var(--text-muted);cursor:pointer;padding:.2rem .4rem;border-radius:6px;transition:background .15s}
.mod-close:hover{background:var(--border-light)}

/* Type option cards */
.type-opts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.type-opt{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.75rem .5rem;border:2px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .35s cubic-bezier(.4,0,.2,1),background .35s cubic-bezier(.4,0,.2,1);font-family:inherit}
.type-opt-icon{font-size:1.4rem;line-height:1}
.type-opt-label{font-size:.85rem;font-weight:700;color:var(--text);transition:color .35s cubic-bezier(.4,0,.2,1)}
.type-opt-sub{font-size:.7rem;color:var(--text-muted)}
.type-opt-inc.active{border-color:var(--primary);background:var(--primary-light)}
.type-opt-inc.active .type-opt-label{color:var(--primary)}
.type-opt-exp.active{border-color:var(--danger);background:var(--danger-light)}
.type-opt-exp.active .type-opt-label{color:var(--danger)}

/* Valor grande */
.mod-val-wrap{display:flex;align-items:center;gap:.4rem;border:2px solid var(--primary);border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem;background:var(--primary-light);transition:border-color .35s cubic-bezier(.4,0,.2,1),background .35s cubic-bezier(.4,0,.2,1)}
.mod-val-wrap.exp{border-color:var(--danger);background:var(--danger-light)}
.mod-val-prefix{font-size:1rem;font-weight:700;color:var(--primary);flex-shrink:0;transition:color .35s cubic-bezier(.4,0,.2,1)}
.mod-val-wrap.exp .mod-val-prefix{color:var(--danger)}
.mod-val-input{flex:1;border:none;background:none;font-family:'Syne',inherit;font-size:1.6rem;font-weight:700;color:var(--text);outline:none;min-width:0}
.mod-val-input::placeholder{color:var(--text-muted);font-weight:400;font-size:1.2rem}

/* Two-column row */
.mod-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* Category pills */
.cat-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.cat-opt{padding:.3rem .75rem;border-radius:50px;border:1.5px solid var(--border);background:#fff;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;color:var(--text-sec)}
.cat-opt:hover{border-color:var(--primary);color:var(--primary)}
.cat-opt.selected-inc{background:var(--primary);border-color:var(--primary);color:#fff}
.cat-opt.selected-exp{background:var(--danger);border-color:var(--danger);color:#fff}
.cat-opt-new{border-style:dashed;color:var(--text-muted)}
.cat-opt-new:hover{border-color:var(--primary);color:var(--primary);border-style:dashed}

/* Mobile-only category select — hidden on desktop */
.mod-cat-select-mobile{display:none}

/* Toggle row */
.toggle-row{
  display:flex;
  align-items:flex-start; /* permite título + descrição abaixo */
  justify-content:space-between;
  gap:.8rem;
  padding:.75rem .9rem;
  background:var(--primary-light);
  border-radius:10px;
  margin-bottom:.7rem;
}

/* Container de texto */
.toggle-row-info{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  flex:1;
}

/* NOVO: linha do topo (título + toggle) */
.toggle-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Título */
.toggle-row-label{
  font-size:.82rem;
  font-weight:600;
  color:var(--text);
}

/* Subtexto */
.toggle-row-sub{
  font-size:.72rem;
  color:var(--text-muted);
}

/* Toggle */
.ts-wrap{
  position:relative;
  display:inline-flex;
  cursor:pointer;
  flex-shrink:0;
}

.ts-wrap input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.ts-track{
  display:inline-flex;
  width:40px;
  height:22px;
  background:var(--border);
  border-radius:50px;
  transition:background .2s;
  position:relative;
}

.ts-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.ts-wrap input:checked + .ts-track{
  background:var(--primary);
}

.ts-wrap input:checked + .ts-track .ts-thumb{
  transform:translateX(18px);
}

/* Submit button */
.mod-submit{width:100%;padding:.85rem;border:none;border-radius:12px;background:var(--primary);color:#fff;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .35s cubic-bezier(.4,0,.2,1);margin-top:.5rem}
.mod-submit:hover{background:var(--primary-dark)}
.mod-submit.exp{background:var(--danger)}
.mod-submit.exp:hover{background:#b83228}

/* ── WhatsApp phone input ────────────────────────── */
.cfg-wpp-input-wrap {
  display: none;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
  padding: .75rem .9rem;
  background: var(--bg-soft, #f6faf8);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  animation: fadeIn .2s ease;
}
.cfg-wpp-input-wrap.open { display: flex; }
.cfg-wpp-input {
  flex: 1;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s;
  background: #fff;
}
.cfg-wpp-input:focus { border-color: var(--primary); }
#cfgWppBtn { flex-shrink: 0; white-space: nowrap; }

/* ── Modal mobile: bottom sheet ─────────────────── */
@media (max-width: 600px) {
  /* Overlay alinha na base só para o modal de novo lançamento */
  #modOv { align-items: flex-end; padding: 0; }

  /* mod-new vira bottom sheet */
  .mod-new {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    padding: 1.1rem 1.1rem 1.4rem;
  }

  /* Drag handle visual */
  .mod-new::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto .9rem;
  }

  /* Tipo: botões menores lado a lado */
  .type-opts { gap: .45rem; margin-bottom: .75rem; }
  .type-opt { padding: .55rem .4rem; border-radius: 10px; }
  .type-opt-icon { font-size: 1.15rem; }
  .type-opt-label { font-size: .78rem; }

  /* Valor: fonte menor */
  .mod-val-wrap { padding: .55rem .85rem; margin-bottom: .75rem; }
  .mod-val-input { font-size: 1.35rem; }

  /* Data + Pagamento: lado a lado com gap adequado */
  .mod-row-2 { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Campos: padding reduzido, fundo branco */
  .modal-fd { margin-bottom: .55rem; }
  .modal-fd input, .modal-fd select {
    padding: .48rem .65rem;
    font-size: .82rem;
    background: #fff;
  }

  /* Categoria: ocultar pills, mostrar select */
  .cat-pills { display: none; }
  .mod-cat-select-mobile {
    display: block;
    width: 100%;
    padding: .48rem .65rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .82rem;
    background: #fff;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 1.8rem;
  }
  .mod-cat-select-mobile:focus { border-color: var(--primary); }

  /* Recorrência: compactar */
  .toggle-row { padding: .6rem .75rem; margin-bottom: .55rem; }

  /* Detalhes recorrência */
  .mod-recur-detail { margin-bottom: .55rem; }

  /* Comprovante: compactar */
  #modAttachField { margin-bottom: .55rem; }
  .attach-area { padding: .55rem; }

  /* Botão submit */
  .mod-submit { padding: .75rem; font-size: .9rem; margin-top: .4rem; }
}

/* ── Dashboard fade ao trocar mês ───────────── */
.dash-fade-out { opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.dash-fade-in  { opacity: 1; transform: translateY(0);   transition: opacity .25s ease, transform .25s ease; }

/* ── Gráfico de barras: animação crescer ────── */
.ch-bar { transform-origin: bottom; animation: barGrow .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes barGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}