/* Kincy design tokens + Bootstrap overrides.
 *
 * Source de vérité : design-system/design.md (submodule git).
 * Convention : toute valeur de couleur, font, spacing ou radius doit
 * référencer ces tokens — pas de valeurs magiques dans les templates.
 */

:root {
  /* Primary palette */
  --kincy-cyan: #00ADCE;
  --kincy-blue: #0077BD;
  --kincy-slate: #44546A;

  /* Secondary accents */
  --kincy-magenta: #E7167D;
  --kincy-purple: #6F2282;

  /* Tertiary functional */
  --kincy-green: #6BB52D;
  --kincy-orange: #F08300;

  /* Neutral palette */
  --kincy-neutral-dark: #595959;
  --kincy-neutral-medium: #c4c4c4;
  --kincy-neutral-light: #E2EFF4;

  /* Spacing (8px grid) */
  --kincy-spacing-sm: 8px;
  --kincy-spacing-md: 16px;
  --kincy-spacing-lg: 24px;
  --kincy-spacing-xl: 32px;
  --kincy-spacing-2xl: 48px;

  /* Border radius */
  --kincy-radius-sm: 4px;
  --kincy-radius-md: 8px;
  --kincy-radius-lg: 16px;

  /* Bootstrap overrides — Bootstrap puise dans --bs-* */
  --bs-primary: var(--kincy-cyan);
  --bs-primary-rgb: 0, 173, 206;
  --bs-link-color: var(--kincy-blue);
  --bs-link-color-rgb: 0, 119, 189;
  --bs-link-hover-color: var(--kincy-slate);
  --bs-border-radius: var(--kincy-radius-sm);
  --bs-border-radius-lg: var(--kincy-radius-md);
  --bs-body-color: #1d1d1b;
  --bs-body-bg: #ffffff;
}

body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  background-color: #fafbfc;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.navbar-brand {
  color: var(--kincy-slate);
  letter-spacing: 0.02em;
}

/* Boutons : variante primaire alignée sur la charte (cyan → blue au hover). */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--kincy-cyan);
  --bs-btn-border-color: var(--kincy-cyan);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--kincy-blue);
  --bs-btn-hover-border-color: var(--kincy-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--kincy-blue);
  --bs-btn-active-border-color: var(--kincy-blue);
}

/* Bannière sombre type "hero" — fond slate + accent cyan. */
.kincy-hero {
  background-color: var(--kincy-slate);
  color: #fff;
  border-radius: var(--kincy-radius-md);
  padding: var(--kincy-spacing-xl) var(--kincy-spacing-2xl);
}

.kincy-hero .lead {
  color: rgba(255, 255, 255, 0.85);
}

.kincy-hero .kincy-accent {
  color: var(--kincy-cyan);
}

/* Cartes : surface principale blanche, contour léger neutre. */
.card {
  border-color: rgba(68, 84, 106, 0.15);
  border-radius: var(--kincy-radius-md);
}

.card-title {
  color: var(--kincy-slate);
}

/* Layout principal : sidebar fixe à gauche + main content fluide. */
.kincy-layout {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 73px); /* navbar height ~57px + border */
}

.kincy-sidebar {
  flex: 0 0 240px;
  background-color: #ffffff;
  border-right: 1px solid rgba(68, 84, 106, 0.12);
  padding: var(--kincy-spacing-lg) var(--kincy-spacing-md);
}

.kincy-sidebar-section {
  margin-bottom: var(--kincy-spacing-lg);
}

.kincy-sidebar-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kincy-neutral-dark);
  margin-bottom: var(--kincy-spacing-sm);
  padding-left: var(--kincy-spacing-sm);
}

.kincy-sidebar .nav-link {
  color: var(--kincy-slate);
  padding: 6px var(--kincy-spacing-sm);
  border-radius: var(--kincy-radius-sm);
  font-size: 0.9375rem;
}

.kincy-sidebar .nav-link:hover {
  background-color: var(--kincy-neutral-light);
  color: var(--kincy-slate);
}

.kincy-sidebar .nav-link.active {
  background-color: var(--kincy-cyan);
  color: #ffffff;
  font-weight: 500;
}

.kincy-main {
  flex: 1 1 auto;
  padding: var(--kincy-spacing-xl) var(--kincy-spacing-xl);
  max-width: 100%;
  /* Pas d'overflow ici : un conteneur de scroll casserait le `position:
   * sticky` de la barre de filtres. Le scroll horizontal des tableaux
   * larges est porté localement par `.table-responsive`. */
}

/* KPI : grand chiffre cyan sur surface secondaire (neutral-light). */
.kincy-kpi {
  background-color: var(--kincy-neutral-light);
  border: none;
}

.kincy-kpi .kincy-kpi-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--kincy-cyan);
  line-height: 1;
}

.kincy-kpi .kincy-kpi-label {
  color: var(--kincy-slate);
  font-weight: 500;
}

/* --- Annuaire clients : barre de filtres + tableau ------------------- */

/* Barre de filtres collante : reste visible quand le tableau défile. */
.kincy-filter-bar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kincy-spacing-lg);
  background-color: var(--bs-body-bg);
  padding: var(--kincy-spacing-md) 0;
  margin-bottom: var(--kincy-spacing-md);
  border-bottom: 1px solid rgba(68, 84, 106, 0.12);
}

.kincy-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kincy-spacing-sm);
}

.kincy-filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kincy-neutral-dark);
}

/* Capsule de filtre : contour neutre au repos, fond cyan une fois active. */
.kincy-chip {
  border: 1px solid rgba(68, 84, 106, 0.3);
  background-color: transparent;
  color: var(--kincy-slate);
  border-radius: var(--kincy-radius-lg);
  padding: 4px var(--kincy-spacing-md);
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease,
    border-color 0.12s ease;
}

