/* ========================================
   MODAL FORM ENHANCEMENTS
   Focus, Hover, Disabled States
   ======================================== */

/* Modal input focus state */
input[style*="background: var(--form-input-bg)"],
input[style*="background:var(--form-input-bg)"],
select[style*="background: var(--form-input-bg)"],
select[style*="background:var(--form-input-bg)"],
textarea[style*="background: var(--form-input-bg)"],
textarea[style*="background:var(--form-input-bg)"] {
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

input[style*="background: var(--form-input-bg)"]:focus,
input[style*="background:var(--form-input-bg)}"]:focus,
select[style*="background: var(--form-input-bg)"]:focus,
select[style*="background:var(--form-input-bg)"]:focus,
textarea[style*="background: var(--form-input-bg)"]:focus,
textarea[style*="background:var(--form-input-bg)"]:focus {
  outline: none;
  border-color: var(--form-input-focus-border) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
  background-color: var(--form-input-bg);
}

/* Modal select dropdown arrow styling */
select[style*="background: var(--form-input-bg)"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.25rem;
}

html[data-theme='light'] select[style*="background: var(--form-input-bg)"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23334155'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Modal textarea resize handling */
textarea[style*="background: var(--form-input-bg)"] {
  resize: vertical;
  min-height: 100px;
}

/* Modal disabled input state */
input[style*="background: var(--form-input-bg)"][disabled],
select[style*="background: var(--form-input-bg)"][disabled],
textarea[style*="background: var(--form-input-bg)"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: rgba(30,41,59,0.3) !important;
}

html[data-theme='light'] input[style*="background: var(--form-input-bg)"][disabled],
html[data-theme='light'] select[style*="background: var(--form-input-bg)"][disabled],
html[data-theme='light'] textarea[style*="background: var(--form-input-bg)"][disabled] {
  background-color: rgba(241,245,249,0.5) !important;
}

/* Modal label hover effect */
label[style*="color: var(--form-label-color)"] {
  transition: color 0.2s;
}

label[style*="color: var(--form-label-color)"]:hover {
  color: var(--text-primary) !important;
}

/* Modal button focus/active states */
button[style*="background: var(--modal-header-bg)"],
button[style*="background: linear-gradient"] {
  transition: opacity 0.2s, transform 0.1s;
}

button[style*="background: var(--modal-header-bg)"]:hover,
button[style*="background: linear-gradient"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

button[style*="background: var(--modal-header-bg)"]:active,
button[style*="background: linear-gradient"]:active {
  transform: translateY(0);
  opacity: 0.85;
}

button[style*="background: var(--modal-header-bg)"][disabled],
button[style*="background: linear-gradient"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal info box styling */
div[style*="background: rgba(59,130,246"],
div[style*="background: rgba(16,185,129"] {
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}

/* Modal overlay backdrop animation */
div[style*="background: var(--overlay-backdrop)"] {
  animation: backdrop-fade-in 0.2s ease-out;
}

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal slide-in animation */
div[style*="background: var(--modal-bg)"][style*="border: 1px solid var(--modal-border)"] {
  animation: modal-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal close button styling */
button[onclick*="Close"],
button[onclick*="close"],
button[class*="close"] {
  opacity: 0.7;
  transition: opacity 0.2s;
}

button[onclick*="Close"]:hover,
button[onclick*="close"]:hover,
button[class*="close"]:hover {
  opacity: 1;
  color: var(--status-cancelled) !important;
}