/* ======================================================================
   JARDIN NOIR — Thème Botanique Ultra-Moderne pour Perfex CRM
   Client : Vente & installation de végétaux stabilisés et artificiels
   ====================================================================== */

:root {
  /* ─ Niveaux de profondeur ───────────────────────────────────────── */
  --jn-bg:           #09160D;   /* fond absolu                       */
  --jn-surface:      #0F2016;   /* panels / cartes                   */
  --jn-elevated:     #E8E2CB;   /* fond clair — inputs, dropdowns, wells */
  --jn-elevated-hi:  #F0EAD6;   /* hover sur éléments elevated          */
  /* Textes sur fond elevated clair */
  --jn-elevated-fg:  #1C3020;   /* texte principal  — vert forêt sombre  */
  --jn-elevated-fg2: #3A5A40;   /* texte secondaire — sauge moyen sombre */
  --jn-elevated-fg3: #5A7A5E;   /* texte atténué / placeholder           */
  --jn-sidebar:      #060D08;
  --jn-header:       #070F09;

  /* ─ Bordures ────────────────────────────────────────────────────── */
  --jn-border:       rgba(201, 169, 110, 0.10);
  --jn-border-md:    rgba(201, 169, 110, 0.22);
  --jn-border-lg:    rgba(201, 169, 110, 0.42);

  /* ─ Accents ─────────────────────────────────────────────────────── */
  --jn-gold:         #C9A96E;
  --jn-gold-lt:      #DCB87E;
  --jn-sage:         #6A9E79;
  --jn-sage-lt:      #9EC8AB;

  /* ─ Texte ───────────────────────────────────────────────────────── */
  /* cream = crème ambrée chaude, clairement distincte du blanc pur   */
  --jn-cream:        #DDD0B0;   /* warm amber cream — text principal  */
  --jn-cream-muted:  #8FAF9A;   /* sauge clair — texte secondaire     */
  --jn-muted:        #6A8A76;   /* sauge moyen — texte très atténué   */

  /* ─ Statuts ─────────────────────────────────────────────────────── */
  --jn-success:      #5CAF7C;
  --jn-danger:       #D97070;
  --jn-warning:      #CFA040;
  --jn-info:         #5A9CBF;

  /* ─ Formes ──────────────────────────────────────────────────────── */
  --jn-radius:       10px;
  --jn-radius-lg:    14px;
  --jn-radius-xl:    20px;

  /* ─ Ombres ──────────────────────────────────────────────────────── */
  --jn-shadow:       0 1px 2px rgba(0,0,0,.50), 0 4px 16px rgba(0,0,0,.32), 0 0 0 1px rgba(201,169,110,.04);
  --jn-shadow-lg:    0 24px 64px rgba(0,0,0,.62), 0 4px 16px rgba(0,0,0,.38);
  --jn-shadow-card:  0 1px 2px rgba(0,0,0,.45), 0 6px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);

  /* ─ Glows ───────────────────────────────────────────────────────── */
  --jn-glow-gold:    0 0 0 3px rgba(201,169,110,.14), 0 0 20px rgba(201,169,110,.06);
  --jn-glow-sage:    0 0 0 3px rgba(106,158,121,.14), 0 0 20px rgba(106,158,121,.06);

  /* ─ Transitions ─────────────────────────────────────────────────── */
  --jn-tr:           all 0.18s ease;
  --jn-tr-fast:      all 0.10s ease;
  --jn-tr-slow:      all 0.30s cubic-bezier(.4,0,.2,1);

  /* ─ Typographie ─────────────────────────────────────────────────── */
  --jn-font-body:    'Plus Jakarta Sans', sans-serif;
  --jn-font-head:    'Cormorant', serif;
}

/* ── BASE ─────────────────────────────────────────────────────────── */

body.admin {
  background: var(--jn-bg) !important;
  font-family: var(--jn-font-body) !important;
  color: var(--jn-cream) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.admin #wrapper { background: var(--jn-bg) !important; }

/* Scrollbar */
.admin ::-webkit-scrollbar { width: 5px; height: 5px; }
.admin ::-webkit-scrollbar-track { background: rgba(0,0,0,.10); border-radius: 4px; }
.admin ::-webkit-scrollbar-thumb { background: rgba(201,169,110,.20); border-radius: 4px; }
.admin ::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,.38); }

/* Sélection de texte */
.admin ::selection { background: rgba(201,169,110,.26); color: var(--jn-cream); }
.admin ::-moz-selection { background: rgba(201,169,110,.26); color: var(--jn-cream); }

/* ── TYPOGRAPHIE ──────────────────────────────────────────────────── */

.admin h1,.admin h2,.admin h3,.admin h4,.admin h5,.admin h6 {
  font-family: var(--jn-font-head) !important;
  color: var(--jn-cream) !important;
  letter-spacing: .02em;
  font-weight: 500 !important;
}

.admin h1 { font-size: 1.95rem !important; }
.admin h2 { font-size: 1.65rem !important; }
.admin h3 { font-size: 1.4rem !important; }
.admin h4 { font-size: 1.15rem !important; }

.admin p { color: var(--jn-cream) !important; line-height: 1.65; font-size: .85rem; }
.admin small { color: var(--jn-cream-muted) !important; }
.admin strong, .admin b { color: var(--jn-cream) !important; font-weight: 600 !important; }

.admin a { color: var(--jn-sage-lt) !important; text-decoration: none !important; transition: var(--jn-tr); }
.admin a:hover, .admin a:focus { color: var(--jn-gold-lt) !important; text-decoration: none !important; }

.admin hr { border-color: var(--jn-border) !important; }

/* ── HEADER ───────────────────────────────────────────────────────── */

.admin #header {
  background: var(--jn-header) !important;
  border-bottom: 1px solid var(--jn-border) !important;
  box-shadow: 0 1px 0 rgba(201,169,110,.06) !important;
}

.admin #header .navbar-nav > li > a {
  color: var(--jn-cream-muted) !important;
  transition: var(--jn-tr) !important;
}

.admin #header .navbar-nav > li > a:hover,
.admin #header .navbar-nav > li.open > a {
  color: var(--jn-gold) !important;
  background: rgba(201,169,110,.07) !important;
}

/* Recherche */
.admin #header .form-control,
.admin #header input[type="text"] {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: 8px !important;
  color: var(--jn-cream) !important;
}

.admin #header .form-control::placeholder { color: var(--jn-muted) !important; }
.admin #header .form-control:focus {
  border-color: var(--jn-border-md) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,.08) !important;
}

.admin button.hide-menu { color: var(--jn-muted) !important; transition: var(--jn-tr) !important; }
.admin button.hide-menu:hover { color: var(--jn-gold) !important; }

/* ── SIDEBAR ──────────────────────────────────────────────────────── */

.admin .sidebar {
  background-color: var(--jn-sidebar) !important;
  /* Motif botanique SVG en fond de sidebar — ne perturbe pas le layout */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='130' viewBox='0 0 160 130'%3E%3Cpath d='M80 130 Q83 105 80 85 Q96 95 98 80 Q80 85 80 85 Q64 95 62 80 Q78 85 80 85' stroke='%23C9A96E' stroke-width='0.8' fill='none' opacity='0.25'/%3E%3Cpath d='M80 85 Q83 65 80 48' stroke='%23C9A96E' stroke-width='0.7' fill='none' opacity='0.15'/%3E%3Cpath d='M30 130 Q32 112 30 96 Q42 104 44 92 Q30 96 30 96 Q18 104 16 92 Q28 96 30 96' stroke='%23C9A96E' stroke-width='0.6' fill='none' opacity='0.14'/%3E%3Cpath d='M130 130 Q132 110 130 94 Q142 102 144 90 Q130 94 130 94 Q118 102 116 90 Q128 94 130 94' stroke='%23C9A96E' stroke-width='0.6' fill='none' opacity='0.14'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: auto 180px !important;
  border-right: 1px solid var(--jn-border) !important;
}

