/* ============================================================
   CloudCare HMS — Fast Motion layer
   Snappy, system-wide micro-animations. Loaded LAST so it speeds up the
   existing animations.css timings and adds quick transitions to every
   common control. Only opacity / transform / colour / shadow are animated
   (GPU-friendly, no layout thrash). prefers-reduced-motion is honoured at
   the bottom (and by animations.css).
   ============================================================ */

:root {
  --anim-fast: 0.1s;
  --anim-mid:  0.16s;
  --anim-slow: 0.24s;
  --fm-ease:   cubic-bezier(0.2, 0, 0, 1);      /* quick start, soft landing */
  --fm-t:      0.12s;
}

/* ─── 1. Page load: short and out of the way ─────────────────────────────── */
#cms-progress::after {
  animation:
    cmsProgressFill    0.35s var(--fm-ease) forwards,
    cmsProgressShimmer 0.8s  linear         infinite,
    cmsProgressFadeOut 0.15s ease 0.35s     forwards;
}
body.cms-loading::after { transition: opacity 0.12s ease; }

.main-content > .p-3,
.main-content > .container-fluid {
  animation-duration: 0.16s;
  animation-timing-function: var(--fm-ease);
}

/* Card wave: shorter lift, tiny stagger so content never feels "late" */
.p-3 .row > [class*="col"],
.container-fluid .row > [class*="col"] {
  animation-duration: 0.2s;
  animation-timing-function: var(--fm-ease);
}
.p-3 .row > [class*="col"]:nth-child(1)   { animation-delay: 0s;    }
.p-3 .row > [class*="col"]:nth-child(2)   { animation-delay: 0.02s; }
.p-3 .row > [class*="col"]:nth-child(3)   { animation-delay: 0.04s; }
.p-3 .row > [class*="col"]:nth-child(4)   { animation-delay: 0.06s; }
.p-3 .row > [class*="col"]:nth-child(5)   { animation-delay: 0.07s; }
.p-3 .row > [class*="col"]:nth-child(6)   { animation-delay: 0.08s; }
.p-3 .row > [class*="col"]:nth-child(n+7) { animation-delay: 0.09s; }

/* Utility animation classes */
.anim-fade-in  { animation-duration: 0.15s; }
.anim-slide-up,
.anim-slide-dn,
.anim-slide-lt { animation-duration: 0.18s; }
.anim-zoom-in  { animation-duration: 0.15s; }
.anim-delay-1  { animation-delay: 0.03s; }
.anim-delay-2  { animation-delay: 0.06s; }
.anim-delay-3  { animation-delay: 0.09s; }
.anim-delay-4  { animation-delay: 0.12s; }

/* ─── 2. Buttons, links, form controls ───────────────────────────────────── */
.btn,
.page-link,
.nav-link,
.list-group-item,
.dropdown-item,
.badge,
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.accordion-button,
.select2-selection,
.page-item .page-link {
  transition:
    background-color var(--fm-t) var(--fm-ease),
    border-color     var(--fm-t) var(--fm-ease),
    color            var(--fm-t) var(--fm-ease),
    box-shadow       var(--fm-t) var(--fm-ease),
    transform        var(--fm-t) var(--fm-ease),
    opacity          var(--fm-t) var(--fm-ease);
}
a { transition: color var(--fm-t) var(--fm-ease); }

/* Tactile press feedback */
.btn:not(:disabled):not(.disabled):active { transform: scale(0.97); }
.btn:not(:disabled):not(.disabled):hover  { transform: translateY(-1px); }
.btn-link:hover, .btn-close:hover         { transform: none; }
.btn-group > .btn:hover, .input-group > .btn:hover { transform: none; }

/* ─── 3. Cards and table rows ────────────────────────────────────────────── */
.card {
  transition: box-shadow 0.15s var(--fm-ease), transform 0.15s var(--fm-ease), border-color 0.15s var(--fm-ease);
}
.table > tbody > tr,
.dataTable > tbody > tr {
  transition: background-color 0.1s var(--fm-ease);
}
.stat-card, .mini-stat, .stat-card-h {
  transition: transform 0.15s var(--fm-ease), box-shadow 0.15s var(--fm-ease);
}

/* ─── 4. Overlays: modals, dropdowns, offcanvas, collapse, tabs ──────────── */
.fade { transition: opacity 0.12s linear; }
.modal.fade .modal-dialog {
  transform: translateY(-8px);
  transition: transform 0.16s var(--fm-ease), opacity 0.12s ease;
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.fade      { transition: opacity 0.1s linear; }

.dropdown-menu.show { animation-duration: 0.12s; }
.collapsing         { transition: height 0.18s var(--fm-ease); }
.collapsing.collapse-horizontal { transition: width 0.18s var(--fm-ease); }
.offcanvas          { transition: transform 0.2s var(--fm-ease); }
.tab-pane.fade      { transition: opacity 0.1s linear; }
.tab-pane.active    { animation: fmTabIn 0.14s var(--fm-ease) both; }
@keyframes fmTabIn  { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ─── 5. Third-party widgets ─────────────────────────────────────────────── */
/* Select2 */
.select2-dropdown { animation: dropdownIn 0.12s var(--fm-ease) both; }
/* Toastr */
#toast-container > div { transition: opacity 0.12s ease; }
/* SweetAlert2 */
.swal2-popup.swal2-show   { animation: swal2-show 0.16s !important; }
.swal2-popup.swal2-hide   { animation: swal2-hide 0.1s  !important; }
.swal2-container.swal2-backdrop-show { animation-duration: 0.12s !important; }
/* Flatpickr */
.flatpickr-calendar.open  { animation-duration: 0.12s !important; }
/* Spinners spin a little faster so waits feel shorter */
.spinner-border { animation-duration: 0.55s; }
.spinner-grow   { animation-duration: 0.6s; }

/* ─── 6. Sidebar ─────────────────────────────────────────────────────────── */
.sidebar { transition-duration: 0.18s; }
.sidebar-menu li > a { transition-duration: 0.1s; }
.main-wrapper, .main-content { transition-duration: 0.18s; }

/* ─── 7. Reduced motion: keep everything instant ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Submit in progress (global double-submit guard in main.js) ─────────── */
.is-submitting { opacity: .65; cursor: progress !important; pointer-events: none; }