/* =========================
   style.css — versão final
   - renomear e excluir lado a lado no cabeçalho da categoria
   ========================= */

:root{
  --fundo: #f4f6f9;
  --branco: #ffffff;
  --accent: #00796b;
  --accent-escuro: #004d40;
  --azul: #0288d1;
  --muted: #666666;
  --borda: #e6e6e6;
  --radius: 12px;
  --gap: 20px;
  --base-font: 16px;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; background:var(--fundo); font-family:"Segoe UI", Arial, sans-serif; font-size:var(--base-font); color:#222; }

/* Layout */
.layout { display:flex; flex-wrap:wrap; gap:var(--gap); padding:20px; align-items:flex-start; justify-content:space-between; }

/* Caixa da lista */
.caixa-lista { flex:1 1 420px; min-width:300px; background:var(--branco); padding:20px; border-radius:var(--radius); box-shadow:0 6px 12px rgba(0,0,0,0.08); display:flex; flex-direction:column; gap:12px; }
.caixa-lista h1 { text-align:center; color:var(--accent-escuro); margin:0 0 8px 0; font-size:clamp(20px,2.5vw,26px); }

/* Top control */
.controles-topo { display:flex; justify-content:flex-end; }
.acao-pequena { padding:6px 8px; border-radius:6px; border:none; background:var(--azul); color:#fff; cursor:pointer; font-weight:700; font-size:0.9rem; }

/* Container de categorias */
.listas { display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 260px); overflow:auto; padding-right:6px; }

/* Seção de categoria */
.category-section { background:#fbfbfb; border:1px solid var(--borda); padding:12px; border-radius:10px; }

/* Cabeçalho da categoria: título + renomear + excluir (lado a lado) */
.category-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.titulo-wrap { display:flex; align-items:center; gap:8px; }
.category-header h3 { margin:0; color:var(--accent); font-size:clamp(16px,2vw,20px); }

/* Botões Renomear e Excluir lado a lado, discretos */
.botao-acao-categoria {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  color: #222;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.botao-acao-categoria:hover { background: rgba(0,0,0,0.04); }

/* botão de excluir com destaque de cor */
.botao-excluir-categoria {
  border-color: rgba(198,40,40,0.18);
  color: #c62828;
}
.botao-excluir-categoria:hover { background: rgba(198,40,40,0.06); }

/* Menu de ações (⋯) permanece opcional à direita */
.inline-menu { position:relative; display:inline-block; }
.menu-panel { position:absolute; right:0; top:calc(100% + 6px); background:var(--branco); border:1px solid var(--borda); box-shadow:0 6px 12px rgba(0,0,0,0.08); border-radius:8px; min-width:160px; z-index:50; padding:6px; }
.menu-panel button { display:block; width:100%; text-align:left; padding:8px 10px; border:none; background:transparent; cursor:pointer; font-weight:600; color:#222; border-radius:6px; }
.menu-panel button:hover { background:#f2f7fb; }
.menu-panel.hidden { display:none; }

/* Itens da categoria */
.category-section ul { list-style:none; margin:0; padding:0; }
.category-section li { display:flex; justify-content:space-between; align-items:center; background:var(--branco); border:1px solid #eee; padding:10px; border-radius:8px; margin-bottom:8px; font-weight:600; color:#222; font-size:clamp(14px,2vw,18px); }
.item-meta { color:var(--muted); font-weight:500; font-size:0.95em; margin-top:4px; }

/* Caixa do formulário */
.caixa-form { flex:1 1 420px; min-width:300px; background:var(--branco); padding:20px; border-radius:14px; box-shadow:0 8px 16px rgba(0,0,0,0.10); display:flex; flex-direction:column; gap:12px; }
.caixa-form h1 { text-align:center; color:var(--accent); margin:0 0 12px 0; font-size:clamp(20px,2.5vw,26px); font-weight:700; }

/* Formulário */
.form-adicionar { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:6px; }
.form-adicionar input, .form-adicionar select { flex:1 1 45%; padding:clamp(12px,2vw,16px); border:1px solid #ccc; border-radius:8px; font-size:clamp(14px,2vw,18px); background-color:#fafafa; }
.form-adicionar button { flex:1 1 100%; padding:clamp(12px,2vw,16px); border:none; background:var(--accent); color:#fff; font-weight:700; border-radius:8px; cursor:pointer; }
.form-adicionar button:hover { background:var(--accent-escuro); }

/* Ações da lista */
.acoes-lista { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.acao-principal { padding:10px 12px; border-radius:8px; border:none; background:var(--azul); color:#fff; font-weight:700; cursor:pointer; font-size:clamp(14px,2vw,18px); }
.acao-perigo { padding:10px 12px; border-radius:8px; border:none; background:#d32f2f; color:#fff; font-weight:700; cursor:pointer; font-size:clamp(14px,2vw,18px); }

/* Controles visuais */
.controles-visual { display:flex; gap:8px; align-items:center; justify-content:flex-start; margin-top:6px; flex-wrap:wrap; }
.rotulo-pequeno { font-size:0.9rem; color:var(--muted); display:flex; align-items:center; gap:8px; }

/* Controles de categorias compactos */
.controles-categorias-compactos { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.controles-categorias-compactos input { padding:10px; border-radius:8px; border:1px solid #ccc; background:#fff; font-size:0.95rem; }

/* Import / Export */
.import-export { display:flex; gap:8px; margin-top:10px; }

/* Toast undo */
.toast { position:fixed; right:20px; bottom:20px; background:rgba(0,0,0,0.85); color:#fff; padding:10px 14px; border-radius:8px; display:flex; gap:10px; align-items:center; z-index:9999; }
.toast button { background:rgba(255,255,255,0.12); color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:700; }

/* Helpers */
.hidden { display:none !important; }
.pequeno { font-size:0.9rem; color:var(--muted); }

/* Responsividade */
@media (max-width:900px) {
  .layout { flex-direction:column; padding:14px; gap:14px; }
  .caixa-lista, .caixa-form { flex:1 1 100%; min-width:auto; }
  :root { --base-font: calc(var(--base-font) * 1.12); }
}
@media (max-width:420px) {
  .form-adicionar input, .form-adicionar select { flex:1 1 100%; }
  .category-section h3 { font-size:1rem; }
  .category-section li { font-size:1rem; padding:10px; }
}