/* ═══════════════════════════════════════════════════════════
   AUREXIS Retail Intelligence — App Styles
   Supplementary to inline <style> in index.html
   ═══════════════════════════════════════════════════════════ */

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Sidebar Scrollbar ──────────────────────── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #334155; }

/* ── Chart Container ────────────────────────── */
.chart-container { position: relative; width: 100%; }
.chart-container canvas { width: 100% !important; }

/* ── Map Popup ──────────────────────────────── */
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.leaflet-popup-content { margin: 12px 16px !important; font-size: 0.85rem; }
.map-popup-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.map-popup-stat { display: flex; justify-content: space-between; padding: 0.2rem 0; font-size: 0.8rem; color: #475569; }
.map-popup-stat span:last-child { font-weight: 600; color: #111827; }

/* ── Outlet Detail ──────────────────────────── */
.outlet-detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.outlet-detail-name { font-size: 1.25rem; font-weight: 700; color: #111827; }
.outlet-detail-code { font-size: 0.8rem; color: #6b7280; }
.outlet-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }

/* ── Loading Spinner ────────────────────────── */
.spinner {
  width: 24px; height: 24px; border: 3px solid #e5e7eb; border-top-color: #3b82f6;
  border-radius: 50%; animation: spin 0.8s linear infinite; margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Resolve Button ─────────────────────────── */
.resolve-btn {
  background: #d1fae5; color: #065f46; border: none; padding: 0.3rem 0.75rem;
  border-radius: 6px; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.resolve-btn:hover { background: #a7f3d0; }

/* ── Status Indicator ───────────────────────── */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.status-dot.active { background: #10b981; }
.status-dot.inactive { background: #9ca3af; }

/* ── Fade In Animation ──────────────────────── */
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }