:root {
  /* =========================================
     VARIABLES DE COULEURS
     ========================================= */
     
  /* Fond et typographie */
  --bg-body: #f2f5f7;
  --bg-white: #ffffff;
  
  /* Couleurs de la marque / Thème principal (Bleu) */
  --theme-primary: #1e3c58;
  --theme-primary-hover: #3f6486;
  --theme-text-header: #213e58;
  
  /* Couleurs d'état du texte (Up / Down) */
  --status-up-text: #69bc1f;
  --status-down-text: #cc0000;

  /* Couleurs des pastilles d'état (Blobs / Dégradés) */
  --blob-green-start: #009e0f;
  --blob-green-end: #7bd642;
  --blob-yellow-start: #d59916;
  --blob-yellow-end: #fdbf36;
  --blob-red-start: #cc0000;
  --blob-red-end: #ff3434;

  /* Tableaux et Interface Utilisateur */
  --table-row-alt: #fefefe;
  --table-row-hover: #d0e0ee;
  --btn-disabled: #cfcfcf;
}

/* =========================================
   GÉNÉRAL
   ========================================= */
body {
  background: var(--bg-body) !important;
}

/* =========================================
   EN-TÊTE (HEADER)
   ========================================= */
#content-header {
  background: var(--bg-white) !important;
  text-align: left;
  display: flex;
}

#content-header img {
  max-height: 84px;
}

#content-header h1 {
  padding: 0 24px;
}

#content-header h1::after {
  content: 'État des services';
  color: var(--theme-text-header);
  margin-left: 32px;
  font-family: sans-serif;
}

/* =========================================
   BOÎTES DE CONTENU (BOXES)
   ========================================= */
.row.DetailArea .Box:first-child {
  display: none;
}

.Box {
  border-radius: 8px;
}

.Box .Title h1 {
  background-color: var(--theme-primary);
  color: var(--bg-white);
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

/* =========================================
   PANNEAUX (PANELS)
   ========================================= */
.panel {
  border-color: var(--theme-primary) !important;
}

.panel .panel-heading {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* =========================================
   TABLEAUX
   ========================================= */
.Box .table-responsive > .table {
  border-radius: 0 0 8px 8px;
}

.Box .table-responsive > .table thead th {
  font-weight: bold;
}

.Box .table-responsive > table tbody tr:last-child {
  border-radius: 0 0 8px 8px !important;
}

.table-striped > tbody > tr.Clickable:nth-child(2n of .Clickable) {
  background-color: var(--table-row-alt);
}

.table-striped > tbody > tr.Clickable:hover {
  background-color: var(--table-row-hover) !important;
}

.table-striped > tbody > tr#DisplayBlock {
  background-color: var(--bg-white);
}

/* =========================================
   INDICATEURS DE STATUT (TEXTE ET BLOBS)
   ========================================= */
.up {
  color: var(--status-up-text);
}

.down {
  color: var(--status-down-text);
}

.Blob.Blob_Green {
  background: var(--blob-green-start);
  background: linear-gradient(45deg, var(--blob-green-start) 0%, var(--blob-green-end) 100%);
  border: none;
}

.Blob_Yellow {
  background: var(--blob-yellow-start);
  background: linear-gradient(45deg, var(--blob-yellow-start) 0%, var(--blob-yellow-end) 100%);
  border: none;
}

.Blob_Red {
  background: var(--blob-red-start);
  background: linear-gradient(45deg, var(--blob-red-start) 0%, var(--blob-red-end) 100%);
  border: none;
}

/* =========================================
   PAGINATION
   ========================================= */
#DisplayBlock .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 8px 16px !important;
  background: var(--theme-primary) !important;
  border-radius: 32px !important;
  line-height: 16px !important;
  color: var(--bg-white) !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
  margin: 0 8px !important;
}

#DisplayBlock .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;
}

#DisplayBlock .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#HistoryTable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--btn-disabled) !important;
}