/* CNCutt Business — estilos base */
:root { --brand: #1d72f1; }

* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Transições suaves */
.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Sidebar link ativo */
.nav-link.active {
  background: rgba(29,114,241,.12);
  color: #1d72f1;
  font-weight: 600;
}
.nav-link.active i { color: #1d72f1; }

/* Navegação em grupos (accordion) */
.nav-group-btn.active { color: #1d72f1; font-weight: 600; }
.nav-group-btn.active i { color: #1d72f1; }
.nav-sub-link.active {
  background: rgba(29,114,241,.12);
  color: #1d72f1;
  font-weight: 600;
}
.nav-sub-link.active i { color: #1d72f1; }
.nav-chevron { color: #94a3b8; }
.nav-sub { animation: fadeIn .18s ease; }
.rotate-180 { transform: rotate(180deg); }

/* ── Topbar compacta (layout alternativo, mais espaço útil) ───────────── */
.h-13 { height: 3.25rem; }
.topnav-bar { min-height: 3.25rem; }
.topnav-scroll { scrollbar-width: none; }
.topnav-scroll::-webkit-scrollbar { display: none; }

.topnav-item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border-radius: .5rem;
  font-size: .82rem; font-weight: 500; color: #475569;
  white-space: nowrap; transition: background .15s, color .15s;
}
.topnav-item:hover { background: #f1f5f9; color: #1d72f1; }
.topnav-item-active { background: rgba(29,114,241,.12); color: #1d72f1; font-weight: 600; }
.topnav-item-active i { color: #1d72f1; }
/* Em telas médias esconde o rótulo, deixa só o ícone (mais compacto) */
@media (min-width: 768px) and (max-width: 1180px) {
  .topnav-label { display: none; }
  .topnav-item { padding: .45rem .55rem; }
}

/* Dropdown das abas com filhos */
.topnav-group { position: relative; }
.topnav-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: .6rem;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,.25);
  padding: .35rem; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
/* Abre por hover (desktop com mouse) OU pela classe .open (toque/clique) */
@media (hover: hover) {
  .topnav-group:hover > .topnav-dropdown { opacity: 1; visibility: visible; transform: none; }
}
.topnav-group.open > .topnav-dropdown { opacity: 1; visibility: visible; transform: none; }
.topnav-dropdown.right-0 { left: auto; right: 0; }

.topnav-drop-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: .45rem;
  font-size: .82rem; color: #475569; transition: background .12s, color .12s;
}
.topnav-drop-item:hover { background: #f1f5f9; color: #1d72f1; }
.topnav-drop-item.active { background: rgba(29,114,241,.12); color: #1d72f1; font-weight: 600; }

/* Painel do drawer de notas: desliza da direita */
.notes-drawer-panel { animation: slideInRight .22s ease; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } }
.note-card { transition: box-shadow .15s; }
.note-card:hover { box-shadow: 0 4px 14px -6px rgba(15,23,42,.2); }

/* Sub-abas horizontais do grupo ativo (2º nível de navegação) */
.subtabs-bar {
  display: flex; align-items: center; gap: .5rem;
  margin: -0.25rem 0 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid #e2e8f0; overflow: hidden;
}
.subtabs-title { font-size: .72rem; font-weight: 600; color: #94a3b8; flex-shrink: 0; }
.subtabs-scroll { display: flex; align-items: center; gap: .25rem; overflow-x: auto; }
.subtab {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .35rem .75rem; border-radius: .5rem; font-size: .8rem; font-weight: 500;
  color: #64748b; transition: background .15s, color .15s;
}
.subtab:hover { background: #f1f5f9; color: #334155; }
.subtab-active { background: rgba(29,114,241,.12); color: #1d72f1; font-weight: 600; }

/* Reordenação de abas por arrastar (topbar) */
.topnav-item[draggable="true"], .topnav-group[draggable="true"] { cursor: grab; }
.tab-dragging { opacity: .45; }
.topnav-scroll .topnav-item, .topnav-scroll .topnav-group { user-select: none; }

/* Badges de status */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:600; }
.badge-new     { background:#dbeafe; color:#1e40af; }
.badge-draft   { background:#f1f5f9; color:#475569; }
.badge-sent    { background:#fef9c3; color:#854d0e; }
.badge-closed  { background:#dcfce7; color:#166534; }
.badge-queued  { background:#e0e7ff; color:#3730a3; }
.badge-progress{ background:#fef3c7; color:#92400e; }
.badge-done    { background:#dcfce7; color:#166534; }

/* Card hover */
.hover-lift { transition: box-shadow .18s ease, transform .18s ease; }
.hover-lift:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,.15); transform: translateY(-1px); }

/* Toast */
.toast { animation: fadeIn .2s ease; }

/* Loading spinner */
.spinner { border:3px solid #e2e8f0; border-top-color: var(--brand); border-radius:50%; width:2rem; height:2rem; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Inputs consistentes */
.field {
  width:100%; border:1px solid #cbd5e1; border-radius:.5rem; padding:.55rem .75rem;
  font-size:.9rem; outline:none; transition: border-color .15s, box-shadow .15s; background:#fff;
}
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,114,241,.15); }
.label { display:block; font-size:.8rem; font-weight:600; color:#475569; margin-bottom:.3rem; }