/* ===========================
   APX — Dark Theme Global
   =========================== */

/* ---- Variables & fond global ---- */
:root{
  --apx-bg-1:#0a0f1a;   /* page bg */
  --apx-bg-2:#0b1220;   /* zone principale */
  --apx-bg-3:#0e1628;   /* cartes/blocs */
  --apx-fg-1:#e9ecef;   /* texte principal */
  --apx-fg-2:#98a2b3;   /* texte secondaire */
  --apx-border:#1f2a44; /* contours cartes/tables */
  --apx-accent:#9ecbff; /* liens */
  --apx-accent-soft:#3f6ca8; /* bleu moins saturé/moins brillant */
  --apx-stats-font-size:1rem; /* taille unique pour toutes les données */
  --apx-grade-a:#4ade80;
  --apx-grade-b:#d6fa8b;
  --apx-grade-c:#f59e0b;
  --apx-grade-d:#ef4444;
  --apx-grade-e:#ef4444;
  --apx-grade-f:#dc2626;
  --apx-grade-na:#94a3b8;
}

/* --- Fond sombre : halo en haut, couleur unie ensuite --- */
.apx-dark,
html,
body {
  background-color: var(--apx-bg-1);
  background-image: radial-gradient(
    1200px 600px at 22% 4%,
    #101a33 0%,
    transparent 62%
  );
  background-repeat: no-repeat;
  background-position: top left;
  background-attachment: fixed;
  color: var(--apx-fg-1);
}

a { color: var(--apx-accent); }
a:hover { color: #c7e1ff; }

/* ---- Layout (navbar / main / footer) ---- */
.apx-navbar {
  background-color: #0d1324 !important;
  border-bottom: 1px solid var(--apx-border);
  position: relative;
  z-index: 1040;
  overflow: visible;
}

.apx-main {
  background: transparent;
  flex: 1 0 auto;
  padding-bottom: 6rem;
}

.apx-footer {
  background-color: #0d1324;
  border-top: 1px solid var(--apx-border);
  color: var(--apx-fg-2);
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  margin-top: 0 !important;
}

/* ---- Cartes / blocs ---- */
.apx-card {
  background-color: var(--apx-bg-3);
  color: var(--apx-fg-1);
  border: 1px solid var(--apx-border);
  border-radius: .75rem;
}

/* compat */
.card.apx-card {
  border-radius: .75rem;
}

/* ---- Formulaires ---- */
.apx-form .input-group-text {
  background-color: #1b2742;
  color: #e9ecef;
  border: 1px solid #2a3b63;
}

.apx-form .form-control {
  background-color: #0b1220;
  color: #e9ecef;
  border: 1px solid #2a3b63;
}

.apx-form .form-control::placeholder {
  color: #7b86a6;
}

.apx-form .form-text {
  color: #7b86a6;
}

/* ---- Boutons ---- */
.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-primary:hover {
  background: #1e54c8;
  border-color: #1e54c8;
}

.btn-linkedin {
  background-color: #0A66C2;
  border-color: #0A66C2;
  color: #fff;
}

.btn-linkedin:hover {
  background-color: #084c91;
  border-color: #084c91;
  color: #fff;
}

.btn-outline-apx {
  color: var(--apx-accent);
  border-color: var(--apx-accent);
}

.btn-outline-apx:hover,
.btn-outline-apx:focus,
.btn-outline-apx:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  transition: all 0.15s ease-in-out;
}

/* ---- helpers texte ---- */
.apx-accent { color: var(--apx-accent); }
.apx-muted  { color: var(--apx-fg-2) !important; }

/* ===========================
   TABLEAU DARK (Bootstrap 5)
   =========================== */
.table.apx-table-dark {
  --bs-table-color: #dbe4ff;
  --bs-table-bg: #0b1220;
  --bs-table-striped-bg: #0e1526;
  --bs-table-striped-color: #dbe4ff;
  --bs-table-hover-bg: #131b2e;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
}

/* En-tête sombre natif Bootstrap */
.table.apx-table-dark thead {
  --bs-table-bg: #0f1a30;
  --bs-table-color: #fff;
}

