/*
 * Dashboard Component Styles
 * Semantic naming for dashboard UI components
 * Uses DaisyUI classes in HTML; this file provides additional enhancements
 */

/* ==========================================================================
   Help System Animations
   ========================================================================== */

/* Smooth transition for help panel toggle */
.alert.hidden {
  display: none;
}

/* Help panel fade-in when shown */
.alert:not(.hidden) {
  animation: helpPanelFadeIn 0.2s ease-in-out;
}

@keyframes helpPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Heatmap Color Classes
   ========================================================================== */

/* Heatmap intensity gradient (yellow -> orange -> red) */
.heatmap-intensity-0 { background-color: #f3f4f6; color: #6b7280; }
.heatmap-intensity-10 { background-color: #fde047; color: #000000; }
.heatmap-intensity-20 { background-color: #fbbf24; color: #000000; }
.heatmap-intensity-30 { background-color: #fb923c; color: #000000; }
.heatmap-intensity-40 { background-color: #f97316; color: #000000; }
.heatmap-intensity-50 { background-color: #ea580c; color: #000000; }
.heatmap-intensity-60 { background-color: #dc2626; color: #ffffff; }
.heatmap-intensity-70 { background-color: #b91c1c; color: #ffffff; }
.heatmap-intensity-80 { background-color: #991b1b; color: #ffffff; }
.heatmap-intensity-90 { background-color: #7f1d1d; color: #ffffff; }

/* ==========================================================================
   Dashboard Card Enhancements
   ========================================================================== */

/* Smooth hover effect on dashboard cards */
.card.bg-base-100.shadow-lg {
  transition: box-shadow 0.2s ease-in-out;
}

.card.bg-base-100.shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Stats Row Enhancements
   ========================================================================== */

/* Horizontal scrolling for stats on mobile */
.stats.stats-horizontal {
  overflow-x: auto;
  scrollbar-width: thin;
}

.stats.stats-horizontal::-webkit-scrollbar {
  height: 4px;
}

.stats.stats-horizontal::-webkit-scrollbar-track {
  background: transparent;
}

.stats.stats-horizontal::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

/* ==========================================================================
   Raw Data Section
   ========================================================================== */

/* Styled details/summary for raw data sections */
details.mt-4 summary {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

details.mt-4 summary:hover {
  opacity: 1;
}

details.mt-4[open] summary {
  margin-bottom: 0.5rem;
}

/* Pre code block styling */
details pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

/* ==========================================================================
   Chart Container
   ========================================================================== */

/* Responsive chart canvas */
canvas[data-kpi-chart-target="canvas"] {
  max-width: 100%;
  height: auto !important;
}

/* Chart toggle button */
button[data-kpi-chart-target="toggleButton"] {
  transition: all 0.2s ease;
}

button[data-kpi-chart-target="toggleButton"]:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   Table Enhancements
   ========================================================================== */

/* Expandable row styling */
tr.hidden {
  display: none;
}

/* Clickable cells cursor */
td.cursor-pointer:hover {
  background-color: oklch(var(--b2));
}

/* Truncated text with tooltip potential */
.max-w-md.truncate,
.max-w-xs {
  max-width: 300px;
}

/* ==========================================================================
   Badge Enhancements
   ========================================================================== */

/* Badge in card title spacing */
.card-title .badge {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Issue type badges compact display */
.badge.badge-xs + .badge.badge-xs {
  margin-left: 0.25rem;
}

/* ==========================================================================
   Progress Bars
   ========================================================================== */

/* Animated progress bar fill */
progress.progress {
  transition: width 0.3s ease;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

/* Filter form responsive layout */
.flex.gap-4.items-end.flex-wrap > * {
  min-width: 150px;
}

/* ==========================================================================
   Dashboard Navigation
   ========================================================================== */

/* Anchor link icon styling */
.btn.btn-ghost.btn-xs svg {
  transition: transform 0.2s ease;
}

.btn.btn-ghost.btn-xs:hover svg {
  transform: scale(1.1);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Dashboard loading pulse */
.dashboard-loading {
  animation: dashboardPulse 1.5s ease-in-out infinite;
}

@keyframes dashboardPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Turbo frame loading state */
turbo-frame[busy] {
  opacity: 0.7;
  pointer-events: none;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  /* Hide navigation and actions */
  .btn.btn-ghost.btn-sm,
  .btn.btn-ghost.btn-xs,
  button[data-kpi-chart-target="toggleButton"],
  details summary {
    display: none !important;
  }
  
  /* Show all details content */
  details {
    display: block !important;
  }
  
  /* Expand hidden help panels */
  .alert.hidden {
    display: block !important;
  }
  
  /* Remove shadows for cleaner print */
  .card,
  .stats {
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
}