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

/* Mobile-first responsive design */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

/* Ensure all elements respect viewport */
* {
  box-sizing: border-box !important;
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
  /* Prevent page-level horizontal overflow */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Mobile header constraints */
  header {
    max-width: 100vw !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Mobile sidebar constraints */
  aside[data-sidebar-target="sidebar"] {
    max-width: 100vw !important;
    width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }
  
  /* Main content constraints */
  .min-h-screen {
    min-height: calc(100vh - 4rem) !important;
    overflow-x: hidden !important;
  }
  
  /* Fix iOS Safari viewport issues */
  body {
    -webkit-overflow-scrolling: touch !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
  }
}

/* Allow content scrolling on all screen sizes */
.overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure tables can scroll when needed */
table {
  min-width: max-content;
}

/* Table scrolling solution - create isolated scroll container */
.overflow-x-auto {
  position: relative;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  /* Create new stacking context to isolate scroll */
  transform: translateZ(0);
}

.overflow-x-auto table {
  width: auto !important;
  min-width: 100% !important;
}

/* Touch target sizes for mobile */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Enhanced sidebar animations */
aside[data-sidebar-target="sidebar"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out !important;
  will-change: transform;
}


/* Backdrop animation */
[data-sidebar-target="backdrop"] {
  transition: opacity 0.3s ease-in-out !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Smooth show/hide transitions */
.sidebar-enter {
  transform: translateX(-100%) !important;
  opacity: 0;
}

.sidebar-enter-active {
  transform: translateX(0) !important;
  opacity: 1;
}

.sidebar-exit {
  transform: translateX(0) !important;
  opacity: 1;
}

.sidebar-exit-active {
  transform: translateX(-100%) !important;
  opacity: 0;
}

/* Fix Notyf notifications responsiveness while preserving default squared appearance */
.notyf {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.notyf__toast {
  max-width: calc(100vw - 2rem) !important;
  margin: 0 1rem !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow-x: hidden !important;
  /* Ensure background covers entire toast */
  background-color: inherit !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Fix wrapper to ensure proper background coverage */
.notyf__wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* Ensure ripple effect covers the entire toast background */
.notyf__ripple {
  border-radius: 8px !important;
}

/* Specific background fixes for each toast type */
.notyf__toast--success {
  background-color: #3dc763 !important;
}

.notyf__toast--error {
  background-color: #ed3d3d !important;
}

/* Custom toast types */
.notyf__toast[style*="background: rgb(245, 158, 11)"],
.notyf__toast[style*="background:#f59e0b"] {
  background-color: #f59e0b !important;
}

.notyf__toast[style*="background: rgb(59, 130, 246)"],
.notyf__toast[style*="background:#3b82f6"] {
  background-color: #3b82f6 !important;
}

/* Only apply mobile-specific overrides */
@media (max-width: 767px) {
  .notyf__toast {
    max-width: calc(100vw - 1rem) !important;
    margin: 0 0.5rem !important;
    font-size: 14px !important;
    overflow-x: hidden !important;
  }
  
  .notyf__wrapper {
    min-height: 56px !important;
    padding: 10px 14px !important;
  }
}

/* Modal styles */
.modal {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal.hidden {
  @apply invisible opacity-0;
}

.modal-content {
  @apply bg-white rounded-xl shadow-2xl max-w-2xl mx-4 max-h-[90vh] overflow-y-auto;
  animation: modal-enter 0.3s ease-out;
}

.modal-header {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 px-6 py-4 rounded-t-xl;
}

.modal-title {
  @apply text-xl font-bold text-white;
}

.modal-close {
  @apply text-white hover:text-gray-200 transition-colors;
}

.modal-body {
  @apply p-6;
}

/* Form styles for modals and forms */
.form-select {
  @apply appearance-none bg-white border border-gray-300 rounded-md px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  padding-right: 2rem;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-vertical;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}