/*
 * 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.
 */

/*
 * Searchable Select Component Styles
 * 
 * A reusable searchable dropdown component for forms.
 * Used in order items form and other forms that need searchable select functionality.
 * 
 * Data attributes:
 * - data-searchable-select: Main container
 * - data-search-input: Input field for typing
 * - data-search-dropdown: Dropdown container
 * - data-search-options: Options container
 * - data-selected-value: Hidden input for form submission
 * - data-original-select: Hidden select with original options
 */
[data-searchable-select] {
  position: relative;
}

[data-searchable-select] [data-search-dropdown] {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: #ffffff;
  max-height: 15rem;
  overflow-y: auto;
  z-index: 50;
}

[data-searchable-select] [data-search-dropdown] [data-option] {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #111827;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease-in-out;
}

[data-searchable-select] [data-search-dropdown] [data-option]:hover {
  background-color: #fef3c7; /* amber-100 */
}

[data-searchable-select]
  [data-search-dropdown]
  [data-option][data-focused="true"] {
  background-color: #fef3c7;
  outline: none;
}

[data-searchable-select] [data-search-dropdown] [data-option]:last-child {
  border-bottom: none;
}

[data-searchable-select] [data-search-dropdown] .group-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
}

[data-searchable-select] [data-search-dropdown] .no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
}

