/* ============================================================================
   style-v2.css — Surcouche pour reproduction fidèle des captures Hercules
   À charger APRÈS style.css. Surcharge certains composants.
   Couleurs verrouillées :
   - Sidebar        : #01030a
   - Page (hors sidebar) : #02060d
   - Modales + panneau détail : #08101a
   - Boutons bleus  : #3e79ff
   - Catégorie active : #051223
   ============================================================================ */

:root {
  --bg-sidebar: #01030a;
  --bg-page: #02060d;
  --bg-modal: #08101a;
  --btn-blue: #3e79ff;
  --btn-blue-hover: #2b6bed;
  --cat-active-bg: #051223;
}

/* Fond de la page (hors sidebar) */
body, .main-content {
  background: var(--bg-page);
}

/* ---------------------------------------------------------------------------
   SIDEBAR — fond #01030a
   --------------------------------------------------------------------------- */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid #0a1424;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Force la sidebar à push l'user card tout en bas */
.sidebar > * { flex-shrink: 0; }
.sidebar-user {
  margin-top: auto !important;
}

/* Boutons d'action en haut de sidebar — bleu #3e79ff */
.sidebar-action-btn.btn-primary {
  background: var(--btn-blue);
  margin-bottom: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  justify-content: flex-start;
}
.sidebar-action-btn.btn-primary:hover {
  background: var(--btn-blue-hover);
}
.sidebar-action-btn.btn-secondary-dark {
  margin-bottom: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  justify-content: flex-start;
}
.sidebar-action-btn svg { flex-shrink: 0; }

.btn-secondary-dark {
  background: #1F2937;
  color: #fff;
  border: 1px solid #374151;
}
.btn-secondary-dark:hover {
  background: #374151;
  border-color: #4B5563;
}

/* Items de menu — icônes GRIS par défaut, colorées UNIQUEMENT si classe .active */
.sidebar-item .icon {
  color: #6B7280 !important;  /* gris par défaut, même pour les catégories */
}
.sidebar-item:hover .icon {
  color: #9CA3AF;
}
.sidebar-item.active .icon {
  color: var(--text-primary);  /* blanc si actif */
}
/* Couleur spécifique seulement si l'item est ACTIF */
.sidebar-item.emploi.active .icon { color: var(--primary) !important; }
.sidebar-item.freelance.active .icon { color: var(--success) !important; }
.sidebar-item.b2b.active .icon { color: var(--warning) !important; }
.sidebar-item.individu.active .icon { color: var(--purple) !important; }

/* Catégorie active — fond #051223 */
.sidebar-item.active {
  background: var(--cat-active-bg) !important;
  color: var(--text-primary);
}

/* Compteurs — gris par défaut, BLEU si l'item est actif */
.sidebar-item .count {
  background: #1F2937;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.sidebar-item.active .count {
  background: var(--btn-blue);
  color: #fff;
}

/* Titre section "CATÉGORIES" — gris plus foncé */
.sidebar-section-title {
  color: #4B5563 !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* User card — fond sobre */
.sidebar-user .user-name {
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
}

/* Toggle "Mes offres / Tout le monde" — admin only */
.sidebar-view-toggle {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid #0a1424;
}
.view-toggle-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4B5563;
  margin-bottom: 6px;
  padding-left: 4px;
}
.view-toggle-buttons {
  display: flex;
  gap: 4px;
  background: #0a0f1a;
  border-radius: 10px;
  padding: 3px;
}
.view-toggle-btn {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.view-toggle-btn:hover {
  color: #9CA3AF;
}
.view-toggle-btn.active {
  background: var(--btn-blue);
  color: #fff;
}

/* Badge initiales du propriétaire sur les items de liste */
.owner-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #1E3A5F;
  color: #7ba6ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 1;
}
/* Position relative sur list-item pour le badge absolu */
.list-item {
  position: relative;
}
/* Quand le owner-badge est présent, on décale le contenu vers la droite */
.list-item:has(.owner-badge) .list-item-main {
  padding-left: 24px;
}

