/* ─────────────────────────────────────────────
   1. PAGE LOAD — staggered fade-in for sections
   ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Topbar slides down */
.topbar {
  animation: fadeIn 0.35s ease both;
}

/* Stat cards stagger */
.stats .stat:nth-child(1) { animation: fadeUp 0.45s 0.05s ease both; }
.stats .stat:nth-child(2) { animation: fadeUp 0.45s 0.13s ease both; }
.stats .stat:nth-child(3) { animation: fadeUp 0.45s 0.21s ease both; }
.stats .stat:nth-child(4) { animation: fadeUp 0.45s 0.29s ease both; }

/* Charts row */
.row.r2 > .card:nth-child(1) { animation: fadeUp 0.5s 0.35s ease both; }
.row.r2 > .card:nth-child(2) { animation: fadeUp 0.5s 0.43s ease both; }

/* Table + incomplete row */
.row.r21 > .card:nth-child(1) { animation: fadeUp 0.5s 0.48s ease both; }
.row.r21 > .card:nth-child(2) { animation: fadeUp 0.5s 0.56s ease both; }


/* ─────────────────────────────────────────────
   2. STAT CARD — number count-up shimmer
   ───────────────────────────────────────────── */
@keyframes statPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.stat .sval {
  animation: statPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: inherit;
}

/* Each stat card passes its own delay down */
.stats .stat:nth-child(1) .sval { animation-delay: 0.2s; }
.stats .stat:nth-child(2) .sval { animation-delay: 0.28s; }
.stats .stat:nth-child(3) .sval { animation-delay: 0.36s; }
.stats .stat:nth-child(4) .sval { animation-delay: 0.44s; }

/* Stat card hover lift */
.stat {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.2s ease;
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
  cursor: default;
}

