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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles - Dark translucent theme */
@layer base {
  body {
    @apply antialiased text-slate-200 bg-slate-950 min-h-screen relative;
    font-family: 'Inter', system-ui, sans-serif;
  }

  .bg-body {
    background-image: linear-gradient(rgba(2,6,23,0.6), rgba(2,6,23,0.6)), var(--bg-url);
    @apply bg-cover bg-center bg-fixed bg-slate-950;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    @apply text-white font-medium tracking-tight;
  }

  a { @apply text-slate-300 hover:text-white transition-colors; }
}

/* Custom components */
@layer components {
  /* Dark Glass Card */
  .card {
    @apply bg-slate-900/80 backdrop-blur-md rounded-xl p-5 transition-all duration-200 border border-white/5;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .card-hover {
    @apply hover:bg-slate-800/90 hover:border-white/10;
  }

  /* Panel with overflow clipping */
  .bg-panel {
    @apply overflow-hidden;
  }

  /* Navigation Pills */
  .tab-button {
    @apply px-2 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-light text-white/70 tracking-wide transition-all duration-200;
  }

  .tab-button:hover {
    @apply bg-white/10 text-white;
  }

  .tab-button-active {
    @apply bg-white/20 text-white;
  }

  /* Section Header */
  .section-header {
    @apply text-xl font-light text-white tracking-wide mb-4;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-black/40;
  }

  .board-card {
    @apply card card-hover;
  }

  .trello-card-item {
    @apply bg-black/40 rounded-lg p-4 hover:bg-black/50 transition-all overflow-hidden;
  }

  .task-item {
    @apply bg-black/70 rounded-lg transition-colors overflow-hidden;
    box-shadow: 0 0 12px black;
  }

  .task-item:hover {
    @apply bg-black/80;
  }

  /* Text truncation for long content */
  .truncate-text {
    @apply truncate;
  }

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

/* Custom utilities */
@layer utilities {
  .section-spacing { @apply mb-10; }
  .content-max-width { @apply max-w-7xl mx-auto px-3 sm:px-6 lg:px-8; }
  .card-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6; }

  /* Scrollbar styling */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, 0.5) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.5);
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); }
}

@media print {
  .no-print { display: none !important; }
}