/* ============================================================
   EISWeb — Design System
   Override Bootstrap 5.3 · sobre & moderne
   ============================================================ */

/* ── 1. Variables ── */
:root {
  /* Palette */
  --ew-bg:         #f1f5f9;
  --ew-surface:    #ffffff;
  --ew-border:     #e2e8f0;
  --ew-text:       #0f172a;
  --ew-muted:      #64748b;
  --ew-primary:    #2563eb;
  --ew-primary-h:  #1d4ed8;
  --ew-success:    #16a34a;
  --ew-danger:     #dc2626;
  --ew-warning:    #d97706;
  --ew-info:       #0891b2;

  /* Navbar */
  --ew-nav-bg:     #0f172a;
  --ew-nav-h:      #1e293b;
  --ew-nav-text:   #94a3b8;
  --ew-nav-active: #e2e8f0;

  /* Tokens */
  --ew-radius:     6px;
  --ew-radius-lg:  10px;
  --ew-shadow:     0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --ew-shadow-md:  0 4px 16px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.06);

  /* Bootstrap overrides */
  --bs-primary:           #2563eb;
  --bs-primary-rgb:       37,99,235;
  --bs-secondary:         #475569;
  --bs-secondary-rgb:     71,85,105;
  --bs-success:           #16a34a;
  --bs-success-rgb:       22,163,74;
  --bs-danger:            #dc2626;
  --bs-danger-rgb:        220,38,38;
  --bs-warning:           #d97706;
  --bs-warning-rgb:       217,119,6;
  --bs-info:              #0891b2;
  --bs-info-rgb:          8,145,178;
  --bs-body-bg:           #f1f5f9;
  --bs-body-color:        #0f172a;
  --bs-body-font-size:    0.875rem;
  --bs-border-color:      #e2e8f0;
  --bs-border-radius:     6px;
  --bs-border-radius-lg:  10px;
  --bs-border-radius-sm:  4px;
  --bs-link-color:        #2563eb;
  --bs-link-hover-color:  #1d4ed8;
}

/* ── 2. Base ── */
body {
  font-size: .875rem;
  color: var(--ew-text);
  background-color: var(--ew-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--ew-text);
}

h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h6 { font-size: .9rem; }

a { color: var(--ew-primary); }
a:hover { color: var(--ew-primary-h); }

pre {
  background: #f8fafc;
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius);
  padding: .75rem 1rem;
  margin: .75rem 0;
  font-size: .8rem;
}

/* ── 3. Navbar ── */
.navbar {
  padding: .35rem 1rem;
}

/* Le container-fluid de Bootstrap est aussi utilisé dans la navbar — neutraliser le padding de page */
.navbar .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
}

/* Toutes les navbars de l'app : ClassicMenu (bg-secondary), AdminMenu (bg-dark), Support (bg-primary) */
.navbar.bg-secondary,
.navbar.bg-dark,
.navbar.bg-primary {
  background-color: var(--ew-nav-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: #e2e8f0 !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--ew-nav-text);
  font-size: .875rem;
  padding: .5rem .85rem;
  border-radius: var(--ew-radius);
  transition: color .12s, background .12s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--ew-nav-active);
  background: rgba(255,255,255,.07);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(37,99,235,.3);
}

.navbar-dark .navbar-nav .nav-link svg {
  flex-shrink: 0;
  opacity: .65;
}

/* Dropdown dans la navbar */
.navbar-dark .dropdown-menu {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--ew-radius);
  padding: .3rem;
  min-width: 170px;
  box-shadow: var(--ew-shadow-md);
  margin-top: 4px;
}

.navbar-dark .dropdown-menu .dropdown-item {
  color: var(--ew-nav-text) !important;
  border-radius: 4px;
  padding: .42rem .8rem;
  font-size: .85rem;
}

.navbar-dark .dropdown-menu .dropdown-item:hover,
.navbar-dark .dropdown-menu .dropdown-item:focus {
  background: rgba(255,255,255,.08);
  color: var(--ew-nav-active) !important;
}

