/* ====== Couleurs personnalisées (Palette Identité Visuelle) ====== */

:root {
  /* Layout */
  --sidebar-width: 240px;

  /* Couleurs existantes */
  --color-bg-light: #fafbf5;
  --color-accent: #dfe160;
  --color-primary: #151D33;
  --color-secondary: #0C97B1;
  --color-third: #4C5942;
  --color-border: #576078;
  --color-dark: #061126;
  --color-sidebar: #151D33;
  --color-form-label: #5a6076;
  --color-form-input: #151D33;
  --color-form-border: #bbc2ae;
  
  /* Vert Clair */
  --color-vert-clair: #EEF4DE;
  --color-vert-clair-light: #F4F8EB;
  --color-vert-clair-lighter: #FAFBF5;
  --color-vert-clair-lightest: #FDFEFA;
  
  /* Jaune */
  --color-jaune: #DFE160;
  --color-jaune-light: #EAEA8F;
  --color-jaune-lighter: #F2F1B8;
  --color-jaune-lightest: #F9F8DB;
  
  /* Bleu Vif */
  --color-bleu-vif: #0C97B1;
  --color-bleu-vif-light: #56BDD0;
  --color-bleu-vif-lighter: #95D7E0;
  --color-bleu-vif-lightest: #CAE7EE;
  
  /* Bleu Marine */
  --color-bleu-marine: #151D33;
  --color-bleu-marine-light: #2D3A52;
  --color-bleu-marine-lighter: #576078;
  --color-bleu-marine-lightest: #8992A2;
  
  /* Vert Olive */
  --color-vert-olive: #4C5942;
  --color-vert-olive-light: #6B7763;
  --color-vert-olive-lighter: #909D87;
  --color-vert-olive-lightest: #B9C2AC;
  
  /* Codes Pantone pour référence */
  --pantone-vert-clair: #F1F2F2;
  --pantone-jaune: #F7EA48;
  --pantone-bleu-vif: #00A3E0;
  --pantone-bleu-marine: #00263A;
  --pantone-vert-olive: #4B573E;
}

  [data-bs-theme="default"] {
    --tblr-primary: #0C97B1;
    --tblr-secondary: #151D33;
    --tblr-accent: #dfe160;
    --tblr-bg: #eef4de;
    --tblr-green: #4C5942;
    --tblr-red: #f97676;
  }

body {font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;}


  .navbar-brand-image {
    height: 72px !important;
}

  
  .navbar-vertical {
    background-color: var(--color-primary) !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    overflow-y: auto;
    z-index: 1040;
}