/* ---------------------------------------------------------------------------
   ZONE CENTRALE — compteur X/10 aujourd'hui + état vide fidèle
   --------------------------------------------------------------------------- */
.page-counter {
  font-size: 14px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.counter-today {
  font-weight: 600;
  color: var(--text-primary);
}
.counter-label {
  color: #6B7280;
}

/* Filtres — style compact, pas de drapeaux */
.list-filters {
  padding: 4px 0 12px 0;
  gap: 6px;
}
.filter-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid #374151 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #9CA3AF !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-btn:hover {
  color: #fff !important;
  border-color: #4B5563 !important;
}
.filter-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.filter-select {
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* État vide — icône dossier au centre + bouton bleu */
.empty-state {
  padding: 60px 24px;
  text-align: center;
}
.empty-state .empty-folder {
  color: var(--primary);
  opacity: 0.7;
}
.empty-state .title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 6px;
}
.empty-state .desc {
  font-size: 14px;
  color: #9CA3AF;
  max-width: 380px;
  margin: 0 auto 20px;
}

/* ---------------------------------------------------------------------------
   ITEMS DE LISTE — structure titre + source + badges + date relative
   --------------------------------------------------------------------------- */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
}
.list-item-main {
  flex: 1;
  min-width: 0;
}
.list-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-source {
  font-size: 13px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.list-item-date {
  font-size: 12px;
  color: #6B7280;
}

/* Badge "Nouveau" bleu */
.badge-new {
  background: var(--primary);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Badges pays — fond gris, texte blanc */
.badge-pays-TN,
.badge-pays-FR,
.badge-pays-CA {
  background: #2D3748;
  color: #fff;
  border: 1px solid #374151;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Badge mot-clé */
.badge-keyword {
  background: rgba(59,130,246,0.15);
  color: var(--primary-light);
  border: 1px solid rgba(59,130,246,0.3);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  margin: 2px 4px 2px 0;
}

/* ---------------------------------------------------------------------------
   PANNEAU DÉTAIL — fond #08101a (comme modales)
   --------------------------------------------------------------------------- */
.detail-column {
  background: var(--bg-modal);
  border: 1px solid #1E3A5F;
  border-radius: 8px;
  padding: 0;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}

.detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid #1E3A5F;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.detail-source {
  font-size: 13px;
  color: #9CA3AF;
}
.detail-source a {
  color: var(--primary);
  text-decoration: none;
}
.detail-source a:hover {
  text-decoration: underline;
}

.detail-section {
  border-bottom: 1px solid #1E1E1E;
}
.detail-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6B7280;
  padding: 14px 20px 6px 20px;
}
.detail-section-body {
  padding: 0 20px 14px 20px;
}

.detail-row {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px solid rgba(30,30,30,0.5);
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-label {
  width: 140px;
  color: #6B7280;
  font-size: 13px;
  flex-shrink: 0;
}
.detail-value {
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
  word-break: break-word;
}
.detail-value.muted {
  color: #4B5563;
}

.detail-description {
  color: #D1D5DB;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-actions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Bouton success vert */
.btn-success {
  background: var(--success);
  color: #fff;
  border: none;
}
.btn-success:hover {
  background: #059669;
}

/* Bouton danger-ghost */
.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.3);
}
.btn-danger-ghost:hover {
  background: rgba(239,68,68,0.1);
  border-color: var(--danger);
}

/* Form de note dans section ACTIVITÉ */
.note-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.note-form textarea {
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 40px;
}
.note-form textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.note-form button {
  align-self: flex-start;
}

/* Historique des actions */
.history-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(30,30,30,0.5);
}
.history-item:last-child {
  border-bottom: none;
}
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.history-date {
  font-size: 11px;
  color: #6B7280;
}
.history-content {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 2px;
}
.history-result {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
}

/* État vide du panneau détail */
.detail-empty {
  padding: 80px 24px;
  text-align: center;
  color: #4B5563;
}
.detail-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  opacity: 0.5;
}
.detail-empty p {
  font-size: 13px;
}

/* Spinner centré */
.detail-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* ---------------------------------------------------------------------------
   MODALES — fond #08101a
   --------------------------------------------------------------------------- */
