/* =========================================================
   UniCollab — Custom styles layered on top of Tailwind CDN
   ========================================================= */

:root {
  --brand-50:  #eef4ff;
  --brand-500: #3a5fff;
  --brand-600: #243ff5;
  --brand-700: #1d31d6;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Custom scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.55); background-clip: padding-box; }

/* Toast animations */
@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.toast {
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.removing {
  animation: toastOut 0.2s ease-in forwards;
}

/* Modal animations */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay { animation: overlayIn 0.18s ease-out forwards; }
.modal-card    { animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Progress shimmer */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(100,116,139,0.08) 0%, rgba(100,116,139,0.18) 50%, rgba(100,116,139,0.08) 100%);
  background-size: 1000px 100%;
  animation: shimmer 1.6s infinite linear;
}

/* Active sidebar link */
.nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.55rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  color: rgb(71 85 105);
  transition: background 120ms ease, color 120ms ease;
}
.dark .nav-link { color: rgb(203 213 225); }
.nav-link:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .nav-link:hover { background: rgb(30 41 59); color: rgb(255 255 255); }
.nav-link.active {
  background: linear-gradient(135deg, rgba(58,95,255,0.12), rgba(36,63,245,0.08));
  color: rgb(36 63 245);
}
.dark .nav-link.active {
  background: linear-gradient(135deg, rgba(58,95,255,0.22), rgba(36,63,245,0.10));
  color: rgb(144 176 255);
}
.nav-link.active i { color: inherit; }

/* Pill status colors */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}
.pill-drafting       { background: #f1f5f9; color: #475569; }
.pill-internal       { background: #e0f2fe; color: #075985; }
.pill-legal          { background: #fef3c7; color: #92400e; }
.pill-partner        { background: #ede9fe; color: #6d28d9; }
.pill-signature      { background: #fed7aa; color: #9a3412; }
.pill-signed         { background: #dcfce7; color: #15803d; }
.pill-completed      { background: #dcfce7; color: #15803d; }
.pill-finalized      { background: #dcfce7; color: #15803d; }
.pill-archived       { background: #e2e8f0; color: #334155; }
.pill-expiring       { background: #fee2e2; color: #b91c1c; }
/* Lifecycle status pills */
.pill-renewed        { background: #ddd6fe; color: #5b21b6; }
.pill-openended      { background: #cffafe; color: #155e75; }
.pill-pending        { background: #fef3c7; color: #92400e; }
.pill-renewal        { background: #fef9c3; color: #854d0e; }

.dark .pill-drafting   { background: rgba(100,116,139,0.18); color: #cbd5e1; }
.dark .pill-internal   { background: rgba(14,165,233,0.18); color: #7dd3fc; }
.dark .pill-legal      { background: rgba(245,158,11,0.18); color: #fbbf24; }
.dark .pill-partner    { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.dark .pill-signature  { background: rgba(249,115,22,0.18); color: #fdba74; }
.dark .pill-signed     { background: rgba(34,197,94,0.18); color: #86efac; }
.dark .pill-completed  { background: rgba(34,197,94,0.18); color: #86efac; }
.dark .pill-finalized  { background: rgba(34,197,94,0.18); color: #86efac; }
.dark .pill-archived   { background: rgba(100,116,139,0.18); color: #cbd5e1; }
.dark .pill-expiring   { background: rgba(239,68,68,0.18); color: #fca5a5; }
.dark .pill-renewed    { background: rgba(139,92,246,0.22); color: #c4b5fd; }
.dark .pill-openended  { background: rgba(6,182,212,0.22);  color: #67e8f9; }
.dark .pill-pending    { background: rgba(245,158,11,0.22); color: #fbbf24; }
.dark .pill-renewal    { background: rgba(234,179,8,0.22);  color: #fde047; }

/* KPI card hover effect */
.kpi-card {
  position: relative; overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.18);
}

/* Subtle dotted background for hero */
.hero-pattern {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,95,255,0.18) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Timeline rail */
.timeline-rail {
  position: relative;
  padding-left: 1.75rem;
}
.timeline-rail::before {
  content: ''; position: absolute; left: 0.7rem; top: 0.4rem; bottom: 0.4rem;
  width: 2px; background: rgb(226 232 240);
}
.dark .timeline-rail::before { background: rgb(51 65 85); }
.timeline-dot {
  position: absolute; left: 0.25rem; width: 0.95rem; height: 0.95rem;
  border-radius: 999px; border: 3px solid white;
  background: var(--brand-500);
}
.dark .timeline-dot { border-color: rgb(15 23 42); }

/* Empty state illustration */
.empty-svg { width: 120px; height: 120px; opacity: 0.85; }

/* Print friendliness for PDF export via print */
@media print {
  header, aside, footer, #toast-container, #modal-container { display: none !important; }
  body { background: white !important; }
}

/* Lucide icon default sizing safety */
[data-lucide] { stroke-width: 2; }

/* Focus ring */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Table row hover */
tbody tr.row-hover:hover { background: rgba(58,95,255,0.04); }
.dark tbody tr.row-hover:hover { background: rgba(58,95,255,0.08); }