/* Custom styles for ZOLAR Team Tracker */

:root {
  --zolar-gold: #F59E0B;
  --zolar-orange: #EA580C;
}

/* Custom Scrollbar for Kanban and Containers */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tab active state */
.nav-tab.active {
  background-color: white;
  color: #d97706;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.nav-tab:not(.active) {
  color: #64748b;
}

.nav-tab:not(.active):hover {
  color: #1e293b;
  background-color: rgba(255, 255, 255, 0.5);
}

.mobile-tab-btn.active {
  background-color: #fef3c7;
  color: #b45309;
  font-weight: 700;
}

/* Kanban Drag & Drop Styles */
.kanban-column.drag-over {
  background-color: #fef3c7 !important;
  border: 2px dashed #f59e0b !important;
  transform: scale(1.01);
  transition: all 0.15s ease-in-out;
}

.kanban-card {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.kanban-card.dragging {
  opacity: 0.45;
  transform: scale(0.98) rotate(1deg);
  border: 2px dashed #f59e0b !important;
  cursor: grabbing;
}

/* Animations */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleUp {
  animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Print Styles for Manager Report */
@media print {
  body {
    background-color: white !important;
    color: black !important;
  }

  .print\:hidden {
    display: none !important;
  }

  #view-dashboard {
    display: block !important;
  }

  #view-kanban, #view-timeline {
    display: none !important;
  }

  .shadow-sm, .shadow-md, .shadow-xl {
    box-shadow: none !important;
  }

  .border {
    border-color: #e2e8f0 !important;
  }

  /* Ensure page breaks cleanly */
  .break-inside-avoid {
    break-inside: avoid;
  }
}