.kincy-chip:hover {
  border-color: var(--kincy-cyan);
  color: var(--kincy-cyan);
}

.kincy-chip--active {
  background-color: var(--kincy-cyan);
  border-color: var(--kincy-cyan);
  color: #fff;
}

.kincy-chip--active:hover {
  color: #fff;
}

/* Vignette logo client : taille fixe, logo contenu sans déformation. */
.kincy-logo-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--kincy-radius-sm);
}

/* Avatar de repli : initiale sur fond neutre quand aucun logo n'est dispo. */
.kincy-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--kincy-radius-sm);
  background-color: var(--kincy-neutral-light);
  color: var(--kincy-slate);
  font-weight: 600;
}

/* Pastille de statut : pleine, sans texte. Verte si actif, gris clair
 * si inactif. */
.kincy-status-dot {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  vertical-align: middle;
}

.kincy-status-dot--ok {
  background-color: var(--kincy-green);
}

.kincy-status-dot--off {
  background-color: var(--kincy-neutral-medium);
}

/* Logo Atera : en couleur si le client a Atera, en niveaux de gris sinon. */
.kincy-atera-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.kincy-atera-logo--off {
  filter: grayscale(1);
  opacity: 0.45;
}

/* Lien vers la fiche Halo : picto « lien externe » discret, cyan charte. */
.kincy-halo-link {
  display: inline-flex;
  align-items: center;
  color: var(--kincy-cyan);
}

.kincy-halo-link:hover {
  color: var(--kincy-blue);
}

/* Microsoft CSP : une seule capsule verte contenant le check + le nombre
 * de tenants (token charte, pas le vert Bootstrap) ; croix atténuée quand
 * aucun tenant. */
.kincy-chip-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--kincy-green);
  color: #fff;
  border-radius: var(--kincy-radius-lg);
  padding: 2px var(--kincy-spacing-sm);
  font-size: 0.8125rem;
  font-weight: 600;
}

.kincy-check {
  display: block;
}

/* Pastille ronde du nombre de tenants, logée DANS la capsule verte :
 * fond blanc + chiffre vert pour ressortir sur le fond vert. */
.kincy-tenant-count {
  background-color: #fff;
  color: var(--kincy-green);
}

.kincy-csp-none {
  color: var(--kincy-neutral-dark);
  opacity: 0.6;
}

/* En-têtes de colonnes collants : restent visibles au scroll, calés juste
 * sous la barre de filtres (offset --annuaire-thead-top mesuré à l'init,
 * fallback 64px). Fond opaque obligatoire pour que les lignes ne
 * transparaissent pas sous le thead figé. */
.kincy-annuaire-table thead th {
  position: sticky;
  top: var(--annuaire-thead-top, 64px);
  z-index: 3;
  background-color: var(--kincy-neutral-light);
  border-bottom: 2px solid rgba(68, 84, 106, 0.15);
}

/* --- Page synthèse client : cartouche + cartes ----------------------- */

/* Cartouche de titre : logo mis en avant + nom du client. */
.kincy-client-header {
  display: flex;
  align-items: center;
  gap: var(--kincy-spacing-lg);
  background-color: var(--kincy-neutral-light);
  border-radius: var(--kincy-radius-md);
  padding: var(--kincy-spacing-lg);
}

.kincy-client-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--kincy-radius-sm);
  background-color: #fff;
}

.kincy-client-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--kincy-slate);
}

/* Carte de synthèse : format fixe partagé par toutes les cartes.
 * Hauteur fixe ; bandeau + toolbar figés en tête ; corps scrollable. */
.kincy-card {
  display: flex;
  flex-direction: column;
  height: 420px;
  background-color: #fff;
  border: 1px solid rgba(68, 84, 106, 0.15);
  border-radius: var(--kincy-radius-md);
  overflow: hidden;
}

.kincy-card--loading {
  align-items: center;
  justify-content: center;
}

.kincy-card-bandeau {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kincy-spacing-md);
  border-bottom: 1px solid rgba(68, 84, 106, 0.12);
}

.kincy-card-title {
  font-weight: 600;
  color: var(--kincy-slate);
}

.kincy-card-expand {
  display: inline-flex;
  align-items: center;
  color: var(--kincy-neutral-dark);
}

.kincy-card-expand:hover {
  color: var(--kincy-cyan);
}

/* Toolbar : emplacement fixe en tête de carte (ne défile pas avec le corps).
 * Masquée quand la carte n'a pas de toolbar. */
.kincy-card-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kincy-spacing-sm);
  padding: var(--kincy-spacing-sm) var(--kincy-spacing-md);
  border-bottom: 1px solid rgba(68, 84, 106, 0.08);
}

.kincy-card-toolbar:empty {
  display: none;
}

.kincy-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--kincy-spacing-md);
}

/* Conteneur du camembert : hauteur fixe (Chart.js responsive non proportionnel). */
.kincy-chart-wrap {
  position: relative;
  height: 200px;
  margin-bottom: var(--kincy-spacing-md);
}

/* Carré de couleur en 1re colonne du tableau, synchro avec le camembert. */
.kincy-color-col {
  width: 1.5rem;
}

.kincy-color-chip {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* Champ de recherche + lien de réinitialisation dans la barre de filtres. */
.kincy-filter-group--grow {
  flex: 1 1 220px;
}

.kincy-filter-search {
  min-width: 200px;
}

.kincy-filter-reset {
  margin-left: auto;
  align-self: center;
  border: none;
  background: none;
  padding: 0;
  color: var(--kincy-slate);
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.kincy-filter-reset:hover {
  color: var(--kincy-cyan);
}