/* Profil utilisateur */
.admin .sidebar .profile-usertitle-name { color: var(--jn-cream) !important; font-weight: 500 !important; }
.admin .sidebar .profile-usertitle-job  { color: var(--jn-cream-muted) !important; font-size: .72rem !important; }
.admin .profile-usermenu { border-top: 1px solid var(--jn-border) !important; }

/* Navigation principale */
.admin #side-menu { padding: 6px 10px !important; }

.admin #side-menu > li > a {
  color: var(--jn-cream-muted) !important;
  border-radius: 8px !important;
  padding: 9px 13px !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  transition: var(--jn-tr) !important;
  margin-bottom: 2px !important;
  border-left: 2px solid transparent !important;
}

.admin #side-menu > li > a i.menu-icon {
  color: var(--jn-muted) !important;
  font-size: .82rem !important;
  width: 18px !important;
  text-align: center !important;
  transition: var(--jn-tr) !important;
}

.admin #side-menu > li > a:hover {
  background: rgba(201,169,110,.07) !important;
  color: var(--jn-cream) !important;
}

.admin #side-menu > li > a:hover i.menu-icon { color: var(--jn-sage-lt) !important; }

/* Élément actif */
.admin #side-menu > li.active > a,
.admin #side-menu > li.active > a:hover {
  background: rgba(201,169,110,.1) !important;
  color: var(--jn-gold) !important;
  border-left-color: var(--jn-gold) !important;
  padding-left: 11px !important;
}

.admin #side-menu > li.active > a i.menu-icon { color: var(--jn-gold) !important; }

/* Sous-menu */
.admin #side-menu .nav-second-level {
  background: rgba(0,0,0,.14) !important;
  border-radius: 8px !important;
  margin: 2px 4px 6px !important;
  padding: 3px 0 !important;
}

.admin #side-menu .nav-second-level > li > a {
  color: var(--jn-muted) !important;
  font-size: .77rem !important;
  padding: 7px 12px 7px 34px !important;
  border-radius: 6px !important;
  border-left: 2px solid transparent !important;
  transition: var(--jn-tr) !important;
}

.admin #side-menu .nav-second-level > li > a:hover  { color: var(--jn-cream-muted) !important; background: rgba(201,169,110,.05) !important; }
.admin #side-menu .nav-second-level > li.active > a { color: var(--jn-gold) !important; border-left-color: var(--jn-gold) !important; }

/* Chevrons */
.admin #side-menu li > a > .fa-chevron-left,
.admin #side-menu li > a > .fa-chevron-down { color: var(--jn-muted) !important; font-size: .58rem !important; transition: var(--jn-tr) !important; }

/* ── ZONE CONTENU ─────────────────────────────────────────────────── */

.admin #page-content { padding: 24px !important; }

.admin .page-header {
  border-bottom: 1px solid var(--jn-border) !important;
  color: var(--jn-cream) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

/* Breadcrumb */
.admin .breadcrumb, .admin ol.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}

.admin .breadcrumb > li           { color: var(--jn-muted) !important; font-size: .72rem !important; }
.admin .breadcrumb > li + li::before { color: var(--jn-muted) !important; }
.admin .breadcrumb > li a         { color: var(--jn-muted) !important; }
.admin .breadcrumb > li a:hover   { color: var(--jn-sage-lt) !important; }

/* ── PANELS / CARTES ──────────────────────────────────────────────── */

.admin .panel {
  background: var(--jn-surface) !important;
  border: 1px solid var(--jn-border) !important;
  border-top-color: rgba(255,255,255,.055) !important;
  border-radius: var(--jn-radius-lg) !important;
  box-shadow: var(--jn-shadow-card) !important;
  overflow: hidden !important;
}

.admin .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--jn-border) !important;
  padding: 16px 20px !important;
}

.admin .panel-heading h3,
.admin .panel-heading h4 {
  font-family: var(--jn-font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--jn-cream) !important;
  margin: 0 !important;
  letter-spacing: .025em !important;
}

.admin .panel-body   { padding: 18px 20px !important; }

.admin .panel-footer {
  background: rgba(0,0,0,.1) !important;
  border-top: 1px solid var(--jn-border) !important;
  padding: 12px 20px !important;
}

/* ── FORMULAIRES ──────────────────────────────────────────────────── */

.admin .form-control {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: 9px !important;
  color: var(--jn-elevated-fg) !important;
  font-family: var(--jn-font-body) !important;
  font-size: .83rem !important;
  padding: 8px 14px !important;
  height: auto !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  -webkit-appearance: none;
}

.admin .form-control:focus {
  border-color: rgba(201,169,110,.55) !important;
  box-shadow: var(--jn-glow-gold) !important;
  background: var(--jn-elevated-hi) !important;
  color: var(--jn-elevated-fg) !important;
  outline: none !important;
}

.admin .form-control:hover:not(:focus):not([disabled]):not([readonly]) {
  border-color: var(--jn-border-md) !important;
  background: var(--jn-elevated-hi) !important;
}

.admin .form-control::placeholder { color: var(--jn-elevated-fg3) !important; opacity: 1 !important; }

.admin .form-control[disabled],
.admin .form-control[readonly] {
  background: rgba(0,0,0,.08) !important;
  color: var(--jn-elevated-fg3) !important;
  opacity: .9 !important;
  border-color: var(--jn-border) !important;
  cursor: not-allowed !important;
}

.admin textarea.form-control { resize: vertical !important; min-height: 88px !important; }

.admin label {
  color: var(--jn-cream-muted) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  display: block;
}

.admin .form-group { margin-bottom: 18px !important; }

.admin .input-group-addon {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  color: var(--jn-elevated-fg2) !important;
  font-size: .82rem !important;
}

.admin .help-block { color: var(--jn-muted) !important; font-size: .73rem !important; }

.admin .checkbox label,
.admin .radio label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: .83rem !important;
  font-weight: 400 !important;
  color: var(--jn-cream) !important;
}

/* ── BOUTONS ──────────────────────────────────────────────────────── */

