/* Shared Modern UI Styles */

/* Stat Pills */
.stat-pill {
  @apply flex items-center gap-2 px-4 py-2 rounded-xl bg-base-200/80 border border-base-content/5;
}
.stat-pill-value {
  @apply text-xl font-bold;
}
.stat-pill-label {
  @apply text-xs text-base-content/60 uppercase tracking-wider;
}
.stat-pill-success {
  @apply bg-success/10 border-success/20;
}
.stat-pill-success .stat-pill-value {
  @apply text-success;
}
.stat-pill-info {
  @apply bg-info/10 border-info/20;
}
.stat-pill-info .stat-pill-value {
  @apply text-info;
}

/* Town Chips */
.town-chip {
  @apply flex items-center gap-2 px-3 py-1.5 rounded-full bg-base-200 hover:bg-base-300 transition-all text-sm whitespace-nowrap cursor-pointer;
}
.town-chip-count {
  @apply px-2 py-0.5 rounded-full bg-base-content/10 text-xs font-mono;
}
.town-chip-active {
  @apply bg-primary text-primary-content;
}
.town-chip-active .town-chip-count {
  @apply bg-primary-content/20;
}
.town-chip-clear {
  @apply bg-error/10 text-error hover:bg-error/20;
}

/* Modern Table Card */
.modern-table-card {
  @apply bg-gradient-to-br from-neutral to-neutral/80 rounded-2xl shadow-xl border border-base-content/5 overflow-hidden;
}

/* Modern Table */
.modern-table {
  @apply w-full;
}
.modern-table thead {
  @apply bg-base-content/5;
}
.modern-table th {
  @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-base-content/60;
}
.modern-table td {
  @apply px-4 py-4;
}
.modern-table tbody tr {
  @apply border-t border-base-content/5;
}

/* Sort Header */
.sort-header {
  @apply flex items-center gap-1 hover:text-primary transition-colors cursor-pointer;
}

/* Table Row Hover */
.table-row-hover {
  @apply transition-all duration-200;
}
.table-row-hover:hover {
  @apply bg-primary/5;
}

/* Row urgency highlighting */
.row-urgent {
  @apply bg-error/5 border-l-4 border-l-error;
}
.row-urgent:hover {
  @apply bg-error/10;
}
.row-prime {
  @apply bg-warning/5 border-l-4 border-l-warning;
}
.row-prime:hover {
  @apply bg-warning/10;
}
.row-sameday {
  @apply bg-info/5 border-l-4 border-l-info;
}
.row-sameday:hover {
  @apply bg-info/10;
}

/* Status Badge */
.status-badge {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium;
}
.status-dot {
  @apply w-1.5 h-1.5 rounded-full;
}
.status-waiting {
  @apply bg-warning/10 text-warning;
}
.status-waiting .status-dot {
  @apply bg-warning animate-pulse;
}
.status-outfordelivery {
  @apply bg-info/10 text-info;
}
.status-outfordelivery .status-dot {
  @apply bg-info animate-pulse;
}
.status-finalized {
  @apply bg-success/10 text-success;
}
.status-finalized .status-dot {
  @apply bg-success;
}
.status-cancelled, .status-issue {
  @apply bg-error/10 text-error;
}
.status-cancelled .status-dot, .status-issue .status-dot {
  @apply bg-error;
}
.status-default {
  @apply bg-base-content/10 text-base-content/60;
}
.status-default .status-dot {
  @apply bg-base-content/40;
}

/* Special Tags */
.special-tag {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide;
}
.tag-emergency {
  @apply bg-error text-error-content animate-pulse;
}
.tag-prime {
  @apply bg-warning text-warning-content;
}
.tag-sameday {
  @apply bg-info text-info-content;
}

/* Gallons Badge */
.gallons-badge {
  @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-success/10 border border-success/20 text-success font-mono text-lg font-bold shadow-sm;
}
.gallons-fill {
  @apply bg-info/10 text-info border-info/20;
}

/* Action Buttons */
.action-btn {
  @apply p-2 rounded-lg hover:bg-base-content/10 transition-colors text-base-content/60 hover:text-base-content;
}
.action-btn-secondary {
  @apply hover:bg-secondary/20 hover:text-secondary;
}
.action-btn-accent {
  @apply hover:bg-accent/20 hover:text-accent;
}
.action-btn-success {
  @apply hover:bg-success/20 hover:text-success;
}

/* Mobile Cards */
.mobile-card {
  @apply bg-base-100/50 backdrop-blur-sm rounded-xl mb-4 shadow-sm border border-base-content/5;
}
.mobile-card-urgent {
  @apply border-l-4 border-l-error bg-error/5;
}
.mobile-card-prime {
  @apply border-l-4 border-l-warning bg-warning/5;
}
.mobile-card-sameday {
  @apply border-l-4 border-l-info bg-info/5;
}
