/*
 * DASHBOARD.CSS
 * Admin dashboard widget-specific styles
 */

/* --------------------------------------------
 * KPI CARDS
 * -------------------------------------------- */

.kpi-card {
  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl
         shadow-lg shadow-gray-200/50 dark:shadow-black/50
         border border-gray-200/50 dark:border-gray-700/50
         rounded-2xl overflow-hidden
         transition-all duration-300;
}

.kpi-card:hover {
  @apply shadow-xl;
  transform: translateY(-2px);
}

.kpi-value {
  @apply text-3xl font-black text-gray-900 dark:text-white;
}

.kpi-label {
  @apply text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide;
}

/* --------------------------------------------
 * ACTIVITY ITEMS
 * -------------------------------------------- */

.activity-item {
  @apply flex items-start space-x-3 p-3.5 rounded-xl
         bg-gradient-to-r from-gray-50/50 to-transparent
         dark:from-gray-700/30 dark:to-transparent
         hover:from-gray-100/70 dark:hover:from-gray-700/50
         border border-gray-100 dark:border-gray-700/50
         hover:border-gray-200 dark:hover:border-gray-600
         transition-all duration-200
         cursor-pointer
         transform hover:scale-[1.01] hover:shadow-md;
}

.activity-item-new {
  /* Highlight style for new items */
}

.activity-icon {
  @apply w-6 h-6 rounded-md flex items-center justify-center
         shadow-lg ring-2;
}

.activity-icon-success {
  @apply bg-gradient-to-br from-green-500 to-green-600
         text-white shadow-green-500/30
         ring-green-100 dark:ring-green-900/50;
}

.activity-icon-danger {
  @apply bg-gradient-to-br from-red-500 to-red-600
         text-white shadow-red-500/30
         ring-red-100 dark:ring-red-900/50;
}

.activity-icon-info {
  @apply bg-gradient-to-br from-teal-500 to-teal-600
         text-white shadow-teal-500/30
         ring-teal-100 dark:ring-teal-900/50;
}

/* --------------------------------------------
 * PEAK HOURS BAR
 * -------------------------------------------- */

.peak-hour-bar {
  @apply relative h-7
         bg-gradient-to-r from-gray-100 to-gray-200
         dark:from-gray-700 dark:to-gray-600
         rounded-lg overflow-hidden
         transition-all duration-300;
}

.peak-hour-bar:hover {
  @apply shadow-md;
}

.peak-hour-bar-fill {
  @apply absolute top-0 left-0 h-full rounded-lg
         bg-gradient-to-r
         transition-all duration-700 ease-out
         shadow-lg;
}

.peak-hour-label {
  @apply w-16 text-xs font-bold text-gray-600 dark:text-gray-400;
}

/* --------------------------------------------
 * PROGRESS BARS (General)
 * -------------------------------------------- */

.progress-bar-container {
  @apply relative h-3 overflow-hidden;
}

.progress-bar-bg {
  @apply absolute inset-0 bg-gray-200/50 dark:bg-gray-700/50 rounded-full;
}

.progress-bar-fill {
  @apply absolute top-0 left-0 h-3 rounded-full
         bg-gradient-to-r
         transition-all duration-700 ease-out
         relative overflow-hidden;
}

/* --------------------------------------------
 * ALERT CARDS
 * -------------------------------------------- */

.alert-card {
  @apply group relative overflow-hidden rounded-xl
         transition-all duration-300
         hover:scale-[1.02] hover:shadow-lg;
}

.alert-card-danger {
  @apply bg-gradient-to-br from-red-50 to-red-100/50
         dark:from-red-900/30 dark:to-red-800/20
         border-2 border-red-200/50 dark:border-red-800/50;
}

.alert-card-warning {
  @apply bg-gradient-to-br from-yellow-50 to-yellow-100/50
         dark:from-yellow-900/30 dark:to-yellow-800/20
         border-2 border-yellow-200/50 dark:border-yellow-800/50;
}

.alert-card-info {
  @apply bg-gradient-to-br from-blue-50 to-blue-100/50
         dark:from-blue-900/30 dark:to-blue-800/20
         border-2 border-blue-200/50 dark:border-blue-800/50;
}

/* --------------------------------------------
 * SIZE RANKING BADGES
 * -------------------------------------------- */

.rank-badge-1 {
  @apply bg-gradient-to-br from-yellow-400 to-yellow-500
         text-white shadow-lg shadow-yellow-500/30
         ring-2 ring-yellow-200 dark:ring-yellow-900/50;
}

.rank-badge-2 {
  @apply bg-gradient-to-br from-gray-300 to-gray-400
         text-white shadow-lg shadow-gray-400/30
         ring-2 ring-gray-200 dark:ring-gray-700/50;
}

.rank-badge-3 {
  @apply bg-gradient-to-br from-orange-400 to-orange-500
         text-white shadow-lg shadow-orange-500/30
         ring-2 ring-orange-200 dark:ring-orange-900/50;
}

.rank-badge-default {
  @apply bg-gradient-to-br from-gray-100 to-gray-200
         text-gray-600 dark:from-gray-700 dark:to-gray-600
         dark:text-gray-300;
}

/* --------------------------------------------
 * CONVERSION FUNNEL
 * -------------------------------------------- */

.funnel-step {
  @apply relative;
}

.funnel-bar {
  @apply relative h-12 rounded-xl transition-all duration-700 ease-out;
}

.funnel-bar-fill {
  @apply absolute inset-y-0 left-0 rounded-xl
         transition-all duration-700 ease-out;
}

.funnel-bar-fill-full {
  @apply h-full w-full;
}

