/* ==============================================================================
   GOLD CARIBBEAN 2.0 — DJANGO ADMIN CLAYMORPHISM PASTEL THEME
   Harmonisation complète du back-office avec l'interface publique
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --primary: #ff9a9e !important;
  --secondary: #a8edea !important;
  --accent: #fcb69f !important;
  --primary-fg: #5c4033 !important;
  
  --body-bg: #ffecd2 !important;
  --body-fg: #5c4033 !important;
  --body-quiet-color: #7a5c4e !important;
  --body-loud-color: #422d23 !important;
  
  --header-bg: rgba(255, 255, 255, 0.85) !important;
  --header-color: #5c4033 !important;
  --header-link-color: #5c4033 !important;
  
  --breadcrumbs-bg: rgba(255, 255, 255, 0.6) !important;
  --breadcrumbs-link-fg: #d15662 !important;
  --breadcrumbs-fg: #5c4033 !important;
  
  --link-fg: #d15662 !important;
  --link-hover-color: #ff6b7b !important;
  --link-selected-fg: #422d23 !important;
  
  --hairline-color: rgba(92, 64, 51, 0.1) !important;
  --border-color: rgba(92, 64, 51, 0.12) !important;
  
  --darkened-bg: rgba(255, 236, 210, 0.7) !important;
  --selected-bg: rgba(255, 154, 158, 0.25) !important;
  --selected-row: rgba(255, 154, 158, 0.15) !important;
  
  --button-bg: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  --button-hover-bg: linear-gradient(135deg, #ff8085 0%, #fcb69f 100%) !important;
  --button-fg: #5c4033 !important;
  
  --default-button-bg: linear-gradient(135deg, #ff9a9e 0%, #fcb69f 100%) !important;
  --default-button-hover-bg: linear-gradient(135deg, #ff8085 0%, #fcb69f 100%) !important;
  --default-button-fg: #5c4033 !important;
}

html, body {
  background-color: #ffecd2 !important;
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 154, 158, 0.15) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(168, 237, 234, 0.2) 0%, transparent 40%),
                    radial-gradient(circle at 50% 50%, rgba(252, 182, 159, 0.1) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  color: #5c4033 !important;
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, .module h2, caption {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #5c4033 !important;
}

/* Header Admin */
#header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #5c4033 !important;
  border-bottom: 0 !important;
  border-radius: 0 0 24px 24px !important;
  box-shadow: 0px 8px 24px rgba(92, 64, 51, 0.08),
              inset 0px 4px 6px rgba(255, 255, 255, 0.9) !important;
  padding: 1rem 1.5rem !important;
  margin: 0 auto 1.5rem auto !important;
  max-width: 1300px !important;
}

#branding h1 {
  color: #5c4033 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
}

#user-tools, #user-tools a {
  color: #5c4033 !important;
  font-weight: 600 !important;
}

#user-tools a:hover {
  color: #d15662 !important;
}

/* Breadcrumbs */
.breadcrumbs {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 18px !important;
  padding: 0.75rem 1.25rem !important;
  color: #5c4033 !important;
  max-width: 1300px !important;
  margin: 0 auto 1.5rem auto !important;
  box-shadow: 0px 4px 12px rgba(92, 64, 51, 0.04) !important;
}

.breadcrumbs a {
  color: #d15662 !important;
  font-weight: 600 !important;
}

/* Modules & Tables */
.module, .results, #changelist-filter {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 24px !important;
  border: 0 !important;
  box-shadow: 0px 8px 24px rgba(92, 64, 51, 0.06),
              inset 0px 4px 6px rgba(255, 255, 255, 0.8) !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem !important;
}

.module h2, .module caption {
  background: rgba(255, 236, 210, 0.7) !important;
  color: #5c4033 !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 1.05rem !important;
  box-shadow: inset 0px 2px 4px rgba(255, 255, 255, 0.8) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

thead th {
  background: rgba(255, 248, 240, 0.9) !important;
  color: #5c4033 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid rgba(92, 64, 51, 0.08) !important;
}

tbody td, tbody th {
  padding: 0.85rem 1rem !important;
  color: #5c4033 !important;
  border-bottom: 1px solid rgba(92, 64, 51, 0.05) !important;
}

tbody tr:hover {
  background: rgba(255, 154, 158, 0.12) !important;
}

/* Boutons Claymorphism dans l'Admin */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: linear-gradient(135deg, #ff9a9e 0%, #fcb69f 100%) !important;
  color: #5c4033 !important;
  border-radius: 20px !important;
  border: 0 !important;
  padding: 0.6rem 1.25rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0px 6px 16px rgba(255, 154, 158, 0.35),
              inset 0px 2px 4px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.button:hover, input[type=submit]:hover, .submit-row input:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0px 10px 22px rgba(255, 154, 158, 0.45) !important;
}

/* Inputs & Formulaires */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], textarea, select {
  background: rgba(255, 236, 210, 0.4) !important;
  border-radius: 14px !important;
  border: 0 !important;
  padding: 0.6rem 0.9rem !important;
  color: #5c4033 !important;
  box-shadow: inset 0px 3px 6px rgba(92, 64, 51, 0.08),
              inset 0px -2px 4px rgba(255, 255, 255, 0.8) !important;
}

input:focus, textarea:focus, select:focus {
  background: #FFFFFF !important;
  box-shadow: 0px 0px 0px 3px rgba(255, 154, 158, 0.4) !important;
  outline: none !important;
}

/* Filtres Latéraux */
#changelist-filter {
  padding: 1rem !important;
}

#changelist-filter h2 {
  border-radius: 14px !important;
  margin-bottom: 0.75rem !important;
}

#changelist-filter li.selected a {
  color: #d15662 !important;
  font-weight: 700 !important;
}

/* Page de Login Admin */
.login #container {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 28px !important;
  box-shadow: 0px 15px 40px rgba(92, 64, 51, 0.12),
              inset 0px 4px 8px rgba(255, 255, 255, 0.9) !important;
  border: 0 !important;
  overflow: hidden !important;
  max-width: 480px !important;
  margin: 6rem auto !important;
  padding: 2.5rem !important;
}

.login #header {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}

.login #header #branding h1 {
  font-size: 1.6rem !important;
  text-align: center !important;
}