/* Focus states */
[data-searchable-select] [data-search-input]:focus {
  outline: none;
  border-color: #fbbf24; /* amber-400 */
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

/* Scrollbar styling for dropdown */
[data-searchable-select] [data-search-dropdown]::-webkit-scrollbar {
  width: 6px;
}

[data-searchable-select] [data-search-dropdown]::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

[data-searchable-select] [data-search-dropdown]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

[data-searchable-select] [data-search-dropdown]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/*
 * Design System Styles
 *
 * Custom CSS for enhanced mobile-friendly, staff-optimized UI patterns.
 * Complements Tailwind utility classes with smooth animations and transitions.
 */

/* Card hover effects */
.card {
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Button effects */
.btn {
  transition: all 0.2s ease-in-out;
}

.btn:active {
  transform: scale(0.98);
}

/* Active scale utility */
.active\:scale-98:active {
  transform: scale(0.98);
}

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile navigation specific styles */
@media (max-width: 767px) {
  body {
    /* Already handled by pb-20 md:pb-0 in layout */
  }
}

/* Hide mobile nav on desktop */
@media (min-width: 768px) {
  .mobile-nav {
    display: none !important;
  }
}

/* Ensure touch targets are large enough on mobile (44px minimum) */
@media (max-width: 767px) {
  button,
  a[role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}

/*
 * Attendance Page Animations
 *
 * Custom animations for the SPA-like attendance page experience
 */

/* Fade in animation for notifications */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out animation for notifications */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

/* Turbo Frame loading state */
turbo-frame[busy] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

/* Employee card transition */
.employee-card-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Status badge pulse animation */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Bottom sheet slide up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

/*
 * Status Filter Button Styles
 *
 * Data-attribute driven styling for instant filter button state changes.
 * Uses data-selected attribute to toggle styles without JavaScript class manipulation.
 */

/* Default state - all buttons - Golden Hour Zinc */
[data-filter-button] {
  background-color: #ffffff;
  border: 1px solid #d4d4d8; /* zinc-300 */
  color: #18181b; /* zinc-900 */
  transition: all 0.2s ease-in-out;
}

[data-filter-button]:hover:not([data-selected="true"]) {
  background-color: #fafafa; /* zinc-50 */
}

/* Selected state - remove border */
[data-filter-button][data-selected="true"] {
  border-color: transparent;
}

/* Selected state - "All" button (empty filter value) - Golden Hour Amber */
[data-filter-button][data-filter-value=""][data-selected="true"] {
  background-color: #fbbf24; /* amber-400 */
  color: #09090b; /* zinc-950 */
}

/* Selected state - "On Duty" button */
[data-filter-button][data-filter-value="on_duty"][data-selected="true"] {
  background-color: #22c55e;
  color: #ffffff;
}

/* Selected state - "Off Duty" button - Golden Hour Zinc */
[data-filter-button][data-filter-value="off_duty"][data-selected="true"] {
  background-color: #52525b; /* zinc-600 */
  color: #ffffff;
}

/*
 * Mobile-First Navigation Styles
 *
 * Slide panel animations for mobile navigation and user menu.
 * Includes backdrop, collapsible sections, and safe area utilities.
 */

/* Hide scrollbar but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Slide panel from left (mobile menu) */
.slide-panel {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}
.slide-panel.open {
  transform: translateX(0);
}

/* Slide panel from right (user menu) */
.slide-panel-right {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.slide-panel-right.open {
  transform: translateX(0);
}

/* Backdrop fade animation */
.backdrop {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.backdrop.open {
  opacity: 1;
}

/* Collapsible content animation */
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.collapsible-content.open {
  max-height: 2000px;
}

/* iOS safe area padding */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0);
}

/* Nav indicator animation */
.nav-indicator {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Desktop sidebar always visible on lg+ screens */
@media (min-width: 1024px) {
  /* Collapsible sections always open on desktop */
  .collapsible-content {
    max-height: none !important;
  }
}

/* Mobile bottom nav visible only on mobile */
@media (min-width: 1024px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Desktop sidebar hidden on mobile */
@media (max-width: 1023px) {
  .desktop-sidebar {
    display: none !important;
  }
}

/* Body scroll lock when panels are open */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/*
 * Golden Hour Premium Animations
 *
 * Enhanced animations for the redesigned component system.
 * Includes subtle pulses, staggered reveals, and micro-interactions.
 */

/* Subtle pulse for pending status badges */
@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glow effect for confirmed/success states */
@keyframes glow-success {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.3);
  }
}

.animate-glow-success {
  animation: glow-success 2s ease-in-out infinite;
}

/* Staggered fade-in for list items */
@keyframes stagger-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-stagger-in {
  animation: stagger-fade-in 0.4s ease-out forwards;
  opacity: 0;
}

.animate-stagger-in:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger-in:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger-in:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger-in:nth-child(4) { animation-delay: 0.2s; }
.animate-stagger-in:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger-in:nth-child(6) { animation-delay: 0.3s; }
.animate-stagger-in:nth-child(7) { animation-delay: 0.35s; }
.animate-stagger-in:nth-child(8) { animation-delay: 0.4s; }
.animate-stagger-in:nth-child(9) { animation-delay: 0.45s; }
.animate-stagger-in:nth-child(10) { animation-delay: 0.5s; }

/* Slide in from left for toasts/notifications */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slide-in-left 0.3s ease-out forwards;
}

/* Slide in from right */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

/* Scale pop for buttons/icons on click */
@keyframes scale-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.animate-scale-pop {
  animation: scale-pop 0.2s ease-out;
}

/* Floating label for form inputs */
@keyframes float-label {
  from {
    transform: translateY(0);
    font-size: 0.875rem;
  }
  to {
    transform: translateY(-1.5rem);
    font-size: 0.75rem;
  }
}

/* Progress ring animation */
@keyframes progress-fill {
  from {
    stroke-dashoffset: 113.097; /* Full circumference for r=18 */
  }
}

.animate-progress-fill {
  animation: progress-fill 1s ease-out forwards;
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Bounce animation for success */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounce-in 0.5s ease-out forwards;
}

/* Skeleton loading pulse */
@keyframes skeleton-pulse {
  0%, 100% {
    background-color: #f5f5f4; /* stone-50 */
  }
  50% {
    background-color: #e7e5e4; /* stone-200 */
  }
}

.animate-skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Card hover lift effect (enhanced) */
.card-lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Accent border glow on hover */
.accent-glow-hover {
  transition: box-shadow 0.2s ease-out;
}

.accent-glow-hover:hover {
  box-shadow:
    -4px 0 0 0 currentColor,
    0 4px 12px -2px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar styling (amber theme) */
.scrollbar-amber::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-amber::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-amber::-webkit-scrollbar-thumb {
  background: #fbbf24; /* amber-400 */
  border-radius: 3px;
}

.scrollbar-amber::-webkit-scrollbar-thumb:hover {
  background: #f59e0b; /* amber-500 */
}

/* Show scrollbar only on hover */
.scrollbar-hidden::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scrollbar-hidden:hover::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Focus ring with amber glow */
.focus-amber:focus {
  outline: none;
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px #fbbf24;
}

/* Golden hour gradient text */
.text-gradient-golden {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* IBM Plex Sans for display headings */
.font-display {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
}

/* IBM Plex Mono for data and numbers */
.font-mono, code, pre, .tabular-nums {
  font-family: 'IBM Plex Mono', monospace;
}

/*
 * Action Menu Dropdown Transitions
 *
 * Smooth scale + fade transitions for action menu dropdowns.
 * Uses CSS transitions that work with hidden class toggle.
 */

/* Base transition state for action menu dropdowns */
[data-hub--menu-target="menu"] {
  transform-origin: top right;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Hidden state - scaled down and invisible */
[data-hub--menu-target="menu"].hidden {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  pointer-events: none;
  display: block !important;
  visibility: hidden;
}

/* Visible state - normal scale and visible */
[data-hub--menu-target="menu"]:not(.hidden) {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}

/*
 * Number Count-Up Animation
 *
 * Stimulus controller-driven animation for invoice amounts.
 * Numbers animate from 0 to their final value.
 */

.count-up {
  font-variant-numeric: tabular-nums;
}

/* Shimmer loading effect for numbers */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.number-loading {
  background: linear-gradient(
    90deg,
    #f5f5f4 25%,
    #e7e5e4 50%,
    #f5f5f4 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  color: transparent;
}

/*
 * Menu Item Pulse Animation
 *
 * Subtle highlight animation for active menu items when scrolled into view.
 * Used by the sidebar controller to draw attention to the current page.
 */
@keyframes menu-item-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
  }
}

.menu-item-pulse {
  animation: menu-item-pulse 0.6s ease-out;
}

/*
 * Punch Toast Notification Animations
 *
 * Premium toast animations for punch in/out success messages.
 * Features slide-in, icon pop, and smooth exit.
 */

/* Toast slide in from top */
@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-toast-in {
  animation: toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Checkmark pop animation */
@keyframes check-pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.animate-check-pop {
  animation: check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
  opacity: 0;
}

/* Toast slide out */
@keyframes toast-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

.animate-toast-out {
  animation: toast-out 0.3s ease-in forwards;
}