/* CSP-Compliant Utility Classes for Dynamic Styling */

/* Display utilities for form field visibility */
.js-hidden { display: none !important; }
.js-visible { display: block !important; }

/* Body overflow control for modals */
.modal-open { overflow: hidden !important; }

/* Developer tools warning page */
.devtools-warning {
  text-align: center;
  margin-top: 200px;
  color: #666;
  font-size: 24px;
  font-weight: bold;
}

/* Line item removal animation */
.line-item-removing {
  display: none !important;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Background image lazy loading removed - not used in current codebase */
/* Error notification animations and styles */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

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

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

/* Error notification specific styles */
#error-notifications {
  pointer-events: none;
}

#error-notifications > * {
  pointer-events: auto;
}

/* Better visual hierarchy for error details */
#error-notifications details {
  margin-top: 8px;
}

#error-notifications details[open] summary {
  margin-bottom: 4px;
}

#error-notifications summary::-webkit-details-marker {
  display: none;
}

#error-notifications summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.2s ease;
}

#error-notifications details[open] summary::before {
  transform: rotate(90deg);
}

/* Action button improvements */
#error-notifications button:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

#error-notifications button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
  #error-notifications {
    left: 16px;
    right: 16px;
    top: 16px;
  }
  
  #error-notifications .max-w-md {
    max-width: none;
  }
}
/* Signature Canvas Styles - CSP Compliant */

.signature-canvas {
  touch-action: none;
  cursor: crosshair;
  display: block;
  border: 1px solid #d1d5db;
  background: white;
}

.signature-canvas-large {
  width: 400px;
  height: 192px;
}

.signature-canvas-medium {
  width: 100%;
  height: 150px;
}

.signature-canvas-small {
  width: 100%;
  height: 128px;
}

/* Logo sizing for forms */
.form-logo {
  max-height: 60px;
  width: auto;
}

/* Print-only styles for contracts */
@media print {
  .signature-display {
    border: 1px solid #e5e7eb;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */