* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* =========================
   PAGE DE CONNEXION
========================= */

.login-page {

  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      rgba(0, 44, 76, 0.30),
      rgba(0, 44, 76, 0.30)
    ),
    url("/images/fond-login.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 25px;
}
.login-wrapper {
  width: 100%;
  max-width: 470px;
}

.login-card {
  background: #ffffff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.28);
}

/* LOGO */

.brand {
  padding: 35px 40px 25px;

  border-bottom: 1px solid #e8edf1;
}

.brand-main {
  color: #00345b;

  font-size: 38px;
  font-weight: 900;

  letter-spacing: -2px;
}

.brand-main span {
  font-weight: 400;
}

.brand-badge {
  display: inline-block;

  margin-top: 14px;

  padding: 7px 12px;

  background: #ffdb00;
  color: #00345b;

  border-radius: 20px;

  font-size: 11px;
  font-weight: 800;
}

/* CONTENU */

.login-content {
  padding: 32px 40px 35px;
}

.login-content h1 {
  margin: 0 0 7px;

  color: #00345b;

  font-size: 27px;
}

.subtitle {
  margin: 0 0 30px;

  color: #74808b;

  font-size: 14px;
}

/* FORMULAIRE */

.form-group {
  margin-bottom: 19px;
}

.form-group label {
  display: block;

  margin-bottom: 8px;

  color: #34495e;

  font-size: 13px;
  font-weight: 700;
}

.form-group input {
  width: 100%;

  height: 48px;

  padding: 0 14px;

  border: 1px solid #ccd6df;
  border-radius: 9px;

  background: #ffffff;

  color: #202124;

  font-size: 15px;

  outline: none;

  transition: 0.2s;
}

.form-group input:focus {
  border-color: #0067a7;

  box-shadow:
    0 0 0 3px rgba(0, 103, 167, 0.12);
}

/* BOUTON */

.login-btn {
  width: 100%;

  height: 50px;

  margin-top: 5px;

  border: 0;
  border-radius: 9px;

  background: #003e68;

  color: #ffffff;

  font-size: 15px;
  font-weight: 800;

  cursor: pointer;

  transition: 0.2s;
}

.login-btn:hover {
  background: #005486;

  transform: translateY(-1px);
}

/* ERREUR */

.error-message {
  margin-bottom: 20px;

  padding: 12px 14px;

  border-radius: 8px;

  background: #fff0f0;

  color: #b42318;

  font-size: 13px;
}

/* PIED */

.login-footer {
  padding: 18px;

  background: #f6f8fa;

  border-top: 1px solid #e5e9ed;

  color: #89939c;

  text-align: center;

  font-size: 11px;
}

/* MOBILE */

@media (max-width: 550px) {

  .login-page {
    padding: 15px;
  }

  .brand {
    padding: 28px 25px 22px;
  }

  .brand-main {
    font-size: 31px;
  }

  .login-content {
    padding: 27px 25px 30px;
  }
}




.app-page {
  min-height: 100vh;
  margin: 0;
  background: #eef2f6;
  font-family: Arial, sans-serif;
  color: #202124;
}

.app-header {
  background: #00345b;
  color: white;
  min-height: 76px;
  padding: 0 35px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.app-brand {
  display: flex;
  flex-direction: column;
}

.app-brand strong {
  font-size: 24px;
}

.app-brand strong span {
  font-weight: 400;
}

.app-brand small {
  color: #c7d5df;
  margin-top: 3px;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-user a {
  color: white;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.35);
  padding: 9px 12px;
  border-radius: 7px;
}

.app-user a:hover {
  background: rgba(255,255,255,.1);
}

.agences-container {
  max-width: 1200px;
  margin: auto;
  padding: 45px 30px;
}

.agences-container h1 {
  color: #00345b;
  font-size: 32px;
}

.agences-container p {
  color: #687681;
  font-size: 15px;
}


/* =========================
   NAVIGATION APPLICATION
========================= */

.app-nav {
  height: 58px;

  display: flex;
  align-items: stretch;

  padding: 0 28px;

  background: #06466f;

  border-top:
    1px solid rgba(255,255,255,.08);
}

.nav-tab {
  padding: 0 20px;

  border: 0;
  border-bottom:
    4px solid transparent;

  background: transparent;

  color: white;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
}

.nav-tab:hover {
  background:
    rgba(255,255,255,.06);
}

.nav-tab.active {
  background:
    rgba(255,255,255,.08);

  border-bottom-color:
    #ffdb00;
}


/* =========================
   ESPACE DE TRAVAIL
========================= */

.workspace {
  width: min(1500px, calc(100% - 40px));

  margin: 0 auto;

  padding: 35px 0;
}

.workspace-tab {
  display: none;
}

.workspace-tab.active {
  display: block;
}

.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 25px;
}

.workspace-header h1 {
  margin: 0 0 5px;

  color: #00345b;

  font-size: 28px;
}

.workspace-header p {
  margin: 0;

  color: #6d7984;

  font-size: 14px;
}

.workspace-actions {
  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;
}


/* =========================
   BOUTONS
========================= */

.btn {
  min-height: 41px;

  padding: 0 14px;

  border: 0;
  border-radius: 8px;

  font-weight: 700;

  cursor: pointer;
}

.btn.primary {
  background: #198754;
  color: white;
}

.btn.secondary {
  background: white;

  color: #00345b;

  border:
    1px solid #d5dde4;
}


/* =========================
   CHANGEMENT DE VUE
========================= */

.view-switch {
  display: flex;

  padding: 4px;

  background: white;

  border:
    1px solid #d5dde4;

  border-radius: 9px;
}

.view-switch button {
  padding: 8px 12px;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color: #65727e;

  font-weight: 700;

  cursor: pointer;
}

.view-switch button.active {
  background: #003f69;

  color: white;
}


/* =========================
   FILTRES
========================= */

.filters {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 25px;
}

.filters input,
.filters select {
  min-width: 220px;

  height: 42px;

  padding: 0 12px;

  border:
    1px solid #d3dce4;

  border-radius: 8px;

  background: white;

  color: #263238;
}


/* =========================
   PLACEHOLDER
========================= */

.planning-placeholder {
  padding: 75px 25px;

  background: white;

  border:
    1px dashed #cbd6df;

  border-radius: 13px;

  text-align: center;
}

.placeholder-icon {
  font-size: 42px;

  margin-bottom: 13px;
}

.planning-placeholder h2 {
  margin: 0 0 8px;

  color: #00345b;
}

.planning-placeholder p {
  max-width: 620px;

  margin: 0 auto;

  color: #77838d;

  line-height: 1.6;
}


/* MOBILE */

@media(max-width:800px) {

  .app-nav {
    overflow-x: auto;

    padding: 0 10px;
  }

  .nav-tab {
    white-space: nowrap;
  }

  .workspace {
    width: calc(100% - 24px);

    padding: 22px 0;
  }

  .workspace-header {
    align-items: flex-start;

    flex-direction: column;
  }
}





/* ==================================================
   PLANNING - STYLE MODERNE
================================================== */

.workspace {
  width: min(1500px, calc(100% - 40px));
  margin: 0 auto;
  padding: 35px 0;
}

.workspace-tab {
  display: none;
}

.workspace-tab.active {
  display: block;
}

.workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.workspace-header h1 {
  margin: 0 0 5px;
  color: #00345b;
  font-size: 28px;
}

.workspace-header p {
  margin: 0;
  color: #6c7884;
}

.workspace-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}


/* ==================================================
   NAVIGATION
================================================== */

.app-nav {
  display: flex;
  background: #064f79;
  padding: 0 12px;
}

.nav-tab {
  border: none;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: transparent;
  color: white;
  padding: 15px 20px;
  font-weight: 700;
  cursor: pointer;
}

.nav-tab:hover {
  background: rgba(255,255,255,.06);
}

.nav-tab.active {
  background: rgba(255,255,255,.08);
  border-bottom-color: #ffdb00;
}


/* ==================================================
   BOUTONS
================================================== */

.btn {
  border: none;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn.primary {
  background: #198754;
  color: white;
}

.btn.secondary {
  background: white;
  color: #00345b;
  border: 1px solid #d4dde5;
}

.btn:hover {
  opacity: .92;
}


/* ==================================================
   SWITCH CARTES / TABLEAU
================================================== */

.view-switch {
  display: flex;
  background: white;
  border: 1px solid #d4dde5;
  border-radius: 9px;
  padding: 4px;
}

.view-switch button {
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6c7884;
  padding: 8px 13px;
  font-weight: 700;
  cursor: pointer;
}

.view-switch button.active {
  background: #003f69;
  color: white;
}


/* ==================================================
   FILTRES
================================================== */

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filters input,
.filters select {
  min-width: 220px;
  height: 42px;
  background: white;
  border: 1px solid #d3dce4;
  border-radius: 8px;
  padding: 0 12px;
  color: #25313b;
}

.planning-info {
  margin-bottom: 12px;
  color: #687681;
  font-size: 13px;
}


/* ==================================================
   VUE CARTES
================================================== */

.cards-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.planning-card {
  background: white;
  border: 1px solid #e0e6eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 5px 18px rgba(0,0,0,.07);
  transition: .18s;
}

.planning-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 9px 26px rgba(0,0,0,.11);
}

.card-accent {
  height: 5px;
  background: #003f69;
}

.card-content {
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.card-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-chauffeur {
  color: #00345b;
  font-size: 18px;
}

.card-header small {
  color: #71808b;
  font-size: 12px;
}

.card-sms {
  padding: 6px 9px;
  border-radius: 20px;
  background: #eef1f3;
  color: #59636c;
  font-size: 11px;
  font-weight: 700;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  padding: 10px;
  border: 1px solid #e6ebef;
  border-radius: 8px;
  background: #f7f9fb;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 5px;
  color: #7a8793;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.field div {
  color: #27343d;
  font-size: 13px;
}

.convocation-field {
  background: #fff2c7;
}

.ligne-masquee {
  opacity: .55;
}


/* ==================================================
   VUE TABLEAU
================================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: white;
  border: 1px solid #d5dde4;
  border-radius: 10px;
  box-shadow:
    0 4px 15px rgba(0,0,0,.05);
}

.planning-table {
  width: 100%;
  min-width: 1350px;
  border-collapse: collapse;
  table-layout: fixed;
}

.planning-table thead {
  background: #eef2f5;
}

.planning-table th {
  padding: 11px 8px;
  color: #263540;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid #d2dae0;
  border-bottom: 1px solid #c7d0d7;
}

.planning-table td {
  padding: 11px 9px;
  background: white;
  border-right: 1px solid #e0e5e9;
  border-bottom: 1px solid #e0e5e9;
  font-size: 13px;
  vertical-align: middle;
}

.planning-table tbody tr:hover td {
  background: #f7fafc;
}

.planning-table th:nth-child(1) {
  width: 130px;
}

.planning-table th:nth-child(2) {
  width: 180px;
}

.planning-table th:nth-child(3) {
  width: 210px;
}

.planning-table th:nth-child(4) {
  width: 185px;
}

.planning-table th:nth-child(5) {
  width: 160px;
}

.planning-table th:nth-child(6) {
  width: 145px;
}

.planning-table th:nth-child(7) {
  width: 260px;
}

.planning-table th:nth-child(8) {
  width: 120px;
}

.chauffeur-cell {
  color: #123047;
}

.convocation-cell {
  background: #fff2c7 !important;
  font-weight: 700;
  white-space: pre-wrap;
}

.sms-ok {
  background: #dff3e5 !important;
  color: #126b31;
  font-weight: 700;
}

.sms-error {
  background: #fde0df !important;
  color: #b3261e;
  font-weight: 700;
}


/* ==================================================
   PLACEHOLDER LOGS
================================================== */

.planning-placeholder {
  padding: 70px 25px;
  border: 1px dashed #cbd6df;
  border-radius: 13px;
  background: white;
  text-align: center;
}

.placeholder-icon {
  margin-bottom: 12px;
  font-size: 40px;
}

.planning-placeholder h2 {
  margin: 0 0 8px;
  color: #00345b;
}

.planning-placeholder p {
  color: #77838d;
}


/* ==================================================
   MOBILE
================================================== */

@media(max-width: 800px) {

  .workspace {
    width: calc(100% - 24px);
    padding: 22px 0;
  }

  .workspace-header {
    flex-direction: column;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card-fields {
    grid-template-columns: 1fr;
  }

  .app-nav {
    overflow-x: auto;
  }

  .nav-tab {
    white-space: nowrap;
  }
}










/* ==================================================
   TABLEAU MODIFIABLE - DESIGN PRO
================================================== */

#planningTable {
  border-collapse: separate;
  border-spacing: 0;

  width: 100%;
  min-width: 1450px;

  background: white;

  border-radius: 12px;
  overflow: hidden;
}


/* EN-TÊTE */

#planningTable thead th {
  height: 46px;

  padding: 10px 12px;

  background: #eef3f7;

  color: #243746;

  font-size: 12px;
  font-weight: 800;

  text-align: center;

  border-right: 1px solid #d7dfe5;
  border-bottom: 1px solid #c9d2d9;
}


/* LIGNES */

#planningTable tbody tr {
  transition: .15s;
}

#planningTable tbody tr:hover {
  background: #f8fbfd;
}


/* CELLULES */

#planningTable tbody td {
  padding: 0;

  background: white;

  border-right: 1px solid #e2e7eb;
  border-bottom: 1px solid #e2e7eb;

  vertical-align: middle;
}


/* INPUTS */

.table-input,
.table-textarea,
.table-select {
  width: 100%;

  min-height: 54px;

  padding: 10px 12px;

  border: none;

  background: transparent;

  color: #202b33;

  font-size: 13px;

  outline: none;

  transition: .15s;
}


/* EFFET AU SURVOL */

.table-input:hover,
.table-textarea:hover,
.table-select:hover {
  background: #f7fafc;
}


/* EFFET LORSQUE L'ON ÉCRIT */

.table-input:focus,
.table-textarea:focus,
.table-select:focus {
  background: white;

  box-shadow:
    inset 0 0 0 2px #1a73e8;

  position: relative;

  z-index: 2;
}


/* CHAUFFEUR */

.chauffeur {
  font-weight: 700;

  color: #00345b;
}


/* CONVOCATION */

.convocation-cell {
  background: #fff2c7 !important;
}

.convocation-cell:hover {
  background: #ffedaa !important;
}

.table-textarea {
  min-height: 68px;

  resize: vertical;

  font-weight: 700;

  line-height: 1.35;
}