.table.apx-table-dark thead th {
  text-align: center;
  font-weight: 600;
  border-bottom-color: var(--apx-border);
}

.table.apx-table-dark > :not(caption) > * > * {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

.table.apx-table-dark.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-striped-bg) !important;
  color: var(--bs-table-striped-color) !important;
}

.table.apx-table-dark tbody tr:hover > * {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

.apx-table-dark {
  table-layout: fixed;
  width: 100%;
}

.apx-table-dark td,
.apx-table-dark th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apx-table-dark tbody td {
  border-top-color: var(--apx-border);
}

/* ===========================
   Couleurs de notes (texte)
   =========================== */
.apx-grade-a { color: var(--apx-grade-a) !important; }
.apx-grade-b { color: var(--apx-grade-b) !important; }
.apx-grade-c { color: var(--apx-grade-c) !important; }
.apx-grade-d { color: var(--apx-grade-d) !important; }
.apx-grade-e { color: var(--apx-grade-e) !important; }
.apx-grade-f { color: var(--apx-grade-f) !important; }
.apx-grade-na { color: var(--apx-grade-na) !important; }

.apx-grade-a,
.apx-grade-b,
.apx-grade-c,
.apx-grade-d,
.apx-grade-e,
.apx-grade-f,
.apx-grade-na {
  font-weight: 600;
}

/* Chart height helpers */
.apx-chart-slim { height: 300px; }

@media (min-width: 992px) {
  .apx-chart-slim { height: 220px; }
}

/* ===== Stats navbar inline (dark) ===== */
.apx-statsbar {
  background: var(--apx-bg-1);
  border-bottom: 1px solid var(--apx-border);
}

.apx-statsline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0;
  padding: .5rem 0;
}

.apx-stat {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5rem;
  padding: .25rem .5rem;
}

.apx-stat-label {
  font-weight: 600;
  color: var(--apx-fg-2);
}

.apx-stat-value,
.apx-stat-link {
  font-size: var(--apx-stats-font-size);
  font-weight: 500;
  color: var(--apx-fg-1);
  font-variant-numeric: tabular-nums;
}

.apx-stat-link {
  text-decoration: none;
  color: var(--apx-accent-soft, var(--apx-accent));
}

.apx-stat-link:hover {
  text-decoration: underline;
}

.apx-statsbar code {
  background: none;
  padding: 0;
  font-family: inherit;
  color: var(--apx-accent);
}

.apx-stat-label code {
  font-size: .85rem;
  font-weight: 600;
}

@media (max-width: 992px) {
  .apx-statsline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .apx-statsline {
    grid-template-columns: 1fr;
  }
}

/* ===== Sticky footer via flex layout ===== */
html,
body {
  height: 100%;
}

body.apx-dark {
  min-height: 100vh;
  display: flex;
  flex-direction: column;  
}

@media (max-width: 768px) {
  .apx-dark,
  html,
  body {
    background-attachment: scroll;
  }
}

/* Logo de marque dans la navbar */
.apx-brand-logo {
  width: 70px;
  height: 70px;
  display: block;
  object-fit: contain;
}

.apx-navbar .navbar-brand {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

/* Titre global sous la navbar */
.apx-page-title {
  color: var(--bs-navbar-color, rgba(255,255,255,.55));
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: .2px;
}

/* ----- H3 accentué + rendu code ----- */
.apx-h3-shs {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .2px;
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem);
}

.apx-h3-shs shs,
.apx-h3-shs .apx-code {
  font-family: var(
    --apx-font-code,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace
  );
  background: var(--apx-accent-soft);
  padding: .1rem .35rem;
  border-radius: .35rem;
}

.apx-h3-shs a {
  color: inherit;
  text-decoration: none;
}

.apx-h3-shs a:hover,
.apx-h3-shs a:focus {
  text-decoration: underline;
}

