/* Custom Django Admin Styling to match React App */

/* Import the base admin styles first */
@import url('/static/admin/css/base.css');
@import url('/static/admin/css/forms.css');
@import url('/static/admin/css/widgets.css');
@import url('/static/admin/css/dashboard.css');
@import url('/static/admin/css/changelists.css');
@import url('/static/admin/css/login.css');

/* Color Variables */
:root {
  --primary-blue: #002F57;
  --primary-blue-hover: #1a4a7a;
  --primary-blue-light: #DBEAFE;
  --primary-blue-lighter: #BFDBFE;
  --success-green: #10b981;
  --error-red: #ef4444;
  --warning-orange: #f59e0b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* Global Admin Overrides */
body {
  background-color: var(--gray-50) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Header Styling */
#header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%) !important;
  border-bottom: 3px solid var(--primary-blue-hover) !important;
  box-shadow: 0 2px 8px rgba(0, 47, 87, 0.2) !important;
}

#header h1, #header h1 a:link, #header h1 a:visited {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#user-tools {
  color: white !important;
}

#user-tools a:link, #user-tools a:visited {
  color: var(--primary-blue-light) !important;
  font-weight: 500 !important;
}

#user-tools a:hover {
  color: white !important;
  text-decoration: underline !important;
}

/* Breadcrumbs */
.breadcrumbs {
  background: white !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 12px 20px !important;
}

.breadcrumbs a {
  color: var(--primary-blue) !important;
  font-weight: 500 !important;
}

.breadcrumbs a:hover {
  color: var(--primary-blue-hover) !important;
}

/* Main Content Area */
#content {
  background: var(--gray-50) !important;
  padding: 20px !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

#content-main {
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 24px !important;
  border: 1px solid var(--gray-200) !important;
  position: relative !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;
}

/* Module Styling */
.module {
  background: white !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 20px !important;
}

.module h2 {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%) !important;
  color: white !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.module h3 {
  background: var(--gray-100) !important;
  color: var(--gray-800) !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--gray-200) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.module table {
  border: none !important;
}

.module th {
  background: var(--gray-50) !important;
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

.module td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gray-100) !important;
}

.module td a {
  color: var(--primary-blue) !important;
  font-weight: 500 !important;
}

.module td a:hover {
  color: var(--primary-blue-hover) !important;
  text-decoration: underline !important;
}

/* Button Styling */
.default, input[type=submit], input[type=button], .submit-row input, a.button {
  background: var(--primary-blue) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 47, 87, 0.2) !important;
}

.default:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover {
  background: var(--primary-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 47, 87, 0.3) !important;
}

.default:active, input[type=submit]:active, input[type=button]:active, .submit-row input:active, a.button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 47, 87, 0.2) !important;
}

/* Secondary Buttons */
.button, input[type=submit].default, .submit-row input.default {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-300) !important;
}

.button:hover, input[type=submit].default:hover, .submit-row input.default:hover {
  background: var(--gray-300) !important;
  color: var(--gray-800) !important;
}

/* Delete Button */
.deletelink {
  background: var(--error-red) !important;
  color: white !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.deletelink:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
}

/* Form Styling */
.form-row {
  border-bottom: 1px solid var(--gray-100) !important;
  padding: 10px 0 10px 20px !important;
}

.form-row:last-child {
  border-bottom: none !important;
}

label {
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], 
textarea, select {
  border: 1px solid var(--gray-300) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease !important;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, 
input[type=number]:focus, textarea:focus, select:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 47, 87, 0.1) !important;
  outline: none !important;
}

/* Help Text */
.help {
  color: var(--gray-500) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* Error Messages */
.errorlist {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 8px 0 !important;
}

.errorlist li {
  color: var(--error-red) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Success Messages */
.messagelist .success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: var(--success-green) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
}

/* Warning Messages */
.messagelist .warning {
  background: #fffbeb !important;
  border: 1px solid #fed7aa !important;
  color: var(--warning-orange) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
}

/* Error Messages */
.messagelist .error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: var(--error-red) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
}

