/* =========================================================
   Converbold dashboard — design system
   ========================================================= */
:root {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #F9FAFC;
  --border: #E7E9F0;
  --border-strong: #D5D9E3;
  --text: #0F172A;
  --muted: #64748B;
  --brand: #4F46E5;
  --brand-2: #6A63F1;
  --ring: rgba(79, 70, 229, .16);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-hover: 0 8px 24px -10px rgba(16, 24, 40, .14), 0 2px 4px rgba(16, 24, 40, .04);
  --radius: 14px;
}
.dark {
  --bg: #080A12;
  --surface: #0F121C;
  --surface-2: #141826;
  --border: #1D2232;
  --border-strong: #2A3044;
  --text: #EEF1F7;
  --muted: #8E97AB;
  --ring: rgba(129, 140, 248, .22);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-hover: 0 10px 28px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  background: var(--bg);
  color: #1E293B;
  letter-spacing: -0.006em;
}
.dark body { color: #D7DCE7; }
h1, h2, h3, h4 { letter-spacing: -0.018em; }
.tabular { font-variant-numeric: tabular-nums; }
::selection { background: rgba(79, 70, 229, .18); }

/* ---------- surfaces ---------- */.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-hover { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.section-title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; }

/* ---------- shell ---------- */
.cb-sidebar { background: #FBFBFE; border-right: 1px solid var(--border); }
.dark .cb-sidebar { background: #0B0E17; }
.cb-logo-mark {
  display: inline-flex; height: 32px; width: 32px; align-items: center; justify-content: center; border-radius: 10px; color: #fff;
  background: linear-gradient(140deg, #7C74FF 0%, #4F46E5 55%, #3B32C9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px -2px rgba(79, 70, 229, .45);
}
.cb-biz { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: .15s; }
.cb-biz:hover { border-color: var(--border-strong); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: .75rem; border-radius: 10px; padding: .4375rem .75rem; margin: 1px 0;
  font-size: .875rem; font-weight: 500; color: #526077; transition: background .15s, color .15s; line-height: 1.25rem;
}
.nav-item svg { color: #8A94A8; transition: color .15s; }
.nav-item:hover { background: rgba(15, 23, 42, .045); color: var(--text); }
.nav-item:hover svg { color: #475569; }
.nav-item.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px var(--border); }
.nav-item.active svg { color: var(--brand); }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.dark .nav-item { color: #96A0B5; }
.dark .nav-item svg { color: #69728A; }
.dark .nav-item:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.dark .nav-item.active { background: #161A28; color: #fff; box-shadow: 0 0 0 1px #232A3D; }
.dark .nav-item.active svg { color: #A5B4FC; }
.cb-plan {
  background: radial-gradient(120% 120% at 100% 0%, #7C74FF 0%, #4F46E5 45%, #312E81 100%);
  box-shadow: 0 10px 24px -12px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cb-topbar { background: rgba(246, 247, 251, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.cb-topbar.scrolled { border-bottom-color: var(--border); background: rgba(255, 255, 255, .85); }
.dark .cb-topbar { background: rgba(8, 10, 18, .78); }
.dark .cb-topbar.scrolled { background: rgba(15, 18, 28, .85); }
.dd-item { display: flex; width: 100%; align-items: center; gap: .6rem; border-radius: 8px; padding: .5rem .75rem; font-size: .875rem; color: #334155; text-align: left; }
.dd-item:hover { background: var(--surface-2); }
.dd-item svg { color: #94A3B8; }
.dark .dd-item { color: #CBD5E1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.25rem; border-radius: 10px; padding: 0 .9rem;
  font-size: .875rem; font-weight: 550; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { height: 2rem; padding: 0 .7rem; font-size: .8125rem; border-radius: 9px; }
.btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: .9375rem; border-radius: 12px; }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-sm.btn-icon { width: 2rem; }
.btn-primary {
  color: #fff; background: linear-gradient(180deg, #5F57F0 0%, #4F46E5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px #4338CA, 0 2px 4px -1px rgba(79, 70, 229, .4);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #554DEB 0%, #4338CA 100%); }
.btn-secondary { background: var(--surface); color: #334155; box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(16, 24, 40, .05); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { color: #fff; background: linear-gradient(180deg, #EF4444, #DC2626); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #B91C1C; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-ghost { color: #526077; }
.btn-ghost:hover:not(:disabled) { background: rgba(15, 23, 42, .05); color: var(--text); }
.btn-dark { color: #fff; background: #0F172A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn-dark:hover { background: #1E293B; }
.dark .btn-secondary { color: #E2E8F0; }
.dark .btn-ghost { color: #A3ACBF; }
.dark .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: #fff; }
.dark .btn-dark { background: #fff; color: #0F172A; }

/* ---------- forms ---------- */
.input {
  width: 100%; height: 2.5rem; border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 .8rem; font-size: .875rem;
  background: var(--surface); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
textarea.input { height: auto; padding: .6rem .8rem; line-height: 1.5; }
select.input { padding-right: 2rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
select[multiple].input { height: auto; background-image: none; padding: .4rem; }
.input:hover { border-color: #C3C9D6; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.input::placeholder { color: #9AA3B5; }
.dark .input:hover { border-color: #3A4258; }
.label { display: block; font-size: .8125rem; font-weight: 550; color: #3F4A5E; margin-bottom: .4rem; }
.dark .label { color: #AEB7C9; }
.hint { font-size: .75rem; color: var(--muted); margin-top: .35rem; }
input[type=checkbox]:not(.sr-only), input[type=radio]:not(.sr-only) { accent-color: var(--brand); width: 1rem; height: 1rem; }
.toggle { position: relative; width: 2.375rem; height: 1.375rem; border-radius: 9999px; background: #D5D9E3; transition: .2s; flex-shrink: 0; cursor: pointer; display: inline-block; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 9999px; background: #fff; transition: .2s cubic-bezier(.3, .7, .4, 1.2); box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
input:checked + .toggle { background: var(--brand); }
input:checked + .toggle::after { transform: translateX(1rem); }
input:focus-visible + .toggle { box-shadow: 0 0 0 3px var(--ring); }
.dark .toggle { background: #2A3044; }

/* segmented control */
.seg { display: inline-flex; border-radius: 10px; background: rgba(15, 23, 42, .055); padding: 3px; gap: 2px; }
.seg > * { border-radius: 8px; padding: .3rem .75rem; font-size: .8125rem; font-weight: 550; color: #526077; transition: .15s; }
.seg > .on, .seg > [aria-pressed=true] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04); }
.dark .seg { background: rgba(255, 255, 255, .06); }
.dark .seg > * { color: #96A0B5; }
.dark .seg > .on, .dark .seg > [aria-pressed=true] { background: #20263A; color: #fff; }

/* ---------- stat ---------- */
.stat-icon { display: inline-flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: 10px; }
.chip { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; border-radius: 9999px; padding: .125rem .5rem; font-size: .75rem; font-weight: 600; }

/* ---------- tables ---------- */
.tbl { width: 100%; font-size: .875rem; }
.tbl thead th { background: var(--surface-2); padding: .65rem 1rem; text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7A859A; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }

/* ---------- misc ---------- */
.skeleton { background: linear-gradient(90deg, #ECEEF3 25%, #F5F6F9 37%, #ECEEF3 63%); background-size: 400% 100%; animation: cbsh 1.4s ease infinite; border-radius: 8px; }
.dark .skeleton { background: linear-gradient(90deg, #161A28 25%, #1F2436 37%, #161A28 63%); background-size: 400% 100%; }
@keyframes cbsh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.stripe { background-image: repeating-linear-gradient(135deg, rgba(148, 163, 184, .18) 0 6px, transparent 6px 12px); }
.glines { background-image: linear-gradient(to bottom, transparent 43px, var(--border) 43px); background-size: 100% 44px; }
.dot-grid { background-image: radial-gradient(rgba(79, 70, 229, .13) 1px, transparent 1px); background-size: 16px 16px; }
.cb-pop { animation: cbpop .2s cubic-bezier(.2, .8, .3, 1); }
@keyframes cbpop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.cb-slide { animation: cbslide .26s cubic-bezier(.2, .8, .3, 1); }
@keyframes cbslide { from { transform: translateX(100%); } to { transform: none; } }
.cb-fade { animation: cbfade .35s ease-out both; }
@keyframes cbfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cb-toast { animation: cbpop .22s ease-out; }
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { scrollbar-width: none; }
.thin-sb::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-sb::-webkit-scrollbar-thumb { background: #D5D9E3; border-radius: 8px; }
.dark .thin-sb::-webkit-scrollbar-thumb { background: #2A3044; }
.overlay-bg { background: rgba(10, 13, 25, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
kbd { font-family: inherit; }

/* ---------- dark-mode mapping for Tailwind utilities used in templates ---------- */
.dark .text-slate-900, .dark .text-slate-800 { color: #F1F4F9; }
.dark .text-slate-700 { color: #CDD3DF; }
.dark .text-slate-600, .dark .text-slate-500 { color: #8E97AB; }
.dark .text-slate-400 { color: #6B7489; }
.dark .bg-white { background: var(--surface); }
.dark .bg-slate-50 { background: var(--surface-2); }
.dark .bg-slate-100 { background: #1A1F2F; }
.dark .bg-slate-200 { background: #232A3D; }
.dark .border-slate-200, .dark .border-slate-100, .dark .border-slate-300 { border-color: var(--border); }
.dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background: #1A1F2F; }
.dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: var(--border); }
.dark .ring-white { --tw-ring-color: var(--surface); }
.dark .border-white { border-color: var(--surface); }
.dark .bg-indigo-50, .dark .bg-brand-50 { background: rgba(99, 102, 241, .13); }
.dark .bg-indigo-100, .dark .bg-brand-100 { background: rgba(99, 102, 241, .2); }
.dark .text-indigo-700, .dark .text-brand-700 { color: #A5B4FC; }
.dark .text-indigo-600, .dark .text-brand-600 { color: #A5B4FC; }
.dark .border-indigo-100, .dark .border-indigo-200 { border-color: rgba(99, 102, 241, .25); }
.dark .bg-amber-50 { background: rgba(245, 158, 11, .1); }
.dark .bg-amber-100 { background: rgba(245, 158, 11, .16); }
.dark .text-amber-700 { color: #FCD34D; }
.dark .bg-emerald-50 { background: rgba(16, 185, 129, .1); }
.dark .bg-emerald-100 { background: rgba(16, 185, 129, .16); }
.dark .text-emerald-700 { color: #6EE7B7; }
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .3); }
.dark .bg-red-50, .dark .bg-rose-50 { background: rgba(239, 68, 68, .1); }
.dark .text-red-700, .dark .text-rose-700 { color: #FCA5A5; }
.dark .bg-sky-50 { background: rgba(14, 165, 233, .1); }
.dark .text-sky-700 { color: #7DD3FC; }
.dark .bg-violet-50 { background: rgba(139, 92, 246, .12); }
.dark .bg-pink-50 { background: rgba(236, 72, 153, .12); }
.dark .bg-teal-50 { background: rgba(20, 184, 166, .12); }
.dark .from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, .14) var(--tw-gradient-from-position); --tw-gradient-to: rgba(99, 102, 241, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .to-white { --tw-gradient-to: var(--surface) var(--tw-gradient-to-position); }
.dark kbd { background: var(--surface); border-color: var(--border); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.input.cb-search { background: var(--surface-2); box-shadow: none; }
.input.cb-search:focus { background: var(--surface); }
.snav .nav-item.active::before { display: none; }

/* dark: tinted fills used by avatars, tags and calendar blocks */
.dark .bg-rose-100, .dark .bg-red-100 { background: rgba(244, 63, 94, .18); }
.dark .bg-sky-100 { background: rgba(14, 165, 233, .18); }
.dark .bg-violet-100 { background: rgba(139, 92, 246, .2); }
.dark .bg-teal-100 { background: rgba(20, 184, 166, .18); }
.dark .bg-pink-100 { background: rgba(236, 72, 153, .18); }
.dark .text-rose-700, .dark .text-pink-700 { color: #F9A8D4; }
.dark .text-violet-700 { color: #C4B5FD; }
.dark .text-teal-700 { color: #5EEAD4; }
.dark .text-indigo-900 { color: #C7D2FE; }
.dark .text-amber-900 { color: #FDE68A; }
.dark .text-emerald-900 { color: #A7F3D0; }
.dark .text-red-900 { color: #FECACA; }
.dark .text-sky-900 { color: #BAE6FD; }
.dark .stripe { background-image: repeating-linear-gradient(135deg, rgba(148, 163, 184, .07) 0 6px, transparent 6px 12px); }
.seg > * { white-space: nowrap; }

/* top-bar search results */
.gs-item { cursor: pointer; }
.gs-item:hover { background: #F4F5F9; }
.gs-item.is-active { background: #EEF0FF; }
.dark .gs-item:hover { background: rgba(255, 255, 255, .05); }
.dark .gs-item.is-active { background: rgba(99, 102, 241, .16); }
.cb-search::-webkit-search-cancel-button, #gsearch-m::-webkit-search-cancel-button { -webkit-appearance: none; }