/* Support System Custom Styles */

/* Crispy Forms Styling Override */
.crispy-form .btn {
    @apply font-semibold py-3 px-6 rounded-lg transition-colors duration-200 border-0;
}

.crispy-form .btn-primary {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white;
}

/* Enhanced Form Styling for Support System */

/* Input Fields - Dark Theme with Proper Visibility */
.crispy-form input[type="text"],
.crispy-form input[type="email"], 
.crispy-form textarea,
.crispy-form select,
.form-control {
    background-color: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.crispy-form input[type="text"]:focus,
.crispy-form input[type="email"]:focus,
.crispy-form textarea:focus,
.crispy-form select:focus,
.form-control:focus {
    outline: none !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* Placeholder Text */
.crispy-form input::placeholder,
.crispy-form textarea::placeholder {
    color: #9ca3af !important;
    opacity: 0.8 !important;
}

/* Select Dropdown Styling */
.crispy-form select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239ca3af' d='M8 11l-4-4h8l-4 4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px !important;
    padding-right: 2.5rem !important;
}

.crispy-form select option {
    background-color: #374151 !important;
    color: #ffffff !important;
    padding: 0.5rem !important;
}

/* Enhanced Submit Button Styling */
.crispy-form button[type="submit"],
.crispy-form input[type="submit"],
.btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.crispy-form button[type="submit"]:hover,
.crispy-form input[type="submit"]:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.crispy-form button[type="submit"]:active,
.crispy-form input[type="submit"]:active,
.btn-primary:active {
    transform: translateY(0) !important;
}

/* Form Labels */
.crispy-form label,
.form-label {
    color: #d1d5db !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* Error Messages */
.crispy-form .invalid-feedback,
.crispy-form .error,
.errorlist {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* Success Messages */
.crispy-form .valid-feedback {
    color: #10b981 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* Form Groups */
.crispy-form .form-group {
    margin-bottom: 1.5rem !important;
}

/* Help Text */
.crispy-form .help-text,
.crispy-form .form-text {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* Textarea specific styling */
.crispy-form textarea {
    resize: vertical !important;
    min-height: 120px !important;
}

.crispy-form .form-text {
    @apply text-gray-400 text-sm mt-1;
}

.crispy-form .help-block {
    @apply text-gray-400 text-sm mt-1;
}

/* Form Container Styling */\n.support-form {\n    max-width: 100%;\n    margin: 0 auto;\n}\n\n.support-form .form-group {\n    position: relative;\n}\n\n.support-form .form-actions {\n    padding-top: 1rem;\n}\n\n.support-form .form-actions .btn {\n    min-width: 200px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .support-form .grid {\n        grid-template-columns: 1fr !important;\n    }\n    \n    .support-form .form-actions .btn {\n        width: 100% !important;\n        min-width: auto;\n    }\n}\n\n/* Enhanced Visual Effects */\n.crispy-form input[type=\"text\"]:hover,\n.crispy-form input[type=\"email\"]:hover,\n.crispy-form textarea:hover,\n.crispy-form select:hover {\n    border-color: #6b7280 !important;\n    background-color: #4b5563 !important;\n    transition: all 0.2s ease-in-out !important;\n}\n\n/* Loading State for Submit Button */\n.btn-primary:disabled {\n    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;\n    cursor: not-allowed !important;\n    transform: none !important;\n}\n\n/* Form Validation Styles */\n.crispy-form .is-invalid {\n    border-color: #ef4444 !important;\n    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;\n}\n\n.crispy-form .is-valid {\n    border-color: #10b981 !important;\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;\n}\n\n/* Support specific styling */
.support-card {
    @apply bg-gray-800 rounded-lg p-6 border border-gray-700;
    @apply hover:border-emerald-700/50 transition-all duration-200;
}

.support-badge {
    @apply px-3 py-1 text-xs font-medium rounded-full;
}

.support-badge.priority-low {
    @apply bg-gray-700 text-gray-300;
}

.support-badge.priority-normal {
    @apply bg-emerald-900 text-emerald-200;
}

.support-badge.priority-high {
    @apply bg-yellow-900 text-yellow-200;
}

.support-badge.priority-urgent {
    @apply bg-red-800 text-red-200;
}

.support-badge.priority-critical {
    @apply bg-red-900 text-red-200;
}

.support-badge.status-open {
    @apply bg-red-900 text-red-200;
}

.support-badge.status-in-progress {
    @apply bg-yellow-900 text-yellow-200;
}

.support-badge.status-resolved {
    @apply bg-emerald-900 text-emerald-200;
}

.support-badge.status-closed {
    @apply bg-gray-700 text-gray-300;
}

/* Button hover effects */
.support-btn-primary {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white;
    @apply font-semibold py-3 px-6 rounded-lg;
    @apply transition-colors duration-200;
    @apply border-0 cursor-pointer;
    @apply shadow-lg hover:shadow-xl;
}

.support-btn-secondary {
    @apply bg-teal-600 hover:bg-teal-700 text-white;
    @apply font-semibold py-2 px-4 rounded-lg;
    @apply transition-colors duration-200;
    @apply border-0 cursor-pointer;
}

.support-btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white;
    @apply font-semibold py-3 px-6 rounded-lg;
    @apply transition-colors duration-200;
    @apply border-0 cursor-pointer;
    @apply shadow-lg hover:shadow-xl;
}

/* Form input focus states */
.support-input {
    @apply w-full bg-gray-700 border-gray-600 text-white rounded-lg px-4 py-3;
    @apply focus:border-emerald-500 focus:ring-emerald-500 transition-colors;
    color: #ffffff !important;
}

.support-textarea {
    @apply w-full bg-gray-700 border-gray-600 text-white rounded-lg px-4 py-3;
    @apply focus:border-emerald-500 focus:ring-emerald-500 transition-colors;
    @apply resize-none;
    color: #ffffff !important;
    background-color: #374151 !important;
}

/* Ensure all input and textarea elements in support forms have proper text color */
input[type="text"].form-control,
input[type="email"].form-control,
select.form-control,
textarea.form-control {
    color: #ffffff !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

input[type="text"].form-control::placeholder,
input[type="email"].form-control::placeholder,
textarea.form-control::placeholder {
    color: #9ca3af !important;
    opacity: 0.8;
}

/* Ticket status indicators */
.ticket-status-indicator {
    @apply w-3 h-3 rounded-full inline-block mr-2;
}

.ticket-status-indicator.open {
    @apply bg-red-500;
}

.ticket-status-indicator.in-progress {
    @apply bg-yellow-500;
}

.ticket-status-indicator.resolved {
    @apply bg-emerald-500;
}

.ticket-status-indicator.closed {
    @apply bg-gray-500;
}

/* Override any default button styles that might interfere */
button[type="submit"], input[type="submit"] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure crispy form buttons are clickable */
.crispy-form button[type="submit"], 
.crispy-form input[type="submit"] {
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}