/* ===========================================================
   KOBALT DARK THEME — Full rewrite
   - Palette sombre, contrastes, accessibilité
   - Navbar sticky, dropdowns dark
   - Cards, tables, Grid.js, forms, charts
   =========================================================== */

/* === Palette & tokens === */
:root{
  --k-bg:#1e262d;          /* fond global */
  --k-text:#EEF3F4;        /* texte principal */
  --k-emph:#d95462;        /* accent / liens */
  --k-cta:#db5461;         /* boutons primaires */
  --k-muted:#9fb0b8;       /* texte secondaire */

  --k-nav:#131a20cc;       /* navbar translucide */
  --k-card:#171d23;        /* fond cartes */
  --k-border:#2a343d;      /* bordures */
  --k-input:#12171c;       /* inputs */
  --k-input-border:#2a333b;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.30);
  --shadow-md: 0 14px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.50);

  --focus-ring: 0 0 0 .2rem rgba(217,84,98,.35);
}

/* === Global === */
html,body{height:100%}
body{
  background:var(--k-bg)!important;
  color:var(--k-text)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--k-emph); text-decoration:none; }
a:hover{ opacity:.9; }
.muted{ color:var(--k-muted)!important; }
.text-kobalt{ color:var(--k-emph)!important; }

.brand-logo{ height:42px }

/* === Layout spacing pour navbar sticky === */
.kobalt-main{ padding-top: 10px; }

/* === Cards === */
.card-kobalt{
  background:var(--k-card);
  color:var(--k-text);
  border:1px solid var(--k-border);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
.card-kobalt .card-header{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom:1px solid var(--k-border);
}
.card-kobalt:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  transition:transform .2s ease, box-shadow .2s ease;
}

/* === Buttons === */
.btn-kobalt{
  background:var(--k-cta);
  color:#fff;
  border:none;
  box-shadow:0 8px 20px rgba(219,84,97,.35);
}
.btn-kobalt:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 12px 26px rgba(219,84,97,.45); }
.btn-logout{ background:transparent;border:1px solid #506070;color:#cfd6da }
.btn-logout:hover{ background:#2a333b;border-color:#2a333b;color:#fff }
.btn-outline-secondary{ border-color:#5a6a76;color:#d8e1e5 }
.btn-outline-secondary:hover{ background:#28323a;border-color:#6f808c;color:#fff }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring)!important; }

/* === Forms === */
.form-control,.form-select{
  background:var(--k-input);
  border:1px solid var(--k-input-border);
  color:var(--k-text);
}
.form-control::placeholder{ color:#97a6ad; opacity:.85; }
.form-control:focus,.form-select:focus{
  background:var(--k-input);
  color:var(--k-text);
  border-color:var(--k-emph);
  box-shadow:var(--focus-ring);
}

/* === Navbar / Dropdown === */
.navbar-kobalt{
  background:var(--k-nav);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.38);
}
.navbar-kobalt .nav-link{ color:#e6ecee; }
.navbar-kobalt .nav-link:hover,
.navbar-kobalt .nav-link:focus{ color:#fff; }
.navbar-toggler{ border-color:#39424a; }
.navbar-toggler:focus{ box-shadow:none; }

.navbar-kobalt .dropdown-menu{
  background:#1a222a;
  border:1px solid #2b3540;
  color:var(--k-text);
  box-shadow:var(--shadow-md);
  margin-top:.55rem;
}
.navbar-kobalt .dropdown-item{ color:#dfe6ea; padding:.6rem 1rem; }
.navbar-kobalt .dropdown-item:hover{ background:#232e38; color:#fff; }

/* === Tabs === */
.nav-tabs{ border-bottom:1px solid var(--k-border); }
.nav-tabs .nav-link{
  color:#c6d3d9; border:none; border-bottom:2px solid transparent;
  padding:.6rem 1rem; background:transparent;
}
.nav-tabs .nav-link.active{
  color:#fff; border-bottom-color:var(--k-emph);
}
.sticky-tabs{ position:sticky; top:64px; z-index:1030;
  background:linear-gradient(#1e262d 70%, rgba(30,38,45,0));
  padding:.5rem 0 .25rem;
}

/* === Tables === */
.table{ color:#eaf1f3; }
.table thead{ background:#0f1418; color:#cfe3ea; }
.table-bordered{ border-color:#2b3640; }
.table-hover tbody tr:hover{ background:rgba(255,255,255,.045); }

/* === Grid.js === */
.gridjs-container{ color:var(--k-text); }
.gridjs-wrapper{
  background:var(--k-card)!important;
  border:1px solid var(--k-border)!important;
}
.gridjs-head{ background:#0f1418!important; }
.gridjs-th, .gridjs-td{ border-color:#2b3640!important; }
.gridjs-tr{ border-color:#2b3640!important; }
.gridjs-tr:hover .gridjs-td{ background:rgba(255,255,255,.03); }
.gridjs-input{
  background:var(--k-input)!important; border:1px solid var(--k-input-border)!important; color:var(--k-text)!important;
}
.gridjs-input:focus{ box-shadow:var(--focus-ring)!important; border-color:var(--k-emph)!important; }
.gridjs-pagination .gridjs-pages button{
  background:#0f1418; color:#cfe3ea; border-color:#2b3640;
}
.gridjs-pagination .gridjs-pages .gridjs-currentPage{
  background:var(--k-emph); border-color:transparent; color:#fff;
}

/* === Charts === */
.chart-wrapper{ position:relative; min-height:300px; width:100%; }
.canvas-dark{ background:transparent; }

/* === Stat cards === */
.stat{
  background:linear-gradient(180deg, #151b21, #12171c);
  border:1px solid var(--k-border);
  border-left:6px solid #3a4652;
  border-radius:12px; padding:1rem;
  box-shadow:var(--shadow-sm);
}
.border-left-success{ border-left-color:#198754; }
.border-left-danger{ border-left-color:#dc3545; }
.stat .value{ font-size:1.6rem; font-weight:800; }

/* === Badges status === */
.status-badge{ padding:.25rem .55rem; font-size:.8rem; font-weight:700; border-radius:.5rem; }
.status-200{ background:rgba(25,135,84,.14); color:#46d390; }
.status-3xx{ background:rgba(13,110,253,.18); color:#8fc3ff; }
.status-4xx,.status-5xx,.status-error{ background:rgba(220,53,69,.18); color:#ff9aa6; }

/* === Delta / helpers === */
.delta-up{ color:#46d390; font-weight:700; }
.delta-down{ color:#ff9aa6; font-weight:700; }
.delta-neutral{ color:#9fb0b8; font-weight:600; }
.truncate-url{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }

/* === Focus visible (a11y) === */
a:focus-visible, button:focus-visible,
.form-select:focus-visible, .form-control:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-color:var(--k-emph);
}

/* === Animations === */
.fade-in{ animation:fadeIn .25s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }


.badge-status {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}

.badge-status-actif {
  background: #28a745;
  color: #fff;
}

.badge-status-standby {
  background: #ffc107;
  color: #1e262d;
}

.badge-status-churn {
  background: #dc3545;
  color: #fff;
}

.badge-status-litige {
  background: #fd7e14;
  color: #fff;
}