@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --sidebar-w: 240px;
}

html { font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; }

body { margin: 0; background: #f9f9fb; }
.dark body { background: #0a0a0b; }

/* Layout */
#app { display: flex; height: 100dvh; overflow: hidden; }

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 30;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 1024px) {
  #sidebar { position: relative; }
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: 0;
}

@media (min-width: 1024px) {
  #main { margin-left: 1rem; }
}

#page-content {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Sidebar text hidden on collapse */
.sidebar-collapsed .sidebar-text { display: none; }

/* Priority badges */
.priority-urgent { background: #fef2f2; color: #b91c1c; }
.priority-high   { background: #fff7ed; color: #c2410c; }
.priority-medium { background: #fefce8; color: #a16207; }
.priority-low    { background: #f0fdf4; color: #15803d; }
.priority-basic  { background: #f8fafc; color: #64748b; }

.dark .priority-urgent { background: #450a0a; color: #fca5a5; }
.dark .priority-high   { background: #431407; color: #fdba74; }
.dark .priority-medium { background: #422006; color: #fde047; }
.dark .priority-low    { background: #052e16; color: #86efac; }
.dark .priority-basic  { background: #18181b; color: #94a3b8; }

/* Animations */
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadein { animation: fadein 0.25s ease both; }

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}
.dark .skeleton {
  background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
  background-size: 800px 100%;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }

/* Login screen */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  background: #fafafa;
  display: flex; align-items: center; justify-content: center;
}
.dark #login-screen { background: #09090b; }

/* Overlay */
#sidebar-overlay {
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s;
}

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