/* ===== Motion + desktop collapsible sidebar (v2.2) ===== */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --rail-width: 76px; }

/* --- Desktop: hamburger toggles full sidebar <-> icon rail --- */
@media (min-width: 769px) {
  #sidebarToggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 12px;
    border-radius: 12px; border: 1px solid rgba(148,163,184,.3); background: rgba(255,255,255,.6); color: #1e3a8a; font-size: 18px; cursor: pointer;
    transition: background .2s, transform .2s var(--ease-out), box-shadow .2s; }
  #sidebarToggle:hover { background: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.18); }
  #sidebarToggle:active { transform: scale(.92); }
  #sidebarToggle i { transition: transform .35s var(--ease-out); }
  body.sidebar-collapsed #sidebarToggle i { transform: rotate(180deg); }
  .topbar-left { display: flex; align-items: center; }
  .sidebar { transition: width .35s var(--ease-out); overflow-x: hidden; }
  .main-content { transition: margin-left .35s var(--ease-out); }
  .sidebar .nav-item span, .sidebar-header h2, .btn-logout span { transition: opacity .2s, transform .3s var(--ease-out); white-space: nowrap; }
  body.sidebar-collapsed { --sidebar-width: var(--rail-width); }
  body.sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-collapsed .sidebar .nav-item span, body.sidebar-collapsed .sidebar-header h2, body.sidebar-collapsed .btn-logout span { opacity: 0; transform: translateX(-8px); width: 0; overflow: hidden; pointer-events: none; }
  body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; margin-right: 8px; margin-left: 8px; border-radius: 12px; gap: 0; }
  body.sidebar-collapsed .sidebar-footer { padding: 16px 10px; }
  body.sidebar-collapsed .btn-logout { gap: 0; }
  body.no-anim .sidebar, body.no-anim .main-content { transition: none !important; }
}

/* --- Page transitions --- */
.page.active { animation: mtcPageIn .45s var(--ease-out) both; }
@keyframes mtcPageIn { from { opacity: 0; transform: translateY(14px) scale(.995); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* --- Staggered card entrance --- */
.page.active .stat-card, .page.active .chart-card, .page.active .table-card, .page.active .form-container,
.page.active .installment-card, .page.active .report-container, .page.active .reports-filters {
  animation: mtcCardIn .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
@keyframes mtcCardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Cards hover --- */
.stat-card, .chart-card, .installment-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out) !important; }
.stat-card:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 40px rgba(30,64,175,.16), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.stat-card .stat-icon { transition: transform .4s var(--ease-spring); }
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-4deg); }

/* --- Balance numbers: never overflow --- */
.stat-card { min-width: 0; }
.stat-info { min-width: 0; flex: 1; }
.stat-value { font-size: clamp(16px, 1.55vw, 24px); overflow-wrap: anywhere; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* --- Buttons --- */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, button.btn-icon, .view-switch-btn {
  transition: transform .18s var(--ease-out), box-shadow .25s, background-color .25s, filter .2s;
}
.btn:hover, .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-secondary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active, .btn-primary:active, .btn-success:active, .btn-danger:active, .btn-secondary:active, .btn-icon:active { transform: scale(.96); filter: brightness(.97); }

/* --- Nav items --- */
.nav-item { transition: background .25s, color .25s, padding-left .3s var(--ease-out) !important; }
.nav-item i { transition: transform .3s var(--ease-spring); }
.nav-item:hover i { transform: scale(1.15); }
@media (min-width: 769px) { body:not(.sidebar-collapsed) .nav-item:hover { padding-left: 26px; } }

/* --- Modals: scale + fade in, and out (out via .closing added by motion.js) --- */
.modal.active { animation: mtcFade .25s ease both; }
.modal.active .modal-content { animation: mtcModalIn .38s var(--ease-spring) both; }
.modal.closing { display: flex !important; animation: mtcFadeOut .2s ease both; }
.modal.closing .modal-content { animation: mtcModalOut .2s ease both; }
@keyframes mtcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mtcFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mtcModalIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mtcModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.96); } }
@supports (backdrop-filter: blur(1px)) { .modal { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } }

/* --- Toasts --- */
.toast { animation: mtcToastIn .45s var(--ease-spring) both; border-radius: 12px; }
@keyframes mtcToastIn { from { opacity: 0; transform: translateY(-14px) scale(.95); } to { opacity: 1; transform: none; } }

/* --- Table rows --- */
tbody tr { transition: background-color .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
@media print { * { animation: none !important; transition: none !important; } }