.modal-overlay {
  background: rgba(0,0,0,0.8);
}
.modal {
  background: var(--bg-modal);
  border: 1px solid #1E3A5F;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #1E3A5F;
}
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #1E3A5F;
}
.modal-intro {
  font-size: 14px;
  color: #9CA3AF;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Sections de la modale "Lancer une recherche" */
.search-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
  border-radius: 8px;
}
.search-section:last-child { margin-bottom: 0; }
.search-section-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.search-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-section-icon.primary {
  background: rgba(59,130,246,0.15);
  color: var(--primary);
}
.search-section-icon.warning {
  background: rgba(245,158,11,0.15);
  color: var(--warning);
}
.search-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.search-section-desc {
  font-size: 12px;
  color: #9CA3AF;
}

/* Grille cartes "nouvelle fiche" */
.new-fiche-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.new-fiche-card {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: all 0.15s ease;
}
.new-fiche-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  text-decoration: none;
}
.new-fiche-card .card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Bouton icône pour fermer */
.modal-close {
  background: transparent;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.modal-close:hover {
  background: #1F2937;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   DASHBOARD — stat cards plus sobres
   --------------------------------------------------------------------------- */
.stat-card {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
}
.chart-container {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
}

/* ---------------------------------------------------------------------------
   LISTE — fond cohérent, items plus denses
   --------------------------------------------------------------------------- */
#list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-item {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
}
.list-item:hover {
  border-color: var(--primary);
}
.list-item.active {
  border-color: var(--primary);
  background: rgba(59,130,246,0.05);
}

/* ---------------------------------------------------------------------------
   LAYOUT 3 COLONNES — utilisation de FLEXBOX pour robustesse
   main-content = flex row : (header+liste) | trait | détail
   Le détail commence tout en haut (même niveau que le titre).
   --------------------------------------------------------------------------- */

.main-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100vh;
  overflow: hidden;
}