/* SMS */

.table-select.sms {
  font-weight: 700;

  cursor: pointer;
}


/* ACTIONS */

.actions-cell {
  width: 78px;

  padding: 7px !important;

  text-align: center;

  background: #f8fafb !important;
}

.btn-save-row {
  width: 42px;
  height: 38px;

  padding: 0;

  border: none;

  border-radius: 8px;

  background: #0878d1;

  color: white;

  font-size: 17px;

  cursor: pointer;

  transition: .15s;
}

.btn-save-row:hover {
  background: #005fa8;

  transform: translateY(-1px);
}

.btn-save-row:disabled {
  opacity: .6;

  cursor: wait;
}


/* LARGEUR COLONNES */

#planningTable th:nth-child(1) {
  width: 135px;
}

#planningTable th:nth-child(2) {
  width: 180px;
}

#planningTable th:nth-child(3) {
  width: 215px;
}

#planningTable th:nth-child(4) {
  width: 190px;
}

#planningTable th:nth-child(5) {
  width: 165px;
}

#planningTable th:nth-child(6) {
  width: 150px;
}

#planningTable th:nth-child(7) {
  width: 280px;
}

#planningTable th:nth-child(8) {
  width: 125px;
}

#planningTable th:nth-child(9) {
  width: 80px;
}


/* PREMIÈRE ET DERNIÈRE COLONNE */

#planningTable th:first-child {
  border-top-left-radius: 10px;
}

#planningTable th:last-child {
  border-top-right-radius: 10px;
}


/* TABLE WRAPPER */

#vueTableau.table-wrapper {
  border: 1px solid #d7dfe5;

  border-radius: 12px;

  overflow-x: auto;

  background: white;

  box-shadow:
    0 5px 20px rgba(0,0,0,.055);
}


/* BARRE INFO */

.planning-info {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-bottom: 11px;

  padding: 6px 10px;

  background: #edf4f8;

  color: #4b606e;

  border-radius: 20px;

  font-size: 12px;
}

.planning-info strong {
  color: #00345b;
}


/* LIGNE ENVOYÉE */

#planningTable tbody tr:has(.sms option:checked[value="✅ Envoyé"]) td {
  background-color: #edf8f0;
}


/* MOBILE */

@media(max-width:800px) {

  .table-input,
  .table-textarea,
  .table-select {
    font-size: 12px;
  }

}













/* ==================================================
   CARTES MODIFIABLES
================================================== */

.card-title-edit {
  flex: 1;
}

.card-input,
.card-type-input,
.card-textarea,
.card-sms-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
}

.card-title-edit .chauffeur {
  color: #00345b;
  font-size: 18px;
  font-weight: 800;
}

.card-type-input {
  margin-top: 4px;
  color: #75818b;
  font-size: 12px;
}

.field .card-input {
  color: #27343d;
  font-size: 13px;
}

.card-textarea {
  min-height: 65px;
  resize: vertical;
  color: #27343d;
  font-size: 13px;
  font-weight: 700;
}

.card-input:focus,
.card-type-input:focus,
.card-textarea:focus {
  background: white;
  box-shadow: inset 0 0 0 2px #1a73e8;
  border-radius: 5px;
}

.card-sms-select {
  width: auto;
  min-width: 95px;
  padding: 7px 8px;
  border-radius: 18px;
  background: #eef1f3;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.card-actions {
  margin-top: 14px;
  display: flex;
}

.btn-save-card {
  width: 100%;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: #0878d1;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.btn-save-card:hover {
  background: #0066b5;
}

.btn-save-card:disabled {
  opacity: .6;
}




.select-cell {
  width: 50px !important;
  text-align: center;
  background: #f7f9fb !important;
}

.ligne-checkbox,
#cocherTout {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.btn.danger {
  background: #dc3545;
  color: white;
}

.btn.danger:hover {
  background: #b92d3a;
}

.btn.danger:disabled {
  opacity: .4;
  cursor: default;
}

.actions-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.btn-delete-row {
  width: 42px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: #dc3545;
  color: white;
  cursor: pointer;
}




/* ==========================================
   DRAG & DROP
========================================== */

.drag-column,
.drag-cell {
  width: 45px !important;
  min-width: 45px !important;
  text-align: center;
  background: #f5f8fa !important;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 34px;

  border-radius: 7px;

  color: #6b7c88;

  font-size: 18px;

  cursor: grab;

  user-select: none;
}

.drag-handle:hover {
  background: #e5edf3;
  color: #003f69;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-ghost {
  opacity: .35;
}

.drag-chosen td {
  background: #eaf4fb !important;
}

.drag-moving {
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
}

#ordreStatus {
  margin-left: 5px;
  color: #198754;
  font-weight: 700;
}






/* ==================================================
   PALETTE COULEURS
================================================== */

.color-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 16px;
  padding: 10px 12px;

  background: white;

  border: 1px solid #d8e0e6;
  border-radius: 10px;

  box-shadow:
    0 3px 10px rgba(0,0,0,.04);
}

#celluleSelectionInfo {
  margin-right: 8px;

  color: #6d7983;
  font-size: 12px;
}

.color-choice {
  width: 30px;
  height: 30px;

  border: 1px solid #bfc9d1;
  border-radius: 7px;

  cursor: pointer;
}

.color-choice:hover {
  transform: scale(1.1);
}

#couleurPersonnalisee {
  width: 38px;
  height: 32px;

  border: none;
  background: transparent;

  cursor: pointer;
}

.btn-color-reset {
  min-height: 32px;

  padding: 0 10px;

  border: 1px solid #d3dce3;
  border-radius: 7px;

  background: white;
  color: #596773;

  cursor: pointer;
}


/* CASE SELECTIONNEE */

.color-cell-selected {
  position: relative;

  box-shadow:
    inset 0 0 0 3px #1677d2 !important;
}

.editable-cell {
  cursor: pointer;
}

.card-color-cell {
  transition: .15s;
  cursor: pointer;
}


/* IMPORTANT :
   l'input reste transparent pour voir
   la couleur de la cellule */

.editable-cell input,
.editable-cell textarea,
.editable-cell select,

.card-color-cell input,
.card-color-cell textarea,
.card-color-cell select {
  background: transparent !important;
}








.btn-hide-row {
  width: 42px;
  height: 38px;

  border: none;
  border-radius: 8px;

  background: #f0ad00;
  color: #1d2730;

  cursor: pointer;
}

.btn-hide-row:hover {
  background: #d99b00;
}


.btn-hide-card {
  flex: 1;

  min-height: 40px;

  border: none;
  border-radius: 8px;

  background: #f0ad00;
  color: #1d2730;

  font-weight: 700;

  cursor: pointer;
}


.ligne-masquee {
  opacity: .55;
}

.ligne-masquee td {
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(0,0,0,.025) 8px,
      rgba(0,0,0,.025) 16px
    );
}



/* ==================================================
   SMS
================================================== */

.btn-sms-row {
  width: 42px;
  height: 38px;

  border: none;
  border-radius: 8px;

  background: #198754;
  color: white;

  font-size: 16px;

  cursor: pointer;
}

.btn-sms-row:hover {
  background: #146c43;
}

.btn-sms-row:disabled {
  opacity: .55;
  cursor: wait;
}


.btn-sms-card {
  flex: 1;

  min-height: 40px;

  border: none;
  border-radius: 8px;

  background: #198754;
  color: white;

  font-weight: 700;

  cursor: pointer;
}

.btn-sms-card:hover {
  background: #146c43;
}

.btn-sms-card:disabled {
  opacity: .55;
}


/* ==================================================
   LOGS SMS
================================================== */

.sms-logs-table {
  width: 100%;
  min-width: 1100px;

  border-collapse: collapse;
}

.sms-logs-table th {
  padding: 11px;

  background: #eef3f7;

  border-bottom:
    1px solid #ccd6dd;

  text-align: left;

  font-size: 12px;
}

.sms-logs-table td {
  padding: 11px;

  border-bottom:
    1px solid #e2e7eb;

  vertical-align: top;

  font-size: 12px;
}

.log-date {
  white-space: nowrap;
  color: #687681;
}

.log-message {
  min-width: 300px;

  white-space: pre-wrap;

  line-height: 1.45;
}

.log-success {
  color: #137333;

  font-weight: 800;
}

.log-error {
  color: #b3261e;

  font-weight: 800;
}

.log-error-text {
  color: #b3261e;

  max-width: 350px;

  word-break: break-word;
}


/* ==========================================
   TABLEAU REDIMENSIONNABLE
========================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.planning-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.planning-table th {
  position: relative;
  overflow: visible;
}

.planning-table td {
  overflow: hidden;
}

.column-resizer {
  position: absolute;

  top: 0;
  right: -5px;

  width: 10px;
  height: 100%;

  cursor: col-resize;

  z-index: 999;

  user-select: none;
}

.column-resizer::after {
  content: "";

  position: absolute;

  top: 15%;
  bottom: 15%;
  left: 4px;

  width: 2px;

  background: transparent;
}

.column-resizer:hover::after {
  background: #0077b6;
}

body.resizing-column {
  cursor: col-resize !important;
  user-select: none !important;
}

body.resizing-column * {
  cursor: col-resize !important;
}

/* Les champs remplissent toute la largeur disponible */

.planning-table input,
.planning-table textarea,
.planning-table select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}





/* ==========================================
   UTILISER TOUTE LA LARGEUR DE L'ECRAN
========================================== */

.workspace {
  width: calc(100% - 40px);
  max-width: none;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.workspace-header,
.color-toolbar,
.filters,
.planning-info,
.table-wrapper,
.cards-grid {
  width: 100%;
  max-width: none;
}

/* Le tableau prend toute la largeur disponible */
#planningTable {
  min-width: 100%;
}

/* Sur très grand écran on garde juste un petit espace sur les côtés */
@media (min-width: 1600px) {

  .workspace {
    width: calc(100% - 60px);
    padding-left: 30px;
    padding-right: 30px;
  }

}




.login-logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login-logo-img {
  display: block;
  width: 100%;
  max-width: 310px;
  height: auto;
  object-fit: contain;
}


/* ============================= */
/* LOGO PAGE DE CONNEXION */
/* ============================= */

.brand-logo {
  width: 100%;
  margin-bottom: 15px;
}

.brand-logo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: contain;
}



/* ==================================================
   PAGE SELECTION AGENCE
================================================== */

.agency-page {
  width: calc(100% - 80px);
  max-width: 1500px;

  margin: 0 auto;

  padding: 55px 0 80px;
}


.agency-page-header {
  margin-bottom: 30px;
}


.agency-page-header h1 {
  margin: 0 0 8px;

  color: #00395f;

  font-size: 32px;
  font-weight: 800;
}


.agency-page-header p {
  margin: 0;

  color: #687783;

  font-size: 14px;
}

/* Logos des filiales sur la page de sélection des agences. */
.filiale-heading {
  margin-top: 28px;
  text-align: left;
}

.filiale-logo-title {
  margin: 0;
  line-height: 0;
}

.filiale-logo {
  display: block;
  width: auto;
  max-width: min(360px, 75vw);
  height: 54px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 650px) {
  .filiale-logo {
    max-width: 72vw;
    height: 42px;
  }
}


/* ==================================================
   GRILLE
================================================== */

.agency-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(320px, 1fr)
    );

  gap: 25px;
}


/* ==================================================
   CARTE
================================================== */

.agency-card {
  display: flex;
  flex-direction: column;

  min-height: 340px;

  background: #ffffff;

  border: 1px solid #d8e1e8;
  border-radius: 16px;

  overflow: hidden;

  box-shadow:
    0 8px 25px
    rgba(0, 44, 76, 0.08);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.agency-card-active:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 35px
    rgba(0, 44, 76, 0.15);
}


/* petite barre couleur */

.agency-card-active {
  border-top: 5px solid #004c78;
}


.agency-card-disabled {
  border-top: 5px solid #c7ced4;

  opacity: 0.75;
}


/* ==================================================
   HAUT CARTE
================================================== */

.agency-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 24px 10px;
}


.agency-icon {
  width: 54px;
  height: 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: #eef5f9;

  font-size: 28px;
}


.agency-status {
  padding: 7px 12px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
}


.agency-status-online {
  background: #e7f6ed;
  color: #158347;
}


.agency-status-soon {
  background: #eef1f4;
  color: #687783;
}


/* ==================================================
   CONTENU
================================================== */

.agency-card-content {
  flex: 1;

  padding: 10px 24px 25px;
}


.agency-card-content h2 {
  margin: 0 0 8px;

  color: #00395f;

  font-size: 28px;
  font-weight: 800;
}


.agency-description {
  margin: 0 0 22px;

  color: #687783;

  font-size: 14px;
}


.agency-info {
  display: flex;
  flex-direction: column;

  gap: 12px;

  color: #334b5c;

  font-size: 14px;
}


/* ==================================================
   BAS DE CARTE
================================================== */

.agency-card-footer {
  padding: 18px 24px;

  border-top: 1px solid #e3e8ec;

  background: #f8fafb;
}


.agency-open-btn {
  width: 100%;

  min-height: 46px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  padding: 0 18px;

  border: none;
  border-radius: 9px;

  background: #004c78;

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  cursor: pointer;

  transition: background 0.2s ease;
}


.agency-open-btn:hover {
  background: #00395f;
}


.agency-open-btn.disabled {
  justify-content: center;

  background: #d9dee2;

  color: #7e898f;

  cursor: not-allowed;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

  .agency-page {
    width: calc(100% - 30px);

    padding-top: 30px;
  }


  .agency-grid {
    grid-template-columns: 1fr;
  }


  .agency-page-header h1 {
    font-size: 26px;
  }

}


/* =========================================
   CARTES AGENCES AVEC PHOTO
========================================= */

.agency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 25px;
}


/* Carte */

.agency-photo-card {
  position: relative;

  display: block;

  height: 320px;

  border-radius: 18px;

  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  text-decoration: none;

  box-shadow:
    0 8px 25px
    rgba(0, 44, 76, 0.15);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* Photo de l'agence Angers */

.agency-angers {
  background-image:
    url("/images/agence-angers.jpg");
}


/* Voile sur la photo */

.agency-photo-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

  padding: 30px;

  box-sizing: border-box;

  background:
    linear-gradient(
      to top,
      rgba(0, 44, 76, 0.90) 0%,
      rgba(0, 44, 76, 0.30) 50%,
      rgba(0, 44, 76, 0.05) 100%
    );
}


/* Texte */

.agency-photo-text h2 {
  margin: 0;

  color: white;

  font-size: 34px;
  font-weight: 800;
}


.agency-photo-text p {
  margin: 5px 0 0;

  color: rgba(255, 255, 255, 0.90);

  font-size: 16px;
}


/* Animation */

.agency-photo-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 16px 35px
    rgba(0, 44, 76, 0.25);
}


/* Mobile */

@media (max-width: 700px) {

  .agency-grid {
    grid-template-columns: 1fr;
  }

  .agency-photo-card {
    height: 240px;
  }

}


/* ==================================================
   ADMINISTRATION
================================================== */

.admin-create-card {
  margin-bottom: 25px;
  padding: 25px;

  background: white;

  border:
    1px solid #d8e1e8;

  border-radius: 14px;

  box-shadow:
    0 6px 20px
    rgba(0, 44, 76, 0.08);
}


.admin-create-card h2 {
  margin-top: 0;

  color: #00395f;
}


.admin-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(180px, 1fr)
    );

  gap: 18px;

  margin-bottom: 20px;
}


.admin-form-grid label {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 700;

  color: #536673;
}


.admin-form-grid input,
.admin-form-grid select {
  width: 100%;

  box-sizing: border-box;

  padding: 11px;

  border:
    1px solid #cfd9df;

  border-radius: 8px;
}


.admin-agences {
  display: flex;

  gap: 18px;

  flex-wrap: wrap;

  margin: 15px 0 20px;
}


.admin-agences-list {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


@media (max-width: 900px) {

  .admin-form-grid {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 600px) {

  .admin-form-grid {
    grid-template-columns:
      1fr;
  }

}


.agency-paris {
  background-image:
    url("/images/agence-paris.jpg");
}

/* =========================================================
   ROUXEL UI 2026 - THEME MODERNE
   Cette section est volontairement placee en fin de fichier
   afin de moderniser l'interface sans modifier le JS/EJS.
   ========================================================= */

:root {
  --rxl-navy: #073755;
  --rxl-blue: #075a82;
  --rxl-blue-light: #08789e;
  --rxl-yellow: #ffdb00;
  --rxl-bg: #f4f7fa;
  --rxl-card: #ffffff;
  --rxl-text: #173042;
  --rxl-muted: #71808c;
  --rxl-border: #dce5eb;
  --rxl-success: #178a55;
  --rxl-danger: #df4c5b;
  --rxl-radius: 12px;
}

body,
.app-page {
  background: var(--rxl-bg);
  color: var(--rxl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* BANNIERE */
.app-header {
  min-height: 105px;
  padding: 18px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, #073755 0%, #075a82 55%, #08789e 100%);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 24px rgba(0,41,68,.16);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo img {
  display: block;
  width: 135px;
  height: 68px;
  object-fit: contain;
}

.app-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-brand strong {
  margin: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1;
}

.app-brand strong span {
  color: var(--rxl-yellow);
  font-weight: 500;
}

.app-brand small {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-name,
.app-user > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: white;
  font-size: 14px;
  font-weight: 650;
}

.header-btn,
.app-user a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.055);
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.header-btn:hover,
.app-user a:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.50);
  transform: translateY(-1px);
}

/* NAVIGATION */
.app-nav {
  min-height: 58px;
  height: auto;
  display: flex;
  align-items: stretch;
  padding: 0 22px;
  background: #075478;
  border: 0;
  box-shadow: 0 4px 14px rgba(0,44,76,.10);
}

.nav-tab {
  position: relative;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 21px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.nav-tab:hover {
  background: rgba(255,255,255,.07);
  color: white;
}

.nav-tab.active {
  background: rgba(255,255,255,.10);
  color: white;
  border-bottom-color: var(--rxl-yellow);
}

/* ESPACE PRINCIPAL */
.workspace {
  width: calc(100% - 64px);
  max-width: none;
  margin: 0 auto;
  padding: 30px 0 50px;
}

.workspace-tab.active { display: block; }

.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding: 0 4px;
}

.workspace-header h1 {
  margin: 0 0 5px;
  color: #063a5b;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.workspace-header p {
  margin: 0;
  color: var(--rxl-muted);
  font-size: 13px;
}

.workspace-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* BOUTONS */
.btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 11px rgba(0,44,76,.12);
}

.btn.primary { background: var(--rxl-success); color: white; }
.btn.secondary { background: white; color: #123e5a; border: 1px solid var(--rxl-border); }
.btn.danger { background: #ed8792; color: white; }
.btn.danger:not(:disabled):hover { background: #df6471; }
.btn:disabled { opacity: .48; cursor: not-allowed; }

/* SWITCH DE VUE */
.view-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--rxl-border);
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 7px rgba(0,44,76,.035);
}

.view-switch button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #687984;
  font-weight: 700;
  cursor: pointer;
}

.view-switch button.active {
  background: linear-gradient(135deg, #074b71, #086a94);
  color: white;
  box-shadow: 0 3px 8px rgba(0,58,94,.18);
}

/* PALETTE COULEURS */
.color-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--rxl-border);
  border-radius: 11px;
  background: white;
  box-shadow: 0 3px 12px rgba(0,44,76,.035);
}

.color-toolbar strong { color: #16384f; }
#celluleSelectionInfo { color: #71818d; }

.color-choice {
  transition: transform .15s ease, box-shadow .15s ease;
}

.color-choice:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

/* FILTRES */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filters input,
.filters select {
  height: 41px;
  padding: 0 13px;
  border: 1px solid var(--rxl-border);
  border-radius: 9px;
  background: white;
  color: #263c4c;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.filters input:focus,
.filters select:focus {
  border-color: #4b9cc5;
  box-shadow: 0 0 0 3px rgba(8,120,158,.10);
}

/* COMPTEUR */
.planning-info {
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 9px;
  background: linear-gradient(90deg, #edf5f8, #f7fafc);
  color: #637480;
  font-size: 12px;
}

.planning-info strong { color: #075176; }

/* TABLEAU */
#vueTableau.table-wrapper,
.table-wrapper {
  border: 1px solid #d9e3e9;
  border-radius: 13px;
  background: white;
  overflow-x: auto;
  box-shadow: 0 5px 20px rgba(0,44,76,.055);
}

#planningTable {
  border-collapse: separate;
  border-spacing: 0;
  background: white;
}

#planningTable thead th {
  height: 44px;
  padding: 10px 11px;
  background: linear-gradient(180deg, #eff5f8 0%, #e8f0f4 100%);
  color: #16384f;
  border-right: 1px solid #d7e1e7;
  border-bottom: 1px solid #ccd8df;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

#planningTable tbody tr {
  transition: background .15s ease, box-shadow .15s ease;
}

#planningTable tbody tr:hover td { filter: brightness(.985); }

.table-input,
.table-textarea,
.table-select {
  min-height: 55px;
  padding: 10px 11px;
  color: #233946;
  font-size: 12px;
  transition: box-shadow .15s ease, background .15s ease;
}

.table-input:focus,
.table-textarea:focus,
.table-select:focus {
  box-shadow: inset 0 0 0 2px #1686bd;
  background: rgba(255,255,255,.72) !important;
}

/* ACTIONS */
.actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px;
}

.btn-save-row,
.btn-sms-row,
.btn-hide-row,
.btn-delete-row {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-save-row:hover,
.btn-sms-row:hover,
.btn-hide-row:hover,
.btn-delete-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 9px rgba(0,0,0,.12);
}

.btn-save-row { background: #147fc0; }
.btn-sms-row { background: #19915c; }
.btn-hide-row { background: #efa900; }
.btn-delete-row { background: #e04b5b; }

/* DRAG */
.drag-cell { background: #f7fafc !important; }
.drag-handle { border-radius: 8px; transition: color .15s ease, background .15s ease; }
.drag-handle:hover { background: #e5f0f5; color: #0878a2; }

/* CONVOCATION */
.convocation-cell { background: #fff2c7 !important; }

/* CARTES PLANNING */
.planning-card {
  border-color: var(--rxl-border);
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,44,76,.06);
}

.planning-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,44,76,.11);
}

/* LOGS SMS */
.sms-logs-table th {
  background: linear-gradient(180deg, #eff5f8, #e9f1f5);
  color: #173b53;
}

.sms-logs-table tbody tr:hover td {
  background: #f8fbfd;
}

/* ADMIN */
.admin-create-card {
  border-color: var(--rxl-border);
  border-radius: 15px;
  box-shadow: 0 7px 24px rgba(0,44,76,.065);
}

/* AGENCES */
.agency-photo-card {
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,44,76,.14);
}

.agency-photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 17px 38px rgba(0,44,76,.22);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .app-header {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
  }

  .app-user {
    width: 100%;
    flex-wrap: wrap;
  }

  .header-logo img { width: 110px; }

  .app-nav {
    overflow-x: auto;
    padding: 0 8px;
  }

  .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .workspace {
    width: calc(100% - 24px);
    padding-top: 22px;
  }

  .workspace-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   ROUXEL UI - THEME MODERNE 2026
   ========================================================= */

:root {
  --rxl-navy: #07324d;
  --rxl-blue: #0a5d84;
  --rxl-blue-2: #0f7aa3;
  --rxl-yellow: #ffd91a;

  --rxl-bg: #f5f7fa;
  --rxl-surface: #ffffff;

  --rxl-border: #dce5eb;

  --rxl-text: #16364b;
  --rxl-muted: #71818c;

  --rxl-green: #13955f;
  --rxl-red: #e15a67;

  --rxl-shadow:
    0 8px 30px rgba(0, 45, 70, 0.08);
}


/* =========================================================
   PAGE
   ========================================================= */

body,
.app-page {
  background: #f5f7fa;

  color: var(--rxl-text);

  font-family:
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
  min-height: 96px;

  padding: 18px 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      110deg,
      #062f49 0%,
      #07577c 58%,
      #08799d 100%
    );

  border: 0;

  box-shadow:
    0 5px 22px
    rgba(0, 44, 70, 0.16);
}


/* =========================================================
   MARQUE
   ========================================================= */

.app-brand strong {
  font-size: 28px;
  font-weight: 800;

  letter-spacing: -0.5px;
}


.app-brand strong span {
  color: var(--rxl-yellow);

  font-weight: 500;
}


.app-brand small {
  margin-top: 6px;

  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size: 13px;
}


/* =========================================================
   UTILISATEUR
   ========================================================= */

.app-user {
  gap: 12px;
}


.app-user > span,
.user-name {
  padding: 10px 14px;

  border-radius: 10px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color: white;

  font-weight: 600;
}


.app-user a,
.header-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;

  padding: 0 15px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-radius: 10px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  color: white;

  text-decoration: none;

  font-weight: 600;

  transition:
    transform .16s ease,
    background .16s ease;
}


.app-user a:hover,
.header-btn:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.13
    );

  transform: translateY(-1px);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.app-nav {
  min-height: 60px;

  display: flex;
  align-items: center;

  padding: 0 26px;

  background: #ffffff;

  border-bottom:
    1px solid #dce5eb;

  box-shadow:
    0 3px 12px
    rgba(
      0,
      44,
      70,
      0.06
    );
}


.nav-tab {
  min-height: 60px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  border: 0;
  border-bottom: 3px solid transparent;

  background: transparent;

  color: #516675;

  font-size: 13px;
  font-weight: 700;

  transition:
    color .16s ease,
    background .16s ease;
}


.nav-tab:hover {
  background: #f6f9fb;

  color: #07577c;
}


.nav-tab.active {
  background: #f2f7fa;

  color: #07577c;

  border-bottom-color:
    var(--rxl-yellow);
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
  width: calc(100% - 64px);

  margin: 0 auto;

  padding: 34px 0 55px;
}


/* =========================================================
   ENTETE PLANNING
   ========================================================= */

.workspace-header {
  margin-bottom: 22px;

  padding: 0 6px;
}


.workspace-header h1 {
  margin: 0 0 6px;

  color: #073755;

  font-size: 29px;
  font-weight: 800;

  letter-spacing: -0.5px;
}


.workspace-header p {
  color: #7a8791;

  font-size: 13px;
}


/* =========================================================
   BOUTONS PRINCIPAUX
   ========================================================= */

.btn {
  min-height: 42px;

  padding: 0 16px;

  border-radius: 10px;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}


.btn:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 4px 12px
    rgba(
      0,
      44,
      70,
      0.12
    );
}


.btn.primary {
  background:
    linear-gradient(
      135deg,
      #15905a,
      #16a067
    );

  color: white;
}


.btn.secondary {
  background: white;

  color: #173d56;

  border:
    1px solid
    #d7e1e7;
}


.btn.danger {
  background:
    linear-gradient(
      135deg,
      #ea7a85,
      #e45e6d
    );

  color: white;
}


/* =========================================================
   SWITCH CARTES / TABLEAU
   ========================================================= */

.view-switch {
  padding: 4px;

  border:
    1px solid
    #d7e1e7;

  border-radius: 11px;

  background: #ffffff;

  box-shadow:
    0 2px 8px
    rgba(
      0,
      44,
      70,
      0.04
    );
}


.view-switch button {
  min-height: 34px;

  padding: 0 13px;

  border-radius: 8px;
}


.view-switch button.active {
  background:
    linear-gradient(
      135deg,
      #064f76,
      #08719a
    );

  color: white;

  box-shadow:
    0 3px 8px
    rgba(
      0,
      70,
      110,
      0.18
    );
}


/* =========================================================
   PALETTE COULEURS
   ========================================================= */

.color-toolbar {
  padding: 12px 14px;

  border:
    1px solid
    #dce5eb;

  border-radius: 12px;

  background: white;

  box-shadow:
    0 4px 14px
    rgba(
      0,
      44,
      70,
      0.04
    );
}


/* =========================================================
   FILTRES
   ========================================================= */

.filters {
  gap: 10px;
}


.filters input,
.filters select {
  height: 43px;

  padding: 0 14px;

  border:
    1px solid
    #d7e1e7;

  border-radius: 10px;

  background: white;

  color: #263e4e;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.filters input:focus,
.filters select:focus {
  outline: none;

  border-color: #4b9cc0;

  box-shadow:
    0 0 0 3px
    rgba(
      8,
      120,
      158,
      0.10
    );
}


/* =========================================================
   COMPTEUR
   ========================================================= */

.planning-info {
  padding: 8px 12px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #edf4f7,
      #f6f9fb
    );

  color: #637581;

  font-size: 12px;
}


/* =========================================================
   CONTENEUR TABLEAU
   ========================================================= */

.table-wrapper {
  border:
    1px solid
    #d7e2e8;

  border-radius: 14px;

  overflow-x: auto;

  background: white;

  box-shadow:
    0 8px 26px
    rgba(
      0,
      44,
      70,
      0.06
    );
}


/* =========================================================
   TABLEAU
   ========================================================= */

#planningTable {
  background: white;
}


/* EN-TETE */

#planningTable thead th {
  height: 48px;

  background:
    linear-gradient(
      180deg,
      #f1f6f8,
      #e8f0f4
    );

  color: #17384d;

  border-right:
    1px solid
    #d8e2e8;

  border-bottom:
    1px solid
    #ccd8df;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .1px;
}


