/* AE Management Intelligence Hub — Custom styles */

/* Smooth scrolling and clean base */
html { scroll-behavior: smooth; }

/* Tab bar styling */
.ae-tab-bar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.ae-tab-bar::-webkit-scrollbar { height: 3px; }
.ae-tab-bar::-webkit-scrollbar-thumb { border-radius: 2px; }

/* Metric table styling */
.metric-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.metric-table th { text-align: left; padding: 6px 8px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.metric-table td { padding: 6px 8px; }
.metric-table tbody tr { transition: background-color 0.15s; }

/* Card hover effect */
.venue-card { transition: transform 0.15s, box-shadow 0.15s; }
.venue-card:hover { transform: translateY(-1px); }

/* Callout boxes */
.callout { padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-top: 8px; border-left: 3px solid; }
.callout-issues { border-color: oklch(0.75 0.15 85); }
.callout-spenders { border-color: oklch(0.65 0.15 250); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  min-height: 200px;
}

/* Date picker custom */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .metric-table { font-size: 0.8rem; }
  .metric-table th, .metric-table td { padding: 4px 6px; }
}

/* Skeleton loading animation */
.skeleton-row { height: 1rem; border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* SwiftPOS status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.connected { background: oklch(0.72 0.19 145); }
.status-dot.disconnected { background: oklch(0.6 0.15 25); }