/* Dropdown sombre APX */
.apx-dropdown {
  background: rgba(10, 14, 24, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 6px 0;
  z-index: 1080;
}

.apx-dropdown .dropdown-item {
  color: rgba(255,255,255,0.85);
}

.apx-dropdown .dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.apx-dropdown .dropdown-header {
  color: rgba(255,255,255,0.65);
}

.apx-dropdown .dropdown-divider {
  border-color: rgba(255,255,255,0.08);
}

/* ========================================================================== */
/* Utilities layer preserved after apx.css to keep current cascade intact.    */
/* ========================================================================== */

.apx-card-header,
.card.apx-card > .card-header {
  background: var(--apx-bg-2);
  border-bottom: 1px solid var(--apx-border);
}

.apx-card-footer,
.card.apx-card > .card-footer {
  background: var(--apx-bg-2);
  border-top: 1px solid var(--apx-border);
}

/* ===== APX Sous-navbar ===== */
.apx-subnavbar {
  position: sticky;
  top: 0;
  background: rgba(12, 12, 16, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 1030;
}

.apx-subnavbar::before,
.apx-subnavbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--apx-accent, #0dcaf0), transparent);
}

.apx-subnavbar::before {
  top: 0;
  opacity: .6;
}

.apx-subnavbar::after {
  bottom: 0;
  opacity: .6;
}

.apx-subnavbar .nav-link {
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: .84rem;
  font-weight: 600;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  position: relative;
  transition: all .2s ease-in-out;
}

.apx-subnavbar .nav-link i {
  font-size: 1rem;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}

.apx-subnavbar .nav-link:hover,
.apx-subnavbar .nav-link:focus {
  color: var(--apx-accent, #0dcaf0);
  text-shadow: 0 0 6px rgba(13,202,240,0.45);
}

.apx-subnavbar .nav-link:hover i,
.apx-subnavbar .nav-link:focus i {
  opacity: 1;
  transform: scale(1.15);
}

.apx-subnavbar .nav-link::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: .3rem;
  height: 2px;
  background: var(--apx-accent, #0dcaf0);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  opacity: .75;
}

.apx-subnavbar .nav-link:hover::after,
.apx-subnavbar .nav-link.active::after {
  transform: scaleX(1);
}

.apx-subnavbar .nav-link.active {
  color: var(--apx-accent, #0dcaf0);
  text-shadow: 0 0 8px rgba(13,202,240,0.5);
}

.apx-subnavbar .nav-item + .nav-item .nav-link {
  border-left: 1px solid rgba(255,255,255,0.08);
}

/* Corrige le décalage des ancres */
h3[id],
a[id] {
  scroll-margin-top: 3rem;
}

/* Colonnes égales pour tableaux attente/résultat */
.apx-equal-cols {
  table-layout: fixed;
  width: 100%;
}

.apx-equal-cols td,
.apx-equal-cols th {
  word-wrap: break-word;
  white-space: normal;
  vertical-align: middle;
}

/* ===== ScanQueue table ===== */
.apx-scanqueue-table {
  table-layout: auto;
  width: 100%;
}

.apx-scanqueue-col-id {
  white-space: nowrap;
  width: 100px;
}

.apx-scanqueue-col-prio {
  white-space: nowrap;
  width: 70px;
}

.apx-scanqueue-col-host {
  white-space: nowrap;
  min-width: 240px;
}

.apx-scanqueue-col-scheme {
  white-space: nowrap;
  width: 100px;
}

.apx-scanqueue-col-status {
  white-space: nowrap;
  width: 110px;
}

.apx-scanqueue-col-date {
  white-space: nowrap;
  width: 150px;
}

.apx-scanqueue-cell-host {
  width: 1%;
  white-space: nowrap;
}

.apx-scanqueue-cell-api {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.apx-queue-autorefresh-select {
  width: auto;
}

/* ===== Sites list ===== */
.apx-siteslist-info-card {
  border-left: 3px solid var(--apx-accent);
}

.apx-pagination-status {
  white-space: nowrap;
}

.apx-siteslist-table .apx-siteslist-col-details {
  width: 60px;
}

.apx-siteslist-table .apx-siteslist-col-domain {
  width: 520px;
}

.apx-siteslist-table .apx-siteslist-col-tests,
.apx-siteslist-table .apx-siteslist-col-grade,
.apx-siteslist-table .apx-siteslist-col-score {
  width: 120px;
}

.apx-siteslist-table .apx-siteslist-col-date {
  width: 240px;
}

/* ===== Site detail ===== */
.apx-site-detail-inline-icon {
  line-height: 1;
}

.apx-site-detail-result-link-icon {
  color: var(--apx-accent);
}

.apx-site-detail-summary-head {
  border-bottom: 1px solid currentColor !important;
}

/* ===== My sites ===== */
.apx-my-sites-info-card {
  border-left: 3px solid var(--apx-accent);
}

.apx-my-sites-memberships-table .apx-my-sites-col-domain,
.apx-my-sites-search-table .apx-my-sites-col-domain {
  width: 520px;
}

.apx-my-sites-memberships-table .apx-my-sites-col-role {
  width: 180px;
}

.apx-my-sites-memberships-table .apx-my-sites-col-access,
.apx-my-sites-search-table .apx-my-sites-col-action {
  width: 140px;
}

/* ===== Evolution tables ===== */
.apx-evolution-table .apx-evolution-col-details {
  width: 60px;
}

.apx-evolution-table .apx-evolution-col-domain {
  width: 520px;
}

.apx-evolution-table .apx-evolution-col-delta {
  width: 60px;
}

/* ===== Test detail utilities ===== */
.apx-lh-1 {
  line-height: 1 !important;
}

.apx-border-bottom-current {
  border-bottom: 1px solid currentColor !important;
}

.apx-table-fixed-100 {
  table-layout: fixed;
  width: 100%;
}

.apx-table-auto-100 {
  table-layout: auto !important;
  width: 100%;
}

.apx-w-300 {
  width: 300px !important;
}

.apx-w-240 {
  width: 240px !important;
}

.apx-w-200-fixed {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

.apx-w-120 {
  width: 120px !important;
}

.apx-w-100 {
  width: 100px !important;
}

.apx-w-50p {
  width: 50% !important;
}

.apx-nowrap-w-1 {
  white-space: nowrap !important;
  width: 1% !important;
}

.apx-ellipsis-nowrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.apx-break-anywhere {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.apx-h4-shs {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .2px;
}

.apx-health-raw-json {
  max-height: 360px;
  overflow: auto;
}

.apx-main-nav {
  gap: .35rem;
}

.apx-main-nav-item {
  display: flex;
  align-items: stretch;
}

.apx-main-nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 44px;
  padding: .72rem 1rem !important;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.84) !important;
  text-decoration: none;
  line-height: 1;
  font-weight: 500;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.apx-main-nav-link i {
  font-size: 1rem;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
}

.apx-main-nav-link:hover,
.apx-main-nav-link:focus {
  color: #fff !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.apx-main-nav-link:hover i,
.apx-main-nav-link:focus i {
  opacity: 1;
  transform: scale(1.08);
}

.apx-main-nav-link:active {
  transform: translateY(1px);
  background: rgba(255,255,255,.08);
}

.apx-main-nav-link.active,
.apx-main-nav-link[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    rgba(158,203,255,.16) 0%,
    rgba(158,203,255,.08) 100%
  );
  border-color: rgba(158,203,255,.24);
  box-shadow:
    inset 0 0 0 1px rgba(158,203,255,.08),
    0 0 16px rgba(158,203,255,.08);
}

.apx-main-nav-link.active i,
.apx-main-nav-link[aria-current="page"] i {
  opacity: 1;
}

@media (max-width: 991.98px) {
  .apx-main-nav {
    gap: .3rem;
    padding-top: .65rem;
  }

  .apx-main-nav-item {
    width: 100%;
  }

  .apx-main-nav-link {
    width: 100%;
    border-radius: .85rem;
  }
}

/* ===== User menu / account dropdown ===== */

.apx-user-menu {
  display: flex;
  align-items: stretch;
}

.apx-user-menu-toggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .72rem 1rem !important;
  margin-left: .5rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.84) !important;
  text-decoration: none;
  line-height: 1;
  font-weight: 500;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.apx-user-menu-toggle i {
  font-size: 1rem;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
}

.apx-user-menu-toggle:hover,
.apx-user-menu-toggle:focus {
  color: #fff !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.apx-user-menu-toggle:hover i,
.apx-user-menu-toggle:focus i {
  opacity: 1;
  transform: scale(1.08);
}

.apx-user-menu-toggle:active {
  transform: translateY(1px);
  background: rgba(255,255,255,.08);
}

.apx-user-menu.show .apx-user-menu-toggle,
.apx-user-menu-toggle[aria-expanded="true"] {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    rgba(158,203,255,.16) 0%,
    rgba(158,203,255,.08) 100%
  );
  border-color: rgba(158,203,255,.24);
  box-shadow:
    inset 0 0 0 1px rgba(158,203,255,.08),
    0 0 16px rgba(158,203,255,.08);
}

.apx-user-menu-toggle::after {
  margin-left: .35rem;
}

/* dropdown panel */
.apx-user-menu-dropdown {
  min-width: 240px;
  margin-top: .5rem !important;
  padding: .4rem 0;
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1080;
}

/* header */
.apx-user-menu-header {
  padding: .35rem 1rem .55rem;
  color: rgba(255,255,255,.68);
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
}

/* divider */
.apx-user-menu-dropdown .dropdown-divider {
  border-color: rgba(255,255,255,.08);
  margin: .35rem 0;
}

/* items */
.apx-user-menu-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 42px;
  padding: .7rem 1rem;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  transition:
    background-color .16s ease,
    color .16s ease,
    padding-left .16s ease;
}

.apx-user-menu-item i {
  width: 1rem;
  text-align: center;
  opacity: .92;
}

.apx-user-menu-item:hover,
.apx-user-menu-item:focus {
  background: rgba(255,255,255,.06);
  color: #fff;
  padding-left: 1.1rem;
}

.apx-user-menu-item-button {
  text-align: left;
  cursor: pointer;
}

/* mobile */
@media (max-width: 991.98px) {
  .apx-user-menu {
    width: 100%;
  }

  .apx-user-menu-toggle {
    width: 100%;
    margin-left: 0;
    margin-top: .35rem;
    justify-content: flex-start;
  }

  .apx-user-menu-dropdown {
    width: 100%;
    min-width: 0;
  }
}

.apx-user-menu-login {
  display: flex;
  align-items: stretch;
}

.apx-footer-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
}

.apx-footer-topbtn {
  position: absolute;
  left: 0.25rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  opacity: 0.9;
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.apx-footer-topbtn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.apx-footer-text {
  text-align: center;
}

/* ==========================================================================
   Alerts Bootstrap - variante APX
   ========================================================================== */

.apx-alert {
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
  color: #e5e7eb;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

.apx-alert .apx-alert-icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1.25;
  margin-top: 0.05rem;
}

.apx-alert .apx-alert-content {
  min-width: 0;
  flex: 1 1 auto;
}

.apx-alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.apx-alert .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.65;
}

.apx-alert .btn-close:hover,
.apx-alert .btn-close:focus {
  opacity: 1;
}

.apx-alert.alert-success {
  border-color: rgba(34, 197, 94, 0.42);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.9));
  color: #dcfce7;
}