.admin .btn {
  font-family: var(--jn-font-body) !important;
  font-size: .79rem !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  border: none !important;
  transition: var(--jn-tr) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.admin .btn i { font-size: .78rem !important; }
.admin .btn.btn-block { display: flex !important; width: 100% !important; }

.admin .btn-primary {
  background: linear-gradient(135deg, var(--jn-sage) 0%, #4E7D5E 100%) !important;
  color: var(--jn-cream) !important;
  box-shadow: 0 2px 8px rgba(106,158,121,.22) !important;
}

.admin .btn-primary:hover,
.admin .btn-primary:focus,
.admin .btn-primary:active {
  background: linear-gradient(135deg, #7AAF88 0%, #5A8F6A 100%) !important;
  box-shadow: 0 4px 14px rgba(106,158,121,.32) !important;
  color: var(--jn-cream) !important;
  transform: translateY(-1px) !important;
}

.admin .btn-default {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--jn-border) !important;
  color: var(--jn-cream-muted) !important;
}

.admin .btn-default:hover,
.admin .btn-default:focus {
  background: rgba(201,169,110,.09) !important;
  border-color: var(--jn-border-md) !important;
  color: var(--jn-cream) !important;
}

.admin .btn-success {
  background: linear-gradient(135deg, #4E9A6A 0%, #357052 100%) !important;
  color: var(--jn-cream) !important;
  border: none !important;
}
.admin .btn-success:hover { background: linear-gradient(135deg, #5CAF7C 0%, #428060 100%) !important; color: var(--jn-cream) !important; }

.admin .btn-danger {
  background: linear-gradient(135deg, #C05050 0%, #962E2E 100%) !important;
  color: var(--jn-cream) !important;
  border: none !important;
}
.admin .btn-danger:hover { background: linear-gradient(135deg, #D96060 0%, #AA3838 100%) !important; color: var(--jn-cream) !important; }

.admin .btn-warning {
  background: linear-gradient(135deg, var(--jn-gold) 0%, #A07830 100%) !important;
  color: #0A1A12 !important;
  border: none !important;
}
.admin .btn-warning:hover { background: linear-gradient(135deg, var(--jn-gold-lt) 0%, #BA8D3E 100%) !important; color: #0A1A12 !important; }

.admin .btn-info {
  background: linear-gradient(135deg, #4A88A8 0%, #326A88 100%) !important;
  color: var(--jn-cream) !important;
  border: none !important;
}
.admin .btn-info:hover { background: linear-gradient(135deg, #5A9CBF 0%, #3E7A9A 100%) !important; color: var(--jn-cream) !important; }

.admin .btn-link {
  background: none !important;
  border: none !important;
  color: var(--jn-sage-lt) !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  transform: none !important;
}
.admin .btn-link:hover { color: var(--jn-gold) !important; }

/* ── TABLEAUX ─────────────────────────────────────────────────────── */

.admin table.dataTable thead tr > th,
.admin .table.dataTable > thead:first-child > tr:first-child > th,
.admin .table > thead > tr > th {
  background: rgba(0,0,0,.06) !important;
  color: var(--jn-elevated-fg3) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--jn-border) !important;
  border-top: none !important;
  padding: 11px 16px !important;
  white-space: nowrap;
}

.admin .table > tbody > tr > td {
  border-color: var(--jn-border) !important;
  color: var(--jn-elevated-fg) !important;
  padding: 11px 16px !important;
  vertical-align: middle !important;
  font-size: .83rem !important;
}

.admin .table > tbody > tr { transition: var(--jn-tr); }
.admin .table > tbody > tr:hover > td { background: rgba(201,169,110,.14) !important; }

.admin .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(0,0,0,.025) !important; }

/* Liens dans les tableaux */
.admin .dataTables_wrapper table tbody a:not(.btn):not(.text-muted):not(.text-primary):not(.text-danger):not(.text-warning):not(.text-success):not(.text-info) {
  color: var(--jn-elevated-fg2) !important;
}
.admin .dataTables_wrapper table tbody a:not(.btn):hover { color: var(--jn-elevated-fg) !important; }

/* Contrôles DataTables */
.admin .dataTables_filter label,
.admin .dataTables_length label,
.admin .dataTables_info { color: var(--jn-elevated-fg3) !important; font-size: .76rem !important; }

.admin .dataTables_filter input,
.admin .dataTables_length select {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: 7px !important;
  color: var(--jn-elevated-fg) !important;
  font-size: .8rem !important;
  padding: 5px 10px !important;
}

/* Table items (devis/factures) */
.admin .table.items thead { background: rgba(0,0,0,.25) !important; }

.admin .table.items thead th {
  color: var(--jn-elevated-fg3) !important;
  font-size: .68rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 12px !important;
}

.admin .table.items tbody tr td {
  border-color: var(--jn-border) !important;
  padding: 10px 12px !important;
  vertical-align: top !important;
  color: var(--jn-elevated-fg) !important;
}

.admin .table.items tfoot { background: rgba(0,0,0,.1) !important; }
.admin .table.items tfoot tr td { border-color: var(--jn-border) !important; color: var(--jn-elevated-fg) !important; }

/* Panel > table : harmonisation padding */
.admin .panel > .table > thead > tr > th:first-child,
.admin .panel > .table > tbody > tr > td:first-child,
.admin .panel > .table-responsive > .table > thead > tr > th:first-child,
.admin .panel > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 20px !important; }

.admin .panel > .table > thead > tr > th:last-child,
.admin .panel > .table > tbody > tr > td:last-child,
.admin .panel > .table-responsive > .table > thead > tr > th:last-child,
.admin .panel > .table-responsive > .table > tbody > tr > td:last-child  { padding-right: 20px !important; }

.admin .panel > .table,
.admin .panel > .table-responsive > .table { margin-bottom: 0 !important; }

/* ── MENUS DÉROULANTS ─────────────────────────────────────────────── */

.admin .dropdown-menu {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-top-color: rgba(255,255,255,.06) !important;
  border-radius: var(--jn-radius) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.30), 0 0 0 1px rgba(201,169,110,.06) !important;
  padding: 5px !important;
  min-width: 180px !important;
}

.admin .dropdown-menu > li > a {
  color: var(--jn-elevated-fg2) !important;
  padding: 8px 13px !important;
  border-radius: 6px !important;
  font-size: .79rem !important;
  transition: var(--jn-tr) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.admin .dropdown-menu > li > a i { color: var(--jn-elevated-fg3) !important; }

.admin .dropdown-menu > li > a:hover,
.admin .dropdown-menu > li > a:focus {
  background: rgba(201,169,110,.20) !important;
  color: var(--jn-elevated-fg) !important;
}

.admin .dropdown-menu > li > a:hover i { color: var(--jn-gold) !important; }

.admin .dropdown-menu .divider {
  background: var(--jn-border) !important;
  margin: 4px 0 !important;
  border: none !important;
  height: 1px !important;
}

.admin .dropdown-menu .dropdown-header {
  color: var(--jn-elevated-fg3) !important;
  font-size: .66rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 6px 13px 3px !important;
}

/* ── MODALES ──────────────────────────────────────────────────────── */

.admin .modal-content {
  background: var(--jn-surface) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: var(--jn-radius-lg) !important;
  box-shadow: var(--jn-shadow-lg) !important;
  color: var(--jn-cream) !important;
}

.admin .modal-header {
  background: rgba(0,0,0,.15) !important;
  border-bottom: 1px solid var(--jn-border) !important;
  padding: 18px 22px !important;
  border-radius: var(--jn-radius-lg) var(--jn-radius-lg) 0 0 !important;
}

.admin .modal-title {
  font-family: var(--jn-font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--jn-cream) !important;
  letter-spacing: .025em !important;
}

.admin .modal-header .close {
  color: var(--jn-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
  transition: var(--jn-tr) !important;
}
.admin .modal-header .close:hover { color: var(--jn-cream) !important; }

.admin .modal-body { padding: 22px !important; }

.admin .modal-footer {
  border-top: 1px solid var(--jn-border) !important;
  background: rgba(0,0,0,.1) !important;
  padding: 14px 22px !important;
  border-radius: 0 0 var(--jn-radius-lg) var(--jn-radius-lg) !important;
}

.admin .modal-backdrop {
  background: rgba(0,0,0,.72) !important;
  z-index: 1040 !important;
}

.admin .modal {
  z-index: 1050 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.admin .modal.in {
  opacity: 1 !important;
}

.admin .modal .modal-dialog {
  position: relative !important;
  z-index: 1051 !important;
}

/* ── ONGLETS ──────────────────────────────────────────────────────── */

.admin .nav-tabs { border-bottom: 1px solid var(--jn-border) !important; }

.admin .nav-tabs > li > a {
  color: var(--jn-muted) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  margin-bottom: -1px !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--jn-tr) !important;
  background: transparent !important;
}

.admin .nav-tabs > li > a:hover {
  color: var(--jn-cream-muted) !important;
  background: transparent !important;
  border-bottom-color: var(--jn-border-md) !important;
}

.admin .nav-tabs > li.active > a,
.admin .nav-tabs > li.active > a:hover,
.admin .nav-tabs > li.active > a:focus {
  background: transparent !important;
  color: var(--jn-gold) !important;
  border: none !important;
  border-bottom: 2px solid var(--jn-gold) !important;
}

.admin .tab-content { padding-top: 16px !important; }

/* ── ALERTES ──────────────────────────────────────────────────────── */

.admin .alert {
  border-radius: var(--jn-radius) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  padding: 12px 16px !important;
  font-size: .83rem !important;
}

.admin .alert-success { background: rgba(92,175,124,.1) !important; border-left-color: var(--jn-success) !important; color: #8ECBA8 !important; }
.admin .alert-danger, .admin .alert-error  { background: rgba(217,112,112,.1) !important; border-left-color: var(--jn-danger) !important;  color: #E8A0A0 !important; }
.admin .alert-warning { background: rgba(207,160,64,.1) !important;  border-left-color: var(--jn-warning) !important; color: #DDB860 !important; }
.admin .alert-info    { background: rgba(90,156,191,.1) !important;  border-left-color: var(--jn-info) !important;    color: #88BACC !important; }

/* ── BADGES & LABELS ──────────────────────────────────────────────── */

.admin .badge, .admin .label {
  font-family: var(--jn-font-body) !important;
  font-size: .67rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-radius: 20px !important;
  padding: 3px 9px !important;
}

.admin .badge-primary, .admin .label-primary { background: rgba(106,158,121,.2) !important;  color: var(--jn-sage-lt) !important; }
.admin .badge-success, .admin .label-success { background: rgba(92,175,124,.18) !important;  color: #8ECBA8 !important; }
.admin .badge-danger,  .admin .label-danger  { background: rgba(217,112,112,.18) !important; color: #E8A0A0 !important; }
.admin .badge-warning, .admin .label-warning { background: rgba(207,160,64,.18) !important;  color: #DDB860 !important; }
.admin .badge-info,    .admin .label-info    { background: rgba(90,156,191,.18) !important;  color: #88BACC !important; }
.admin .badge-default, .admin .label-default { background: rgba(255,255,255,.08) !important; color: var(--jn-cream-muted) !important; }

/* ── PAGINATION ───────────────────────────────────────────────────── */

.admin .pagination > li > a,
.admin .pagination > li > span {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border) !important;
  color: var(--jn-elevated-fg2) !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
  font-size: .77rem !important;
  padding: 5px 11px !important;
  transition: var(--jn-tr) !important;
}

.admin .pagination > li > a:hover { background: rgba(201,169,110,.22) !important; color: var(--jn-elevated-fg) !important; border-color: var(--jn-border-md) !important; }
.admin .pagination > .active > a,
.admin .pagination > .active > span { background: var(--jn-gold) !important; border-color: var(--jn-gold) !important; color: #0A1A12 !important; }
.admin .pagination > .disabled > a  { color: var(--jn-muted) !important; background: rgba(255,255,255,.03) !important; cursor: not-allowed !important; }

/* ── BARRES DE PROGRESSION ────────────────────────────────────────── */

.admin .progress {
  background: rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
  height: 5px !important;
  box-shadow: none !important;
}

.admin .progress-bar {
  background: linear-gradient(90deg, var(--jn-sage) 0%, var(--jn-gold) 100%) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.admin .progress-bar-success { background: var(--jn-success) !important; }
.admin .progress-bar-danger  { background: var(--jn-danger) !important; }
.admin .progress-bar-warning { background: var(--jn-warning) !important; }
.admin .progress-bar-info    { background: var(--jn-info) !important; }

/* ── WELL / LIST GROUP ────────────────────────────────────────────── */

.admin .well {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: var(--jn-radius) !important;
  box-shadow: none !important;
  color: var(--jn-elevated-fg) !important;
  padding: 16px !important;
}

.admin .list-group-item {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-cream) !important;
  font-size: .83rem !important;
  transition: var(--jn-tr) !important;
}

.admin .list-group-item:hover   { background: var(--jn-elevated) !important; color: var(--jn-elevated-fg) !important; }
.admin .list-group-item.active  { background: rgba(201,169,110,.12) !important; border-color: var(--jn-border-md) !important; color: var(--jn-gold) !important; }

/* ── POPOVER / TOOLTIP ────────────────────────────────────────────── */

.admin .popover {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: var(--jn-radius) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  color: var(--jn-elevated-fg) !important;
  font-size: .82rem !important;
}

.admin .popover-title   { background: rgba(0,0,0,.06) !important; color: var(--jn-elevated-fg) !important; border-bottom-color: var(--jn-border) !important; font-family: var(--jn-font-head) !important; }
.admin .popover-content { color: var(--jn-elevated-fg) !important; }

.admin .tooltip-inner {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  color: var(--jn-elevated-fg) !important;
  border-radius: 6px !important;
  font-size: .76rem !important;
  padding: 5px 10px !important;
}

/* ── BOOTSTRAP SELECT ─────────────────────────────────────────────── */

.admin .bootstrap-select > .dropdown-toggle {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: 9px !important;
  color: var(--jn-elevated-fg) !important;
  font-size: .83rem !important;
  padding: 8px 14px !important;
  height: auto !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.admin .bootstrap-select > .dropdown-toggle:hover:not(:focus) {
  background: var(--jn-elevated-hi) !important;
  border-color: var(--jn-border-md) !important;
}

.admin .bootstrap-select > .dropdown-toggle:focus,
.admin .bootstrap-select.open > .dropdown-toggle {
  border-color: rgba(201,169,110,.55) !important;
  box-shadow: var(--jn-glow-gold) !important;
  background: var(--jn-elevated-hi) !important;
  outline: none !important;
}

.admin .bootstrap-select > .dropdown-toggle .caret { border-top-color: var(--jn-elevated-fg3) !important; }
.admin .bootstrap-select .filter-option             { color: var(--jn-elevated-fg) !important; }
.admin .bootstrap-select .bs-placeholder .filter-option { color: var(--jn-elevated-fg3) !important; }
.admin .bootstrap-select.open .dropdown-menu        { background: var(--jn-elevated) !important; }
.admin .bootstrap-select .dropdown-menu li a        { color: var(--jn-elevated-fg2) !important; }
.admin .bootstrap-select .dropdown-menu li a:hover  { background: rgba(201,169,110,.20) !important; color: var(--jn-elevated-fg) !important; }
.admin .bootstrap-select .dropdown-menu li.selected a { background: rgba(201,169,110,.25) !important; color: var(--jn-elevated-fg) !important; }
.admin .bootstrap-select .dropdown-menu .bs-searchbox input { background: var(--jn-elevated-hi) !important; border-color: var(--jn-border-md) !important; color: var(--jn-elevated-fg) !important; border-radius: 6px !important; }
.admin .bootstrap-select .dropdown-menu .bs-searchbox input::placeholder { color: var(--jn-elevated-fg3) !important; opacity: 1 !important; }

/* ── TAGSINPUT ────────────────────────────────────────────────────── */

.admin .tagit {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
}

.admin .tagit .tagit-choice {
  background: rgba(106,158,121,.18) !important;
  border: 1px solid rgba(106,158,121,.3) !important;
  color: var(--jn-sage-lt) !important;
  border-radius: 4px !important;
  font-size: .77rem !important;
}

.admin .tagit input[type="text"] { color: var(--jn-elevated-fg) !important; background: transparent !important; }

/* ── UTILITAIRES TEXTE ────────────────────────────────────────────── */

.admin .text-muted   { color: var(--jn-muted) !important; }
.admin .text-success { color: var(--jn-success) !important; }
.admin .text-danger  { color: var(--jn-danger) !important; }
.admin .text-warning { color: var(--jn-warning) !important; }
.admin .text-info    { color: var(--jn-info) !important; }
.admin .text-primary { color: var(--jn-sage-lt) !important; }

/* ── MENU SETUP (CONFIGURATION) ───────────────────────────────────── */

.admin #setup-menu-wrapper {
  background: var(--jn-sidebar) !important;
  border-left: 1px solid var(--jn-border) !important;
}

.admin #setup-menu-wrapper .customizer-heading {
  color: var(--jn-cream) !important;
  font-family: var(--jn-font-head) !important;
}

.admin #setup-menu-wrapper .close-customizer { color: var(--jn-muted) !important; transition: var(--jn-tr) !important; }
.admin #setup-menu-wrapper .close-customizer:hover { color: var(--jn-cream) !important; }

.admin #setup-menu > li > a {
  color: var(--jn-cream-muted) !important;
  border-radius: 8px !important;
  font-size: .79rem !important;
  padding: 8px 13px !important;
  transition: var(--jn-tr) !important;
  border-left: 2px solid transparent !important;
}

.admin #setup-menu > li > a:hover  { background: rgba(201,169,110,.07) !important; color: var(--jn-cream) !important; }
.admin #setup-menu > li.active > a { background: rgba(201,169,110,.1) !important; color: var(--jn-gold) !important; border-left-color: var(--jn-gold) !important; }

/* ── PAGE DE CONNEXION ────────────────────────────────────────────── */

body.login_admin {
  background: var(--jn-bg) !important;
  font-family: var(--jn-font-body) !important;
}

body.login_admin .panel {
  background: var(--jn-surface) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: var(--jn-radius-lg) !important;
  box-shadow: var(--jn-shadow-lg) !important;
}

body.login_admin .panel-heading   { background: transparent !important; border-bottom: 1px solid var(--jn-border) !important; }
body.login_admin .form-control    { background: var(--jn-elevated) !important; border-color: var(--jn-border) !important; color: var(--jn-elevated-fg) !important; }
body.login_admin .form-control:focus { border-color: var(--jn-gold) !important; box-shadow: 0 0 0 3px rgba(201,169,110,.1) !important; }
body.login_admin label { color: var(--jn-cream-muted) !important; }
body.login_admin h3, body.login_admin h4 { color: var(--jn-cream) !important; font-family: var(--jn-font-head) !important; }

/* ── ANIMATIONS ───────────────────────────────────────────────────── */

@keyframes jn-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes jn-modal-in {
  from { opacity: 0; transform: scale(.97) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes jn-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Entrée des panneaux */
.admin .panel,
.admin .panel_s {
  animation: jn-fade-up .22s cubic-bezier(.4,0,.2,1) both !important;
}

/* Entrée des modales */
.admin .modal.in .modal-content {
  animation: jn-modal-in .2s cubic-bezier(.34,1.56,.64,1) both !important;
}

/* backdrop-filter header retiré : causait des problèmes de z-index sur les modals Bootstrap */

.admin #header {
  background: var(--jn-header) !important;
}

/* ── SIDEBAR AMÉLIORÉ ─────────────────────────────────────────────── */

.admin #side-menu > li > a {
  transition: all .15s cubic-bezier(.4,0,.2,1) !important;
}

.admin #side-menu > li.active > a {
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.10), 0 2px 8px rgba(0,0,0,.22) !important;
}

/* ── BOUTONS AVEC RIPPLE ──────────────────────────────────────────── */

.admin .btn {
  position: relative !important;
  overflow: hidden !important;
}

.admin .btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(255,255,255,.14) 0%, transparent 65%) !important;
  opacity: 0 !important;
  transform: scale(.7) !important;
  transition: opacity .18s, transform .22s !important;
  pointer-events: none !important;
}

.admin .btn:active::before {
  opacity: 1 !important;
  transform: scale(1.4) !important;
}

/* ── FOCUS ACCESSIBLE ─────────────────────────────────────────────── */

.admin *:focus-visible {
  outline: 2px solid var(--jn-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(201,169,110,.12) !important;
}

.admin *:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── BLOCS DE CODE ────────────────────────────────────────────────── */

.admin code {
  background: rgba(0,0,0,.22) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: 5px !important;
  color: var(--jn-sage-lt) !important;
  font-size: .80rem !important;
  padding: 1px 6px !important;
}

.admin pre {
  background: rgba(0,0,0,.22) !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: var(--jn-radius) !important;
  color: var(--jn-sage-lt) !important;
  padding: 14px 16px !important;
}

/* ── PAGE DE CONNEXION AMÉLIORÉE ──────────────────────────────────── */

body.login_admin {
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(106,158,121,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 60%, rgba(201,169,110,.07) 0%, transparent 55%) !important;
  min-height: 100vh !important;
}

body.login_admin .panel {
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(201,169,110,.06) !important;
  animation: jn-fade-up .3s cubic-bezier(.4,0,.2,1) both !important;
  overflow: hidden !important;
}

body.login_admin .panel-heading {
  padding: 30px 28px 20px !important;
}

body.login_admin .panel-body {
  padding: 24px 28px !important;
}

/* ── TRANSITION RANGÉES TABLEAU ───────────────────────────────────── */

.admin .table > tbody > tr {
  transition: background .1s ease !important;
}

/* ── ICÔNES TRI DATATABLES ────────────────────────────────────────── */

.admin table.dataTable thead .sorting::before,
.admin table.dataTable thead .sorting::after {
  opacity: .3 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER & SIDEBAR — MODERNISATION AVANCÉE v1.2
   ═══════════════════════════════════════════════════════════════════ */

/* ── HEADER : LIGNE SIGNATURE + OMBRE ────────────────────────────── */

.admin #header {
  border-top: 2px solid rgba(201,169,110,.40) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(201,169,110,.06),
    0 4px 28px rgba(0,0,0,.40) !important;
}

/* ── HEADER : SEARCH EN PILL FROSTED ─────────────────────────────── */

.admin #header .form-control,
.admin #header input[type="text"] {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(201,169,110,.14) !important;
  border-radius: 22px !important;
  color: var(--jn-cream) !important;
  padding: 6px 16px !important;
  height: auto !important;
  transition: all .22s ease !important;
}

.admin #header .form-control::placeholder { color: var(--jn-muted) !important; }

.admin #header .form-control:focus,
.admin #header input[type="text"]:focus {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(201,169,110,.38) !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,.08), 0 0 16px rgba(201,169,110,.06) !important;
  outline: none !important;
}

/* ── HEADER : BOUTON HAMBURGER ────────────────────────────────────── */

.admin button.hide-menu {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease !important;
  color: var(--jn-muted) !important;
}

.admin button.hide-menu:hover {
  background: rgba(201,169,110,.08) !important;
  border-color: rgba(201,169,110,.14) !important;
  color: var(--jn-gold) !important;
}

/* ── HEADER : LIENS NAV ───────────────────────────────────────────── */

.admin #header .navbar-nav > li > a {
  border-radius: 8px !important;
  margin: 2px !important;
  transition: all .15s ease !important;
}

/* ── SIDEBAR : PROFIL UTILISATEUR AMÉLIORÉ ───────────────────────── */

.admin .profile-sidebar {
  padding: 20px 16px 14px !important;
  background: linear-gradient(160deg, rgba(201,169,110,.06) 0%, transparent 70%) !important;
  border-bottom: 1px solid var(--jn-border) !important;
}

.admin .profile-userpic img {
  border: 2px solid var(--jn-border-md) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px rgba(201,169,110,.07) !important;
  transition: all .2s ease !important;
}

.admin .profile-sidebar:hover .profile-userpic img {
  border-color: rgba(201,169,110,.44) !important;
  box-shadow: 0 0 0 4px rgba(201,169,110,.13) !important;
}

.admin .sidebar .profile-usertitle-name {
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.admin .profile-usermenu {
  border-top: 1px solid var(--jn-border) !important;
  background: linear-gradient(to bottom, rgba(201,169,110,.03) 0%, transparent 50%) !important;
}

/* ── SIDEBAR : MOTIF BOTANIQUE ENRICHI + FONDU ───────────────────── */

.admin .sidebar {
  background-color: var(--jn-sidebar) !important;
  background-image:
    linear-gradient(to top, var(--jn-sidebar) 0%, rgba(6,13,8,0) 230px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200' viewBox='0 0 220 200'%3E%3Cpath d='M110 200 Q112 168 110 140 Q132 154 136 136 Q110 142 110 140 Q88 154 84 136 Q108 142 110 140' stroke='%23C9A96E' stroke-width='1.0' fill='none' opacity='0.30'/%3E%3Cpath d='M110 140 Q113 114 110 92 Q126 103 128 90 Q110 96 110 92 Q94 103 92 90 Q108 96 110 92' stroke='%23C9A96E' stroke-width='0.8' fill='none' opacity='0.20'/%3E%3Cpath d='M110 92 Q112 76 110 62 Q119 70 121 62 Q110 65 110 62' stroke='%23C9A96E' stroke-width='0.6' fill='none' opacity='0.12'/%3E%3Cpath d='M38 200 Q40 174 38 152 Q54 162 56 148 Q38 154 38 152 Q22 162 20 148 Q36 154 38 152' stroke='%236A9E79' stroke-width='0.7' fill='none' opacity='0.20'/%3E%3Cpath d='M38 152 Q40 133 38 117 Q50 126 52 114 Q38 119 38 117 Q26 126 24 114 Q36 119 38 117' stroke='%236A9E79' stroke-width='0.55' fill='none' opacity='0.13'/%3E%3Cpath d='M182 200 Q184 176 182 156 Q196 166 198 152 Q182 158 182 156 Q168 166 166 152 Q180 158 182 156' stroke='%236A9E79' stroke-width='0.7' fill='none' opacity='0.20'/%3E%3Cpath d='M182 156 Q184 139 182 124 Q190 132 192 122 Q182 126 182 124' stroke='%236A9E79' stroke-width='0.55' fill='none' opacity='0.13'/%3E%3Ccircle cx='140' cy='115' r='1.5' fill='%23C9A96E' opacity='0.13'/%3E%3Ccircle cx='80' cy='105' r='1.2' fill='%23C9A96E' opacity='0.10'/%3E%3Ccircle cx='158' cy='142' r='1.0' fill='%236A9E79' opacity='0.13'/%3E%3Ccircle cx='62' cy='136' r='1.0' fill='%236A9E79' opacity='0.10'/%3E%3Ccircle cx='108' cy='55' r='1.0' fill='%23C9A96E' opacity='0.08'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: bottom left, bottom center !important;
  background-size: 100% 230px, auto 200px !important;
  border-right: 1px solid var(--jn-border) !important;
}

/* ── SIDEBAR : NAVIGATION ─────────────────────────────────────────── */

.admin #side-menu { padding: 8px 12px !important; }

/* Micro-animation icônes au hover */
.admin #side-menu > li > a i.menu-icon {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .15s ease !important;
}

.admin #side-menu > li > a:hover i.menu-icon {
  transform: translateX(2px) scale(1.1) !important;
  color: var(--jn-sage-lt) !important;
}

/* ── SIDEBAR : ITEM ACTIF — GRADIENT HORIZONTAL + GLOW ───────────── */

.admin #side-menu > li.active > a,
.admin #side-menu > li.active > a:hover {
  background: linear-gradient(90deg,
    rgba(201,169,110,.18) 0%,
    rgba(201,169,110,.07) 55%,
    rgba(201,169,110,.01) 100%) !important;
  border-left: 2px solid var(--jn-gold) !important;
  border-left-color: var(--jn-gold) !important;
  color: var(--jn-gold) !important;
  padding-left: 11px !important;
  box-shadow:
    -2px 0 16px rgba(201,169,110,.16),
    inset 0 0 0 1px rgba(201,169,110,.07) !important;
}

.admin #side-menu > li.active > a i.menu-icon {
  color: var(--jn-gold) !important;
  transform: translateX(1px) !important;
}

/* ── SIDEBAR : SOUS-MENUS AVEC CONNECTEURS ───────────────────────── */

.admin #side-menu .nav-second-level {
  position: relative !important;
  background: rgba(0,0,0,.13) !important;
  border-radius: 8px !important;
  margin: 2px 4px 6px !important;
  padding: 4px 0 !important;
}

/* Ligne connecteur verticale */
.admin #side-menu .nav-second-level::before {
  content: '' !important;
  position: absolute !important;
  left: 16px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 1px !important;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--jn-border) 25%,
    var(--jn-border) 75%,
    transparent 100%) !important;
  pointer-events: none !important;
}

/* Items avec dot indicateur */
.admin #side-menu .nav-second-level > li > a {
  position: relative !important;
  color: var(--jn-muted) !important;
  font-size: .77rem !important;
  padding: 7px 12px 7px 36px !important;
  border-radius: 6px !important;
  border-left: 2px solid transparent !important;
  transition: all .15s ease !important;
}

.admin #side-menu .nav-second-level > li > a::before {
  content: '' !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--jn-muted) !important;
  background: transparent !important;
  transition: all .15s ease !important;
}

.admin #side-menu .nav-second-level > li > a:hover {
  color: var(--jn-cream-muted) !important;
  background: rgba(201,169,110,.05) !important;
}

.admin #side-menu .nav-second-level > li > a:hover::before {
  border-color: var(--jn-sage-lt) !important;
  background: rgba(106,158,121,.28) !important;
  transform: translateY(-50%) scale(1.25) !important;
}

.admin #side-menu .nav-second-level > li.active > a {
  color: var(--jn-gold) !important;
  border-left-color: var(--jn-gold) !important;
}