/* LIGNES */

#planningTable tbody td {
  border-right:
    1px solid
    #e4eaee;

  border-bottom:
    1px solid
    #e4eaee;
}


#planningTable tbody tr:hover td {
  filter: brightness(.985);
}


/* =========================================================
   CHAMPS TABLEAU
   ========================================================= */

.table-input,
.table-textarea,
.table-select {
  padding: 11px 12px;

  color: #263d4c;

  font-size: 12px;
}


.table-input:focus,
.table-textarea:focus,
.table-select:focus {
  background:
    rgba(
      255,
      255,
      255,
      0.82
    ) !important;

  box-shadow:
    inset 0 0 0 2px
    #1284b9;
}


/* =========================================================
   BOUTONS LIGNES
   ========================================================= */

.btn-save-row,
.btn-sms-row,
.btn-hide-row,
.btn-delete-row {
  width: 36px;
  height: 36px;

  border-radius: 9px;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.btn-save-row:hover,
.btn-sms-row:hover,
.btn-hide-row:hover,
.btn-delete-row:hover {
  transform: translateY(-2px);

  box-shadow:
    0 5px 10px
    rgba(
      0,
      0,
      0,
      0.12
    );
}


/* =========================================================
   CARTES
   ========================================================= */

.planning-card {
  border-radius: 16px;

  border:
    1px solid
    #dce5eb;

  box-shadow:
    0 6px 20px
    rgba(
      0,
      44,
      70,
      0.06
    );
}


.planning-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(
      0,
      44,
      70,
      0.10
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .workspace {
    width: calc(100% - 24px);
  }

  .app-nav {
    overflow-x: auto;
  }

  .nav-tab {
    flex: 0 0 auto;
  }

}

/* =====================================================================
   PLANNING SPOT — DESIGN MODERNE 2026
   ===================================================================== */

#tab-spots.workspace-panel.active {
  background:
    radial-gradient(circle at 95% 0%, rgba(47, 144, 214, .055), transparent 28%),
    #ffffff;
}

/* Résumé de semaine */
.spot-table-shell {
  overflow: hidden !important;
  border: 1px solid #dce7f0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(27, 74, 117, .07) !important;
}

.spot-week-summary {
  min-height: 66px;
  padding: 11px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background:
    linear-gradient(
      135deg,
      #f8fbfe 0%,
      #eef7fd 100%
    );

  border-bottom: 1px solid #dce7ef;
}

.spot-week-summary-left,
.spot-week-summary-right {
  display: flex;
  align-items: center;
  gap: 11px;
}

.spot-week-icon {
  width: 39px;
  height: 39px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: #ffffff;
  border: 1px solid #dce7ef;

  box-shadow: 0 4px 12px rgba(25, 78, 125, .07);
}

.spot-week-summary-left small {
  display: block;
  margin-bottom: 2px;

  color: #8093a4;

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .45px;
}

#spotWeekTitle {
  color: #0a568f !important;

  font-size: 14px;
  font-weight: 800;
}

.spot-week-count {
  padding: 7px 11px;

  border-radius: 999px;

  background: #e5f4ff;
  color: #47708d;

  font-size: 11px;
  font-weight: 650;
}

.spot-week-count strong {
  color: #0a609d;
}

.spot-save-status {
  color: #16915f;

  font-size: 11px;
  font-weight: 700;
}


/* Barre de couleur contextuelle */
#tab-spots .color-toolbar {
  min-height: 58px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  padding: 10px 14px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fbfd
    );

  border: 1px solid #dce7ef;
  border-radius: 13px;

  box-shadow: 0 5px 16px rgba(24, 73, 116, .045);
}

#spotCellInfo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;

  margin-right: 4px;
}

.spot-selection-label {
  color: #7d8f9d;

  font-size: 11px;
  font-weight: 600;
}

.spot-selection-value {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  background: #eaf5fd;
  color: #0c578e;

  font-size: 11px;
  font-weight: 750;
}


/* Tableau */
#spotTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;

  background: #ffffff;
}

#spotTable thead th {
  position: relative;

  height: 58px;

  padding: 10px 12px;

  background:
    linear-gradient(
      180deg,
      #f8fbfe 0%,
      #edf4f8 100%
    ) !important;

  color: #173f61 !important;

  border-right: 1px solid #dce6ed !important;
  border-bottom: 1px solid #cedce6 !important;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .05px;
}

#spotTable .spot-day-header {
  min-width: 170px;
}

#spotTable .spot-day-name {
  display: block;

  color: #153f62;

  font-size: 12px;
  font-weight: 800;
}

#spotTable .spot-day-date {
  display: inline-flex !important;

  margin-top: 4px;
  padding: 2px 7px;

  border-radius: 999px;

  background: #e3f0f9;
  color: #4a7696 !important;

  font-size: 9px !important;
  font-weight: 750 !important;
}

#spotTable .spot-day-header.spot-day-today::after {
  content: "";

  position: absolute;

  left: 28%;
  right: 28%;
  bottom: 0;

  height: 3px;

  border-radius: 3px 3px 0 0;

  background: #ffd400;
}

#spotTable .spot-day-header.spot-day-today .spot-day-date {
  background: #fff3b3;
  color: #735d00 !important;
}


/* Lignes */
#spotTable tbody tr.spot-row {
  transition:
    transform .14s ease,
    box-shadow .14s ease;
}

#spotTable tbody tr.spot-row:hover {
  position: relative;
  z-index: 2;

  box-shadow:
    inset 3px 0 0 #4ba3df,
    0 3px 12px rgba(26, 75, 118, .055);
}

#spotTable tbody td {
  min-height: 64px;

  padding: 7px 9px !important;

  background: #ffffff;

  border-right: 1px solid #e6edf2 !important;
  border-bottom: 1px solid #e6edf2 !important;

  vertical-align: middle;
}

#spotTable tbody tr:nth-child(even) td:not(.spot-cell-section) {
  background-color: #fbfdff;
}


/* Drag */
#spotTable .drag-cell {
  background: #f7fafc !important;

  text-align: center;
}

#spotTable .spot-drag-handle {
  width: 31px;
  height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #758998;

  cursor: grab;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

#spotTable .spot-drag-handle:hover {
  background: #e5f1f8;
  color: #0b659d;

  transform: scale(1.04);
}


/* Champs */
#spotTable .spot-field,
#spotTable .spot-input {
  width: 100%;

  min-height: 42px;

  padding: 9px 11px;

  border: 1px solid #dae5ed !important;
  border-radius: 9px !important;

  background: #f9fbfd !important;

  color: #27465e;

  font-family: inherit;
  font-size: 12px;

  outline: none;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

#spotTable .spot-input {
  resize: vertical;
}

#spotTable .spot-field:hover,
#spotTable .spot-input:hover {
  background: #ffffff !important;
  border-color: #c5d6e2 !important;
}

#spotTable .spot-field:focus,
#spotTable .spot-input:focus {
  position: relative;
  z-index: 3;

  background: #ffffff !important;

  border-color: #3e9ddd !important;

  box-shadow:
    0 0 0 3px rgba(62, 157, 221, .11) !important;

  transform: translateY(-1px);
}


/* Secteur = badge / pilule */
#spotTable .spot-cell-section {
  background:
    linear-gradient(
      135deg,
      #f4e4ec,
      #efdce6
    ) !important;
}

#spotTable .spot-cell-section .spot-section {
  min-height: 36px;

  background: rgba(255,255,255,.82) !important;

  border-color: rgba(165, 103, 132, .14) !important;

  color: #74445c;

  font-weight: 750;
}


/* Chauffeur plus visible */
#spotTable .spot-cell-chauffeur .spot-chauffeur {
  color: #0b538a;

  font-weight: 700;
}


/* Base plus discrète */
#spotTable .spot-cell-base .spot-base {
  color: #4c6477;

  font-weight: 650;
}


/* Jours */
#spotTable .spot-cell-lundi,
#spotTable .spot-cell-mardi,
#spotTable .spot-cell-mercredi,
#spotTable .spot-cell-jeudi,
#spotTable .spot-cell-vendredi {
  background: #fcfdff;
}


/* Notes */
#spotTable .spot-cell-notes {
  background: #fffdf7 !important;
}

#spotTable .spot-cell-notes .spot-notes {
  background: #fffdf9 !important;

  border-color: #eadfc3 !important;
}


/* Case sélectionnée */
#spotTable .spot-color-selected {
  position: relative;

  box-shadow:
    inset 0 0 0 2px #1688d2,
    inset 0 0 0 5px rgba(22,136,210,.08) !important;
}

#spotTable .spot-color-selected::after {
  content: "✓";

  position: absolute;

  top: 5px;
  right: 5px;

  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #1688d2;
  color: white;

  font-size: 10px;
  font-weight: 900;

  pointer-events: none;
}


/* Actions */
#spotTable tbody td:last-child {
  background: #f8fafc !important;
}

#spotTable .actions-row {
  display: flex;
  justify-content: center;

  gap: 7px;
}

#spotTable .btn-save-row,
#spotTable .btn-delete-row {
  width: 38px;
  height: 38px;

  border-radius: 10px;

  box-shadow: none;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

#spotTable .btn-save-row:hover,
#spotTable .btn-delete-row:hover {
  transform: translateY(-2px);

  box-shadow: 0 5px 12px rgba(25, 71, 111, .13);
}


/* Dark mode */
html.dark-mode .spot-table-shell {
  background: #17232d !important;
  border-color: #2d404d !important;
}

html.dark-mode .spot-week-summary {
  background:
    linear-gradient(
      135deg,
      #1d2c38,
      #182631
    );

  border-bottom-color: #314451;
}

html.dark-mode .spot-week-icon {
  background: #223441;
  border-color: #334957;
}

html.dark-mode .spot-week-summary-left small {
  color: #8096a7;
}

html.dark-mode #spotWeekTitle {
  color: #79bdf0 !important;
}

html.dark-mode .spot-week-count {
  background: #20394b;
  color: #9db5c6;
}

html.dark-mode .spot-week-count strong {
  color: #7cc2f4;
}

html.dark-mode #spotCellInfo .spot-selection-label {
  color: #9aabba;
}

html.dark-mode #spotCellInfo .spot-selection-value {
  background: #203b4e;
  color: #b9ddf7;
}

html.dark-mode #spotTable .spot-day-name {
  color: #deebf4;
}

html.dark-mode #spotTable .spot-day-date {
  background: #263c4b;
  color: #a9c3d5 !important;
}

html.dark-mode #spotTable .spot-field,
html.dark-mode #spotTable .spot-input {
  background: #111b24 !important;
  color: #e0ebf2 !important;
  border-color: #304552 !important;
}

html.dark-mode #spotTable .spot-cell-section {
  background:
    linear-gradient(
      135deg,
      #3a2b35,
      #31272f
    ) !important;
}

html.dark-mode #spotTable .spot-cell-section .spot-section {
  background: #221d22 !important;
  color: #efbfd6 !important;
  border-color: #513947 !important;
}

html.dark-mode #spotTable .spot-cell-chauffeur .spot-chauffeur {
  color: #90caf4 !important;
}

html.dark-mode #spotTable .spot-cell-base .spot-base {
  color: #b4c6d3 !important;
}

html.dark-mode #spotTable .spot-cell-notes {
  background: #29261f !important;
}

html.dark-mode #spotTable .spot-cell-notes .spot-notes {
  background: #211f1a !important;
  border-color: #514b3b !important;
}


/* Responsive */
@media (max-width: 900px) {
  .spot-week-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .spot-week-summary-right {
    width: 100%;
  }

  #tab-spots .color-toolbar {
    align-items: flex-start;
  }
}

/* =====================================================================
   ROUXEL PREMIUM TRANSPORT DASHBOARD
   Design clair inspiré d'un logiciel de dispatch / flotte moderne
   ===================================================================== */

.rxl-premium-dashboard {
  --rxl-navy-950: #062d53;
  --rxl-navy-900: #083a6b;
  --rxl-navy-800: #0b4d86;
  --rxl-blue-600: #176fbd;
  --rxl-blue-500: #258bd8;
  --rxl-blue-100: #eaf4fc;
  --rxl-yellow: #ffd400;
  --rxl-bg: #f4f8fc;
  --rxl-card: #ffffff;
  --rxl-text: #133a61;
  --rxl-muted: #70869a;
  --rxl-border: #dfe8f0;
  --rxl-green: #0f9964;
  --rxl-red: #ed5d6d;
  --rxl-shadow: 0 12px 35px rgba(17, 64, 105, .08);

  background: var(--rxl-bg) !important;
}

/* ------------------------- Header ------------------------- */
.rxl-premium-dashboard .app-header.modern-header {
  min-height: 118px;
  padding: 20px 34px;

  background:
    linear-gradient(
      110deg,
      #083764 0%,
      #0a4d86 52%,
      #0d68ad 100%
    ) !important;

  color: white;
  box-shadow: 0 7px 22px rgba(4, 42, 77, .20);
}

.rxl-premium-dashboard .modern-header::before {
  content: "";
  position: absolute;
  left: 32%;
  right: 17%;
  bottom: 26px;
  height: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 28px,
      rgba(255,212,0,.94) 28px 48px
    );
  opacity: .9;
  border: 0;
  border-radius: 0;
  transform: skewX(-22deg);
}

.rxl-premium-dashboard .modern-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, transparent 0 47%, rgba(255,255,255,.035) 47% 48%, transparent 48% 100%);
  pointer-events: none;
}

.rxl-premium-dashboard .app-brand strong,
.rxl-premium-dashboard .app-brand small {
  color: #fff !important;
}

.rxl-premium-dashboard .app-brand strong span {
  color: var(--rxl-yellow) !important;
}

.rxl-premium-dashboard .user-chip {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: var(--rxl-text) !important;
}

.rxl-premium-dashboard .user-details strong {
  color: #123c65 !important;
}

.rxl-premium-dashboard .user-details small {
  color: #7c8ea0 !important;
}