.apx-alert.alert-info {
  border-color: rgba(56, 189, 248, 0.42);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.9));
  color: #e0f2fe;
}

.apx-alert.alert-warning {
  border-color: rgba(245, 158, 11, 0.48);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(15, 23, 42, 0.9));
  color: #fef3c7;
}

.apx-alert.alert-danger {
  border-color: rgba(239, 68, 68, 0.5);
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.17), rgba(15, 23, 42, 0.9));
  color: #fee2e2;
}

.apx-alert.alert-secondary {
  border-color: rgba(148, 163, 184, 0.32);
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(15, 23, 42, 0.9));
  color: #e5e7eb;
}

/* ==========================================================================
   Buttons Bootstrap - variante APX
   ========================================================================== */

.btn {
  border-radius: 0.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

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

.btn:active,
.btn.active {
  transform: translateY(0);
}

/* Bouton principal APX : sombre + accent bleu */
.btn-primary {
  --bs-btn-color: #eaf2ff;
  --bs-btn-bg: rgba(15, 23, 42, 0.92);
  --bs-btn-border-color: rgba(96, 165, 250, 0.42);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.96);
  --bs-btn-hover-border-color: rgba(96, 165, 250, 0.85);

  --bs-btn-focus-shadow-rgb: 96, 165, 250;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(30, 64, 175, 0.42);
  --bs-btn-active-border-color: rgba(147, 197, 253, 0.95);

  --bs-btn-disabled-color: rgba(203, 213, 225, 0.48);
  --bs-btn-disabled-bg: rgba(15, 23, 42, 0.42);
  --bs-btn-disabled-border-color: rgba(148, 163, 184, 0.18);

  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
  border-color: var(--bs-btn-border-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(15, 23, 42, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
  border-color: var(--bs-btn-hover-border-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(96, 165, 250, 0.16),
    0 0 18px rgba(59, 130, 246, 0.18);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background:
    linear-gradient(180deg, rgba(30, 64, 175, 0.5), rgba(15, 23, 42, 0.98));
  border-color: var(--bs-btn-active-border-color);
  box-shadow:
    inset 0 2px 10px rgba(2, 6, 23, 0.45),
    0 0 18px rgba(59, 130, 246, 0.14);
}

/* Bouton outline primaire : même langage, plus discret */
.btn-outline-primary {
  --bs-btn-color: #bfdbfe;
  --bs-btn-border-color: rgba(96, 165, 250, 0.38);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.88);
  --bs-btn-hover-border-color: rgba(96, 165, 250, 0.78);

  --bs-btn-focus-shadow-rgb: 96, 165, 250;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(30, 64, 175, 0.38);
  --bs-btn-active-border-color: rgba(147, 197, 253, 0.9);

  --bs-btn-disabled-color: rgba(191, 219, 254, 0.38);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(96, 165, 250, 0.18);

  background: rgba(15, 23, 42, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 16px rgba(59, 130, 246, 0.15);
}

/* Bouton secondaire APX */
.btn-outline-secondary {
  --bs-btn-color: #cbd5e1;
  --bs-btn-border-color: rgba(148, 163, 184, 0.28);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(30, 41, 59, 0.86);
  --bs-btn-hover-border-color: rgba(148, 163, 184, 0.5);

  --bs-btn-focus-shadow-rgb: 148, 163, 184;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: rgba(51, 65, 85, 0.68);
  --bs-btn-active-border-color: rgba(148, 163, 184, 0.62);

  --bs-btn-disabled-color: rgba(203, 213, 225, 0.38);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(148, 163, 184, 0.14);

  background: rgba(15, 23, 42, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 14px rgba(148, 163, 184, 0.12);
}

/* État disabled plus lisible */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.62;
}

.apx-user-menu-account-icon {
  color: #22c55e;
}

.apx-user-menu-toggle:hover .apx-user-menu-account-icon,
.apx-user-menu-toggle:focus .apx-user-menu-account-icon,
.apx-user-menu-toggle.show .apx-user-menu-account-icon {
  color: #4ade80;
}

/* ==========================================================================
   Navbar icons - APX accents
   ========================================================================== */

.apx-nav-icon-home {
  color: #38bdf8;
}

.apx-nav-icon-sites {
  color: #60a5fa;
}

.apx-nav-icon-up {
  color: #22c55e;
}

.apx-nav-icon-down {
  color: #f97316;
}

.apx-nav-icon-about {
  color: #2dd4bf; /* teal */
}

.apx-nav-icon-tools {
  color: #facc15;
}

.apx-main-nav-link:hover i,
.apx-main-nav-link:focus i,
.apx-main-nav-link.active i,
.apx-user-menu-toggle:hover i,
.apx-user-menu-toggle:focus i,
.apx-user-menu-toggle.active i {
  filter: brightness(1.18);
}

.apx-autorefresh-select {
  width: auto;
  min-width: 6.5rem;
  color: var(--bs-light);
  background-color: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: none;
}

.apx-autorefresh-select:focus {
  color: var(--bs-light);
  background-color: rgba(15, 23, 42, 0.98);
  border-color: var(--apx-accent, #38bdf8);
  box-shadow: 0 0 0 0.15rem rgba(56, 189, 248, 0.18);
}

.apx-autorefresh-select:hover {
  border-color: rgba(56, 189, 248, 0.65);
}

.apx-autorefresh-select option {
  color: #e5e7eb;
  background-color: #0f172a;
}