[x-cloak] { display: none !important; }

:root {
  --brand: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
}

html { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle, modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Card surfaces */
.card {
  background: #fff;
  border: 1px solid rgb(226 232 240 / .8);
  border-radius: 0.85rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 1px 1px rgb(15 23 42 / .02);
}
.card-hover { transition: box-shadow .15s ease, transform .15s ease; }
.card-hover:hover { box-shadow: 0 4px 14px rgb(15 23 42 / .08); }

/* Buttons */
.btn { @apply inline-flex items-center justify-center gap-1.5 rounded-lg text-sm font-medium transition; }
.btn-primary { background: var(--brand-600); color: #fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { color: #475569; }
.btn-ghost:hover { background: rgb(241 245 249); }

/* Sidebar nav links */
.nav-link {
  display: flex; align-items: center; gap: .6rem;
  border-radius: .6rem; padding: .5rem .65rem;
  font-size: .825rem; font-weight: 500; color: #475569;
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover { background: rgb(241 245 249); color: #0f172a; }
.nav-link.active { background: var(--brand-600); color: #fff; box-shadow: 0 1px 3px rgb(79 70 229 / .35); }
.nav-link.active svg { color: #fff; }
.nav-link svg { width: 1rem; height: 1rem; color: #94a3b8; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 9999px; letter-spacing: .01em; }

/* Initials avatar */
.avatar {
  display: inline-grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: #fff;
  width: 1.75rem; height: 1.75rem; border-radius: .55rem;
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
  flex-shrink: 0;
}

/* Kanban card */
.kcard { background:#fff; border:1px solid rgb(226 232 240/.9); border-radius:.7rem; padding:.6rem .7rem; box-shadow:0 1px 2px rgb(15 23 42/.04); cursor:grab; transition: box-shadow .12s ease, transform .12s ease; }
.kcard:hover { box-shadow: 0 3px 10px rgb(15 23 42/.09); }
.kcard:active { cursor:grabbing; }
.kcard.dragging { opacity:.45; box-shadow: 0 0 0 2px var(--brand); }
.kcol-drop.dragover { background: rgb(99 102 241 / .07); }

/* Inputs */
input, select, textarea {
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgb(99 102 241 / .15) !important;
  outline: none !important;
}

/* Fade-in for modals */
@keyframes pop { from { opacity:0; transform: translateY(4px) scale(.99); } to { opacity:1; transform: none; } }
.pop { animation: pop .12s ease-out; }