.rxl-premium-dashboard .app-user a.agency-btn {
  background: rgba(255,255,255,.94);
  color: #154f82;
  border-color: rgba(255,255,255,.7);
}

.rxl-premium-dashboard .app-user a.logout-btn {
  background: #064680;
  border-color: rgba(255,255,255,.12);
}

/* ------------------------- Shell + Sidebar ------------------------- */
.rxl-premium-dashboard .app-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: calc(100vh - 118px);
}

.rxl-premium-dashboard .app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;

  min-height: calc(100vh - 118px);
  padding: 22px 14px;

  display: flex;
  flex-direction: column;
  gap: 26px;

  background:
    linear-gradient(
      180deg,
      #073663 0%,
      #062e57 100%
    );

  box-shadow: 6px 0 20px rgba(7, 47, 86, .08);
}

.rxl-premium-dashboard .app-nav {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

.rxl-premium-dashboard .nav-tab {
  min-height: 52px;
  width: 100%;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;

  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;

  color: #dceaf6;
  background: transparent;

  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.rxl-premium-dashboard .nav-tab:hover {
  background: rgba(255,255,255,.07);
  color: white;
}

.rxl-premium-dashboard .nav-tab.active {
  background: rgba(255,255,255,.08);
  color: var(--rxl-yellow);
  border-left-color: var(--rxl-yellow);
  border-bottom: 0;
}

.rxl-premium-dashboard .nav-tab.active::before,
.rxl-premium-dashboard .nav-tab.active::after {
  display: none;
}

.rxl-premium-dashboard .nav-icon {
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.rxl-premium-dashboard .fleet-sidebar-card {
  margin-top: auto;
  padding: 16px 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;

  background: rgba(255,255,255,.055);
  color: white;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.rxl-premium-dashboard .fleet-sidebar-icon {
  font-size: 24px;
  margin-bottom: 3px;
}

.rxl-premium-dashboard .fleet-sidebar-card strong {
  font-size: 13px;
}

.rxl-premium-dashboard .fleet-sidebar-card span,
.rxl-premium-dashboard .fleet-sidebar-card small {
  color: #bfd5e6;
  font-size: 11px;
}

.rxl-premium-dashboard .fleet-sidebar-separator {
  width: 38px;
  height: 2px;
  margin: 8px 0;
  border-radius: 2px;
  background: var(--rxl-yellow);
}

/* ------------------------- Workspace ------------------------- */
.rxl-premium-dashboard .workspace.modern-workspace {
  width: 100%;
  margin: 0;
  padding: 26px;
  background:
    linear-gradient(180deg, #f6f9fd 0%, #f3f7fb 100%);
}

.rxl-premium-dashboard .workspace-panel.active {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid #e0e9f1;
  background: #fff !important;
  box-shadow: var(--rxl-shadow);
}

/* ------------------------- SPOT Header ------------------------- */
.rxl-premium-dashboard .spot-dashboard-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 22px;
  align-items: center;

  margin-bottom: 18px;
  padding: 0;
}

.rxl-premium-dashboard .workspace-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rxl-premium-dashboard .workspace-title-icon {
  width: 46px;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: #edf6fd;
  color: #0e68ae;
  border: 1px solid #dceaf5;

  font-size: 22px;
}

.rxl-premium-dashboard .spot-dashboard-header .workspace-title-block {
  padding-left: 0;
}

.rxl-premium-dashboard .spot-dashboard-header .workspace-title-block::before {
  display: none;
}

.rxl-premium-dashboard .workspace-title-block h1 {
  margin: 0 0 4px;
  color: #113e6a;
  font-size: 25px;
  font-weight: 800;
}

.rxl-premium-dashboard .workspace-title-block p {
  margin: 0;
  color: #7b8fa2;
  font-size: 12px;
}

.rxl-premium-dashboard .spot-dashboard-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rxl-premium-dashboard .spot-week-select-box {
  min-height: 42px;
  min-width: 275px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 9px;

  border: 1px solid #dce6ef;
  border-radius: 10px;

  background: white;
  box-shadow: 0 3px 10px rgba(21, 67, 107, .035);
}

.rxl-premium-dashboard .spot-week-select-icon {
  color: #0b619f;
  font-size: 17px;
}

.rxl-premium-dashboard .spot-week-select-box select {
  width: 100%;
  height: 40px;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700;
  color: #173f66;
}

.rxl-premium-dashboard .btn {
  min-height: 42px;
  border-radius: 9px;
}

.rxl-premium-dashboard .btn.primary {
  background:
    linear-gradient(135deg, #0d5f9f, #06487f);
}

.rxl-premium-dashboard .btn-outline-danger {
  background: white !important;
  color: #dc3e52 !important;
  border: 1px solid #ee8592 !important;
}

/* ------------------------- SPOT Toolbar ------------------------- */
.rxl-premium-dashboard .spot-context-toolbar {
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(380px, 1.2fr);

  padding: 0;
  margin-bottom: 18px;

  border: 1px solid #e0e8ef;
  border-radius: 13px;
  overflow: hidden;

  background: white;
  box-shadow: 0 5px 16px rgba(24, 67, 104, .035);
}

.rxl-premium-dashboard .spot-color-tools,
.rxl-premium-dashboard .spot-selection-panel {
  min-height: 68px;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  gap: 9px;
}

.rxl-premium-dashboard .spot-color-tools {
  border-right: 1px solid #e5ebf1;
}

.rxl-premium-dashboard .spot-color-tools strong {
  margin-right: 7px;
  color: #163f66;
}

.rxl-premium-dashboard .spot-selection-panel {
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.rxl-premium-dashboard .spot-selection-panel small {
  color: #758a9e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .25px;
}

.rxl-premium-dashboard #spotCellInfo {
  color: #124f80 !important;
  font-size: 12px;
  font-weight: 700;
}

.rxl-premium-dashboard .color-choice {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  border: 1px solid rgba(18,55,84,.12);
  box-shadow: 0 2px 7px rgba(22,63,97,.05);
}

.rxl-premium-dashboard .spot-color-tools input[type="color"] {
  width: 33px;
  height: 33px;
  padding: 2px;
  border-radius: 9px;
  border: 1px solid #dbe5ed;
  background: white;
}

.rxl-premium-dashboard .btn-color-reset {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}

/* ------------------------- Table ------------------------- */
.rxl-premium-dashboard #spotTableWrapper {
  border-radius: 14px !important;
  border-color: #dde7ef !important;
  box-shadow: 0 8px 22px rgba(24, 67, 104, .055) !important;
}

.rxl-premium-dashboard .spot-week-summary {
  background: #f8fbfd;
}

.rxl-premium-dashboard #spotTable thead th {
  height: 56px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%) !important;
  color: #153e62 !important;
  font-size: 11px;
  text-transform: none;
}

.rxl-premium-dashboard #spotTable .spot-day-name {
  font-size: 12px;
}

.rxl-premium-dashboard #spotTable .spot-day-date {
  background: transparent;
  color: #678198 !important;
  padding: 0;
}

.rxl-premium-dashboard #spotTable tbody td {
  padding: 8px 9px !important;
}

.rxl-premium-dashboard #spotTable .spot-field,
.rxl-premium-dashboard #spotTable .spot-input {
  min-height: 46px;
  background: #fbfdff !important;
  border-color: #dfe8ef !important;
  border-radius: 8px !important;
}

.rxl-premium-dashboard #spotTable .spot-field:focus,
.rxl-premium-dashboard #spotTable .spot-input:focus {
  background: white !important;
  border-color: #287fca !important;
  box-shadow: 0 0 0 3px rgba(40,127,202,.10) !important;
}

.rxl-premium-dashboard #spotTable .spot-cell-section {
  background: white !important;
}

.rxl-premium-dashboard #spotTable .spot-cell-section .spot-section {
  width: auto;
  min-width: 88px;
  min-height: 32px;
  border: 0 !important;
  border-radius: 7px !important;
  background: #eaf3fb !important;
  color: #174d7e;
  text-align: center;
  font-weight: 800;
}

.rxl-premium-dashboard #spotTable .spot-cell-chauffeur .spot-chauffeur {
  color: #153f67 !important;
  font-weight: 750;
}

.rxl-premium-dashboard #spotTable tbody tr:hover {
  box-shadow: inset 3px 0 0 #2f8fd7;
}

/* ------------------------- Footer helpers ------------------------- */
.rxl-premium-dashboard .spot-info-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  padding: 16px 18px;

  border: 1px solid #e1e9f0;
  border-radius: 13px;

  background: #fbfdff;
}

.rxl-premium-dashboard .spot-info-card {
  min-height: 62px;
  padding: 0 18px;

  display: flex;
  align-items: center;
  gap: 13px;

  border-right: 1px solid #e6edf3;
}

.rxl-premium-dashboard .spot-info-card:first-child {
  padding-left: 0;
}

.rxl-premium-dashboard .spot-info-card:last-child {
  border-right: 0;
  padding-right: 0;
}

.rxl-premium-dashboard .spot-info-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf6fd;
  color: #0d65a8;

  font-size: 18px;
}

.rxl-premium-dashboard .spot-info-card strong {
  display: block;
  margin-bottom: 4px;
  color: #183e60;
  font-size: 12px;
}

.rxl-premium-dashboard .spot-info-card p {
  margin: 0;
  color: #70879a;
  font-size: 10px;
  line-height: 1.45;
}

/* ------------------------- Dark mode ------------------------- */
html.dark-mode .rxl-premium-dashboard .app-sidebar {
  background: linear-gradient(180deg, #071a2b, #061522);
}

html.dark-mode .rxl-premium-dashboard .workspace.modern-workspace {
  background: #0e1720;
}

html.dark-mode .rxl-premium-dashboard .workspace-panel.active {
  background: #141f29 !important;
  border-color: #2a3c49;
}

html.dark-mode .rxl-premium-dashboard .workspace-title-block h1 {
  color: #ecf6fd;
}

html.dark-mode .rxl-premium-dashboard .spot-week-select-box,
html.dark-mode .rxl-premium-dashboard .spot-context-toolbar,
html.dark-mode .rxl-premium-dashboard .spot-color-tools,
html.dark-mode .rxl-premium-dashboard .spot-selection-panel,
html.dark-mode .rxl-premium-dashboard .spot-info-footer {
  background: #18242e;
  border-color: #2d3f4c;
}

html.dark-mode .rxl-premium-dashboard .spot-color-tools {
  border-right-color: #2d3f4c;
}

html.dark-mode .rxl-premium-dashboard .spot-week-select-box select {
  color: #e3edf4 !important;
}

html.dark-mode .rxl-premium-dashboard .spot-info-card {
  border-right-color: #2c3d49;
}

html.dark-mode .rxl-premium-dashboard .spot-info-card strong {
  color: #dceaf3;
}

html.dark-mode .rxl-premium-dashboard .spot-info-card p {
  color: #91a5b4;
}

/* ------------------------- Responsive ------------------------- */
@media (max-width: 1180px) {
  .rxl-premium-dashboard .app-shell {
    grid-template-columns: 158px minmax(0, 1fr);
  }

  .rxl-premium-dashboard .app-sidebar {
    padding-left: 9px;
    padding-right: 9px;
  }

  .rxl-premium-dashboard .nav-tab {
    padding-left: 10px;
    padding-right: 10px;
  }

  .rxl-premium-dashboard .spot-dashboard-header {
    grid-template-columns: 1fr;
  }

  .rxl-premium-dashboard .spot-dashboard-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 850px) {
  .rxl-premium-dashboard .app-shell {
    display: block;
  }

  .rxl-premium-dashboard .app-sidebar {
    position: static;
    min-height: auto;
    padding: 9px 10px;
  }

  .rxl-premium-dashboard .app-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .rxl-premium-dashboard .nav-tab {
    width: auto;
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .rxl-premium-dashboard .nav-tab.active {
    border-bottom-color: var(--rxl-yellow);
  }

  .rxl-premium-dashboard .fleet-sidebar-card {
    display: none;
  }

  .rxl-premium-dashboard .workspace.modern-workspace {
    padding: 14px;
  }

  .rxl-premium-dashboard .spot-context-toolbar {
    grid-template-columns: 1fr;
  }

  .rxl-premium-dashboard .spot-color-tools {
    border-right: 0;
    border-bottom: 1px solid #e5ebf1;
  }

  .rxl-premium-dashboard .spot-info-footer {
    grid-template-columns: 1fr;
  }

  .rxl-premium-dashboard .spot-info-card {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid #e6edf3;
  }

  .rxl-premium-dashboard .spot-info-card:last-child {
    border-bottom: 0;
  }
}

/* =====================================================================
   CORRECTIONS LAYOUT - SIDEBAR FIXE + SUPPRESSION DES TIRETS JAUNES
   ===================================================================== */

/* Sidebar fixe qui suit le scroll */
.rxl-premium-dashboard .app-shell {
  display: block !important;
  min-height: calc(100vh - 118px);
}

.rxl-premium-dashboard .app-sidebar {
  position: fixed !important;
  top: 118px;
  left: 0;
  bottom: 0;

  width: 190px;
  min-height: auto !important;

  overflow-y: auto;
  z-index: 100;
}

.rxl-premium-dashboard .workspace.modern-workspace {
  width: auto !important;
  margin-left: 190px !important;
  padding: 26px !important;
  min-height: calc(100vh - 118px);
}

/* La carte flotte reste bien en bas de la sidebar */
.rxl-premium-dashboard .fleet-sidebar-card {
  margin-top: 28px;
}

/* Supprime les anciens pseudo-éléments pouvant créer des tirets jaunes */
.rxl-premium-dashboard #planningTable tbody tr::before,
.rxl-premium-dashboard #planningTable tbody tr::after,
.rxl-premium-dashboard #planningTable td::before,
.rxl-premium-dashboard #planningTable td::after,
.rxl-premium-dashboard .planning-table tbody tr::before,
.rxl-premium-dashboard .planning-table tbody tr::after,
.rxl-premium-dashboard .planning-table td::before,
.rxl-premium-dashboard .planning-table td::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

/* Supprime toute ligne jaune parasite dans le tableau principal */
.rxl-premium-dashboard #planningTable tbody tr,
.rxl-premium-dashboard #planningTable tbody td {
  background-image: none !important;
}

/* Hover propre sur la ligne */
.rxl-premium-dashboard #planningTable tbody tr:hover td {
  background-color: #f8fbfe !important;
}

