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


 */

/* Story ring gradient animation */
@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* New message flash animation */
@keyframes message-flash {
  0% {
    background-color: rgba(59, 130, 246, 0.3); /* blue-500 with opacity */
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    background-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.new-message-flash {
  animation: message-flash 2s ease-out;
}

/* ---------------------------------------------------------------------------
   Pagination (Pagy)

   Pagy ships stylesheets/pagy.css in the gem and nothing in this app ever
   loaded it, so every paginator in the portal rendered as bare text -- the
   "<1>" at the bottom of Sales Orders, Contracts, People and the admin lists
   is the prev arrow, page 1 and the next arrow with no styling at all.

   Written here rather than pulling the gem asset in: application.css is served
   directly, the gem file is 83 lines of HSL variable arithmetic we would then
   have to override to match Tailwind, and the markup is only three cases --
   links, the current page, and gaps.
--------------------------------------------------------------------------- */
.pagy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pagy a:not([role="separator"]) {
  display: block;
  min-width: 2rem;
  padding: 0.375rem 0.625rem;
  text-align: center;
  text-decoration: none;
  color: #374151;                 /* gray-700 */
  background-color: #fff;
  border: 1px solid #d1d5db;      /* gray-300 */
  border-radius: 0.375rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagy a:not([role="separator"]):hover {
  background-color: #f9fafb;      /* gray-50 */
  border-color: #9ca3af;          /* gray-400 */
}

/* Prev/next at the ends of the range: present but not clickable. */
.pagy a[aria-disabled="true"] {
  color: #9ca3af;                 /* gray-400 */
  background-color: #fff;
  border-color: #e5e7eb;          /* gray-200 */
  cursor: not-allowed;
}

.pagy a[aria-disabled="true"]:hover {
  background-color: #fff;
  border-color: #e5e7eb;
}

/* The page you are on. Pagy marks it aria-current AND aria-disabled, so this
   must come after the disabled rule -- at equal specificity the later rule
   wins, and with the order reversed the current page rendered gray while the
   NEXT page looked selected. */
.pagy a[aria-current="page"],
.pagy a[aria-current="page"]:hover {
  color: #fff;
  background-color: #2563eb;      /* blue-600 */
  border-color: #2563eb;
  cursor: default;
}

.pagy a[role="separator"] {
  padding: 0.375rem 0.25rem;
  color: #9ca3af;
  border: 0;
  background: none;
}

/* A single page of results needs no pager at all. */
.pagy:not(:has(a[href])) {
  display: none;
}