.admin #side-menu .nav-second-level > li.active > a::before {
  border-color: var(--jn-gold) !important;
  background: rgba(201,169,110,.32) !important;
}

/* ── IMPRESSION ───────────────────────────────────────────────────── */

@media print {
  :root {
    --jn-bg:         #fff;
    --jn-surface:    #fff;
    --jn-elevated:   #f0f4f1;
    --jn-elevated-hi:#e8efe9;
    --jn-cream:      #1A1A14;   /* texte sombre sur fond blanc */
    --jn-cream-muted:#3D4A3E;
    --jn-muted:      #556655;
    --jn-border:     #ddd;
    --jn-border-md:  #ccc;
    --jn-sidebar:    #fff;
    --jn-header:     #fff;
    --jn-gold:       #8a6d3b;
    --jn-sage:       #3d6b4a;
    --jn-sage-lt:    #3d6b4a;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MODERNISATION v2 — Finitions ultra-modernes
   ═══════════════════════════════════════════════════════════════════ */

/* ── TYPOGRAPHIE — TITRES DE SECTION ─────────────────────────────── */

.admin .panel-heading h3,
.admin .panel-heading h4 {
  color: var(--jn-cream) !important;
  font-size: 1.05rem !important;
  letter-spacing: .03em !important;
}

/* ── PANEL HEADING — PADDDING & AFFORDANCE ───────────────────────── */

.admin .panel-heading {
  padding: 14px 20px !important;
}

/* ── TAGSINPUT — AVEC ELEVATED MIS À JOUR ────────────────────────── */

.admin .tagit {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
}

/* ── DATATABLES FILTER/LENGTH INPUTS ─────────────────────────────── */

.admin .dataTables_filter input,
.admin .dataTables_length select {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: 8px !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.admin .dataTables_filter input:focus,
.admin .dataTables_length select:focus {
  border-color: rgba(201,169,110,.45) !important;
  box-shadow: var(--jn-glow-gold) !important;
  outline: none !important;
}

/* ── TABLEAUX — ROW HOVER AMÉLIORÉ ──────────────────────────────── */

.admin .table > tbody > tr:hover > td {
  background: rgba(201,169,110,.14) !important;
  color: var(--jn-elevated-fg) !important;
}

/* ── WELL — AVEC ELEVATED MIS À JOUR ─────────────────────────────── */

.admin .well {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-top-color: rgba(255,255,255,.05) !important;
}

/* ── BOUTONS — HOVER PLUS PRÉCIS ─────────────────────────────────── */

.admin .btn-primary:hover,
.admin .btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(106,158,121,.30) !important;
}

.admin .btn-success:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(78,154,106,.26) !important;
}

.admin .btn-default:active {
  transform: translateY(0) !important;
  background: rgba(201,169,110,.13) !important;
}

/* ── PAGINATION — ELEVATED MIS À JOUR ────────────────────────────── */

.admin .pagination > li > a,
.admin .pagination > li > span {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
}

/* ── FOCUS VISIBLE — GOLD RING AMÉLIORÉ ─────────────────────────── */

.admin *:focus-visible {
  outline: 2px solid rgba(201,169,110,.70) !important;
  outline-offset: 3px !important;
  box-shadow: var(--jn-glow-gold) !important;
}

/* backdrop-filter retiré : crée un containing block qui piège les modals */

/* ── MODAL CONTENT — LISERÉ SUPÉRIEUR ────────────────────────────── */

.admin .modal-content {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* ── ALERT — COINS ARRONDIS UNIFORMES ────────────────────────────── */

.admin .alert {
  border-radius: var(--jn-radius) !important;
}

/* ── LIST GROUP — HOVER AVEC ELEVATED-HI ────────────────────────── */

.admin .list-group-item:hover { background: var(--jn-elevated-hi) !important; color: var(--jn-elevated-fg) !important; }

/* ── POPOVER — ELEVATED MIS À JOUR ───────────────────────────────── */

.admin .popover {
  background: var(--jn-elevated) !important;
  border-top-color: rgba(255,255,255,.06) !important;
}

/* ── TOOLTIP — ELEVATED MIS À JOUR ──────────────────────────────── */

.admin .tooltip-inner { background: var(--jn-elevated) !important; }

/* ── ANIMATIONS SUPPLÉMENTAIRES ───────────────────────────────────── */

@keyframes jn-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,.28); }
  70%  { box-shadow: 0 0 0 8px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}