/* Conserve les couleurs fonctionnelles explicites */
.rxl-premium-dashboard #planningTable .type-cell,
.rxl-premium-dashboard #planningTable .editable-cell[style*="background"] {
  background-color: inherit;
}

/* Zone centrale blanche continue */
.rxl-premium-dashboard .workspace-panel.active {
  min-width: 0;
}

/* Responsive */
@media (max-width: 1180px) {
  .rxl-premium-dashboard .app-sidebar {
    width: 160px;
  }

  .rxl-premium-dashboard .workspace.modern-workspace {
    margin-left: 160px !important;
  }
}

@media (max-width: 850px) {
  .rxl-premium-dashboard .app-sidebar {
    position: static !important;
    width: auto;
    top: auto;
    left: auto;
    bottom: auto;
    overflow: visible;
  }

  .rxl-premium-dashboard .workspace.modern-workspace {
    margin-left: 0 !important;
  }
}

/* =====================================================================
   MATCH MAQUETTE VALIDEE — SIDEBAR PLEINE HAUTEUR + TOPBAR BLANCHE
   ===================================================================== */

html,
body {
  min-height: 100%;
}

body.rxl-premium-dashboard {
  margin: 0;
  background: #f5f8fc !important;
}


/* =========================
   STRUCTURE GENERALE
   ========================= */

.rxl-premium-dashboard .mockup-shell {
  display: block !important;
  min-height: 100vh !important;
}


/* =========================
   SIDEBAR PLEINE HAUTEUR
   ========================= */

.rxl-premium-dashboard .mockup-sidebar {
  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 205px !important;
  min-height: 100vh !important;

  padding: 22px 14px 18px !important;

  display: flex !important;
  flex-direction: column !important;

  overflow-y: auto !important;

  z-index: 1000;

  background:
    linear-gradient(
      180deg,
      #073868 0%,
      #06305a 55%,
      #052848 100%
    ) !important;

  box-shadow:
    5px 0 20px rgba(7, 48, 88, .10) !important;
}


/* Marque dans la sidebar */

.rxl-premium-dashboard .sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 10px;

  padding: 2px 10px 23px;

  margin-bottom: 8px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}


.rxl-premium-dashboard .sidebar-logo {
  width: 105px;
  height: 55px;

  display: flex;
  align-items: center;
}


.rxl-premium-dashboard .sidebar-logo img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  filter:
    brightness(0) invert(1)
    drop-shadow(0 4px 9px rgba(0,0,0,.12));
}


.rxl-premium-dashboard .sidebar-brand-text {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.rxl-premium-dashboard .sidebar-brand-text strong {
  color: #ffffff;

  font-size: 22px;
  font-weight: 850;

  letter-spacing: -.4px;

  white-space: nowrap;
}


.rxl-premium-dashboard .sidebar-brand-text strong span {
  color: #ffd400;

  font-weight: 600;
}


.rxl-premium-dashboard .sidebar-brand-text small {
  color: #d1e3f2;

  font-size: 11px;
  font-weight: 600;
}


/* Navigation */

.rxl-premium-dashboard .mockup-sidebar .app-nav {
  display: flex !important;
  flex-direction: column !important;

  gap: 8px !important;

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}


.rxl-premium-dashboard .mockup-sidebar .nav-tab {
  width: 100% !important;
  min-height: 52px !important;

  padding: 0 14px !important;

  justify-content: flex-start !important;

  gap: 12px !important;

  border: 0 !important;
  border-left: 3px solid transparent !important;

  border-radius: 10px !important;

  background: transparent !important;

  color: #d4e3ef !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  text-align: left !important;
}


.rxl-premium-dashboard .mockup-sidebar .nav-tab:hover {
  background:
    rgba(255,255,255,.055) !important;

  color: white !important;
}


.rxl-premium-dashboard .mockup-sidebar .nav-tab.active {
  background:
    linear-gradient(
      90deg,
      rgba(35,132,210,.32),
      rgba(35,132,210,.16)
    ) !important;

  color: #ffd400 !important;

  border-left-color: #ffd400 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}


.rxl-premium-dashboard .mockup-sidebar .nav-tab.active::before,
.rxl-premium-dashboard .mockup-sidebar .nav-tab.active::after {
  display: none !important;
}


.rxl-premium-dashboard .mockup-sidebar .nav-icon {
  width: 23px;

  color: inherit;

  font-size: 17px;
}


/* Carte flotte */

.rxl-premium-dashboard .mockup-sidebar .fleet-sidebar-card {
  margin-top: auto !important;

  padding: 15px 13px !important;

  border:
    1px solid rgba(255,255,255,.14) !important;

  border-radius: 15px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.035)
    ) !important;

  color: white !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* =========================
   CONTENU A DROITE
   ========================= */

.rxl-premium-dashboard .mockup-content {
  min-height: 100vh;

  margin-left: 205px;

  background:
    linear-gradient(
      180deg,
      #f8fbfe 0%,
      #f3f7fb 100%
    );
}


/* =========================
   TOPBAR BLANCHE
   ========================= */

.rxl-premium-dashboard .app-topbar {
  position: sticky;

  top: 0;

  min-height: 82px;

  padding: 14px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  z-index: 900;

  background:
    rgba(255,255,255,.96);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid #e4ebf2;

  box-shadow:
    0 4px 18px rgba(28, 67, 103, .045);
}


.rxl-premium-dashboard .topbar-page h1 {
  margin: 0;

  color: #173c62;

  font-size: 24px;
  font-weight: 800;

  letter-spacing: -.35px;
}


.rxl-premium-dashboard .topbar-user {
  display: flex;
  align-items: center;

  gap: 10px;
}


.rxl-premium-dashboard .topbar-user .user-chip {
  min-height: 46px;

  padding: 6px 11px !important;

  background: #ffffff !important;

  border: 1px solid #dfe7ee !important;

  border-radius: 10px !important;

  color: #173d62 !important;

  box-shadow:
    0 3px 10px rgba(27, 70, 108, .035);
}


.rxl-premium-dashboard .topbar-user .user-avatar {
  width: 32px;
  height: 32px;

  background: #edf5fb;
}


.rxl-premium-dashboard .topbar-user .user-details strong {
  color: #143d63 !important;

  font-size: 12px;
}


.rxl-premium-dashboard .topbar-user .user-details small {
  color: #7e90a0 !important;

  font-size: 9px;
}


.rxl-premium-dashboard .topbar-user a.header-btn {
  min-height: 44px;

  padding: 0 15px;

  border-radius: 9px;

  font-size: 11px;
  font-weight: 750;
}


.rxl-premium-dashboard .topbar-user a.agency-btn {
  color: #174d7d !important;

  background: white !important;

  border: 1px solid #dfe7ee !important;
}


.rxl-premium-dashboard .topbar-user a.logout-btn {
  color: white !important;

  background:
    linear-gradient(
      135deg,
      #074f8d,
      #063a6c
    ) !important;

  border: 1px solid #063b6c !important;
}


/* Switch compact dans la topbar */

.rxl-premium-dashboard .topbar-user .theme-toggle-track {
  width: 65px;
  height: 38px;
}


.rxl-premium-dashboard .topbar-user .theme-toggle-thumb {
  width: 30px;
  height: 30px;
}


html.dark-mode
.rxl-premium-dashboard
.topbar-user
.theme-toggle-thumb {
  transform: translateX(27px);
}


/* =========================
   WORKSPACE
   ========================= */

.rxl-premium-dashboard .workspace.modern-workspace {
  width: auto !important;

  margin: 0 !important;

  padding: 22px 26px 38px !important;

  background: transparent !important;

  min-height: calc(100vh - 82px);
}


.rxl-premium-dashboard .workspace-panel.active {
  width: 100%;

  box-sizing: border-box;

  border-radius: 16px !important;

  border:
    1px solid #e1e8ef !important;

  background:
    #ffffff !important;

  box-shadow:
    0 10px 32px rgba(24, 65, 102, .065) !important;
}


/* =========================
   TABLEAU PLUS PROCHE MAQUETTE
   ========================= */

.rxl-premium-dashboard #vueTableau.table-wrapper,
.rxl-premium-dashboard .table-wrapper {
  border:
    1px solid #dfe7ee !important;

  border-radius: 13px !important;

  overflow-x: auto !important;

  background: white !important;

  box-shadow:
    0 5px 15px rgba(25, 68, 105, .035) !important;
}


.rxl-premium-dashboard #planningTable thead th {
  height: 47px !important;

  background:
    linear-gradient(
      180deg,
      #f8fbfd,
      #eef4f8
    ) !important;

  color: #173e60 !important;

  border-color:
    #dde6ed !important;

  font-size: 10px !important;

  font-weight: 800 !important;
}


.rxl-premium-dashboard #planningTable tbody td {
  min-height: 52px;

  border-color:
    #e8edf2 !important;

  color: #284359;
}


.rxl-premium-dashboard #planningTable tbody tr:hover td {
  background-color:
    #fbfdff !important;
}


/* Aucune décoration jaune dans les lignes */

.rxl-premium-dashboard #planningTable tbody *,
.rxl-premium-dashboard #planningTable tbody tr,
.rxl-premium-dashboard #planningTable tbody td {
  background-image: none !important;
}


.rxl-premium-dashboard #planningTable tbody tr::before,
.rxl-premium-dashboard #planningTable tbody tr::after,
.rxl-premium-dashboard #planningTable tbody td::before,
.rxl-premium-dashboard #planningTable tbody td::after {
  content: none !important;
  display: none !important;
}


/* =========================
   MODE SOMBRE
   ========================= */

html.dark-mode
.rxl-premium-dashboard
.mockup-content {
  background:
    linear-gradient(
      180deg,
      #0f1922,
      #0c141c
    );
}


html.dark-mode
.rxl-premium-dashboard
.app-topbar {
  background:
    rgba(20,31,41,.97);

  border-bottom-color:
    #2b3b48;
}


html.dark-mode
.rxl-premium-dashboard
.topbar-page h1 {
  color: #edf6fc;
}


html.dark-mode
.rxl-premium-dashboard
.topbar-user
.user-chip,
html.dark-mode
.rxl-premium-dashboard
.topbar-user
a.agency-btn {
  background: #182630 !important;

  border-color: #30414d !important;
}


html.dark-mode
.rxl-premium-dashboard
.workspace-panel.active {
  background: #15212a !important;

  border-color: #2d3e4a !important;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1050px) {

  .rxl-premium-dashboard .mockup-sidebar {
    width: 170px !important;
  }

  .rxl-premium-dashboard .mockup-content {
    margin-left: 170px;
  }

  .rxl-premium-dashboard .sidebar-brand-text strong {
    font-size: 18px;
  }

  .rxl-premium-dashboard .topbar-user .user-details {
    display: none;
  }

}


