/* ==========================================================================
   Dufeu Brand - Desk Statistics
   Matches the m365-reports design system: components are built from Tailwind
   utilities + the shared brand tokens (see js/tailwind.config.js). This file
   only carries the base type, the gradient bar, and a few things that are
   awkward as utilities (tooltip, spinner, timeline connector, modal anim).
   ========================================================================== */

:root {
  --dufeu-blue:   #6CACE4;
  --dufeu-green:  #96d404;
  --dufeu-teal:   #127691;
  --dufeu-indigo: #1C2133;
  --dufeu-iris:   #6477BA;
  --grey-dark:    #4E4E4F;
  --grey-medium:  #818285;
  --grey-light:   #BEBEBF;
  --off-white:    #F2F2F2;
  --font-heading: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

body { font-family: var(--font-body); color: var(--grey-dark); }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.mono { font-family: var(--font-mono); }

/* Brand gradient bar under the top nav (same as m365-reports). */
.gradient-bar { background: linear-gradient(90deg, #127691, #6CACE4, #6477BA); }

/* Inline KPI icons inherit the chip's currentColor. */
.icon { width: 16px; height: 16px; stroke-width: 2; }

/* Floating tooltip for the leaderboard hover. */
.chart-tooltip {
  position: fixed; background: #fff; border: 1px solid var(--grey-light);
  border-radius: 8px; padding: 8px 10px; font-size: 12px;
  box-shadow: 0 4px 12px rgba(28,33,51,0.12); pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity 0.1s;
}

/* Timeline connector for the ticket-detail modal. */
.timeline { position: relative; padding-left: 20px; }
.timeline-line { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--grey-light); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -19px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }

/* Spinner for loading states. */
.spinner { width: 16px; height: 16px; border: 2px solid var(--grey-light); border-top-color: var(--dufeu-blue); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal entrance. */
.anim-fade  { animation: fadein 0.15s ease; }
.anim-slide { animation: slidein 0.18s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media print { nav, .no-print { display: none !important; } body { background: #fff !important; } }