/* Custom Styles & Glassmorphism (Light Mode - White Boxes) */

.glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.glass-card-hover {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: 0 12px 30px -10px rgba(220, 38, 38, 0.15) !important;
  transform: translateY(-2px);
}

/* Signature Canvas Styling */
.signature-pad-wrapper {
  position: relative;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 1rem;
  background-color: #ffffff !important;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.signature-pad-wrapper:hover, .signature-pad-wrapper.active {
  border-color: rgba(220, 38, 38, 0.5) !important;
}

canvas.signature-canvas {
  width: 100%;
  height: 220px;
  cursor: crosshair;
  touch-action: none;
  display: block;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #dc2626;
}

/* Badge active status indicator */
.nav-btn.active {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1) !important;
}

/* Document locked preview area */
.document-locked-body {
  font-family: 'Space Mono', monospace;
  line-height: 1.6;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid #e2e8f0 !important;
  white-space: pre-wrap;
}

/* Input & Select Box Enhancements: Larger, Wider, Pure Black Text */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 13px 18px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 0.85rem !important;
  transition: all 0.2s ease !important;
}

/* Exception for Signer 2 & 3 Role editable inputs and Coordinate Number inputs (Smaller font) */
#tmpl-signer2,
#tmpl-signer3,
#sig1-x, #sig1-y,
#sig2-x, #sig2-y,
#sig3-x, #sig3-y {
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  font-weight: 600 !important;
  height: auto !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: #64748b !important;
  font-weight: 500 !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Make options in select dropdowns black */
select option {
  color: #000000 !important;
  background-color: #ffffff !important;
  font-weight: 600 !important;
}

/* Toast animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-animate {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}