/* Colonne gauche : header (titre+ sous-titre) + liste des offres — 300px fixe */
.main-left {
  flex: 0 0 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Trait vertical séparateur */
.detail-divider {
  flex: 0 0 1px;
  background: #1E3A5F;
  align-self: stretch;
}

/* Colonne droite : panneau détail (commence tout en haut, fond #02060d) */
.detail-column {
  flex: 1 1 auto;
  min-width: 0;
  background: #02060d;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow-y: auto;
  height: 100vh;
  max-height: 100vh;
}

/* Header de page (titre à gauche + compteur à DROITE, séparés visuellement) — compact */
.page-header {
  border-bottom: none;
  padding: 16px 16px 8px 16px;
  flex-shrink: 0;
}
.page-header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-title {
  font-size: 17px !important;
  font-weight: 700;
}
.page-subtitle {
  font-size: 11px !important;
  margin-top: 2px;
}
.page-counter {
  font-size: 11px !important;
  flex-shrink: 0;
  margin-left: auto;  /* pousse le compteur complètement à droite */
  padding: 3px 10px;
  background: rgba(62,121,255,0.1);
  border-radius: 10px;
  border: 1px solid rgba(62,121,255,0.3);
}
.counter-today {
  font-weight: 600;
  color: var(--btn-blue);
}

/* Body (liste) — en dessous du header, dans la colonne gauche */
.page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* Sur les pages sans layout 3 colonnes (dashboard, parametres, messages) */
.page-body.no-detail {
  flex: 1;
  overflow-y: auto;
}

/* La colonne liste — padding réduit pour 300px */
.list-column {
  flex: 1 1 auto;
  padding: 0 12px 12px 12px;
  min-width: 0;
  overflow-y: auto;
}

/* Filtres — compacts pour 300px, tout sur une ligne */
.list-filters {
  padding: 4px 0 8px 0;
  gap: 4px;
  flex-wrap: nowrap;  /* tout sur une ligne */
  align-items: center;
  overflow: visible;  /* IMPORTANT : visible pour que le dropdown ne soit pas coupé */
}
.filter-btn {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 1px solid #374151 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #9CA3AF !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.filter-btn:hover {
  color: #fff !important;
  border-color: #4B5563 !important;
}
.filter-btn.active {
  background: var(--btn-blue) !important;
  color: #fff !important;
  border-color: var(--btn-blue) !important;
}

.filter-select {
  padding: 4px 24px 4px 8px;
  font-size: 11px;
  background: #1A1A1A;
  border: 1px solid #374151;
  border-radius: 12px;
  color: #fff;
}

/* Custom select petit dans la barre de filtres */
.custom-select-sm {
  width: auto;
  min-width: 90px;
  margin-left: auto;  /* pousse à droite */
  position: relative;
  z-index: 100;  /* au-dessus des offres */
}
.custom-select-sm .custom-select-trigger {
  padding: 4px 24px 4px 8px;
  font-size: 11px;
  border-radius: 12px;
  white-space: nowrap;
}
.custom-select-sm .custom-select-option {
  padding: 6px 10px;
  font-size: 11px;
}
/* Le dropdown du custom select doit passer au-dessus de tout */
.custom-select .custom-select-options {
  z-index: 1000;
}

/* Items de liste — compacts pour 300px */
.list-item {
  padding: 10px 12px;
  gap: 8px;
}
.list-item-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-source {
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-meta {
  gap: 3px;
}
.list-item-date {
  font-size: 10px;
  color: #6B7280;
}

/* Badges plus petits */
.badge-new {
  padding: 2px 6px;
  font-size: 9px;
}
.badge-pays-TN,
.badge-pays-FR,
.badge-pays-CA {
  padding: 2px 6px;
  font-size: 10px;
}

/* ---------------------------------------------------------------------------
   BOUTONS — plus arrondis (border-radius 16px) et plus compacts
   --------------------------------------------------------------------------- */
.btn {
  border-radius: 16px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--btn-blue);
  color: #fff;
  border-color: var(--btn-blue);
}
.btn-primary:hover { background: var(--btn-blue-hover); border-color: var(--btn-blue-hover); }
.btn-secondary {
  background: transparent;
  border-color: var(--btn-blue);
  color: var(--btn-blue);
}
.btn-secondary:hover { background: rgba(62,121,255,0.1); }
.btn-secondary-dark {
  background: #1F2937;
  color: #fff;
  border-color: #374151;
}
.btn-secondary-dark:hover { background: #374151; border-color: #4B5563; }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover { background: rgba(239,68,68,0.1); border-color: var(--danger); }
.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: rgba(239,68,68,0.3);
}
.btn-danger-ghost:hover { background: rgba(239,68,68,0.1); border-color: var(--danger); }
.btn-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.btn-success:hover { background: #059669; border-color: #059669; }
.btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 14px !important;
}
.btn-lg {
  padding: 10px 20px !important;
  font-size: 14px !important;
  border-radius: 18px !important;
}
.btn-block {
  width: 100%;
}

/* État vide du panneau détail */
.detail-empty {
  padding: 80px 24px;
  text-align: center;
  color: #4B5563;
}
.detail-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  opacity: 0.5;
}
.detail-empty p {
  font-size: 13px;
}

/* Pour les pages sans détail (dashboard, parametres, messages) :
   le main-content redevient un bloc normal, pas de flex row */