/* Stat icon spin-in */
@keyframes iconSpin {
  from { transform: rotate(-15deg) scale(0.7); opacity: 0; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

.stat .sicon {
  animation: iconSpin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stats .stat:nth-child(1) .sicon { animation-delay: 0.25s; }
.stats .stat:nth-child(2) .sicon { animation-delay: 0.33s; }
.stats .stat:nth-child(3) .sicon { animation-delay: 0.41s; }
.stats .stat:nth-child(4) .sicon { animation-delay: 0.49s; }


/* ─────────────────────────────────────────────
   3. SIDEBAR NAV — hover & active effects
   ───────────────────────────────────────────── */


/* Nav icon hover wobble */
.ni:not(.on):hover svg {
  animation: navWobble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes navWobble {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(-12deg) scale(1.15); }
  60%  { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Logo subtle pulse on load */
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
  50%       { box-shadow: 0 4px 20px rgba(255,255,255,0.15); }
}

.logo-img {
  animation: logoPulse 3s ease-in-out infinite;
}

.logo-img:hover {
  transform: rotate(-5deg) scale(1.08);
}


/* ─────────────────────────────────────────────
   4. TABLE ROWS — staggered slide-in
   ───────────────────────────────────────────── */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

tbody tr.anim-row {
  animation: rowFadeIn 0.3s ease both;
}

/* Row hover — smooth bg transition (already in style.css, enhancing here) */
tbody tr {
  transition: background 0.15s ease;
}

/* ─────────────────────────────────────────────
   5. BADGE — pop in on mount
   ───────────────────────────────────────────── */
@keyframes badgePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.badge {
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* ─────────────────────────────────────────────
   6. CARD — generic hover lift
   ───────────────────────────────────────────── */
.card {
  transition: box-shadow 0.25s ease,
              border-color 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────
   7. INCOMPLETE ITEMS — slide in from right
   ───────────────────────────────────────────── */
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.incomplete-item {
  animation: slideFromRight 0.35s ease both;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.2s ease;
}

/* Stagger via nth-child (handles up to 6 items per column) */
.incomplete-item:nth-child(1) { animation-delay: 0.55s; }
.incomplete-item:nth-child(2) { animation-delay: 0.63s; }
.incomplete-item:nth-child(3) { animation-delay: 0.71s; }
.incomplete-item:nth-child(4) { animation-delay: 0.79s; }
.incomplete-item:nth-child(5) { animation-delay: 0.87s; }
.incomplete-item:nth-child(6) { animation-delay: 0.95s; }

.incomplete-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}


/* ─────────────────────────────────────────────
   8. MODAL — slide up + scale
   ───────────────────────────────────────────── */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay.open {
  animation: overlayFadeIn 0.2s ease both;
}

.overlay.open .modal {
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* On mobile — slides up from bottom */
@media (max-width: 768px) {
  @keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .overlay.open .modal {
    animation: modalSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}


/* ─────────────────────────────────────────────
   9. BUTTONS — press feedback
   ───────────────────────────────────────────── */
.btn {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease,
              background 0.15s ease,
              filter 0.15s ease;
}

.btn:active {
  transform: scale(0.95) !important;
}

/* Primary button ripple effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  border-radius: inherit;
  transition: background 0.2s ease;
}

.btn-primary:active::after {
  background: rgba(255, 255, 255, 0.15);
}


/* ─────────────────────────────────────────────
   10. TOPBAR ICON BUTTONS — hover bounce
   ───────────────────────────────────────────── */
.ib {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease,
              color 0.15s ease,
              background 0.15s ease;
}

.ib:hover {
  transform: scale(1.12);
}

.ib:active {
  transform: scale(0.95);
}

/* Notification dot pulse */
@keyframes notifPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50%       { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.nd {
  animation: notifPulse 2s ease-in-out infinite;
}


/* ─────────────────────────────────────────────
   11. THEME TOGGLE — smooth spin
   ───────────────────────────────────────────── */
.theme-toggle .tt-circle svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease;
}

.theme-toggle:hover .tt-circle svg {
  transform: rotate(20deg) scale(1.2);
}


/* ─────────────────────────────────────────────
   12. TOGGLE SWITCH — smooth slide
   ───────────────────────────────────────────── */
.toggle {
  transition: background 0.25s ease;
}

.toggle::after {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease;
}

.toggle:hover::after {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}


/* ─────────────────────────────────────────────
   13. CHART CONTAINER — fade in after load
   ───────────────────────────────────────────── */
@keyframes chartReveal {
  from { opacity: 0; transform: scaleY(0.92); transform-origin: bottom; }
  to   { opacity: 1; transform: scaleY(1); }
}

.ch180, .ch140 {
  animation: chartReveal 0.6s 0.6s ease both;
}


/* ─────────────────────────────────────────────
   14. PAGE TRANSITION — when switching pages
   ───────────────────────────────────────────── */
@keyframes pageSwitchIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page.active {
  animation: pageSwitchIn 0.3s ease both;
}


/* ─────────────────────────────────────────────
   15. MOBILE SIDEBAR — smooth slide in/out
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-overlay {
    transition: opacity 0.3s ease;
  }

  /* Nav items stagger when sidebar opens */
  .sidebar.active .ni:nth-child(1) { animation: fadeUp 0.3s 0.05s ease both; }
  .sidebar.active .ni:nth-child(2) { animation: fadeUp 0.3s 0.1s ease both; }
  .sidebar.active .ni:nth-child(3) { animation: fadeUp 0.3s 0.15s ease both; }
  .sidebar.active .ni:nth-child(4) { animation: fadeUp 0.3s 0.2s ease both; }
  .sidebar.active .ni:nth-child(5) { animation: fadeUp 0.3s 0.25s ease both; }
  .sidebar.active .ni:nth-child(6) { animation: fadeUp 0.3s 0.3s ease both; }
  .sidebar.active .ni:nth-child(7) { animation: fadeUp 0.3s 0.35s ease both; }
}


/* ─────────────────────────────────────────────
   16. CHIP FILTER BUTTONS — active pop
   ───────────────────────────────────────────── */
.chip {
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chip:active {
  transform: scale(0.92);
}


/* ─────────────────────────────────────────────
   17. EMPLOYEE CARDS — already has hover, adding
       a subtle entrance for the grid
   ───────────────────────────────────────────── */
.emp-grid .emp-card-modern:nth-child(1) { animation: fadeUp 0.4s 0.05s ease both; }
.emp-grid .emp-card-modern:nth-child(2) { animation: fadeUp 0.4s 0.13s ease both; }
.emp-grid .emp-card-modern:nth-child(3) { animation: fadeUp 0.4s 0.21s ease both; }
.emp-grid .emp-card-modern:nth-child(4) { animation: fadeUp 0.4s 0.29s ease both; }
.emp-grid .emp-card-modern:nth-child(5) { animation: fadeUp 0.4s 0.37s ease both; }
.emp-grid .emp-card-modern:nth-child(6) { animation: fadeUp 0.4s 0.45s ease both; }


/* ─────────────────────────────────────────────
   18. INPUT FOCUS — smooth glow ring
   ───────────────────────────────────────────── */
.fi, .fta, .rfi {
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              background 0.15s ease;
}


/* ─────────────────────────────────────────────
   19. REDUCE MOTION — respects accessibility
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────
   F1. STEP WIZARD — animated progress
   ───────────────────────────────────────────── */

/* Step circles transition smoothly */
.step-circle {
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.step-circle.active {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--accent-lt);
}

.step-circle.done {
  transform: scale(1);
}

/* Animate the ✓ checkmark appearing in done steps */
@keyframes checkPop {
  0%   { transform: scale(0) rotate(-20deg); }
  70%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.step-circle.done::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Step connector line fill */
.step-line {
  transition: background 0.5s ease;
}

/* Step labels */
.step-label {
  transition: color 0.25s ease;
}

/* ─────────────────────────────────────────────
   F2. FORM SECTIONS — stagger on page load
   ───────────────────────────────────────────── */
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

#pstep1 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.1s ease both; }
#pstep1 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.2s ease both; }
#pstep1 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.3s ease both; }
#pstep1 .fsec:nth-child(4) { animation: sectionReveal 0.4s 0.4s ease both; }
#pstep1 .fa              { animation: sectionReveal 0.4s 0.5s ease both; }

#pstep2 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.08s ease both; }
#pstep2 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.16s ease both; }
#pstep2 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.24s ease both; }
#pstep2 .fa              { animation: sectionReveal 0.4s 0.32s ease both; }

#pstep3 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.08s ease both; }
#pstep3 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.16s ease both; }
#pstep3 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.24s ease both; }
#pstep3 .fsec:nth-child(4) { animation: sectionReveal 0.4s 0.32s ease both; }
#pstep3 .fa              { animation: sectionReveal 0.4s 0.4s ease both; }

/* ─────────────────────────────────────────────
   F3. STEP CARD TRANSITION
   ───────────────────────────────────────────── */
@keyframes stepCardIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes stepCardInBack {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Class toggled by JS */
.step-card-enter {
  animation: stepCardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.step-card-enter-back {
  animation: stepCardInBack 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────────
   F4. INPUT FIELDS — focus lift effect
   ───────────────────────────────────────────── */
.fi, .fta {
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.18s ease,
              background 0.15s ease;
}

/* .fi:focus, .fta:focus {
  transform: translateY(-1px);
} */

/* Label floats up slightly on sibling focus */
.field:focus-within .fl {
  color: var(--accent);
  transition: color 0.2s ease;
}
#pstep1 .fsec,
#pstep2 .fsec,
#pstep3 .fsec,
#sstep1 .fsec,
#sstep2 .fsec,
#sstep3 .fsec {
  transform: none;
}
/* ─────────────────────────────────────────────
   F5. IMAGE UPLOAD SLOTS — interactive states
   ───────────────────────────────────────────── */
.img-slot {
  transition: border-color 0.2s ease,
              background 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
}

.img-slot:hover:not(.filled) {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

.img-slot:active:not(.filled) {
  transform: scale(0.97);
}

/* Image filling animation */
@keyframes slotFill {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.img-slot.filled {
  animation: slotFill 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.img-slot.filled img {
  animation: slotFill 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Remove button appears on hover */
.img-remove-btn {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.img-slot:hover .img-remove-btn {
  opacity: 1;
  transform: scale(1);
}

.img-slot.filled .img-remove-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.img-slot.filled .img-remove-btn:hover {
  transform: scale(1.06);
}
#cameraModal,
#purchaseCameraModal,
#salesCameraModal,
#miscCameraModal {
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#cameraModal > div,
#purchaseCameraModal > div,
#salesCameraModal > div,
#miscCameraModal > div {
  width: calc(100% - 40px) !important;
  max-width: 480px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#cameraModal video,
#purchaseCameraModal video,
#salesCameraModal video,
#miscCameraModal video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 6px !important;
  background: #000 !important;
}

@media (max-width: 640px) {
  #cameraModal > div,
  #purchaseCameraModal > div,
  #salesCameraModal > div,
  #miscCameraModal > div {
    width: calc(100% - 40px) !important;
    max-width: 480px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
}

#salesCameraModal {
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 9999 !important;
}

#salesCameraModal > div {
  margin: 0 auto !important;
  padding: 0 !important;
  width: calc(100% - 40px) !important;
  max-width: 480px !important;
  background: none !important;
  box-shadow: none !important;
}

/* Compulsory slot pulse when empty */
@keyframes slotPulse {
  0%, 100% { border-color: var(--r); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50%       { border-color: var(--r); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.img-slot.compulsory:not(.filled) {
  animation: slotPulse 2.5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   F6. MATERIAL TYPE TOGGLE BUTTONS
   ───────────────────────────────────────────── */
.mt-btn {
  transition: background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
}

.mt-btn:hover {
  transform: translateY(-2px);
}

.mt-btn:active {
  transform: scale(0.94) !important;
}

.mt-btn.on {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

/* ─────────────────────────────────────────────
   F7. REVIEW SUMMARY GRID (step 3)
   ───────────────────────────────────────────── */
@keyframes reviewItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ig .ii:nth-child(1) { animation: reviewItemIn 0.3s 0.05s ease both; }
.ig .ii:nth-child(2) { animation: reviewItemIn 0.3s 0.1s  ease both; }
.ig .ii:nth-child(3) { animation: reviewItemIn 0.3s 0.15s ease both; }
.ig .ii:nth-child(4) { animation: reviewItemIn 0.3s 0.2s  ease both; }
.ig .ii:nth-child(5) { animation: reviewItemIn 0.3s 0.25s ease both; }
.ig .ii:nth-child(6) { animation: reviewItemIn 0.3s 0.3s  ease both; }

/* ─────────────────────────────────────────────
   F8. SUCCESS / READY ICON (step 3 top)
   ───────────────────────────────────────────── */
@keyframes successPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

#pstep3 > div:first-child > div:first-child {
  animation: successPop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─────────────────────────────────────────────
   F9. CUSTOM SELECT DROPDOWN
   ───────────────────────────────────────────── */
.fsel {
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.18s ease;
}

/* .fsel:hover {
  transform: translateY(-1px);
} */

.fsel-dropdown {
  transform-origin: top center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.18s ease;
}

.fsel-dropdown.open {
  animation: dropdownOpen 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dropdownOpen {
  from { opacity: 0; transform: scaleY(0.88) translateY(-6px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

.fsel-opt {
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}

.fsel-opt:hover {
  padding-left: 18px;
}

/* ─────────────────────────────────────────────
   F10. DRIVER-OWNER TOGGLE CHECKBOX
   ───────────────────────────────────────────── */
.doc-same-toggle {
  transition: background 0.2s ease, border-color 0.2s ease;
}

.doc-same-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-lt);
}

/* ─────────────────────────────────────────────
   F11. DRIVER URL CARD — slide in
   ───────────────────────────────────────────── */
@keyframes urlCardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.driver-url-card {
  animation: urlCardReveal 0.4s 0.5s ease both;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.driver-url-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(3, 37, 189, 0.1);
}

/* ─────────────────────────────────────────────
   F12. TOAST NOTIFICATIONS
   ───────────────────────────────────────────── */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toastify {
  animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  border-radius: 10px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ─────────────────────────────────────────────
   F13. OTHER MATERIAL CHIPS
   ───────────────────────────────────────────── */
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

#p-other-chips .chip {
  animation: chipIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─────────────────────────────────────────────
   F14. SECTION TITLES (fst) — left dot accent
   ───────────────────────────────────────────── */
.fst .sd {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fsec:focus-within .fst .sd {
  transform: scale(1.5);
}

/* ─────────────────────────────────────────────
   F15. REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .img-slot.compulsory:not(.filled) {
    animation: none;
    border-color: var(--r);
  }
  .step-circle.active {
    transform: none;
  }
}

/* ── Global Loading Overlay ── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.3s ease;
}

.loading-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  animation: spinnerRotate 1s linear infinite;
}

@keyframes spinnerRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loading-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid var(--surface3);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: spinnerPulse 1.5s ease-in-out infinite;
}

@keyframes spinnerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(3, 37, 189, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(3, 37, 189, 0.15); }
}

.loading-text {
  position: absolute;
  bottom: 30%;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  animation: loadingDots 1.4s steps(4, end) infinite;
}

@keyframes loadingDots {
  0%, 20%   { content: 'Loading'; }
  40%       { content: 'Loading.'; }
  60%       { content: 'Loading..'; }
  80%, 100% { content: 'Loading...'; }
}

/* ── Skeleton Shimmer Animation ── */
@keyframes skeletonShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
  border-radius: var(--radius);
  cursor: wait;
}

.skeleton-text {
  height: 16px;
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

.skeleton-text-lg {
  height: 24px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
  display: inline-block;
}

.skeleton-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  animation: fadeIn 0.3s ease both;
}

.skeleton-card .skeleton {
  margin-bottom: 12px;
}

.skeleton-card .skeleton:last-child {
  margin-bottom: 0;
}

/* ── Skeleton Pulse Animation  ── */
@keyframes skeletonPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton-pulse {
  background: var(--surface2);
  animation: skeletonPulse 2s ease-in-out infinite;
  border-radius: var(--radius);
}

/* ── Skeleton Table Row ── */
.skeleton-table-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.skeleton-table-cell {
  flex: 1;
  height: 18px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
  border-radius: 4px;
}

.skeleton-table-cell:first-child {
  flex: 0.5;
}

/* ── Stat Card Skeleton ── */
.skeleton-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  animation: fadeUp 0.4s ease both;
}

.skeleton-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

.skeleton-stat-value {
  height: 28px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

.skeleton-stat-label {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

/* ── Chart Skeleton ── */
.skeleton-chart {
  width: 100%;
  height: 280px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.skeleton-bar {
  flex: 1;
  min-height: 60px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
  border-radius: 4px;
}

/* ── Page Loading Skeleton  ── */
.skeleton-page {
  animation: fadeUp 0.3s ease both;
}

.skeleton-page-header {
  height: 32px;
  width: 40%;
  margin-bottom: 24px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface3) 0%,
    var(--surface2) 50%,
    var(--surface3) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s infinite;
}

.skeleton-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Stagger skeleton items */
.skeleton-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-items > .skeleton:nth-child(1) {
  animation: skeletonShimmer 2s infinite;
  animation-delay: 0s;
}

.skeleton-items > .skeleton:nth-child(2) {
  animation: skeletonShimmer 2s infinite;
  animation-delay: 0.1s;
}

.skeleton-items > .skeleton:nth-child(3) {
  animation: skeletonShimmer 2s infinite;
  animation-delay: 0.2s;
}

.skeleton-items > .skeleton:nth-child(4) {
  animation: skeletonShimmer 2s infinite;
  animation-delay: 0.3s;
}

.skeleton-items > .skeleton:nth-child(5) {
  animation: skeletonShimmer 2s infinite;
  animation-delay: 0.4s;
}

/* ── Hide content during skeleton loading ── */
.loading .real-content {
  display: none;
}

.loading .skeleton-placeholder {
  display: block;
}

.skeleton-placeholder {
  display: none;
}

/* Sales step circles (ss1-ss3, st1-st3, sl1-sl2) */
#ss1, #ss2, #ss3 {
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

#ss1.active, #ss2.active, #ss3.active {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--accent-lt);
}

#ss1.done::after, #ss2.done::after, #ss3.done::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#sl1, #sl2 { transition: background 0.5s ease; }
#st1, #st2, #st3 { transition: color 0.25s ease; }

/* Sales form section stagger */
#sstep1 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.1s ease both; }
#sstep1 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.2s ease both; }
#sstep1 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.3s ease both; }
#sstep1 .fsec:nth-child(4) { animation: sectionReveal 0.4s 0.4s ease both; }
#sstep1 .fa              { animation: sectionReveal 0.4s 0.5s ease both; }

#sstep2 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.08s ease both; }
#sstep2 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.16s ease both; }
#sstep2 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.24s ease both; }
#sstep2 .fsec:nth-child(4) { animation: sectionReveal 0.4s 0.32s ease both; }
#sstep2 .fa              { animation: sectionReveal 0.4s 0.4s ease both; }

#sstep3 .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.08s ease both; }
#sstep3 .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.16s ease both; }
#sstep3 .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.24s ease both; }
#sstep3 .fsec:nth-child(4) { animation: sectionReveal 0.4s 0.32s ease both; }
#sstep3 .fa              { animation: sectionReveal 0.4s 0.4s ease both; }

/* Sales ready icon */
#sstep3 > div:first-child > div:first-child {
  animation: successPop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─────────────────────────────────────────────
   REPORTS PAGE
   ───────────────────────────────────────────── */

/* Toolbar fades in */
.reports-toolbar {
  animation: fadeUp 0.4s 0.1s ease both;
}

/* Tab buttons */
.rt-tab {
  transition: background 0.18s ease,
              color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rt-tab:active {
  transform: scale(0.95);
}

/* Report table rows stagger — applied via JS observer */
#reports-table-body tr.anim-row {
  animation: rowFadeIn 0.3s ease both;
}

/* Misc log cards stagger */
@keyframes miscCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#misc-logs-container > div {
  animation: miscCardIn 0.35s ease both;
}

#misc-logs-container > div:nth-child(1)  { animation-delay: 0.05s; }
#misc-logs-container > div:nth-child(2)  { animation-delay: 0.1s; }
#misc-logs-container > div:nth-child(3)  { animation-delay: 0.15s; }
#misc-logs-container > div:nth-child(4)  { animation-delay: 0.2s; }
#misc-logs-container > div:nth-child(5)  { animation-delay: 0.25s; }
#misc-logs-container > div:nth-child(6)  { animation-delay: 0.3s; }
#misc-logs-container > div:nth-child(7)  { animation-delay: 0.35s; }
#misc-logs-container > div:nth-child(8)  { animation-delay: 0.4s; }

/* Misc log card hover */
#misc-logs-container > div {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.18s ease;
}

#misc-logs-container > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
  border-color: var(--accent) !important;
}

/* Filter dropdown open animation */
#type-drop.fsel-dropdown.active,
#status-drop.fsel-dropdown.active,
#period-drop.fsel-dropdown.active {
  animation: dropdownOpen 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─────────────────────────────────────────────
   MASTERS PAGE
   ───────────────────────────────────────────── */

/* Tab switcher */
.ms-tab {
  transition: background 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ms-tab:active { transform: scale(0.95); }

.ms-tab.active {
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Form card entrance */
.ms-form-card {
  animation: fadeUp 0.4s 0.1s ease both;
}

/* List card entrance */
.ms-list-card {
  animation: fadeUp 0.4s 0.18s ease both;
}

/* List rows stagger */
@keyframes msRowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ms-list-body > div {
  animation: msRowIn 0.28s ease both;
}

/* Stagger up to 12 rows */
.ms-list-body > div:nth-child(1)  { animation-delay: 0.04s; }
.ms-list-body > div:nth-child(2)  { animation-delay: 0.08s; }
.ms-list-body > div:nth-child(3)  { animation-delay: 0.12s; }
.ms-list-body > div:nth-child(4)  { animation-delay: 0.16s; }
.ms-list-body > div:nth-child(5)  { animation-delay: 0.20s; }
.ms-list-body > div:nth-child(6)  { animation-delay: 0.24s; }
.ms-list-body > div:nth-child(7)  { animation-delay: 0.28s; }
.ms-list-body > div:nth-child(8)  { animation-delay: 0.32s; }
.ms-list-body > div:nth-child(9)  { animation-delay: 0.36s; }
.ms-list-body > div:nth-child(10) { animation-delay: 0.40s; }
.ms-list-body > div:nth-child(11) { animation-delay: 0.44s; }
.ms-list-body > div:nth-child(12) { animation-delay: 0.48s; }

/* Re-trigger animation when new rows are added (via JS) */
.ms-list-body > div.ms-new-row {
  animation: msRowIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  animation-delay: 0s !important;
}

/* Form input hover lift (ms-input mirrors fi) */
.ms-input {
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.18s ease;
}

.ms-input:focus {
  transform: translateY(-1px);
}

/* Add button */
.ms-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              filter 0.15s ease;
}

.ms-btn:active { transform: scale(0.96) !important; }

/* Icon buttons in list rows */
.ms-icon-btn {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease,
              color 0.15s ease,
              background 0.15s ease;
}

.ms-icon-btn:active { transform: scale(0.9); }

/* Preview modal */
.ms-preview-modal.is-open .ms-preview-dialog {
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ms-preview-modal.is-open .ms-preview-backdrop {
  animation: overlayFadeIn 0.2s ease both;
}

/* Tabs entrance */
.ms-tabs {
  animation: fadeUp 0.4s 0.05s ease both;
}

/* ─────────────────────────────────────────────
   MISCELLANEOUS PAGE
   ───────────────────────────────────────────── */

/* Form sections */
#page-misc .fsec:nth-child(1) { animation: sectionReveal 0.4s 0.1s ease both; }
#page-misc .fsec:nth-child(2) { animation: sectionReveal 0.4s 0.2s ease both; }
#page-misc .fsec:nth-child(3) { animation: sectionReveal 0.4s 0.3s ease both; }
#page-misc .fa               { animation: sectionReveal 0.4s 0.4s ease both; }

/* Source buttons (Gallery / Camera / GPS) */
#page-misc .fsec button {
  transition: background 0.2s ease,
              color 0.2s ease,
              transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease;
}

#page-misc .fsec button:active {
  transform: scale(0.94);
}

/* Image slots on misc page */
#page-misc .img-slot {
  transition: border-color 0.2s ease,
              background 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#page-misc .img-slot:hover:not(:has(img)) {
  transform: scale(1.06);
  border-color: var(--accent);
}

/* Submit button loading consistent with purchase */
#page-misc .btn-primary {
  position: relative;
  overflow: hidden;
}