@keyframes jn-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin .dropdown-menu.open,
.admin .dropdown.open > .dropdown-menu {
  animation: jn-slide-down .15s cubic-bezier(.4,0,.2,1) both !important;
}

/* ── PAGE CONTENU — GRILLE ARRIÈRE-PLAN SUBTILE ─────────────────── */

.admin #page-content {
  background-image: radial-gradient(
    circle at 80% 10%,
    rgba(106,158,121,.04) 0%,
    transparent 50%
  ), radial-gradient(
    circle at 20% 90%,
    rgba(201,169,110,.03) 0%,
    transparent 40%
  ) !important;
}

/* ── TRANSITIONS PANEL — DURÉE AJUSTÉE ───────────────────────────── */

.admin .panel,
.admin .panel_s {
  animation: jn-fade-up .20s cubic-bezier(.4,0,.2,1) both !important;
  transition: box-shadow .22s ease !important;
}

.admin .panel:hover {
  box-shadow:
    0 1px 2px rgba(0,0,0,.50),
    0 8px 28px rgba(0,0,0,.36),
    0 0 0 1px rgba(201,169,110,.06),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* ── FILET DE SÉCURITÉ — ÉLÉMENTS BOOTSTRAP NON-THÉMÉS ──────────── */
/* Empêche cream text (#DDD0B0) d'être invisible sur fond blanc      */

.admin .nav-pills > li > a,
.admin .nav-pills > li.active > a { color: var(--jn-cream-muted) !important; }
.admin .nav-pills > li.active > a {
  background: rgba(201,169,110,.12) !important;
  color: var(--jn-gold) !important;
}

/* États de validation formulaire */
.admin .has-error .form-control { border-color: var(--jn-danger) !important; }
.admin .has-error .control-label,
.admin .has-error .help-block   { color: var(--jn-danger) !important; }
.admin .has-success .form-control { border-color: var(--jn-success) !important; }
.admin .has-success .control-label { color: var(--jn-success) !important; }
.admin .has-warning .form-control { border-color: var(--jn-warning) !important; }
.admin .has-warning .control-label { color: var(--jn-warning) !important; }

/* Panels colorés (primary/success/danger/warning/info) */
.admin .panel-primary,
.admin .panel-success,
.admin .panel-danger,
.admin .panel-warning,
.admin .panel-info {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border-md) !important;
}

