/* ==========================================================================
   Eureka BackOffice — styles custom (light + dark themes)
   ========================================================================== */

:root {
  /* Couleurs d'accent (identiques entre thèmes) */
  --crra-primary:   #4f46e5;
  --crra-primary-2: #6366f1;
  --crra-accent:    #10b981;
  --crra-warn:      #f59e0b;
  --crra-danger:    #ef4444;
  --crra-info:      #0ea5e9;

  /* Sidebar (toujours sombre, identique en light & dark) */
  --sidebar-bg:      #1e293b;
  --sidebar-bg-2:    #0f172a;
  --sidebar-fg:      #cbd5e1;
  --sidebar-fg-2:    #94a3b8;
  --sidebar-hover:   #334155;

  /* Light theme (par défaut) */
  --content-bg:      #f4f6f9;
  --card-bg:         #ffffff;
  --card-border:     #e5e7eb;
  --text-primary:    #1f2937;
  --text-muted:      #6b7280;
  --topbar-bg:       #ffffff;
  --topbar-border:   #e5e7eb;
  --input-bg:        #ffffff;
  --table-head-bg:   #f9fafb;
  --table-row-stripe:#f9fafb;
  --hover-bg:        #f3f4f6;

  --card-shadow:     0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --card-shadow-h:   0 4px 12px rgba(0,0,0,.08);

  --sidebar-width:   248px;
  --topbar-height:   56px;
}

/* Dark theme override */
[data-theme="dark"] {
  --content-bg:      #0f172a;
  --card-bg:         #1e293b;
  --card-border:     #334155;
  --text-primary:    #f1f5f9;
  --text-muted:      #94a3b8;
  --topbar-bg:       #1e293b;
  --topbar-border:   #334155;
  --input-bg:        #0f172a;
  --table-head-bg:   #0f172a;
  --table-row-stripe:#172033;
  --hover-bg:        #283344;

  --card-shadow:     0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  --card-shadow-h:   0 4px 12px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--content-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  transition: background-color .2s, color .2s;
}

/* Overrides Bootstrap pour le dark theme */
[data-theme="dark"] .card,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] textarea.form-control {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-primary);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: var(--content-bg);
}
[data-theme="dark"] .table {
  color: var(--text-primary);
  /* Bootstrap utilise ces variables internes ; on les override toutes
     pour que stripe et hover gardent la bonne couleur de texte. */
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--card-bg);
  --bs-table-border-color: var(--card-border);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: var(--table-row-stripe);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--hover-bg);
  --bs-table-active-color: var(--text-primary);
  --bs-table-active-bg: var(--hover-bg);
}
[data-theme="dark"] .table thead th { background: var(--table-head-bg); color: var(--text-muted); }
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th { color: var(--text-primary); }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text-primary); }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { color: var(--text-primary); }

/* Liens de tri dans les <th> : héritent de la couleur du parent (text-muted). */
.th-sort-link { color: inherit; }
.th-sort-link:hover { color: var(--crra-primary); }

/* Bootstrap utilities qui forcent une couleur sombre — override en dark mode.
   .text-muted, .text-body, .text-secondary sont hardcodées par Bootstrap
   (couleur grise foncée non-thémable nativement). */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .text-secondary {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .text-body { color: var(--text-primary) !important; }
[data-theme="dark"] small { color: inherit; }
[data-theme="dark"] code { color: #c4b5fd; }
[data-theme="dark"] .form-label, [data-theme="dark"] label { color: var(--text-primary); }
[data-theme="dark"] .form-text { color: var(--text-muted) !important; }
[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background: var(--hover-bg); }
[data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--card-border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--hover-bg); color: var(--text-primary); }
[data-theme="dark"] code { color: #c4b5fd; background: rgba(196,181,253,.1); padding: 1px 4px; border-radius: 4px; }

/* ==========================================================================
   Layout général
   ========================================================================== */

.app-wrapper { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-fg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  gap: 16px;
}

.app-content { padding: 24px; flex-grow: 1; }

/* ==========================================================================
   Sidebar : brand
   ========================================================================== */

.sidebar-brand {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.sidebar-brand .brand-mark {
  width: 36px; height: 36px;
  background: var(--crra-primary);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
}
.sidebar-brand small {
  display: block;
  font-size: 0.7rem;
  color: var(--sidebar-fg-2);
  font-weight: 400;
}

/* ==========================================================================
   Sidebar : navigation accordion
   ========================================================================== */

.sidebar-nav { padding: 12px 0; flex-grow: 1; }

.sidebar-nav > .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: var(--sidebar-fg);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  border-left: 3px solid transparent;
  font-size: 0.92rem;
}
.sidebar-nav > .nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav > .nav-link.active {
  background: rgba(79,70,229,.18);
  color: #fff;
  border-left-color: var(--crra-primary);
  font-weight: 600;
}
.sidebar-nav > .nav-link i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  opacity: 0.85;
}

/* Sections accordéon */
.nav-section { display: flex; flex-direction: column; }
.nav-section-header {
  width: 100%;
  background: none;
  border: 0;
  color: var(--sidebar-fg-2);
  padding: 16px 20px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.nav-section-header:hover { color: #fff; }
.nav-section-header .section-arrow {
  transition: transform .2s;
  font-size: 0.85rem;
  opacity: 0.7;
}
.nav-section.open .section-arrow { transform: rotate(180deg); }

.nav-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-out;
}
.nav-section.open .nav-section-body { max-height: 800px; }

.nav-section-body .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 28px;
  color: var(--sidebar-fg);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
}
.nav-section-body .nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.nav-section-body .nav-link.active {
  background: rgba(79,70,229,.18);
  color: #fff;
  border-left-color: var(--crra-primary);
  font-weight: 600;
}
.nav-section-body .nav-link i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  opacity: 0.85;
}

