/* Enhanced Admin Interface Styling */

/* Better form field spacing and styling */
.form-row {
  margin-bottom: 20px;
}

.form-row .field-box {
  margin-bottom: 15px;
}

/* Enhanced input fields */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
textarea,
select {
  padding: 12px !important;
  border-radius: 6px !important;
  border: 1px solid #ddd !important;
  font-size: 14px !important;
  transition: border-color 0.3s ease !important;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1) !important;
  outline: none !important;
}

/* Better placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
  font-style: italic;
}

/* Enhanced fieldsets */
fieldset.module {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
  padding: 20px;
}

fieldset.module h2 {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 10px 15px;
  margin: -10px -10px 15px -10px;
  font-weight: 600;
  color: #374151;
}

/* Better help text */
.help {
  color: #6b7280 !important;
  font-size: 13px !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
}

/* Enhanced fieldset descriptions */
.description {
  background-color: #f0f9ff;
  border-left: 4px solid #f97316;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  color: #374151;
  font-size: 13px;
}

/* Better inline forms */
.tabular {
  border-radius: 8px;
  overflow: hidden;
}

.tabular thead th {
  background-color: #f8fafc;
  padding: 12px 8px;
  font-weight: 600;
}

.tabular tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.tabular tbody td {
  padding: 10px 8px;
}

/* Enhanced color picker fields */
.color-input {
  width: 120px !important;
  height: 40px !important;
  border: 2px solid #e5e7eb !important;
  cursor: pointer;
}

/* Better file upload fields */
input[type='file'] {
  padding: 8px !important;
  border: 2px dashed #d1d5db !important;
  border-radius: 6px !important;
  background-color: #f9fafb !important;
}

input[type='file']:hover {
  border-color: #f97316 !important;
  background-color: #fef3f2 !important;
}

/* Enhanced CKEditor styling */
.django-ckeditor-widget {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d1d5db;
}

/* Better submit buttons */
.submit-row {
  padding: 20px 0;
  background-color: transparent;
}

.submit-row input[type='submit'] {
  background-color: #f97316 !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  color: white !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-row input[type='submit']:hover {
  background-color: #ea580c !important;
}

/* Better error styling */
.errorlist {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  color: #dc2626;
}

.errorlist li {
  list-style: none;
  font-weight: 500;
}

/* Enhanced success messages */
.success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* Better list view styling */
.results {
  border-radius: 8px;
  overflow: hidden;
}

.results th {
  background-color: #f8fafc;
  padding: 12px 10px;
  font-weight: 600;
}

.results td {
  padding: 10px;
}

/* Enhanced change list actions */
.actions {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

/* Better responsive design */
@media (max-width: 768px) {
  .form-row {
    margin-bottom: 15px;
  }

  fieldset.module {
    padding: 15px;
  }

  input[type='text'],
  input[type='email'],
  input[type='url'],
  input[type='tel'],
  input[type='number'],
  textarea,
  select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* Icon field specific styling */
.field-header_icon input,
.field-icon input {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  background-color: #f8fafc;
}

/* URL field specific styling */
.url-input {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

/* Email field specific styling */
.email-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}