.admin .panel-primary > .panel-heading,
.admin .panel-success > .panel-heading,
.admin .panel-danger  > .panel-heading,
.admin .panel-warning > .panel-heading,
.admin .panel-info    > .panel-heading {
  background: transparent !important;
  color: var(--jn-cream) !important;
}

/* Cards de compte / dashboard Perfex */
.admin .widget-stat-line { background: var(--jn-surface) !important; }
.admin .widget-stat-line .widget-stat-value { color: var(--jn-cream) !important; }
.admin .widget-stat-line .widget-stat-text  { color: var(--jn-cream-muted) !important; }

/* Tableaux dans les panels — padding latéral cohérent */
.admin .panel > .table-responsive { border: none !important; }

/* Input number — caret navigateur */
.admin input[type="number"] {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  border-radius: 9px !important;
  color: var(--jn-elevated-fg) !important;
  padding: 8px 14px !important;
}

/* Cohérence des select natifs */
.admin select.form-control option {
  background: var(--jn-elevated) !important;
  color: var(--jn-elevated-fg) !important;
}

/* ── HIÉRARCHIE TEXTE — RÉSUMÉ DE COHÉRENCE ─────────────────────── */
/*
  --jn-cream        #DDD0B0  : texte principal  — warm amber, lisible sur tout fond sombre
  --jn-cream-muted  #8FAF9A  : texte secondaire — sauge clair, distinction claire
  --jn-muted        #6A8A76  : texte tertiaire  — sauge moyen, discret mais lisible
*/