/* Changelist Styling */
#changelist {
  background: white !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--gray-200) !important;
}

#changelist-filter {
  background: var(--gray-50) !important;
  border-right: 1px solid var(--gray-200) !important;
  border-radius: 8px 0 0 8px !important;
}

#changelist-filter h2 {
  background: var(--primary-blue) !important;
  color: white !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-radius: 8px 0 0 0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

#changelist-filter h3 {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--gray-200) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

#changelist-filter ul {
  padding: 8px 0 !important;
}

#changelist-filter li {
  border-bottom: 1px solid var(--gray-100) !important;
}

#changelist-filter li:last-child {
  border-bottom: none !important;
}

#changelist-filter a {
  color: var(--gray-600) !important;
  padding: 8px 16px !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#changelist-filter a:hover {
  background: var(--primary-blue-light) !important;
  color: var(--primary-blue) !important;
}

#changelist-filter a.selected {
  background: var(--primary-blue) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Results Table */
.results {
  border: none !important;
}

.results th {
  background: var(--gray-50) !important;
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--gray-200) !important;
  text-align: left !important;
}

.results td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gray-100) !important;
  vertical-align: middle !important;
}

.results tr:hover {
  background: var(--gray-50) !important;
}

.results a {
  color: var(--primary-blue) !important;
  font-weight: 500 !important;
}

.results a:hover {
  color: var(--primary-blue-hover) !important;
  text-decoration: underline !important;
}

/* Pagination */
.paginator {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 16px !important;
  text-align: center !important;
}

.paginator a, .paginator .this-page {
  display: inline-block !important;
  padding: 8px 12px !important;
  margin: 0 2px !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: var(--gray-600) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.paginator a:hover {
  background: var(--primary-blue) !important;
  color: white !important;
  border-color: var(--primary-blue) !important;
}

.paginator .this-page {
  background: var(--primary-blue) !important;
  color: white !important;
  border-color: var(--primary-blue) !important;
}

/* Object Tools (Action Buttons in Top Right) */
.object-tools {
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
}

.object-tools li {
  display: inline-block !important;
  margin-left: 8px !important;
}

.object-tools a {
  background: var(--primary-blue) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 47, 87, 0.2) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.object-tools a:hover {
  background: var(--primary-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 47, 87, 0.3) !important;
  color: white !important;
}

/* Action Bar */
.actions {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 12px 16px !important;
}

.actions select {
  border: 1px solid var(--gray-300) !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  margin-right: 8px !important;
}

.actions button {
  background: var(--primary-blue) !important;
  color: white !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.actions button:hover {
  background: var(--primary-blue-hover) !important;
}

/* Login Page */
.login {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%) !important;
}

.login .form-row input {
  border: 2px solid var(--gray-300) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.login .form-row input:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 47, 87, 0.1) !important;
}

.login .submit-row {
  text-align: center !important;
  margin-top: 16px !important;
  width: 100% !important;
}

.login .submit-row input {
  background: var(--primary-blue) !important;
  color: white !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 auto !important;
  display: block !important;
}

.login .submit-row input:hover {
  background: var(--primary-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 47, 87, 0.3) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  #content {
    padding: 10px !important;
  }
  
  #content-main {
    padding: 16px !important;
  }
  
  .module {
    margin-bottom: 16px !important;
  }
  
  .results th, .results td {
    padding: 8px 12px !important;
  }
  
  .object-tools {
    position: static !important;
    margin-bottom: 16px !important;
    text-align: right !important;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Fieldset Styling */
fieldset {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  border: none !important;
}

fieldset.module {
  margin-bottom: 20px !important;
}

fieldset.module h2 {
  margin-bottom: 0 !important;
}

fieldset.module .form-row {
  padding-left: 20px !important;
}