.navbar-dark .dropdown-menu .dropdown-item.active,
.navbar-dark .dropdown-menu .dropdown-item:active {
  background: rgba(37,99,235,.4);
  color: #fff !important;
}

/* ── 4. Boutons ── */
.btn {
  font-size: .8rem;
  font-weight: 500;
  padding: .32rem .85rem;
  border-radius: var(--ew-radius);
  border-width: 1px;
  line-height: 1.45;
  transition: background .12s, border-color .12s, box-shadow .12s;
}

.btn-sm { font-size: .74rem; padding: .18rem .6rem; }
.btn-lg { font-size: .9rem; padding: .48rem 1.1rem; }

.btn-primary   { background: var(--ew-primary); border-color: var(--ew-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--ew-primary-h); border-color: var(--ew-primary-h); }

.btn-success   { background: var(--ew-success); border-color: var(--ew-success); }
.btn-success:hover { background: #15803d; border-color: #15803d; }

.btn-danger    { background: var(--ew-danger); border-color: var(--ew-danger); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-warning   { background: var(--ew-warning); border-color: var(--ew-warning); color: #fff; }
.btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }

.btn-info      { background: var(--ew-info); border-color: var(--ew-info); }
.btn-info:hover { background: #0e7490; border-color: #0e7490; }

.btn-secondary { background: #475569; border-color: #475569; }
.btn-secondary:hover { background: #334155; border-color: #334155; }

.btn-dark      { background: #1e293b; border-color: #1e293b; }
.btn-dark:hover { background: #0f172a; border-color: #0f172a; }

.btn-outline-primary  { color: var(--ew-primary); border-color: #bfdbfe; }
.btn-outline-primary:hover { background: var(--ew-primary); border-color: var(--ew-primary); color: #fff; }

.btn-outline-secondary { color: #475569; border-color: #cbd5e1; }
.btn-outline-secondary:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; }

.btn-outline-danger { color: var(--ew-danger); border-color: #fecaca; }
.btn-outline-danger:hover { background: var(--ew-danger); border-color: var(--ew-danger); color: #fff; }

/* Focus rings */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

/* ── 5. Cards ── */
.card {
  background: var(--ew-surface);
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-lg);
  box-shadow: var(--ew-shadow);
}

.card-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-lg) var(--ew-radius-lg) 0 0 !important;
  padding: .7rem 1.1rem;
  font-weight: 600;
  font-size: .84rem;
  color: var(--ew-text);
}

/* Neutralise le p.mb-0 généré par HtmlForm */
.card-header p.mb-0 { margin: 0; font-weight: 600; font-size: .84rem; }

.card-body { padding: 1.2rem 1.25rem; }

.card-footer {
  background: #f8fafc;
  border-top: 1px solid var(--ew-border);
  border-radius: 0 0 var(--ew-radius-lg) var(--ew-radius-lg) !important;
  padding: .7rem 1.1rem;
}

/* ── 6. Formulaires ── */
.form-control,
.form-select {
  border: 1px solid #cbd5e1;
  border-radius: var(--ew-radius);
  font-size: .84rem;
  padding: .36rem .65rem;
  color: var(--ew-text);
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ew-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background: #f8fafc;
  color: var(--ew-muted);
}

.form-control::placeholder { color: #94a3b8; }

.input-group-text {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--ew-radius);
  color: var(--ew-muted);
  font-size: .82rem;
  padding: .36rem .7rem;
  white-space: nowrap;
}

/* Jointure label → input */
.input-group > .input-group-text + .form-control,
.input-group > .input-group-text + .form-select {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .input-group-text:first-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-row { margin-bottom: .5rem; }
.form-group { margin-bottom: .75rem; }

.form-check-input {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  margin-top: .2em;
}

.form-check-input:checked {
  background-color: var(--ew-primary);
  border-color: var(--ew-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  border-color: var(--ew-primary);
}

textarea.form-control { min-height: 80px; resize: vertical; }

/* ── 7. Tables ── */
.table {
  font-size: .82rem;
  color: var(--ew-text);
  --bs-table-striped-bg: #f8fafc;
  --bs-table-hover-bg:   #f1f5f9;
}

.table > thead > tr > th {
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ew-muted);
  background: #f8fafc;
  border-bottom: 2px solid var(--ew-border);
  padding: .55rem .75rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: .5rem .75rem;
  vertical-align: middle;
  border-color: #f1f5f9;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Tables sombres (table-dark) — corriger les couleurs qu'on écrase avec .table */
.table-dark {
  --bs-table-striped-bg:   rgba(255,255,255,.04);
  --bs-table-hover-bg:     rgba(255,255,255,.07);
  --bs-table-border-color: rgba(255,255,255,.07);
}

.table-dark > tbody > tr > td {
  border-color: rgba(255,255,255,.07);
}

/* En-tête clair (table-light) à l'intérieur d'une table sombre */
.table-dark > thead.table-light > tr > th,
.table-dark > thead > tr.table-light > th {
  background: #e9ecef;
  color: #1e293b;
  border-bottom: 1px solid #ced4da;
}

/* DataTables */
div.dataTables_wrapper {
  font-size: .8rem;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
  color: var(--ew-muted);
  padding: .25rem 0;
}

div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid #cbd5e1;
  border-radius: var(--ew-radius);
  padding: .25rem .55rem;
  font-size: .8rem;
  margin-left: .35rem;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
  border-color: var(--ew-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

div.dataTables_wrapper div.dataTables_info {
  color: var(--ew-muted);
  font-size: .78rem;
  padding-top: .5rem;
}

/* DataTables + Bootstrap 5 : .paginate_button est sur <li>, les styles visuels vont sur .page-link */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 0;
  flex-wrap: wrap;
  gap: 2px;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button .page-link {
  font-size: .78rem;
  padding: .22rem .55rem;
  border-radius: var(--ew-radius) !important;
  border: 1px solid var(--ew-border);
  color: var(--ew-text);
  background: #fff;
  line-height: 1.4;
  margin-left: 0;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button .page-link:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: var(--ew-text);
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.active .page-link,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current .page-link {
  background: var(--ew-primary) !important;
  border-color: var(--ew-primary) !important;
  color: #fff !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled .page-link {
  color: var(--ew-muted);
  background: #f8fafc;
  border-color: var(--ew-border);
  pointer-events: none;
}

/* ── 8. Badges ── */
.badge {
  font-size: .68rem;
  font-weight: 600;
  padding: .28em .55em;
  border-radius: 5px;
  letter-spacing: .02em;
}

.badge.rounded-pill { border-radius: 9999px; }

.bg-primary   { background-color: var(--ew-primary)  !important; }
.bg-success   { background-color: var(--ew-success)  !important; }
.bg-danger    { background-color: var(--ew-danger)   !important; }
.bg-warning   { background-color: var(--ew-warning)  !important; }
.bg-info      { background-color: var(--ew-info)     !important; }
.bg-secondary { background-color: #475569            !important; }
.bg-dark      { background-color: #1e293b            !important; }
.bg-light     { background-color: #f1f5f9            !important; }

/* Couleurs métier (colors.css) */
.bg-purple { background-color: #7c3aed !important; color: #fff; }
.bg-orange { background-color: #ea580c !important; color: #fff; }
.bg-green  { background-color: #16a34a !important; color: #fff; }
.bg-red    { background-color: #dc2626 !important; color: #fff; }
.bg-pink   { background-color: #db2777 !important; color: #fff; }
.bg-brown  { background-color: #92400e !important; color: #fff; }
.bg-blue   { background-color: #2563eb !important; color: #fff; }

/* ── 9. Alertes & Toasts ── */
.alert {
  border-radius: var(--ew-radius);
  border-width: 0;
  border-left: 3px solid transparent;
  font-size: .84rem;
  padding: .7rem 1rem;
}

.alert-success { background: #f0fdf4; border-left-color: var(--ew-success); color: #166534; }
.alert-danger  { background: #fef2f2; border-left-color: var(--ew-danger);  color: #991b1b; }
.alert-warning { background: #fffbeb; border-left-color: var(--ew-warning); color: #92400e; }
.alert-info    { background: #f0f9ff; border-left-color: var(--ew-info);    color: #164e63; }

.toast {
  border-radius: var(--ew-radius);
  font-size: .82rem;
  border: none;
  box-shadow: var(--ew-shadow-md);
  min-width: 240px;
}

.toast.bg-danger  { background: var(--ew-danger)  !important; color: #fff; }
.toast.bg-success { background: var(--ew-success) !important; color: #fff; }
.toast.bg-warning { background: var(--ew-warning) !important; color: #fff; }
.toast.bg-info    { background: var(--ew-info)    !important; color: #fff; }

.toast .btn-close { filter: invert(1); opacity: .7; }

/* ── 10. Modales ── */
.modal-content {
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-lg);
  box-shadow: var(--ew-shadow-md);
}

.modal-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-lg) var(--ew-radius-lg) 0 0;
  padding: .8rem 1.25rem;
}

.modal-title { font-weight: 600; font-size: .95rem; }

.modal-body { padding: 1.25rem; }

.modal-footer {
  background: #f8fafc;
  border-top: 1px solid var(--ew-border);
  border-radius: 0 0 var(--ew-radius-lg) var(--ew-radius-lg);
  padding: .65rem 1.25rem;
  gap: .4rem;
}

/* ── 11. Dropdowns ── */
.dropdown-menu {
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius);
  box-shadow: var(--ew-shadow-md);
  padding: .3rem;
  font-size: .82rem;
}

.dropdown-item {
  border-radius: 4px;
  padding: .35rem .7rem;
  color: var(--ew-text);
}

.dropdown-item:hover { background: #f1f5f9; }
.dropdown-item.active,
.dropdown-item:active { background: var(--ew-primary); color: #fff; }

.dropdown-divider { border-color: var(--ew-border); margin: .25rem .3rem; }

/* ── 12. Progress ── */
.progress {
  height: .5rem;
  border-radius: 9999px;
  background: #e2e8f0;
}

.progress-bar {
  border-radius: 9999px;
  background: var(--ew-primary);
}

/* ── 13. Layout ── */
body { padding-top: 64px; }

.container,
.container-fluid {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

/* Titre de page avec bouton d'action aligné */
h1, h2 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Row avec filtres (ex: Missions) */
.row.justify-content-center > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--ew-surface);
  border: 1px solid var(--ew-border);
  border-radius: var(--ew-radius-lg);
  padding: .6rem 1rem;
  margin-bottom: .75rem;
  box-shadow: var(--ew-shadow);
  font-size: .82rem;
  color: var(--ew-muted);
}

/* Scroll-to-top */
#myBtn {
  background: #1e293b;
  border-radius: var(--ew-radius);
  bottom: 60px;
}

/* Text utilities */
.text-primary   { color: var(--ew-primary) !important; }
.text-success   { color: var(--ew-success) !important; }
.text-danger    { color: var(--ew-danger)  !important; }
.text-warning   { color: var(--ew-warning) !important; }
.text-info      { color: var(--ew-info)    !important; }
.text-muted     { color: var(--ew-muted)   !important; }
.text-secondary { color: #475569           !important; }

/* ── 14. Responsive ── */
@media (max-width: 768px) {
  .navbar { height: auto; }
  body { padding-top: 68px; }

  .container,
  .container-fluid { padding-top: .75rem; }

  .table-responsive { border-radius: var(--ew-radius-lg); overflow: hidden; border: 1px solid var(--ew-border); }
}