.sidebar-footer {
  padding: 12px 20px;
  font-size: 0.75rem;
  color: var(--sidebar-fg-2);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ==========================================================================
   Topbar : titre, breadcrumb, recherche, theme, user
   ========================================================================== */

.topbar-left { display: flex; align-items: center; gap: 12px; flex-grow: 1; min-width: 0; }
.topbar-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.topbar-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--crra-primary); }
.topbar-breadcrumb .sep { opacity: 0.5; }
.topbar-breadcrumb .current { color: var(--text-primary); font-weight: 500; }

.topbar-search {
  max-width: 320px;
  flex-grow: 1;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: 7px 12px 7px 36px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.88rem;
  transition: border-color .15s, box-shadow .15s;
}
.topbar-search input:focus {
  outline: none;
  border-color: var(--crra-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.topbar-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.topbar-icon-btn {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .15s, color .15s;
}
.topbar-icon-btn:hover { background: var(--hover-bg); color: var(--text-primary); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 8px;
  background: transparent;
  font-size: 0.85rem;
  border: 0;
  color: var(--text-primary);
  transition: background .15s;
}
.topbar-user:hover { background: var(--hover-bg); }
.topbar-user .avatar {
  width: 30px; height: 30px;
  background: var(--crra-primary);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-header h1 { font-size: 1.5rem; font-weight: 600; margin: 0; color: var(--text-primary); }
.page-header .text-muted { font-size: 0.9rem; color: var(--text-muted); }

/* ==========================================================================
   Cards et widgets
   ========================================================================== */

.card {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
}
.card-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  font-weight: 600;
  padding: 14px 18px;
}

/* Stats widgets */
.stat-widget {
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .15s, box-shadow .15s;
}
a:hover .stat-widget {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-h);
}
.stat-widget .stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  color: #fff;
}
.stat-widget .stat-content { min-width: 0; }
.stat-widget .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.stat-widget .stat-label { font-size: 0.85rem; color: var(--text-muted); }

.stat-widget.color-primary .stat-icon { background: var(--crra-primary); }
.stat-widget.color-success .stat-icon { background: var(--crra-accent); }
.stat-widget.color-warning .stat-icon { background: var(--crra-warn); }
.stat-widget.color-danger  .stat-icon { background: var(--crra-danger); }
.stat-widget.color-info    .stat-icon { background: var(--crra-info); }
.stat-widget.color-dark    .stat-icon { background: #475569; }

/* ==========================================================================
   Cartes module
   ========================================================================== */

.module-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  height: 100%;
}
.module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-h);
  border-color: var(--crra-primary);
  color: var(--text-primary);
}
.module-card .card-row { display: flex; align-items: flex-start; gap: 14px; }
.module-card .module-icon {
  width: 44px; height: 44px;
  background: #eef2ff;
  color: var(--crra-primary);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.module-card .module-meta { flex-grow: 1; min-width: 0; }
.module-card .module-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.module-card .module-count {
  background: #eef2ff;
  color: var(--crra-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}
.module-card .module-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}

/* Pastilles colorées par groupe */
.group-Métier        .module-icon { background: rgba(2,132,199,.12);  color: #0284c7; }
.group-Communication .module-icon { background: rgba(180,83,9,.14);   color: #b45309; }
.group-Système       .module-icon { background: rgba(109,40,217,.14); color: #7c3aed; }

[data-theme="dark"] .module-card .module-icon,
[data-theme="dark"] .module-card .module-count { background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-theme="dark"] .group-Métier        .module-icon { background: rgba(56,189,248,.15); color: #38bdf8; }
[data-theme="dark"] .group-Communication .module-icon { background: rgba(251,191,36,.15); color: #fbbf24; }
[data-theme="dark"] .group-Système       .module-icon { background: rgba(167,139,250,.15); color: #a78bfa; }

/* ==========================================================================
   Group heading
   ========================================================================== */

.group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.group-heading::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: var(--card-border);
  margin-left: 8px;
}

/* ==========================================================================
   Tables, boutons, forms
   ========================================================================== */

.table { font-size: 0.9rem; color: var(--text-primary); }
.table > :not(caption) > * > * { padding: 0.75rem 0.85rem; }
.table thead th {
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--card-border);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.btn { border-radius: 7px; }
.btn-primary { background: var(--crra-primary); border-color: var(--crra-primary); }
.btn-primary:hover { background: var(--crra-primary-2); border-color: var(--crra-primary-2); }

.form-control, .form-select {
  background: var(--input-bg);
  border-color: var(--card-border);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  border-color: var(--crra-primary);
  box-shadow: 0 0 0 0.2rem rgba(79,70,229,.15);
}

.badge { font-weight: 500; padding: 0.35em 0.6em; }

.alert { border-radius: 8px; border: none; }

/* ==========================================================================
   Page de recherche globale
   ========================================================================== */

.search-result-section { margin-bottom: 28px; }
.search-result-section h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .15s, transform .15s;
}
.search-result-item:hover { border-color: var(--crra-primary); transform: translateX(2px); color: var(--text-primary); }
.search-result-item .item-icon {
  width: 38px; height: 38px;
  background: #eef2ff;
  color: var(--crra-primary);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .search-result-item .item-icon { background: rgba(99,102,241,.15); color: #a5b4fc; }
.search-result-item .item-title { font-weight: 600; }
.search-result-item .item-meta { font-size: 0.82rem; color: var(--text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; transform: translateX(-100%); transition: transform .2s; z-index: 20; }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex !important; }
  .topbar-search { display: none; }
  .topbar-breadcrumb { display: none; }
}
.sidebar-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-size: 1.3rem;
  padding: 4px 10px;
  cursor: pointer;
}