/* modern.css — a motion and polish layer, loaded last so it only *adds* to the
   app: entrance animations, hover depth, smoother interactions, nicer focus and
   scrollbars. It changes no layout, and it stands down entirely for anyone who
   has asked their system for reduced motion. */

/* ─────────── design-token nudges ─────────── */
:root {
  --radius: 9px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 34px rgba(16, 24, 40, .12);
}
body.dark { --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .5); }

/* ─────────── keyframes ─────────── */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheen { to { background-position: 200% 0; } }
@keyframes softPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .0); } 50% { box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); } }

/* ─────────── view + card entrances ─────────── */
#view > * { animation: fadeIn .28s var(--ease) both; }

.dash-grid > .card,
.rep-kpis > .rep-kpi,
.crew-grid > .crew-card,
.rep-section,
.exp-top { animation: riseIn .42s var(--ease) both; }

/* a gentle stagger, so the grid assembles rather than snapping in */
.dash-grid > .card:nth-child(1), .rep-kpis > .rep-kpi:nth-child(1), .crew-grid > .crew-card:nth-child(1) { animation-delay: .02s; }
.dash-grid > .card:nth-child(2), .rep-kpis > .rep-kpi:nth-child(2), .crew-grid > .crew-card:nth-child(2) { animation-delay: .06s; }
.dash-grid > .card:nth-child(3), .rep-kpis > .rep-kpi:nth-child(3), .crew-grid > .crew-card:nth-child(3) { animation-delay: .10s; }
.dash-grid > .card:nth-child(4), .rep-kpis > .rep-kpi:nth-child(4), .crew-grid > .crew-card:nth-child(4) { animation-delay: .14s; }
.dash-grid > .card:nth-child(5), .rep-kpis > .rep-kpi:nth-child(5), .crew-grid > .crew-card:nth-child(5) { animation-delay: .18s; }
.dash-grid > .card:nth-child(6), .rep-kpis > .rep-kpi:nth-child(6), .crew-grid > .crew-card:nth-child(6) { animation-delay: .22s; }
.dash-grid > .card:nth-child(n+7) { animation-delay: .26s; }

/* ─────────── depth on hover ─────────── */
.card, .rep-kpi, .crew-card {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  will-change: transform;
}
.card:hover, .rep-kpi:hover, .crew-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* the top alert earns a slow, calm pulse so the eye finds it */
.dash-trouble { animation: riseIn .4s var(--ease) both, softPulse 3.2s ease-in-out 1s infinite; }
.dash-trouble:hover { animation-play-state: paused; }

/* ─────────── buttons & nav ─────────── */
.btn, .tb, .nav-btn, .icon-btn, .swatch, button.attach-name, .crm-item, .rep-click {
  transition: background .16s var(--ease), color .16s var(--ease),
              transform .12s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.btn:active, .tb:active, .nav-btn:active, .icon-btn:active { transform: translateY(1px) scale(.985); }
.btn.primary:hover, .btn:not(.ghost):not(.danger):hover { box-shadow: 0 4px 12px rgba(47, 107, 79, .22); }

/* a left indicator that grows in, matching the vertical sidebar */
.nav-btn { position: relative; }
.nav-btn::after {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px; background: var(--brand);
  transform: scaleY(0); transform-origin: center; transition: transform .2s var(--ease);
}
.nav-btn:hover::after { transform: scaleY(.5); }
.nav-btn.on::after { transform: scaleY(1); }

/* rows and list items feel alive on hover */
.rep-table tbody tr { transition: background .14s var(--ease); }
.crm-item, .rep-click, .act-row { transition: background .14s var(--ease); }

/* ─────────── menus & dialogs ─────────── */
.menu { animation: popIn .16s var(--ease) both; transform-origin: top left; }
.backdrop { animation: fadeIn .18s ease both; }
.backdrop > .card, .backdrop > div, .dialog, .modal { animation: popIn .22s var(--ease) both; }
.toast { transition: transform .28s var(--ease), opacity .28s var(--ease); }

/* ─────────── inputs & focus ─────────── */
.field, input.field, select.field, textarea.field {
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.field:focus, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; }

/* ─────────── nicer scrollbars ─────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

/* ─────────── loading shimmer utility ─────────── */
.shimmer {
  background: linear-gradient(100deg, var(--panel-2) 30%, var(--line) 50%, var(--panel-2) 70%);
  background-size: 200% 100%; animation: sheen 1.3s linear infinite; border-radius: var(--radius);
}

/* ─────────── respect the user's wishes ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, #view > *, .card, .rep-kpi, .crew-card, .dash-trouble, .menu, .backdrop > *, .toast {
    animation: none !important;
    transition: none !important;
  }
  .card:hover, .rep-kpi:hover, .crew-card:hover { transform: none; }
}