Claude-Code-Workflow/ccw/src/templates/dashboard-css/01-base.css

/* ===================================
   Dashboard - Complementary Styles
   ================================== */

/* This file contains only essential CSS that cannot be achieved
   with Tailwind utilities. All layout, colors, and basic styling
   are handled by Tailwind classes in dashboard.html.

   CSS variables are defined inline in dashboard.html <style> block. */

/* Font Family Definitions */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Consolas', 'Monaco', 'Liberation Mono', 'Courier New', monospace;
}

body {
  font-family: var(--font-sans);
}

/* Scrollbar styling (cannot be done in Tailwind) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Sidebar collapse state (JavaScript-toggled class) */
.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .badge,
.sidebar.collapsed .toggle-text {
  display: none;
}

.sidebar.collapsed .nav-section-header {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
}

/* Nav item active state */
.nav-item.active {
  background-color: hsl(var(--accent));
  color: hsl(var(--primary));
  font-weight: 500;
}

.nav-item.active .nav-icon {
  color: hsl(var(--primary));
}

.nav-item.active .nav-count {
  background-color: hsl(var(--primary));
  color: white;
}

/* Nav item specific color active states */
.nav-item[data-filter="active"].active {
  background-color: hsl(var(--success-light));
}

.nav-item[data-filter="active"].active .nav-icon {
  color: hsl(var(--success));
}

.nav-item[data-filter="archived"].active {
  background-color: hsl(var(--info-light));
}

.nav-item[data-filter="archived"].active .nav-icon {
  color: hsl(var(--info));
}

.nav-item[data-lite="lite-plan"].active {
  background-color: hsl(var(--indigo-light));
}

.nav-item[data-lite="lite-plan"].active .nav-icon {
  color: hsl(var(--indigo));
}

.nav-item[data-lite="lite-fix"].active {
  background-color: hsl(var(--orange-light));
}

.nav-item[data-lite="lite-fix"].active .nav-icon {
  color: hsl(var(--orange));
}

.sidebar.collapsed .toggle-icon {
  transform: rotate(180deg);
}

/* Path menu open state (JavaScript-toggled class) */
.path-menu.open {
  display: block;
}

/* Mobile sidebar (responsive behavior beyond Tailwind) */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 56px;
    height: calc(100vh - 56px);
    z-index: 200;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
  }

  .sidebar.open {
    left: 0;
  }

  .sidebar-overlay {
    display: none;
  }

  .sidebar-overlay.open {
    display: block;
  }

  .menu-toggle-btn {
    display: block !important;
  }
}

/* Task detail drawer (complex transform animation) */
.task-detail-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.task-detail-drawer.open {
  transform: translateX(0);
}

.drawer-overlay.active {
  display: block;
}


/* ===================================
   Version Update Banner
   =================================== */

.version-update-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1));
  border-bottom: 1px solid hsl(var(--primary) / 0.3);
  padding: 0.75rem 1rem;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.version-update-banner.show {
  transform: translateY(0);
  opacity: 1;
}

.version-banner-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.version-banner-icon {
  font-size: 1.25rem;
}

.version-banner-text {
  flex: 1;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.version-banner-text code {
  background: hsl(var(--muted));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.version-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.version-banner-btn:hover {
  background: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

.version-banner-btn:active {
  transform: translateY(0);
}

.version-banner-btn.secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.version-banner-btn.secondary:hover {
  background: hsl(var(--secondary) / 0.8);
}

.version-banner-close {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-left: auto;
}

.version-banner-close:hover {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

/* Mobile responsiveness for banner */
@media (max-width: 640px) {
  .version-banner-content {
    gap: 0.5rem;
  }

  .version-banner-text {
    width: 100%;
    order: -1;
  }

  .version-banner-btn {
    flex: 1;
    justify-content: center;
  }

  .version-banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }

  .version-update-banner {
    position: relative;
    padding-right: 2.5rem;
  }
}