@media (max-width: 780px) {

  .rxl-premium-dashboard .mockup-sidebar {
    position: static !important;

    width: auto !important;
    min-height: auto !important;

    padding: 10px !important;
  }

  .rxl-premium-dashboard .sidebar-brand,
  .rxl-premium-dashboard .fleet-sidebar-card {
    display: none !important;
  }

  .rxl-premium-dashboard .mockup-sidebar .app-nav {
    flex-direction: row !important;

    overflow-x: auto;
  }

  .rxl-premium-dashboard .mockup-sidebar .nav-tab {
    width: auto !important;

    flex: 0 0 auto;

    border-left: 0 !important;

    border-bottom:
      3px solid transparent !important;
  }

  .rxl-premium-dashboard .mockup-sidebar .nav-tab.active {
    border-bottom-color:
      #ffd400 !important;
  }

  .rxl-premium-dashboard .mockup-content {
    margin-left: 0;
  }

  .rxl-premium-dashboard .app-topbar {
    position: static;

    align-items: flex-start;
    flex-direction: column;
  }

  .rxl-premium-dashboard .topbar-user {
    width: 100%;

    flex-wrap: wrap;
  }

  .rxl-premium-dashboard .workspace.modern-workspace {
    padding: 12px !important;
  }

}
/* ===== Espace utilisateur ===== */
.rxl-premium-dashboard .user-chip-link{ text-decoration:none!important; cursor:pointer; transition:.16s ease!important; }
.rxl-premium-dashboard .user-chip-link:hover{ transform:translateY(-1px); border-color:#bcd5e8!important; box-shadow:0 6px 16px rgba(28,72,110,.08)!important; }

.rxl-account-page{ margin:0; background:linear-gradient(180deg,#f5f9fd,#f1f6fa); color:#183d60; font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif; }
.account-shell{ min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); }
.account-sidebar{ position:fixed; inset:0 auto 0 0; width:230px; box-sizing:border-box; padding:24px 15px 18px; display:flex; flex-direction:column; background:linear-gradient(180deg,#073868 0%,#062e56 55%,#052744 100%); box-shadow:5px 0 20px rgba(7,47,85,.1); overflow-y:auto; }
.account-brand{ display:flex; flex-direction:column; gap:10px; padding:2px 11px 24px; margin-bottom:15px; border-bottom:1px solid rgba(255,255,255,.11); color:#fff; text-decoration:none; }
.account-brand img{ width:105px; height:58px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0,0,0,.12)); }
.account-brand div{ display:flex; flex-direction:column; gap:5px; }
.account-brand strong{ color:#fff; font-size:21px; font-weight:850; letter-spacing:-.4px; }
.account-brand strong span{ color:#ffd400; font-weight:600; }
.account-brand small{ color:#cfdfec; font-size:11px; font-weight:600; }
.account-nav{ display:flex; flex-direction:column; gap:7px; }
.account-nav-item{ min-height:50px; padding:0 14px; display:flex; align-items:center; gap:11px; border:0; border-left:3px solid transparent; border-radius:10px; background:transparent; color:#d8e6f1; font:inherit; font-size:12px; font-weight:700; text-align:left; cursor:pointer; }
.account-nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.account-nav-item.active{ background:linear-gradient(90deg,rgba(35,132,210,.32),rgba(35,132,210,.14)); color:#ffd400; border-left-color:#ffd400; }
.account-nav-item>span:first-child{ width:25px; text-align:center; font-size:17px; }
.account-sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:7px; padding-top:25px; }
.account-sidebar-bottom a{ min-height:40px; padding:0 11px; display:flex; align-items:center; border-radius:9px; color:#d2e3ef; text-decoration:none; font-size:11px; font-weight:700; }
.account-sidebar-bottom a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.account-logout-link{ color:#ffd6db!important; }
.account-main{ grid-column:2; min-height:100vh; padding-bottom:45px; }
.account-topbar{ position:sticky; top:0; min-height:90px; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid #e1e9f0; box-shadow:0 4px 16px rgba(27,69,106,.04); }
.account-topbar h1{ margin:0 0 4px; color:#163f66; font-size:25px; font-weight:800; letter-spacing:-.4px; }
.account-topbar p{ margin:0; color:#7a8fa1; font-size:12px; }
.account-topbar-actions{ display:flex; align-items:center; gap:10px; }
.account-user-badge{ min-height:46px; padding:5px 11px; display:flex; align-items:center; gap:9px; border:1px solid #dfe7ee; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(28,69,105,.035); }
.account-user-avatar{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(145deg,#eaf5fc,#dbeefa); color:#0e5b94; font-size:14px; font-weight:800; }
.account-user-badge>div{ display:flex; flex-direction:column; gap:2px; }
.account-user-badge strong{ color:#143c60; font-size:11px; }
.account-user-badge small{ color:#8597a6; font-size:9px; }
.account-theme-toggle{ width:58px; height:40px; padding:0 8px; border:1px solid #dfe7ee; border-radius:999px; background:#f5f9fc; cursor:pointer; }
.account-message{ margin:20px 32px -4px; padding:12px 15px; border-radius:10px; font-size:12px; font-weight:700; }
.account-message.success{ color:#126d48; background:#e8f8f0; border:1px solid #c5ead8; }
.account-message.error{ color:#9e3040; background:#fff0f2; border:1px solid #f2c8cf; }
.account-panel{ display:none; padding:28px 32px 0; }
.account-panel.active{ display:block; animation:accountPanelIn .22s ease; }
@keyframes accountPanelIn{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.account-panel-heading{ margin-bottom:20px; display:flex; align-items:center; gap:13px; }
.account-heading-icon{ width:45px; height:45px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:13px; background:#eaf5fd; color:#0d67a8; border:1px solid #d8e9f5; font-size:20px; }
.account-panel-heading h2{ margin:0 0 4px; color:#153e62; font-size:21px; font-weight:800; }
.account-panel-heading p{ margin:0; color:#798ea0; font-size:11px; }
.account-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.account-card{ padding:21px; border:1px solid #e0e8ef; border-radius:15px; background:#fff; box-shadow:0 9px 28px rgba(25,68,104,.055); }
.account-card-title,.account-security-header{ margin-bottom:20px; display:flex; align-items:center; gap:11px; }
.account-card-title>span{ width:35px; height:35px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#edf6fc; font-size:16px; }
.account-card-title h3,.account-security-header h3{ margin:0 0 3px; color:#183f62; font-size:14px; }
.account-card-title p,.account-security-header p{ margin:0; color:#8092a2; font-size:10px; }
.account-profile-hero{ display:flex; align-items:center; gap:15px; }
.account-profile-avatar{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:17px; background:linear-gradient(145deg,#0c65a7,#08497b); color:#fff; font-size:25px; font-weight:850; box-shadow:0 8px 18px rgba(10,82,133,.16); }
.account-profile-hero h3{ margin:0 0 4px; color:#173e61; font-size:17px; }
.account-profile-hero p{ margin:0 0 8px; color:#8093a2; font-size:11px; }
.account-role-badge{ display:inline-flex; padding:4px 8px; border-radius:999px; background:#edf6fd; color:#125d94; font-size:9px; font-weight:750; }
.account-divider{ height:1px; margin:20px 0; background:#e8edf2; }
.account-field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.account-field>span{ color:#31506a; font-size:10px; font-weight:750; }
.account-field input,.account-field select{ min-height:42px; box-sizing:border-box; padding:0 12px; border:1px solid #d9e4ec; border-radius:9px; background:#fbfdff; color:#233f56; font:inherit; font-size:12px; outline:none; }
.account-field input:focus,.account-field select:focus{ background:#fff; border-color:#388ecb; box-shadow:0 0 0 3px rgba(56,142,203,.1); }
.account-field input:disabled{ background:#f1f4f7; color:#778b9b; cursor:not-allowed; }
.account-field small{ color:#8b9ba8; font-size:9px; }
.account-btn{ min-height:42px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:9px; font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.account-btn.primary{ color:#fff; background:linear-gradient(135deg,#0e66a8,#074a7d); }
.account-btn.secondary{ color:#174d79; background:#f4f8fb; border:1px solid #dce6ed; }
.account-btn:disabled{ opacity:.55; cursor:not-allowed; }
.account-info-list{ display:flex; flex-direction:column; }
.account-info-list>div{ min-height:53px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf1f4; }
.account-info-list>div:last-child{ border-bottom:0; }
.account-info-list span{ color:#7b8f9f; font-size:10px; }
.account-info-list strong{ color:#23455e; font-size:11px; }
.account-status-ok{ color:#148458!important; }
.account-security-card{ max-width:850px; }
.account-security-header{ justify-content:space-between; }
.account-security-shield{ font-size:32px; }
.account-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; }
.account-field-full{ grid-column:1/-1; }
.account-actions{ display:flex; justify-content:flex-end; }
.account-theme-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-theme-options button{ padding:14px; display:flex; flex-direction:column; gap:5px; border:1px solid #dce6ed; border-radius:11px; background:#fff; color:#26465e; text-align:left; cursor:pointer; }
.account-theme-options button.active{ border-color:#5ea3d3; box-shadow:inset 0 0 0 1px #5ea3d3,0 5px 14px rgba(39,108,157,.08); }
.account-theme-options strong{ font-size:11px; }
.account-theme-options small{ color:#8496a4; font-size:9px; }
.account-agencies-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.account-agency-card{ min-height:105px; padding:17px; display:flex; align-items:center; gap:13px; border:1px solid #dfe8ef; border-radius:13px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 6px 18px rgba(26,67,102,.045); }
.account-agency-card:hover{ transform:translateY(-2px); border-color:#9fc9e6; box-shadow:0 10px 24px rgba(26,78,116,.08); }
.account-agency-icon{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:12px; background:#eaf5fc; font-size:21px; }
.account-agency-content{ min-width:0; flex:1; }
.account-agency-content h3{ margin:0 0 4px; color:#173f62; font-size:13px; }
.account-agency-content p{ margin:0; color:#8496a5; font-size:9px; }
.account-agency-open{ color:#0e659f; font-size:10px; font-weight:750; }
html.dark-mode .rxl-account-page{ background:linear-gradient(180deg,#0f1821,#0b131a); color:#e1ecf3; }
html.dark-mode .account-topbar{ background:rgba(20,31,41,.97); border-bottom-color:#2d3d49; }
html.dark-mode .account-topbar h1,html.dark-mode .account-panel-heading h2,html.dark-mode .account-card-title h3,html.dark-mode .account-security-header h3,html.dark-mode .account-profile-hero h3,html.dark-mode .account-agency-content h3{ color:#e7f1f7; }
html.dark-mode .account-card,html.dark-mode .account-user-badge,html.dark-mode .account-agency-card{ background:#15212a; border-color:#2c3d49; }
html.dark-mode .account-field input,html.dark-mode .account-field select{ background:#101a22; color:#e3edf3; border-color:#30434f; }
html.dark-mode .account-field input:disabled{ background:#1b2730; color:#8295a3; }
html.dark-mode .account-divider,html.dark-mode .account-info-list>div{ border-color:#293a46; }
html.dark-mode .account-info-list strong,html.dark-mode .account-theme-options strong{ color:#dbe8ef; }
html.dark-mode .account-theme-options button{ background:#15212a; border-color:#30414d; color:#dce7ee; }
html.dark-mode .account-theme-toggle{ background:#182731; border-color:#31444f; }
@media(max-width:1000px){ .account-shell{grid-template-columns:190px minmax(0,1fr)} .account-sidebar{width:190px} .account-grid,.account-agencies-grid{grid-template-columns:1fr} }
@media(max-width:720px){ .account-shell{display:block} .account-sidebar{position:static;width:auto;min-height:auto;padding:10px} .account-brand,.account-sidebar-bottom{display:none} .account-nav{flex-direction:row;overflow-x:auto} .account-nav-item{flex:0 0 auto;border-left:0;border-bottom:3px solid transparent} .account-nav-item.active{border-bottom-color:#ffd400} .account-main{grid-column:auto} .account-topbar{position:static;padding:14px 16px;align-items:flex-start;flex-direction:column} .account-panel{padding:20px 14px 0} .account-form-grid,.account-theme-options{grid-template-columns:1fr} .account-field-full{grid-column:auto} }




.login-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.login-bg-slide {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  opacity: 0;

  transform: scale(1.03);

  transition:
    opacity 1.2s ease,
    transform 6s ease;
}

.login-bg-slide.active {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   SIDEBAR RETRACTABLE — VERSION PROPRE
   La sidebar reste visible pendant le scroll et le contenu
   s'adapte automatiquement à sa largeur.
   ========================================================= */

.rxl-premium-dashboard {
  --sidebar-width: 205px;
  --sidebar-width-collapsed: 72px;
}

/* La page n'est plus une grille : la sidebar est fixe,
   le contenu se décale simplement avec margin-left. */
.rxl-premium-dashboard .mockup-shell {
  display: block !important;
  min-height: 100vh !important;
}

/* =========================================================
   SIDEBAR OUVERTE
   ========================================================= */

.rxl-premium-dashboard .mockup-sidebar {
  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;

  height: 100dvh !important;
  min-height: 0 !important;

  padding: 22px 14px 18px !important;

  display: flex !important;
  flex-direction: column !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  box-sizing: border-box !important;

  z-index: 1000;

  transition:
    width .28s cubic-bezier(.22,1,.36,1),
    min-width .28s cubic-bezier(.22,1,.36,1),
    max-width .28s cubic-bezier(.22,1,.36,1) !important;
}

/* =========================================================
   CONTENU PRINCIPAL
   ========================================================= */

.rxl-premium-dashboard .mockup-content {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-left: var(--sidebar-width) !important;

  box-sizing: border-box !important;

  transition:
    margin-left .28s cubic-bezier(.22,1,.36,1) !important;
}

/* Le scroll horizontal reste uniquement dans les tableaux. */
.rxl-premium-dashboard .mockup-content,
.rxl-premium-dashboard .workspace.modern-workspace,
.rxl-premium-dashboard .workspace-panel {
  overflow-x: hidden !important;
}

.rxl-premium-dashboard #vueTableau,
.rxl-premium-dashboard #spotTableWrapper,
.rxl-premium-dashboard .table-wrapper,
.rxl-premium-dashboard .spot-table-shell {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* =========================================================
   MODE REDUIT
   ========================================================= */

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar {
  width: var(--sidebar-width-collapsed) !important;
  min-width: var(--sidebar-width-collapsed) !important;
  max-width: var(--sidebar-width-collapsed) !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-content {
  margin-left: var(--sidebar-width-collapsed) !important;
}

/* =========================================================
   LOGO EN MODE REDUIT
   ========================================================= */

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-brand {
  width: 100% !important;

  padding:
    2px 0 20px !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-logo {
  width: 100% !important;
  height: 55px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-logo-link {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-logo-link img {
  width: 48px !important;
  max-width: 48px !important;
  height: auto !important;

  margin: 0 auto !important;

  object-fit: contain;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-brand-text,
.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-logo-back {
  display: none !important;
}

/* =========================================================
   NAVIGATION EN MODE REDUIT
   ========================================================= */

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.app-nav {
  width: 100% !important;

  align-items: center !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.nav-tab,
.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.nav-link-external {
  position: relative;

  width: 46px !important;
  min-width: 46px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin:
    0 auto !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  border-left: 0 !important;

  text-align: center !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.nav-icon {
  width: auto !important;

  margin: 0 !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.nav-tab > span:not(.nav-icon),
.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.mockup-sidebar
.nav-link-external > span:not(.nav-icon):not(.nav-count) {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  clip: rect(0,0,0,0) !important;

  white-space: nowrap !important;
}

/* =========================================================
   CARTE FLOTTE EN MODE REDUIT
   ========================================================= */

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.fleet-sidebar-card {
  width: 46px !important;
  min-width: 46px !important;

  min-height: 50px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 7px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.fleet-sidebar-card
> *:not(.fleet-sidebar-icon) {
  display: none !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.fleet-sidebar-icon {
  margin: 0 !important;

  font-size: 18px !important;
}

/* =========================================================
   BOUTON BAS
   ========================================================= */

.rxl-premium-dashboard .sidebar-bottom-toggle {
  width: calc(100% - 10px);

  min-height: 34px;

  margin:
    10px 5px 0;

  padding:
    0 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  flex: 0 0 auto;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 9px;

  background:
    rgba(255,255,255,.045);

  color:
    rgba(255,255,255,.72);

  font: inherit;

  font-size: 8px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.rxl-premium-dashboard .sidebar-bottom-toggle:hover {
  background:
    rgba(255,255,255,.08);

  color: #fff;

  border-color:
    rgba(255,255,255,.18);
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-bottom-toggle {
  width: 40px !important;
  min-width: 40px !important;

  margin:
    10px auto 0 !important;

  padding: 0 !important;
}

.rxl-premium-dashboard
.mockup-shell.sidebar-collapsed
.sidebar-bottom-toggle-label {
  display: none !important;
}

/* =========================================================
   RESTAURATION SANS SAUT VISUEL
   ========================================================= */

.rxl-premium-dashboard
.mockup-shell.sidebar-no-transition
.mockup-sidebar,
.rxl-premium-dashboard
.mockup-shell.sidebar-no-transition
.mockup-content {
  transition: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .rxl-premium-dashboard {
    --sidebar-width: 170px;
  }

}

@media (max-width: 780px) {

  .rxl-premium-dashboard .mockup-sidebar {
    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: auto !important;

    overflow: visible !important;
  }

  .rxl-premium-dashboard .mockup-content,
  .rxl-premium-dashboard
  .mockup-shell.sidebar-collapsed
  .mockup-content {
    margin-left: 0 !important;
  }

  .rxl-premium-dashboard .sidebar-bottom-toggle {
    display: none !important;
  }

}
/* =========================================================
   ACCUEIL AGENCE
   ========================================================= */

.rxl-premium-dashboard .mockup-sidebar .nav-link-external {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  border-radius: 10px;
  color: #d4e3ef;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  transition: background .2s ease, color .2s ease;
}

.rxl-premium-dashboard .mockup-sidebar .nav-link-external:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}

.rxl-premium-dashboard .mockup-sidebar .nav-link-external.active {
  color: #ffd400;
  border-left-color: #ffd400;
  background: linear-gradient(90deg,rgba(35,132,210,.32),rgba(35,132,210,.16));
}

.agency-home-workspace {
  min-height: calc(100vh - 82px);
  padding: 34px !important;
  background: linear-gradient(180deg,#f6f9fd 0%,#edf4fa 100%) !important;
}

.planning-delete-day-btn {
  border-color: #efc3c8 !important;
  color: #a92f3b !important;
  background: #fff5f6 !important;
  box-shadow: none !important;
}

.planning-autosave-status {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d8e5ed;
  border-radius: 999px;
  color: #617b8d;
  background: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.btn-color-scope {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cbdce7;
  border-radius: 8px;
  color: #245273;
  background: #f6fafc;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.btn-color-scope:hover { border-color: #79b6d9; color: #075d96; background: #eaf6fd; }
#planningTable thead th[data-color-column],#spotTable thead th[data-spot-column]:not([data-spot-column="ordre"]) { cursor: pointer; }
#planningTable thead th[data-color-column]:hover,#spotTable thead th[data-spot-column]:not([data-spot-column="ordre"]):hover { color: #0872b3; background: #e8f5fc !important; }

html.dark-mode .btn-color-scope { border-color: #385062; color: #c4d8e7; background: #1b3040; }
html.dark-mode .btn-color-scope:hover { border-color: #4f91b8; color: #7bc9f1; background: #203b4e; }

.planning-copy-dialog {
  width: min(460px,calc(100vw - 28px));
  padding: 26px;
  border: 1px solid #d7e4ed;
  border-radius: 20px;
  color: #183f5d;
  background: #fff;
  box-shadow: 0 28px 80px rgba(8,45,73,.28);
}

.planning-copy-dialog::backdrop { background: rgba(5,28,47,.56); backdrop-filter: blur(3px); }
.planning-copy-dialog-icon { width: 48px; height: 48px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: #0870b5; background: #eaf5fd; font-size: 22px; font-weight: 850; }
.planning-copy-dialog-copy small { color: #1680bd; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.planning-copy-dialog-copy h2 { margin: 5px 0 7px; color: #123f68; font-size: 22px; }
.planning-copy-dialog-copy p { margin: 0 0 20px; color: #718596; font-size: 12px; line-height: 1.55; }
.planning-copy-source { margin-bottom: 14px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #dce8f0; border-radius: 12px; background: #f5f9fc; }
.planning-copy-source span { color: #718696; font-size: 11px; }
.planning-copy-source strong { color: #0b5f99; font-size: 13px; }
.planning-copy-date-label { display: flex; flex-direction: column; gap: 7px; color: #294d67; font-size: 11px; font-weight: 800; }
.planning-copy-date-label input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #cadbe7; border-radius: 11px; color: #123f68; background: #fff; font: inherit; font-size: 13px; }
.planning-copy-date-label input:focus { outline: 0; border-color: #1684c4; box-shadow: 0 0 0 3px rgba(22,132,196,.12); }
.planning-copy-dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }

html.dark-mode .planning-copy-dialog { border-color: #314858; color: #dcebf5; background: #172835; }
html.dark-mode .planning-copy-dialog-copy h2 { color: #eef7fc; }
html.dark-mode .planning-copy-dialog-copy p { color: #9cb0bf; }
html.dark-mode .planning-copy-source { border-color: #304657; background: #1d3241; }
html.dark-mode .planning-copy-source strong { color: #70c5f1; }
html.dark-mode .planning-copy-date-label { color: #c5d6e2; }
html.dark-mode .planning-copy-date-label input { border-color: #385062; color: #edf6fb; background: #12222e; color-scheme: dark; }

.planning-autosave-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #7f98a9;
}

.planning-autosave-status.is-pending .planning-autosave-dot { background: #e7a928; }
.planning-autosave-status.is-saving .planning-autosave-dot { background: #1684c4; animation: planningAutosavePulse .8s ease-in-out infinite alternate; }
.planning-autosave-status.is-saved { color: #27734c; border-color: #c8e7d5; background: #f1fbf5; }
.planning-autosave-status.is-saved .planning-autosave-dot { background: #25a567; }
.planning-autosave-status.is-error { color: #a3323d; border-color: #edc4c9; background: #fff3f4; }
.planning-autosave-status.is-error .planning-autosave-dot { background: #d54957; }
.planning-autosave-status.is-archive { color: #6d7e8b; background: #eef3f6; }

@keyframes planningAutosavePulse {
  from { opacity: .38; transform: scale(.8); }
  to { opacity: 1; transform: scale(1.18); }
}

html.dark-mode .planning-autosave-status { border-color: #344b5d; color: #aabcca; background: #1b2e3d; }
html.dark-mode .planning-autosave-status.is-saved { border-color: #315d49; color: #9fdbb9; background: #193328; }
html.dark-mode .planning-autosave-status.is-error { border-color: #71424a; color: #ffb4bc; background: #3a2429; }

.planning-delete-day-btn:hover {
  border-color: #dc7d87 !important;
  color: #8f1f2b !important;
  background: #ffe9eb !important;
}

html.dark-mode .planning-delete-day-btn {
  border-color: #71424a !important;
  color: #ffb4bc !important;
  background: #3a2429 !important;
}

/* Barre utilisateur moderne de l'accueil */
.agency-home-page .app-topbar {
  min-height: 82px;
  padding: 12px 22px 12px 28px;
  gap: 24px;
}

.agency-home-userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.agency-home-userbar .user-chip-link {
  min-width: 230px;
  min-height: 54px;
  padding: 7px 10px 7px 7px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce7f0;
  border-radius: 14px;
  background: linear-gradient(135deg,#fff,#f7fbfe);
  box-shadow: 0 5px 16px rgba(20,70,108,.07);
  text-decoration: none;
}

.agency-home-userbar .user-chip-link:hover {
  border-color: #b9d7ea;
  box-shadow: 0 8px 22px rgba(20,84,132,.12);
  transform: translateY(-1px);
}

.agency-home-userbar .user-avatar-initials {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg,#0b69a6,#074875);
  box-shadow: 0 5px 13px rgba(7,72,117,.24);
  font-size: 12px;
  font-weight: 850;
}

.agency-home-userbar .user-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.agency-home-userbar .user-details small {
  color: #8596a5;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.agency-home-userbar .user-details strong {
  width: 100%;
  overflow: hidden;
  color: #143f64;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-chevron {
  color: #7e9aaf;
  font-size: 22px;
  line-height: 1;
}

.agency-home-userbar .modern-topbar-btn {
  min-height: 50px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 13px;
  white-space: nowrap;
}

.agency-home-userbar .agency-btn {
  border: 1px solid #dce7f0;
  color: #16486e;
  background: #fff;
  box-shadow: 0 4px 13px rgba(20,70,108,.05);
}

.agency-home-userbar .agency-btn:hover { border-color: #b9d7ea; background: #f4f9fd; }
.agency-home-userbar .logout-btn { border: 1px solid #074475; background: linear-gradient(135deg,#0b5791,#073f70); box-shadow: 0 6px 16px rgba(7,63,112,.18); }
.agency-home-userbar .logout-btn:hover { background: linear-gradient(135deg,#0d68aa,#074779); transform: translateY(-1px); }

.modern-theme-toggle {
  min-width: 174px;
  min-height: 50px;
  padding: 6px 11px 6px 7px;
  display: grid;
  grid-template-columns: 36px minmax(62px,1fr) 34px;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce7f0;
  border-radius: 13px;
  color: #174463;
  background: linear-gradient(135deg,#fff,#f4f9fd);
  box-shadow: 0 4px 13px rgba(20,70,108,.06);
}

.modern-theme-toggle:hover { border-color: #b9d7ea; box-shadow: 0 7px 18px rgba(20,84,132,.11); transform: translateY(-1px); }
.modern-theme-icon { position: relative; width: 36px; height: 36px; display: block; overflow: hidden; border-radius: 10px; color: #a56400; background: linear-gradient(145deg,#fff2b8,#ffd45f); }
.modern-theme-sun,.modern-theme-moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .35s ease,opacity .25s ease; }
.modern-theme-moon { color: #dceaff; opacity: 0; transform: translateY(26px) rotate(25deg); }
.modern-theme-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.modern-theme-copy small { color: #8797a4; font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.modern-theme-copy strong { color: #174463; font-size: 11px; white-space: nowrap; }
.modern-theme-switch { width: 34px; height: 19px; padding: 3px; display: block; border-radius: 999px; background: #d9e4ec; transition: background .3s ease; }
.modern-theme-switch > span { width: 13px; height: 13px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(27,66,92,.23); transition: transform .3s cubic-bezier(.2,.8,.2,1); }

.modern-theme-toggle.is-dark { color: #edf6fd; border-color: #31485b; background: linear-gradient(135deg,#1c3041,#162838); }
.modern-theme-toggle.is-dark .modern-theme-icon { color: #e1eaff; background: linear-gradient(145deg,#355374,#1d3552); }
.modern-theme-toggle.is-dark .modern-theme-sun { opacity: 0; transform: translateY(-26px) rotate(-25deg); }
.modern-theme-toggle.is-dark .modern-theme-moon { opacity: 1; transform: translateY(0) rotate(0); }
.modern-theme-toggle.is-dark .modern-theme-copy small { color: #93aabd; }
.modern-theme-toggle.is-dark .modern-theme-copy strong { color: #edf6fd; }
.modern-theme-toggle.is-dark .modern-theme-switch { background: #2188c5; }
.modern-theme-toggle.is-dark .modern-theme-switch > span { transform: translateX(15px); }

html.dark-mode .agency-home-userbar .user-chip-link,
html.dark-mode .agency-home-userbar .agency-btn {
  border-color: #2a4052;
  background: linear-gradient(135deg,#1a2d3c,#172735);
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
}

html.dark-mode .agency-home-userbar .user-details strong,
html.dark-mode .agency-home-userbar .agency-btn { color: #e7f2fa; }
html.dark-mode .agency-home-userbar .user-details small { color: #91a8b9; }

.agency-home-hero {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(120deg,#073663 0%,#07568b 62%,#1684c4 100%);
  box-shadow: 0 18px 42px rgba(7,54,99,.18);
}

.agency-home-hero::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -82px;
  width: 330px;
  height: 180px;
  opacity: .32;
  border-top: 4px dashed #ffd400;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.agency-home-hero > * { position: relative; z-index: 1; }
.agency-home-eyebrow { margin: 0 0 9px; color: #ffd400; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.agency-home-hero h1 { margin: 0 0 8px; color: #fff; font-size: clamp(29px,3vw,43px); line-height: 1.08; }
.agency-home-hero p:not(.agency-home-eyebrow) { margin: 0; color: #dbeefa; font-size: 15px; }
.agency-home-date { flex: 0 0 auto; padding: 12px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 750; text-transform: capitalize; backdrop-filter: blur(8px); }

.agency-home-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.agency-home-card { min-width: 0; padding: 24px; border: 1px solid #dfe8f0; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(20,69,107,.07); }
.agency-home-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.agency-home-card-heading > div { display: flex; align-items: center; gap: 13px; }
.agency-home-card small { display: block; margin-bottom: 4px; color: #8193a3; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.agency-home-card h2 { margin: 0; color: #123f68; font-size: 20px; }
.agency-home-card-icon { width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: #eaf5fd; color: #0870b5; font-size: 22px; }
.weather-status { padding: 6px 10px; border-radius: 999px; color: #708494; background: #edf2f6; font-size: 10px; font-weight: 800; }
.weather-status.is-live { color: #147341; background: #e5f8ed; }
.weather-main { margin: 25px 0 22px; display: flex; align-items: center; gap: 20px; }
.weather-main > strong { color: #0c568c; font-size: 54px; line-height: 1; }
.weather-main b { display: block; margin-bottom: 5px; color: #1d425f; font-size: 15px; }
.weather-main span { color: #7a8e9f; font-size: 12px; }
.weather-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.weather-details > span { padding: 12px; border-radius: 11px; background: #f3f7fa; }
.weather-details strong { color: #244c69; font-size: 12px; }
.weather-error { margin: 14px 0 0; color: #a45624; font-size: 12px; }

.agency-home-quick-card { position: relative; display: flex; align-items: center; gap: 17px; color: inherit; text-decoration: none; transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.agency-home-quick-card:hover { transform: translateY(-3px); border-color: #b9d8ed; box-shadow: 0 16px 34px rgba(20,84,132,.13); }
.agency-home-quick-card div { min-width: 0; }
.agency-home-quick-card p { margin: 7px 38px 0 0; color: #718595; font-size: 12px; line-height: 1.5; }
.quick-card-arrow { position: absolute; right: 23px; color: #1684c4; font-size: 24px; transition: transform .2s ease; }
.agency-home-quick-card:hover .quick-card-arrow { transform: translateX(4px); }
.planning-quick-card { border-color: #cbdfea; background: linear-gradient(135deg,#fff 0%,#f3f9fd 100%); }

html.dark-mode .agency-home-workspace { background: linear-gradient(180deg,#111d28,#142433) !important; }
html.dark-mode .agency-home-card { border-color: #2a4052; background: #172735; box-shadow: 0 12px 28px rgba(0,0,0,.17); }
html.dark-mode .agency-home-card h2,html.dark-mode .weather-main b,html.dark-mode .weather-details strong { color: #e7f2fa; }
html.dark-mode .agency-home-card small,html.dark-mode .agency-home-quick-card p,html.dark-mode .weather-main span { color: #9eb1c0; }
html.dark-mode .agency-home-card-icon { color: #64bdeb; background: #203b4e; }
html.dark-mode .weather-main > strong { color: #66c4f2; }
html.dark-mode .weather-details > span { background: #203440; }

@media (max-width: 900px) {
  .agency-home-workspace { padding: 20px !important; }
  .agency-home-hero { padding: 28px; align-items: flex-start; flex-direction: column; }
  .agency-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
  .agency-home-userbar .user-chip-link { min-width: 190px; }
  .agency-home-userbar .modern-topbar-btn { padding-inline: 12px; }
  .modern-theme-toggle { min-width: 50px; width: 50px; grid-template-columns: 36px; padding: 6px; }
  .modern-theme-copy,.modern-theme-switch { display: none; }
}

@media (max-width: 1040px) {
  .agency-home-page .app-topbar { align-items: flex-start; flex-direction: column; }
  .agency-home-userbar { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .agency-home-workspace { padding: 13px !important; }
  .agency-home-hero { min-height: 0; padding: 24px 20px; border-radius: 17px; }
  .agency-home-card { padding: 19px; }
  .weather-details { grid-template-columns: 1fr; }
}