/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import "tailwindcss";

/* Confirm modal animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Mobile sidebar ────────────────────────────────────────── */
/* Overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-overlay.is-open {
  opacity: 1;
}

/* Mobile-only rules: hide sidebar, show hamburger */
@media (max-width: 767px) {
  .mobile-sidebar {
    position: fixed !important;
    top: 57px;
    left: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }
  .mobile-sidebar.is-open {
    transform: translateX(0);
  }
  .mobile-hamburger { display: flex !important; }
}

/* Desktop: hamburger is always hidden */
@media (min-width: 768px) {
  .mobile-hamburger { display: none !important; }
  .mobile-overlay { display: none !important; }
}