.funnel-bar-fill-partial {
  @apply rounded-l-xl;
}

.funnel-connector {
  @apply absolute top-0 left-0 w-6 h-8 flex flex-col items-center;
}

.funnel-connector-line {
  @apply w-0.5 h-full bg-gradient-to-b;
}

/* --------------------------------------------
 * TOAST NOTIFICATIONS
 * -------------------------------------------- */

.toast-notification {
  @apply flex items-start space-x-3 p-4 rounded-xl
         backdrop-blur-sm ring-2
         transition-all duration-300;
}

.toast-success {
  @apply bg-gradient-to-br from-green-500/20 to-green-600/20
         text-green-700 dark:text-green-300
         ring-green-500/30;
}

.toast-error {
  @apply bg-gradient-to-br from-red-500/20 to-red-600/20
         text-red-700 dark:text-red-300
         ring-red-500/30;
}

.toast-warning {
  @apply bg-gradient-to-br from-yellow-500/20 to-yellow-600/20
         text-yellow-700 dark:text-yellow-300
         ring-yellow-500/30;
}

.toast-info {
  @apply bg-gradient-to-br from-blue-500/20 to-blue-600/20
         text-blue-700 dark:text-blue-300
         ring-blue-500/30;
}

/* --------------------------------------------
 * WIDGET HEADERS
 * -------------------------------------------- */

.widget-header {
  @apply px-6 py-4 border-b backdrop-blur-sm
         bg-gradient-to-r from-transparent to-transparent
         dark:from-transparent dark:to-transparent;
}

.widget-header-blue {
  @apply from-blue-50/50 to-transparent dark:from-blue-900/20;
  border-color: rgb(229 231 235 / 0.5);
  @apply dark:border-gray-700/50;
}

.widget-header-purple {
  @apply from-purple-50/50 to-transparent dark:from-purple-900/20;
  border-color: rgb(229 231 235 / 0.5);
  @apply dark:border-gray-700/50;
}

.widget-header-orange {
  @apply from-orange-50/50 to-transparent dark:from-orange-900/20;
  border-color: rgb(229 231 235 / 0.5);
  @apply dark:border-gray-700/50;
}

.widget-header-teal {
  @apply from-teal-50/50 to-transparent dark:from-teal-900/20;
  border-color: rgb(229 231 235 / 0.5);
  @apply dark:border-gray-700/50;
}

.widget-header-red {
  @apply from-red-50/50 to-transparent dark:from-red-900/20;
  border-color: rgb(229 231 235 / 0.5);
  @apply dark:border-gray-700/50;
}

/* --------------------------------------------
 * ICON CONTAINERS
 * -------------------------------------------- */

.icon-container {
  @apply p-2 rounded-xl shadow-lg;
}

.icon-gradient-blue {
  @apply bg-gradient-to-br from-blue-500 to-blue-600
         shadow-blue-500/30;
}

.icon-gradient-purple {
  @apply bg-gradient-to-br from-purple-500 to-purple-600
         shadow-purple-500/30;
}

.icon-gradient-orange {
  @apply bg-gradient-to-br from-orange-500 to-orange-600
         shadow-orange-500/30;
}

.icon-gradient-teal {
  @apply bg-gradient-to-br from-teal-500 to-teal-600
         shadow-teal-500/30;
}

.icon-gradient-red {
  @apply bg-gradient-to-br from-red-500 to-red-600
         shadow-red-500/30;
}

.icon-gradient-green {
  @apply bg-gradient-to-br from-green-500 to-green-600
         shadow-green-500/30;
}

.icon-gradient-yellow {
  @apply bg-gradient-to-br from-yellow-500 to-yellow-600
         shadow-yellow-500/30;
}

/* --------------------------------------------
 * DASHBOARD GRID
 * -------------------------------------------- */

.dashboard-grid {
  @apply grid gap-6;
}

.dashboard-grid-2-col {
  @apply grid-cols-1 sm:grid-cols-2;
}

.dashboard-grid-3-col {
  @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3;
}

.dashboard-grid-4-col {
  @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-4;
}

/* --------------------------------------------
 * STATUS BADGES
 * -------------------------------------------- */

.status-badge {
  @apply inline-flex items-center px-2.5 py-1 rounded-lg
         text-xs font-bold backdrop-blur-sm ring-1;
}

.status-badge-active {
  @apply bg-gradient-to-r from-teal-500/20 to-teal-600/20
         text-teal-700 dark:text-teal-300
         ring-teal-500/30;
}

.status-badge-completed {
  @apply bg-gradient-to-r from-green-500/20 to-green-600/20
         text-green-700 dark:text-green-300
         ring-green-500/30;
}

.status-badge-cancelled {
  @apply bg-gradient-to-r from-red-500/20 to-red-600/20
         text-red-700 dark:text-red-300
         ring-red-500/30;
}

/* --------------------------------------------
 * EMPTY STATES
 * -------------------------------------------- */

.empty-state {
  @apply text-center py-12;
}

.empty-state-icon {
  @apply w-16 h-16 mx-auto mb-4 rounded-2xl
         bg-gradient-to-br from-gray-100 to-gray-200
         dark:from-gray-700 dark:to-gray-800
         flex items-center justify-center;
}

.empty-state-text {
  @apply text-sm font-medium text-gray-500 dark:text-gray-400;
}

/* --------------------------------------------
 * CUSTOM SCROLLBAR
 * -------------------------------------------- */

.dashboard-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dashboard-scroll::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800 rounded-lg;
}

.dashboard-scroll::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-lg;
}

.dashboard-scroll::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}