/*
 * The Horns — Admin Theme
 * Light : Architectural Minimalist  (#f9f9ff, cobalt #0058be)
 * Dark  : Deep Midnight             (#0e0e0e, cobalt #adc6ff)
 *
 * Framework : admin-material (Material Dashboard Django — Bootstrap 5)
 * Dark mode : html.th-dark    (sélecteur custom)
 */

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

/* ── Typographie ─────────────────────────────────── */
body, .content-wrapper, .nav-sidebar {
  font-family: 'Inter', system-ui, sans-serif !important;
}
h1, h2, h3, h4, .brand-text, #site-name {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* ── LIGHT : couleur primaire cobalt ─────────────── */
.btn-primary, .badge-primary, .bg-primary {
  background-color: #0058be !important;
  border-color: #0058be !important;
}
.btn-primary:hover { background-color: #2170e4 !important; }
a { color: #0058be; }
a:hover { color: #2170e4; }
.nav-sidebar .nav-link.active {
  background-color: #0058be !important;
}

/* ── Prevent horizontal scrollbar ───────────────────── */
html {
  overflow-x: clip; /* clip évite l'effet scroll-y parasite de overflow-x:hidden sur html */
}
body {
  overflow-x: clip;
  max-width: 100%;
}
.main-content {
  min-width: 0;
  max-width: 100%;
}
/* Contain Bootstrap .row negative margins */
.main-content .container-fluid {
  overflow-x: clip;
}

/* ── Sidebar layout fix (general sibling fallback) ── */
@media (min-width: 1200px) {
  .sidenav.fixed-start ~ .main-content {
    margin-left: 15rem !important;
  }
}
/* ── Navbar sticky ───────────────────────────────── */
.navbar-main {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* ── DARK : body.dark-mode ───────────────────────── */
body.dark-mode {
  background-color: #0e0e0e !important;
  color: #e7e5e5 !important;
}
body.dark-mode .content-wrapper {
  background-color: #131313 !important;
}
body.dark-mode .sidenav {
  background-color: #131313 !important;
}
body.dark-mode .sidenav .nav-link,
body.dark-mode .sidenav .nav-link span,
body.dark-mode .sidenav h6 {
  color: #acabaa !important;
}
body.dark-mode .sidenav .nav-link:hover {
  background-color: #1f2020 !important;
  color: #e7e5e5 !important;
}
body.dark-mode .sidenav .nav-link.active {
  background-color: #004395 !important;
  color: #adc6ff !important;
}
body.dark-mode .sidenav hr {
  border-color: #2a2a2a !important;
}
body.dark-mode .main-header {
  background-color: #191a1a !important;
  border-bottom-color: #2a2a2a !important;
}
body.dark-mode .main-header .nav-link,
body.dark-mode .main-header a {
  color: #acabaa !important;
}
body.dark-mode .main-header .nav-link:hover,
body.dark-mode .main-header a:hover {
  color: #e7e5e5 !important;
}
body.dark-mode .card,
body.dark-mode .small-box {
  background-color: #191a1a !important;
  border-color: #2a2a2a !important;
  color: #e7e5e5 !important;
}
body.dark-mode .card-header {
  background-color: #1f2020 !important;
  border-bottom-color: #2a2a2a !important;
  color: #e7e5e5 !important;
}
body.dark-mode .card-footer {
  background-color: #1f2020 !important;
  border-top-color: #2a2a2a !important;
}
body.dark-mode table thead th {
  background-color: #1f2020 !important;
  color: #acabaa !important;
  border-color: #2a2a2a !important;
  padding: 0.75rem 0.5rem !important;
}
body.dark-mode table tbody tr {
  border-color: #2a2a2a !important;
  color: #e7e5e5 !important;
}
body.dark-mode table tbody tr:nth-child(odd) {
  background-color: #191a1a !important;
}
body.dark-mode table tbody tr:nth-child(even) {
  background-color: #131313 !important;
}
body.dark-mode table tbody tr:hover {
  background-color: #252626 !important;
}
body.dark-mode table td, body.dark-mode table th {
  border-color: #2a2a2a !important;
  color: #e7e5e5 !important;
}
body.dark-mode input[type=text],
body.dark-mode input[type=password],
body.dark-mode input[type=email],
body.dark-mode input[type=number],
body.dark-mode input[type=date],
body.dark-mode input[type=datetime-local],
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1f2020 !important;
  border-color: #3a3a3a !important;
  color: #e7e5e5 !important;
}
body.dark-mode select option {
  background-color: #1f2020;
  color: #e7e5e5;
}
body.dark-mode .form-control {
  background-color: #1f2020 !important;
  border-color: #3a3a3a !important;
  color: #e7e5e5 !important;
}
body.dark-mode .form-control:focus {
  background-color: #252626 !important;
  border-color: #adc6ff !important;
  box-shadow: 0 0 0 2px rgba(173,198,255,0.2) !important;
}
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: #1f2020 !important;
  border-color: #3a3a3a !important;
  color: #e7e5e5 !important;
}
body.dark-mode .select2-dropdown {
  background-color: #1f2020 !important;
  border-color: #3a3a3a !important;
}
body.dark-mode .select2-results__option {
  color: #e7e5e5 !important;
}
body.dark-mode .select2-results__option--highlighted {
  background-color: #004395 !important;
}
body.dark-mode .btn-primary {
  background-color: #adc6ff !important;
  border-color: #adc6ff !important;
  color: #003d88 !important;
}
body.dark-mode .btn-primary:hover {
  background-color: #98b8ff !important;
}
body.dark-mode a { color: #adc6ff !important; }
body.dark-mode a:hover { color: #98b8ff !important; }
body.dark-mode .nav-sidebar .nav-link.active {
  background-color: #004395 !important;
  color: #adc6ff !important;
}
body.dark-mode .breadcrumb-item a { color: #adc6ff !important; }
body.dark-mode .breadcrumb-item.active,
body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #acabaa !important;
}
body.dark-mode #header,
body.dark-mode .main-header.navbar {
  background-color: #191a1a !important;
}
body.dark-mode #header a,
body.dark-mode #header .nav-link,
body.dark-mode #branding h1 a {
  color: #e7e5e5 !important;
}
body.dark-mode #user-tools a {
  color: #acabaa !important;
}
body.dark-mode #user-tools a:hover {
  color: #adc6ff !important;
}
body.dark-mode .module, body.dark-mode fieldset.module {
  background-color: #191a1a !important;
  border-color: #2a2a2a !important;
}
body.dark-mode .module h2, body.dark-mode .module caption {
  background-color: #1f2020 !important;
  color: #adc6ff !important;
}
body.dark-mode .submit-row {
  background-color: #1f2020 !important;
  border-top-color: #2a2a2a !important;
}
body.dark-mode #changelist-filter {
  background-color: #191a1a !important;
}
body.dark-mode #changelist-filter h2 {
  background-color: #1f2020 !important;
  color: #adc6ff !important;
}
body.dark-mode #changelist-filter h3 {
  color: #acabaa !important;
}
body.dark-mode #changelist-filter li a {
  color: #acabaa !important;
}
body.dark-mode #changelist-filter li.selected a {
  color: #adc6ff !important;
}
body.dark-mode .paginator {
  background-color: #191a1a !important;
  color: #acabaa !important;
}
body.dark-mode ul.messagelist li.success {
  background-color: rgba(74,222,128,0.1) !important;
  color: #4ade80 !important;
}
body.dark-mode ul.messagelist li.error {
  background-color: rgba(238,125,119,0.1) !important;
  color: #ee7d77 !important;
}
body.dark-mode ul.messagelist li.warning {
  background-color: rgba(255,183,134,0.1) !important;
  color: #ffb786 !important;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}
body.dark-mode ::-webkit-scrollbar-track {
  background: #0e0e0e;
}

/* ── LIGHT : surfaces Architectural Minimalist ───────── */
body:not(.dark-mode) {
  background-color: #f9f9ff !important;
}
body:not(.dark-mode) .content-wrapper {
  background-color: #f0f3ff !important;
}
body:not(.dark-mode) .main-header {
  background-color: #f9f9ff !important;
  border-bottom-color: #c2c6d6 !important;
}
body:not(.dark-mode) .main-sidebar,
body:not(.dark-mode) .sidenav {
  background-color: #f0f3ff !important;
}
body:not(.dark-mode) .card {
  background-color: #ffffff !important;
  border-color: #c2c6d6 !important;
}
body:not(.dark-mode) .card-header {
  background-color: #e7eeff !important;
  border-bottom-color: #c2c6d6 !important;
  color: #111c2d !important;
}
body:not(.dark-mode) .nav-sidebar .nav-link {
  color: #424754 !important;
}
body:not(.dark-mode) .nav-sidebar .nav-link:hover {
  background-color: #e7eeff !important;
  color: #111c2d !important;
}
body:not(.dark-mode) .nav-sidebar .nav-link.active {
  background-color: #0058be !important;
  color: #ffffff !important;
}
body:not(.dark-mode) .brand-link {
  border-bottom-color: #c2c6d6 !important;
  color: #111c2d !important;
}
body:not(.dark-mode) table thead th {
  background-color: #dee8ff !important;
  color: #424754 !important;
  border-color: #c2c6d6 !important;
  padding: 0.75rem 0.5rem !important;
}
body:not(.dark-mode) table tbody tr:hover {
  background-color: #e7eeff !important;
}

/* ── Festival schedule form — améliorations UX ─────────── */

/* Masquer TOUS les raccourcis date/heure Django admin (Aujourd'hui, Maintenant) */
.datetimeshortcuts,
.timezonewarning { display: none !important; }

/* Masquer le lien "Maintenant" des widgets time Django (remplacé par <select>) */
.model-festivalschedule .timezonewarning,
.model-festivalschedule .datetimeshortcuts { display: none !important; }

/* Labels champs : taille intermédiaire entre le titre du fieldset et la taille actuelle */
.model-festivalschedule .form-row label,
.model-festivalschedule .field-label { font-size: 13px !important; font-weight: 500 !important; }

/* Fieldset title */
.model-festivalschedule h2 { font-size: 15px !important; letter-spacing: .02em; }

/* Durée merch — lecture seule mise en valeur */
.model-festivalschedule .field-duree_merch .readonly {
  font-size: 14px;
  font-weight: 600;
  color: #0058be;
}

/* ── Sortable blocks (Scènes, Zones) — TabularInline styled as cards ── */

/* Table → conteneur de blocs */
fieldset.sortable-blocks-group table {
  display: block;
  width: 100%;
}
fieldset.sortable-blocks-group table thead { display: none; }
fieldset.sortable-blocks-group table tbody {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Chaque ligne = une carte */
fieldset.sortable-blocks-group table tbody tr.form-row:not(.empty-form) {
  display: flex !important;
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
fieldset.sortable-blocks-group table tbody tr.form-row:not(.empty-form):hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
fieldset.sortable-blocks-group table tbody tr.empty-form { display: none !important; }

/* Reset cellules */
fieldset.sortable-blocks-group table tbody tr td {
  border: none !important;
  vertical-align: middle;
  padding: 6px 8px;
}

/* ════════════════════════════════════════════
   LIGNES EXISTANTES (has_original)
   Modèle visuel : [⠿  Nom de la scène     🗑️]
   • td.original = handle drag + affichage du nom + bouton supprimer
   • td.field-nom = caché (input toujours dans le DOM pour soumission)
   ════════════════════════════════════════════ */

fieldset.sortable-blocks-group table tbody tr.has_original td.original {
  flex: 1;
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 0 10px !important;
  cursor: grab;
}

/* p = target SortableJS (handle: "td.original p") :
   on garde le texte __str__ visible directement, précédé de ⠿ */
fieldset.sortable-blocks-group table tbody tr.has_original td.original p {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  background-image: none !important;   /* override drag.png adminsortable2 */
  width: auto !important;              /* override calc() adminsortable2 */
  cursor: grab;
  margin: 0;
  padding: 8px 0;
  user-select: none;
}
fieldset.sortable-blocks-group table tbody tr.has_original td.original p::before {
  content: '⠿';
  color: #9ca3af;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
fieldset.sortable-blocks-group table tbody tr.has_original td.original p:active { cursor: grabbing; }

/* Masquer liens (Change/View) et flèches haut/bas */
fieldset.sortable-blocks-group td.original p a { display: none; }
fieldset.sortable-blocks-group td.original span.sort { display: none; }

/* Masquer l'input nom pour les lignes existantes
   (le nom est déjà visible dans td.original p) */
fieldset.sortable-blocks-group table tbody tr.has_original td.field-nom {
  display: none !important;
}

/* ════════════════════════════════════════════
   NOUVELLES LIGNES (extra, non sauvegardées)
   Modèle visuel : [   Saisir un nom…       ]
   • td.original = petit spacer (sans p ni texte)
   • td.field-nom = input de saisie visible
   ════════════════════════════════════════════ */

fieldset.sortable-blocks-group table tbody tr:not(.has_original):not(.empty-form) td.original {
  flex: 0 0 12px;
  padding: 0 !important;
}
fieldset.sortable-blocks-group table tbody tr:not(.has_original):not(.empty-form) td.field-nom {
  flex: 1;
  padding: 4px 10px !important;
}
fieldset.sortable-blocks-group table tbody tr:not(.has_original):not(.empty-form) td.field-nom input[type="text"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 6px 8px;
  outline: none;
  transition: border-color 0.15s;
}
fieldset.sortable-blocks-group table tbody tr:not(.has_original):not(.empty-form) td.field-nom input[type="text"]:focus {
  border-color: #417690;
  box-shadow: 0 0 0 2px rgba(65,118,144,0.15);
}

/* ── Champs obligatoires : indicateur * ──────────────────────── */
.required label::after,
label.required::after {
  content: ' *';
  color: #dc3545;
  font-weight: 700;
}

/* ── Erreurs formulaire : style Bootstrap danger ─────────────── */
.errorlist {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
}
.errorlist li {
  background: linear-gradient(310deg, #ea0606 0%, #ff667e 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 6px;
  display: block;
  width: 100%;
  box-shadow: 0 4px 6px rgba(233, 6, 6, 0.25);
}
.errorlist li::before {
  content: '⚠ ';
}

/* Champ invalide : bordure rouge */
.errors input,
.errors select,
.errors textarea,
.fieldBox.errors input,
.fieldBox.errors select,
.fieldBox.errors textarea {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;
}

/* ── Champs cachés (ordre hidden, delete) ── */
fieldset.sortable-blocks-group table tbody tr td.field-ordre { display: none !important; }
fieldset.sortable-blocks-group table tbody tr td.delete { display: none !important; }

/* ── Ligne en attente de suppression ── */
fieldset.sortable-blocks-group table tbody tr.sb-deleted {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Bouton suppression (injecté par JS dans td.original) ── */
.sb-btn-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 5px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.1s, background 0.1s;
}
.sb-btn-delete:hover {
  opacity: 1;
  background: #fef2f2;
}