.fi-topbar {
  background-color: rgba(0,0,0,0.85);
   --blur: 16px;
 --alpha: 0.55;
 --radius: 18px;
 backdrop-filter: blur(var(--blur)) saturate(50%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(50%); /* Safari/iOS */
}

.canvas-top-clients {
  height: 33vh !important;  /* responsive */
}
.fi-tabs-item.fi-active {
  background-color: #9b3323;
}
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon {
  color: #fff;
}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn {
  background-color: #9b3323!important;
}
.fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn:hover {
  background-color: rgba(0,0,0,0.1)
}
.fi-sidebar-item.fi-sidebar-item-has-url>.fi-sidebar-item-btn {
  background-color: rgba(0,0,0,0.02)
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-icon {
  color: #fff;
}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label {
  color: #fff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;              /* top/right/bottom/left: 0 */
  z-index: -1;
  background: url("../images/bg-admin.jpg") center center / cover no-repeat;
  will-change: transform; /* perf hint */
  transform: translateZ(0); /* aide certains mobiles */
}

.fi-tabs.fi-contained {
 --blur: 16px;
 --alpha: 0.55;
 --radius: 18px;
 border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xl);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
 background-color: rgba(255,255,255,0.9);

 border-bottom-style: var(--tw-border-style);
 border-bottom-width: 2px;
 border-color: var(--gray-200);
 padding-inline: calc(var(--spacing)*3);
 padding-block: calc(var(--spacing)*2.5);
}

.fi-sc-tabs.fi-contained {
  --blur: 16px;
  --alpha: 0.55;
  --radius: 18px;
  border-radius: var(--radius-xl);
  background-color: rgba(255,255,255,0.6);
  /*
  backdrop-filter: blur(var(--blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
  */
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
  0 40px 80px -30px rgba(0,0,0,.25),
  0 16px 40px -16px rgba(0,0,0,.14),
  0 2px 10px rgba(0,0,0,.05) !important;
  /*
  0 32px 64px -24px rgba(0,0,0,.28),
  0 12px 32px -12px rgba(0,0,0,.16),
  0 2px 8px rgba(0,0,0,.06) !important;
  */

  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color,#0000000d);
  --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);
  box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
  --tw-ring-color: color-mix(in oklab,var(--gray-950)5%,transparent);
}

.fi-wi-stats-overview-stat {
--blur: 16px;
  --alpha: 0.55;
  --radius: 18px;
  border-radius: var(--radius-xl);
  background-color: rgba(255,255,255,0.6);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
  0 40px 80px -30px rgba(0,0,0,.25),
  0 16px 40px -16px rgba(0,0,0,.14),
  0 2px 10px rgba(0,0,0,.05) !important;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
  --blur: 16px;
  --alpha: 0.55;
  --radius: 18px;
  border-radius: var(--radius-xl);
  background-color: rgba(255,255,255,0.6);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
  0 40px 80px -30px rgba(0,0,0,.25),
  0 16px 40px -16px rgba(0,0,0,.14),
  0 2px 10px rgba(0,0,0,.05);
}

.fi-ta-ctn {
  --blur: 16px;
  --alpha: 0.55;
  --radius: 18px;
  border-radius: var(--radius-xl);
  background-color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
  0 40px 80px -30px rgba(0,0,0,.25),
  0 16px 40px -16px rgba(0,0,0,.14),
  0 2px 10px rgba(0,0,0,.05) !important;
}

/* Affects ONLY the 3 chart widgets (line/pie/bar),
   not the outer container section */
.fi-wi-chart > section.fi-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important; /* in case a glass style was applied */
}

/* Make the header/content wrappers transparent too */
.fi-wi-chart .fi-section-header,
.fi-wi-chart .fi-section-content-ctn,
.fi-wi-chart .fi-section-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Couleur de fond pour les lignes "Job Spécial" */
.special-job-row {
    background-color: #80D4ED !important;
}

/* Hover sur les lignes Job Spécial */
.special-job-row:hover {
    background-color: #6BC4DD !important;
}

/* Alternative si la classe ne fonctionne pas avec Filament */
/* Utiliser un attribut data */
tr[data-job-special="true"] {
    background-color: #80D4ED !important;
}

tr[data-job-special="true"]:hover {
    background-color: #6BC4DD !important;
}

/* Badge Job Spécial personnalisé */
.fi-badge-job-special {
    background-color: #FFA500 !important;
    color: white !important;
    font-weight: bold;
}