/* VOICERO custom styles, layered on top of Tailwind */
:root { --brand: #6d28d9; --brand-deep: #4c1d95; --brand-2: #a78bfa; --ink: #16121e; }
* { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Dark sidebar */
.sidebar { background:linear-gradient(180deg,#140e26 0%, #0d0918 100%); }
.nav-group { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b6486; padding:.3rem .9rem; margin-top:.4rem; }
.nav-link { display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border-radius:.6rem; color:#b6afca; font-weight:500; font-size:.9rem; transition:.15s; position:relative; }
.nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-link:hover svg { color:#cbb9ff; }
.nav-link.active { background:linear-gradient(90deg, var(--brand), var(--brand-deep)); color:#fff; box-shadow:0 4px 14px rgba(76,29,149,.5); }
.nav-link.active svg { color:#fff; }
.nav-link svg { width:18px; height:18px; color:#7a7398; }
.nav-link .count { margin-left:auto; font-size:.68rem; font-weight:700; background:#ef4444; color:#fff; border-radius:999px; padding:.05rem .4rem; min-width:18px; text-align:center; }

/* Cards */
.card { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; box-shadow:0 1px 2px rgb(0 0 0/.04); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.875rem; padding:.6rem 1rem; border-radius:.65rem; transition:.15s; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { filter:brightness(.93); }
.btn-ghost { background:#fff; color:#334155; border-color:#e2e8f0; }
.btn-ghost:hover { background:#f8fafc; }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }

/* Inputs */
.input, .select, textarea.input { width:100%; border:1px solid #cbd5e1; border-radius:.65rem; padding:.55rem .75rem; font-size:.9rem; background:#fff; transition:.15s; }
.input:focus, .select:focus, textarea.input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.label { display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:.35rem; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:600; padding:.7rem 1rem; border-bottom:1px solid #e2e8f0; }
.tbl td { padding:.85rem 1rem; border-bottom:1px solid #f1f5f9; font-size:.875rem; color:#1e293b; }
.tbl tr:hover td { background:#f8fafc; }

/* Animations */
@keyframes fadein { from { opacity:0; transform:translateY(4px);} to {opacity:1; transform:none;} }
.fadein { animation: fadein .25s ease; }