html, body { font-family: 'Inter', sans-serif; background: #FAF8F4; }
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: #d8d2c4; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast-anim { animation: toastIn 0.25s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.35s ease-out both; }

#sidebar.collapsed { width: 76px; }
#sidebar.collapsed .sidebar-label { display: none; }
#sidebar.collapsed nav a { justify-content: center; }
#sidebar.collapsed .px-5 { padding-left: 0; padding-right: 0; justify-content: center; }

.day-cell-selected { box-shadow: inset 0 0 0 2px #C9A84C; }

/* Below the lg breakpoint the sidebar becomes an off-canvas drawer instead of
   permanently shrinking to icons — small screens don't have room to spare. */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 17rem;
    max-width: 85vw;
    transform: translateX(-100%);
    z-index: 50;
    transition: transform 0.3s ease;
  }
  #sidebar.open {
    transform: translateX(0);
    box-shadow: 12px 0 32px -12px rgba(0, 0, 0, 0.25);
  }
  #sidebar.collapsed { width: 17rem; }
  #sidebar.collapsed .sidebar-label { display: block; }
  #sidebar.collapsed nav a { justify-content: flex-start; }
}