.main-content:has(.page-body.no-detail) {
  display: block;
  overflow-y: auto;
  width: 100%;
}
.main-content:has(.page-body.no-detail) .page-body.no-detail {
  display: block;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.main-content:has(.page-body.no-detail) .detail-divider {
  display: none;
}
.main-content:has(.page-body.no-detail) .detail-column {
  display: none;
}

/* Messages IA — blocs avec fond #08101a (comme les autres pages) */
.msg-block {
  background: var(--bg-modal) !important;
  border: 1px solid #1E3A5F !important;
}

/* ---------------------------------------------------------------------------
   PARAMÈTRES — onglets centrés + tableau centré max-width
   --------------------------------------------------------------------------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid #1E1E1E;
  padding-bottom: 0;
  margin-bottom: 24px;
}
.tab {
  padding: 10px 20px;
  background: transparent;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab:hover {
  color: var(--text-primary);
}
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--primary);
}

/* Conteneur centré pour les paramètres */
.params-container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Zone d'ajout en haut */
.params-add-zone {
  background: var(--bg-modal);
  border: 1px solid #1E3A5F;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.params-add-zone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.params-add-zone-subtitle {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 16px;
}

/* Ligne input + bouton Ajouter (mots-clés) */
.mc-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.mc-input-row .form-input {
  flex: 1;
  background: #0F172A;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
}
.mc-input-row .form-input:focus {
  outline: none;
  border-color: var(--btn-blue);
}
.btn-add-mc {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Label section (Pays / Catégories) */
.mc-section-label {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 8px;
}

/* Boutons pills (Pays + Catégories) — petits et très arrondis, gris par défaut, BLEU si sélectionné */
.mc-button-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mc-pill {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #374151;
  border-radius: 14px;  /* très arrondi */
  color: #9CA3AF;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mc-pill:hover {
  border-color: #4B5563;
  color: var(--text-primary);
}
.mc-pill.selected {
  background: var(--btn-blue);
  border-color: var(--btn-blue);
  color: #fff;
}

/* Layout zone ajout Sources : 2 inputs en haut, 3 selects en dessous */
.src-input-row {
  margin-bottom: 12px;
}
.src-input-row .form-input {
  width: 100%;
  background: #0F172A;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
}
.src-input-row .form-input:focus {
  outline: none;
  border-color: var(--btn-blue);
}
.src-selects-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.src-select-group {
  display: flex;
  flex-direction: column;
}
.src-select-label {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Custom select petit (legacy — doublon supprimé, voir plus haut .custom-select-sm) */

/* Custom select (pas HTML default) — fond #0F172A, bordure, BLEU si ouvert/sélectionné */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0F172A;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.custom-select-trigger:hover {
  border-color: #4B5563;
}
.custom-select.open .custom-select-trigger {
  border-color: var(--btn-blue);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.custom-select-trigger svg {
  color: #9CA3AF;
  transition: transform 0.15s ease;
}
.custom-select.open .custom-select-trigger svg {
  transform: rotate(180deg);
}
.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0F172A;
  border: 1px solid var(--btn-blue);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  z-index: 50;
}
.custom-select.open .custom-select-options {
  max-height: 200px;
  overflow-y: auto;
}
.custom-select-option {
  padding: 8px 12px;
  color: #9CA3AF;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.custom-select-option:hover {
  background: rgba(62,121,255,0.15);
  color: #fff;
}
.custom-select-option.selected {
  background: var(--btn-blue);
  color: #fff;
}

/* Formulaire ancien style (legacy) */
.params-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.params-add-form .form-input,
.params-add-form .form-select {
  flex: 1;
  min-width: 120px;
  background: #0F172A;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
}
.params-add-form .btn-add {
  background: var(--btn-blue);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.params-add-form .btn-add:hover { background: var(--btn-blue-hover); }

/* Header de liste params : titre + compteur + filtres */
.params-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.params-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.params-list-counter {
  font-size: 13px;
  color: #9CA3AF;
  margin-left: 8px;
}
.params-filters {
  display: flex;
  gap: 8px;
}
.params-filters .filter-select {
  padding: 5px 28px 5px 10px;
  font-size: 12px;
  background: var(--bg-modal);
  border: 1px solid #374151;
  border-radius: 6px;
  color: #fff;
}

/* Bouton "Charger les défauts" */
.btn-load-defaults {
  background: var(--bg-modal);
  border: 1px solid #374151;
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-load-defaults:hover { border-color: #4B5563; }

/* Ligne de paramètre (mot-clé ou source) */
.param-row {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.param-row:hover { border-color: #374151; }
.param-row.inactive { opacity: 0.6; }

.param-row-main {
  flex: 1;
  min-width: 0;
}
.param-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.param-row-subtitle {
  font-size: 12px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.param-row-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.param-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icônes d'action (œil, stylo, poubelle) */
.action-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  transition: all 0.15s ease;
}
.action-icon:hover {
  background: #1F2937;
}
.action-icon.edit { color: #9CA3AF; }
.action-icon.edit:hover { color: var(--text-primary); }
.action-icon.delete { color: var(--danger); }
.action-icon svg { width: 16px; height: 16px; }

/* Toggle ON/OFF très petit (style iOS switch mini) — sans texte */
.toggle-onoff {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
}
.toggle-onoff input { opacity: 0; width: 0; height: 0; }
.toggle-onoff .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #374151;
  border-radius: 14px;
  transition: 0.2s;
}
.toggle-onoff .toggle-slider::before {
  content: '';
  position: absolute;
  height: 10px; width: 10px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-onoff .toggle-label-on,
.toggle-onoff .toggle-label-off { display: none; }
.toggle-onoff input:checked + .toggle-slider {
  background: var(--btn-blue);
}
.toggle-onoff input:checked + .toggle-slider::before {
  transform: translateX(10px);
}

/* Badges params */
.badge-param {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-param.badge-rss {
  background: var(--primary);
  color: #fff;
}
.badge-param.badge-pays-fr {
  background: #1E3A8A;
  color: #fff;
}
.badge-param.badge-pays-tn {
  background: #7F1D1D;
  color: #fff;
}
.badge-param.badge-pays-ca {
  background: #4C1D95;
  color: #fff;
}
.badge-param.badge-type-emploi {
  background: var(--success);
  color: #fff;
}
.badge-param.badge-type-freelance {
  background: var(--warning);
  color: #fff;
}
.badge-param.badge-type-societe {
  background: var(--purple);
  color: #fff;
}
.badge-param.badge-source-rss {
  background: var(--primary);
  color: #fff;
}
.badge-param.badge-source-web {
  background: var(--purple);
  color: #fff;
}
.badge-param.badge-source-api {
  background: var(--success);
  color: #fff;
}

/* Pastille "actif" verte */
.active-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
}
.active-dot svg { width: 10px; height: 10px; }
.active-dot.inactive {
  background: #4B5563;
}

/* ---------------------------------------------------------------------------
   TELEGRAM — bloc instructions bordure gauche bleue + liens + bouton
   --------------------------------------------------------------------------- */
.telegram-container {
  max-width: 600px;
  margin: 0 auto;
}

.telegram-instructions {
  background: rgba(59,130,246,0.05);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.telegram-instructions-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.telegram-instructions ol {
  padding-left: 20px;
  color: #9CA3AF;
  font-size: 13px;
  line-height: 1.8;
}
.telegram-instructions ol li {
  margin-bottom: 4px;
}
.telegram-instructions a {
  color: var(--primary);
  text-decoration: underline;
  word-break: break-all;
}
.telegram-instructions a:hover {
  color: var(--primary-light);
}

.telegram-form {
  background: var(--bg-modal);
  border: 1px solid #1E1E1E;
  border-radius: 8px;
  padding: 24px;
}
.telegram-form .form-group {
  margin-bottom: 16px;
}
.telegram-form .form-label {
  display: block;
  margin-bottom: 6px;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 500;
}
.telegram-form .form-input {
  width: 100%;
  background: #0F172A;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
}
.telegram-form .form-input:focus {
  outline: none;
  border-color: var(--primary);
}
.telegram-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #1E1E1E;
  margin-bottom: 16px;
}
.telegram-toggle-row .label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.telegram-form .btn-save {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.telegram-form .btn-save:hover { background: var(--primary-hover); }
.telegram-form .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* Form help text */
.form-help {
  font-size: 11px;
  color: #6B7280;
  margin-top: 4px;
}

/* Espacement sidebar-section */
.sidebar-section + .sidebar-section {
  padding-top: 4px;
}

/* Sidebar logo centré plus haut */
.sidebar-logo {
  padding: 4px 0 12px 0;
}
.sidebar-logo img {
  height: 32px;
}

/* Cache la bordure top de user-role dans sidebar-user */
.sidebar-user {
  border-top: 1px solid #1E1E1E;
  padding-top: 12px;
  margin-top: 12px;
}