/* ═══════════════════════════════════════════════════════════════
   ui-modern.css — UI-MODERN-V1 (operator 2026-07-03: "overhaul the ui
   experience to be up to todays standards, more graphics, more exciting
   loading, just need to feel cutting edge").

   A purely ADDITIVE polish layer over tokens.css / components.css /
   emr-design-system.css — no selector here changes layout metrics, only
   motion, depth and loading feedback. Pairs with js/uiModern.js (the
   global skeleton-loading enhancer). Everything degrades gracefully and
   is disabled wholesale under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab-switch entrance — every panel arrives, not just appears ── */
@keyframes emrPanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.panel.active { animation: emrPanelIn .26s cubic-bezier(.2, .8, .25, 1); }

/* ── Micro-interactions on the primitives everyone touches ─────── */
button, .emr-nav-item, .tab, .filter-chip {
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease,
              background-color .15s ease, border-color .15s ease;
}
button:not(:disabled):hover { filter: brightness(1.08); }
button:not(:disabled):active { transform: scale(.965); }

/* Table rows glide instead of snapping */
table tbody tr { transition: background-color .12s ease, box-shadow .15s ease; }
table tbody tr:hover td { background: rgba(99, 102, 241, .05); }

/* Cards lift — any element opting in via .emr-lift (and the common
   dashboard card classes) */
.emr-lift, .kpi-card, .emr-doc-kpi, .stat-card {
  transition: transform .16s cubic-bezier(.2, .8, .25, 1), box-shadow .16s ease;
}
.emr-lift:hover, .kpi-card:hover, .emr-doc-kpi:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

/* ── Focus that looks designed, not default ─────────────────────── */
:focus-visible {
  outline: 2px solid rgba(99, 102, 241, .75);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Sleek scrollbars (WebKit + Firefox) ────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 130, 150, .35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 150, .30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 130, 150, .55); }

/* ── Skeleton loading (the "exciting loading") ──────────────────── */
@keyframes emrSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.emr-skel {
  display: block;
  border-radius: 6px;
  height: 12px;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, .12) 25%,
    rgba(148, 163, 184, .28) 45%,
    rgba(148, 163, 184, .12) 65%);
  background-size: 200% 100%;
  animation: emrSkelShimmer 1.4s ease-in-out infinite;
}
.emr-skel + .emr-skel { margin-top: 10px; }
.emr-skel.is-title { height: 18px; width: 38%; }
.emr-skel.is-w60 { width: 60%; }
.emr-skel.is-w85 { width: 85%; }
.emr-skel-wrap { padding: 14px 4px; }
.emr-skel-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: rgba(148, 163, 184, .8); margin-bottom: 12px;
}
@keyframes emrSkelDotPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.emr-skel-label::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #22c55e);
  animation: emrSkelDotPulse 1.1s ease-in-out infinite;
}

/* ── Utility: soft pop-in for freshly rendered content blocks ───── */
@keyframes emrPopIn {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
.emr-pop-in { animation: emrPopIn .22s cubic-bezier(.2, .8, .25, 1); }

/* ── Accessibility: honor reduced motion completely ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .panel.active, .emr-pop-in { animation: none; }
  .emr-skel { animation-duration: 3.2s; }
  button, .emr-nav-item, .tab, .filter-chip,
  table tbody tr, .emr-lift, .kpi-card, .emr-doc-kpi, .stat-card {
    transition: none;
  }
  button:not(:disabled):active { transform: none; }
  .emr-lift:hover, .kpi-card:hover, .emr-doc-kpi:hover, .stat-card:hover { transform: none; }
}