/* ═══════════════════════════════════════════════════════════════════
   DARK OVERRIDES — Éléments Perfex / plugins avec fond blanc
   ═══════════════════════════════════════════════════════════════════ */

/* ── ÉLÉMENTS PERFEX GÉNÉRIQUES AVEC FOND BLANC ─────────────────── */

.admin footer {
  background: var(--jn-bg) !important;
  border-top: 1px solid var(--jn-border) !important;
  color: var(--jn-muted) !important;
}

.admin .bgwhite {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-cream) !important;
}

/* Preview en-tête collant (devis / facture view) */
.admin .preview-sticky-header {
  background: var(--jn-surface) !important;
  border-bottom: 1px solid var(--jn-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.45) !important;
}

/* Section commentaires de tâche */
.admin #task-comments {
  background: var(--jn-bg) !important;
  border-top: 1px solid var(--jn-border) !important;
  color: var(--jn-cream) !important;
}

/* Tâches Kanban */
.admin .tasks-phases .panel-body {
  background: var(--jn-bg) !important;
}

.admin .tasks-phases ._task_wrapper {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-cream) !important;
  box-shadow: var(--jn-shadow) !important;
}

.admin .tasks-phases ._task_wrapper:hover {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
  color: var(--jn-elevated-fg) !important;
}

