/*
 * ═══════════════════════════════════════════════════════
 *  MEDLYTICS — Motion Layer  (motion.css)
 *  Additive only — loaded after style.css and theme.css.
 *
 *  Rules:
 *    • Only GPU-composited properties: transform, opacity
 *    • box-shadow / border-color used minimally (repaint only)
 *    • NO width / height / top / left animations (cause reflow)
 *    • NO filter animations (expensive)
 *    • Durations: 0.12s – 0.28s only
 *    • Does NOT override any existing transition property
 *    • Does NOT touch JS logic, IDs, or class names used in JS
 * ═══════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════
   KEYFRAMES
   All keyframes use only transform + opacity (GPU layer)
   ══════════════════════════════════════════════════════ */

@keyframes med-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes med-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes med-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes med-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ══════════════════════════════════════════════════════
   1. PAGE CONTENT — gentle entry on load
   ══════════════════════════════════════════════════════ */
.page-content {
  animation: med-fade-up 0.28s ease both;
}

/* ══════════════════════════════════════════════════════
   2. BUTTONS — lift on hover, press on active
   style.css already has transition:all .15s on .btn,
   so transform animates automatically.
   ══════════════════════════════════════════════════════ */

/* Primary / main action buttons */
.btn:not([disabled]):hover {
  transform: translateY(-1px);
}
.btn:not([disabled]):active {
  transform: translateY(0px) scale(0.99);
}

/* Smaller utility buttons that don't use .btn class */
.header-btn:not([disabled]):hover {
  transform: translateY(-1px);
}
.header-btn:not([disabled]):active {
  transform: translateY(0px);
}

/* Focus-visible ring — keyboard navigation */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary, #00D1B2);
  outline-offset: 3px;
  border-radius: var(--radius, 12px);
}

/* Disabled buttons — no animation, no pointer */
.btn[disabled],
button[disabled] {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   3. CARDS — lift on hover
   stat-card already has transform transition in style.css.
   Generic .card / .section-card need it added.
   ══════════════════════════════════════════════════════ */
.card,
.section-card {
  transition: transform 0.20s ease, box-shadow 0.20s ease !important;
}
.card:hover,
.section-card:hover {
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════
   4. INPUTS — transition already exists in style.css
   Just add transform so the field "settles" on focus.
   ══════════════════════════════════════════════════════ */
input,
select,
textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
}
input:focus,
select:focus,
textarea:focus {
  transform: none; /* prevent accidental movement, keep stable */
}

/* ══════════════════════════════════════════════════════
   5. SIDEBAR NAVIGATION
   style.css already has background/color transitions.
   Add icon scale for extra polish.
   ══════════════════════════════════════════════════════ */
.sidebar-nav a .nav-icon,
.nav-sub-item .nav-icon {
  transition: transform 0.15s ease;
}
.sidebar-nav a:hover .nav-icon,
.nav-sub-item:hover .nav-icon {
  transform: scale(1.12);
}

/* Active item pulse — very subtle, one-time on load via class */
.sidebar-nav a.active,
.nav-sub-item.active {
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ══════════════════════════════════════════════════════
   6. TABLE ROWS — subtle hover
   ══════════════════════════════════════════════════════ */
tr {
  transition: background 0.12s ease;
}
td {
  transition: background 0.12s ease, color 0.12s ease;
}

/* ══════════════════════════════════════════════════════
   7. STATUS BOXES — entry animation
   When JS sets display:block the animation auto-plays.
   No JS needed — CSS handles it.
   ══════════════════════════════════════════════════════ */
.status-box {
  animation: med-fade-up 0.22s ease both;
}

/* Alert / info boxes already on page */
.info-box {
  animation: med-fade-in 0.25s ease both;
}

/* ══════════════════════════════════════════════════════
   8. MODALS
   Notification drawer already has transform transition.
   Notification modal already has scale+translateY animation.
   Just ensure overlay fade is smooth.
   ══════════════════════════════════════════════════════ */
.notif-modal-overlay {
  transition: opacity 0.22s ease !important;
}

/* Branch selector dropdown */
.branch-selector {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ══════════════════════════════════════════════════════
   9. STAT / METRIC CARDS
   Already have transform transition via style.css.
   Ensure the ::after accent bar fades in smoothly.
   ══════════════════════════════════════════════════════ */
.stat-card::after,
.metric-card::after,
.summary-card::after {
  transition: opacity 0.20s ease !important;
}

/* ══════════════════════════════════════════════════════
   10. QUICK LINKS
   ══════════════════════════════════════════════════════ */
.quick-link-btn,
.quick-links button {
  transition: transform 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease !important;
}
.quick-link-btn:hover,
.quick-links button:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   11. PILLS / BADGES — fade in when rendered
   ══════════════════════════════════════════════════════ */
.pill {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ══════════════════════════════════════════════════════
   12. NOTIF BADGE bump animation
   Already exists in style.css (.notif-badge.bump).
   Just add base bounce keyframe for other badges.
   ══════════════════════════════════════════════════════ */
@keyframes med-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.20); }
  100% { transform: scale(1); }
}
.notif-badge {
  transition: transform 0.15s ease;
}

/* ══════════════════════════════════════════════════════
   13. FORM GROUP LABELS — subtle slide in
   ══════════════════════════════════════════════════════ */
.form-group {
  animation: med-fade-in 0.20s ease both;
}

/* ══════════════════════════════════════════════════════
   14. PERMISSION CHIPS (team-invitations)
   ══════════════════════════════════════════════════════ */
.perm-chip {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.12s ease !important;
}
.perm-chip:hover {
  transform: scale(1.03);
}
.perm-chip:active {
  transform: scale(0.97);
}

/* ══════════════════════════════════════════════════════
   15. COLLAPSIBLE PANEL BODY (permission groups)
   ══════════════════════════════════════════════════════ */
.ppanel-body {
  overflow: hidden;
  transition: opacity 0.18s ease;
}
.ppanel-body.collapsed {
  opacity: 0;
}
.ppanel-body:not(.collapsed) {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   16. COPY TOAST — already handled by inline JS transitions.
   Let this remain as-is (it uses CSS transition via .show class).
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   ACCESSIBILITY — REDUCED MOTION
   When user has prefers-reduced-motion set, disable ALL
   animations and minimize transitions to instant.
   This is the WCAG 2.1 AA standard approach.
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Keep display/visibility changes instant */
  .page-content,
  .status-box,
  .info-box,
  .form-group {
    animation: none !important;
  }
}