.navbar-vertical .navbar-collapse {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.navbar-vertical .nav-link {
  color: var(--color-bg-light) !important; /* Couleur du texte des liens de la sidebar */
}

.page-wrapper {
  margin-left: var(--sidebar-width);
  padding-top: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.page-body > .container-fluid {
  max-width: none;
}

.page-body {
  padding-bottom: 50px;
}

/* Responsive : sidebar cachée sur mobile/tablette */
@media (max-width: 991.98px) {
  .navbar-vertical {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .navbar-vertical.show {
    transform: translateX(0);
  }
  .page-wrapper,
  .eexpi-header {
    margin-left: 0 !important;
  }
}

/* Laptop 13" / écrans étroits : nav links plus compacts (largeur sidebar inchangée) */
@media (min-width: 992px) and (max-width: 1366px) {
  .navbar-vertical .nav-link {
    font-size: 0.875rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
  .navbar-brand-image {
    height: 56px !important;
  }
  .page-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-header{
  margin :0 !important;
  padding :20px 0 !important;
  background: transparent !important;
}

.btn-eexpi-clear{
  background-color: white;
  color : var(--color-secondary);
  border: var(--color-secondary) 1px solid;
}

.btn-eexpi-dark{
  background-color: var(--color-secondary);
  color: white;
  border : white 1px solid
}

.btn-eexpi-blue{
  background-color: var(--color-secondary);
  color: white;
  border: var(--color-secondary) 1px solid;
}

.btn-eexpi-very-dark{
  background-color: var(--color-dark);
  color: white;
  border : white 1px solid
}

/* bg-danger conserve sa couleur rouge native (Tabler/Bootstrap).
   Utiliser .bg-eexpi-accent pour le jaune de la charte graphique. */
.bg-eexpi-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
}

.bg-secondary{
  background-color: var(--color-dark) !important;
  color: var(--color-accent) !important;
}

.bg-info{
  background-color: var(--color-third) !important;
  color: white !important;
  border : white 1px solid !important
}

.cancel-button{
  display: inline-flex;
  align-items: center;
  background-color: var(--color-dark);
  color: white;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.validate-button{
  display: inline-flex;
  align-items: center;
  background-color: var(--color-secondary);
  color: white;
  border-radius: 0.25rem;
  border: var(--color-secondary);
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.information-box{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #F5F8EC;
  border-radius: 0.25rem;
  padding: 0.5rem;
}



.eexpi-card {
  position: relative;
  background-color: #0c97b1;
  border: 0;
  overflow: hidden;
}

.eexpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/internal/Motifs/Motifs-jaune.5726d4ba9229.svg") center/100% no-repeat;
  opacity: 0.05; 
  pointer-events: none
}

.eexpi-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ====== Page Title ====== */

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.page-subtitle {
  color: var(--color-third);
  font-size: .9rem;
  margin-top: .25rem;
}

/* ====== KPI Cards ====== */

.kpi-section {
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  height: 100%;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}

.kpi-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-third);
  font-weight: 600;
}

.kpi-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: .5rem;
}

.kpi-subtext {
  font-size: .85rem;
  color: var(--color-third);
}

/* ====== Badge Status ====== */

.badge-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.75rem;
}

.badge-accepted {
  background: rgba(76, 89, 66, 0.15);
  color: var(--color-third);
}

.badge-sent {
  background: rgba(12, 151, 177, 0.15);
  color: var(--color-secondary);
}

.badge-draft {
  background: rgba(21, 29, 51, 0.1);
  color: var(--color-primary);
}

.badge-expired {
  background: rgba(223, 225, 96, 0.3);
  color: var(--color-third);
}

.badge-rejected {
  background: rgba(220, 38, 38, 0.15);
  color: #991B1B;
  font-weight: 700;
}

.badge-cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: #4B5563;
}

.badge-never-answered {
  background: rgba(245, 158, 11, 0.15);
  color: #92400E;
}

/* ====== Action Buttons ====== */

.btn-action {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(76, 89, 66, 0.3);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-primary);
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-action:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-action i {
  font-size: 0.875rem;
}

/* ====== Montants ====== */

.amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ====== Filter Buttons ====== */

.filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.filters .btn {
  padding: .4rem .8rem;
  border-radius: 8px;
  font-size: .85rem;
  border: 1px solid rgba(76, 89, 66, 0.3);
  background: #ffffff;
  color: var(--color-primary);
  font-weight: 500;
  transition: all .2s;
}

.filters .btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.filters .btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* ====== Table Card ====== */

.table-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.table-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(76, 89, 66, 0.15);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.table-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-third);
  font-weight: 600;
  margin: 0;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: .5rem 2.5rem .5rem 1rem;
  border: 1px solid rgba(21, 29, 51, 0.2);
  border-radius: 8px;
  font-size: .85rem;
  background: #ffffff;
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.search-box .search-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-third);
  font-size: .9rem;
}

/* ====== Data Table ====== */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-third);
  border-bottom: 1px solid rgba(76, 89, 66, 0.15);
  background: #ffffff;
}

.data-table tbody td {
  padding: .875rem 1rem;
  border-bottom: 1px solid rgba(238, 244, 222, 0.5);
  font-size: .875rem;
  color: var(--color-primary);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color .2s;
}

.data-table tbody tr:hover {
  background: rgba(238, 244, 222, 0.3);
}

.row-click {
  cursor: pointer;
}

/* ====== Sort Headers ====== */

.sort-header {
  color: var(--color-third);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: color 0.2s;
}

.sort-header:hover {
  color: var(--color-secondary);
}

.sort-header.active {
  color: var(--color-primary);
  font-weight: 700;
}

.sort-header i {
  font-size: 0.7rem;
}