/* Dropzone upload */
.admin form.dropzone,
.admin .dropzone {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
  color: var(--jn-elevated-fg2) !important;
}

.admin .dropzone .dz-message { color: var(--jn-sage-lt) !important; }

/* Activity feed — le dot de timeline */
.admin .activity-feed .feed-item::after {
  background: var(--jn-surface) !important;
  border-color: var(--jn-gold) !important;
}

/* GDPR / consentements */
.admin .gdpr-right {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-cream) !important;
}

/* Knowledge base search bar */
.admin .kb-search-jumbotron {
  background: var(--jn-surface) !important;
}

/* Boutons fixed toplink/botlink */
.admin #toplink, .admin #botlink {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
  color: var(--jn-elevated-fg2) !important;
}

.admin #toplink:hover, .admin #botlink:hover {
  background: rgba(201,169,110,.22) !important;
  color: var(--jn-elevated-fg) !important;
}

/* Newsfeed */
.admin #newsfeed .newsfeed_post .user-post-like {
  background: var(--jn-surface) !important;
  border-color: var(--jn-border) !important;
}

/* Tickets list-status */
.admin .list-status a.active { background: var(--jn-elevated) !important; }

/* Table items (devis/factures) — en-tête qui a un fond clair hardcodé */
.admin .table.items thead {
  background: rgba(0,0,0,.06) !important;
  color: var(--jn-elevated-fg3) !important;
}

/* ── DATETIMEPICKER (xdsoft) ─────────────────────────────────────── */

.xdsoft_datetimepicker {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
  color: var(--jn-elevated-fg) !important;
}

/* Cellules calendrier */
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-elevated-fg2) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
  background: rgba(0,0,0,.06) !important;
  color: var(--jn-elevated-fg3) !important;
  font-weight: 700 !important;
}

/* Hover cellule */
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: rgba(201,169,110,.22) !important;
  color: var(--jn-elevated-fg) !important;
  box-shadow: none !important;
}

/* Aujourd'hui */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  color: var(--jn-sage) !important;
  font-weight: 700 !important;
}

/* Date sélectionnée */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--jn-gold) !important;
  box-shadow: none !important;
  color: #09160D !important;
  font-weight: 700 !important;
}

/* Label mois/année */
.xdsoft_datetimepicker .xdsoft_label {
  background: var(--jn-elevated) !important;
  color: var(--jn-elevated-fg) !important;
}

/* Dropdown mois/année */
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
  color: var(--jn-elevated-fg2) !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
  background: rgba(201,169,110,.22) !important;
  color: var(--jn-elevated-fg) !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
  background: var(--jn-gold) !important;
  color: #09160D !important;
  box-shadow: none !important;
}

/* Timepicker */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-elevated-fg2) !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  border-color: var(--jn-border) !important;
}

/* Scrollbar interne */
.xdsoft_scrollbar > .xdsoft_scroller {
  background: rgba(201,169,110,.25) !important;
}

/* Jours autres mois */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
  opacity: .35 !important;
}

/* ── JQUERY UI DATEPICKER ────────────────────────────────────────── */

.admin .ui-datepicker {
  background: var(--jn-elevated) !important;
  border: 1px solid var(--jn-border-md) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
  color: var(--jn-elevated-fg) !important;
  border-radius: var(--jn-radius-lg) !important;
}

.admin .ui-datepicker .ui-datepicker-header {
  background: rgba(0,0,0,.06) !important;
  border-color: var(--jn-border) !important;
  color: var(--jn-elevated-fg) !important;
  border-radius: var(--jn-radius) var(--jn-radius) 0 0 !important;
}

.admin .ui-datepicker td a,
.admin .ui-datepicker td span {
  background: transparent !important;
  color: var(--jn-elevated-fg2) !important;
  border: none !important;
}

.admin .ui-datepicker td:hover a { color: var(--jn-gold) !important; }

.admin .ui-datepicker .ui-state-active,
.admin .ui-datepicker .ui-state-highlight {
  background: var(--jn-gold) !important;
  color: #09160D !important;
  border-radius: 5px !important;
}

.admin .ui-datepicker .ui-datepicker-prev,
.admin .ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  border: none !important;
  color: var(--jn-elevated-fg3) !important;
}

.admin .ui-datepicker-prev:hover,
.admin .ui-datepicker-next:hover { color: var(--jn-elevated-fg) !important; }

/* ── COLORPICKER BOOTSTRAP ───────────────────────────────────────── */

.admin .colorpicker {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border-md) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.50) !important;
}

.admin .colorpicker-alpha,
.admin .colorpicker .colorpicker-bar { border-color: var(--jn-border) !important; }

/* ── TINYMCE ─────────────────────────────────────────────────────── */

.admin .mce-panel,
.admin .mce-toolbar,
.admin .mce-menubar,
.admin .mce-statusbar {
  background: var(--jn-elevated) !important;
  border-color: var(--jn-border) !important;
}

.admin .mce-btn button,
.admin .mce-ico { color: var(--jn-elevated-fg2) !important; }
.admin .mce-btn:hover { background: rgba(201,169,110,.1) !important; }

/* ── MOBILE NAVBAR ───────────────────────────────────────────────── */

.admin .mobile-navbar {
  background: var(--jn-header) !important;
  border-bottom: 1px solid var(--jn-border) !important;
}

.admin .mobile-navbar .navbar-nav > li > a {
  color: var(--jn-cream-muted) !important;
  border-bottom-color: var(--jn-border) !important;
}

/* ── ELEMENTS GÉNÉRIQUES À FOND CLAIR NON COUVERTS ───────────────── */
/* Filet de sécurité large : overrides les background blancs résiduels */

.admin [class*="panel-body"] > .row > [class*="col-"],
.admin .tab-content > .tab-pane { color: var(--jn-cream) !important; }

/* Texte générique dans les zones non-thémées */
.admin .text-default { color: var(--jn-cream) !important; }
.admin .bg-white, .admin .bg-light { background: var(--jn-surface) !important; }

/* ═══════════════════════════════════════════════════════════════════
   ELEVATED LIGHT — Redéfinition des variables cream dans la portée
   des conteneurs à fond clair. Les CSS custom properties cascadent,
   ce qui force automatiquement les règles `color: var(--jn-cream)`
   des enfants (p, strong, h*, small…) à utiliser les teintes sombres.
   ═══════════════════════════════════════════════════════════════════ */

.admin .well,
.admin .popover,
.admin .tooltip-inner,
.admin .dropdown-menu,
.admin .bootstrap-select.open,
.admin .tagit,
.admin .ui-datepicker,
.xdsoft_datetimepicker {
  --jn-cream:       var(--jn-elevated-fg);
  --jn-cream-muted: var(--jn-elevated-fg2);
  --jn-muted:       var(--jn-elevated-fg3);
  --jn-sage-lt:     var(--jn-elevated-fg2);
}