/* ============================================================
   Aurelux - Brand theme (PLACEHOLDER)
   Gold accent on charcoal. Loaded AFTER styles.css.
   Swap the values below for the client's exact brand hex/logo.
   Single source of truth for the palette.
   ============================================================ */

:root {
  --primary: #c08a2d;            /* gold (light theme) */
  --primary-foreground: #ffffff; /* text on gold buttons */
}
.dark {
  --primary: #d4af37;            /* brighter gold on dark */
  --primary-foreground: #1a1a1a;
}

/* Brand tokens reused by custom rules below */
:root {
  --aurelux-charcoal: #1b1b20;
  --aurelux-gold: #d4af37;
}

/* ---------- Charcoal sidebar (rail + secondary) ---------- */
#sidebar { background-color: var(--aurelux-charcoal) !important; }

#sidebar_primary { border-inline-end-color: rgba(255, 255, 255, 0.08) !important; }

/* Text & icons on the dark sidebar */
#sidebar .text-mono { color: #f4f4f5 !important; }
#sidebar .text-foreground { color: #e4e4e7 !important; }
#sidebar .text-secondary-foreground { color: #9ca3af !important; }
#sidebar .border-input { border-color: rgba(255, 255, 255, 0.08) !important; }

/* Rail icon buttons */
#sidebar_primary .kt-btn-ghost i { color: #a1a1aa; }
#sidebar_primary .kt-btn-ghost:hover { background-color: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
#sidebar_primary .kt-btn-ghost:hover i { color: var(--aurelux-gold) !important; }

/* Active surfaces inside the sidebar (client feedback): solid WHITE pill + GOLD icon/text */
#sidebar .bg-background { background-color: #ffffff !important; }
#sidebar .border-border { border-color: #ffffff !important; }

/* Secondary menu links */
#sidebar_secondary .kt-menu-link { color: #d4d4d8; }
#sidebar_secondary .kt-menu-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; }

/* Keep the ACTIVE rail icon white + gold even on hover (the generic hover rules above
   would otherwise repaint it translucent). Active markup carries .bg-background. */
#sidebar_primary .kt-btn-ghost.bg-background,
#sidebar_primary .kt-btn-ghost.bg-background:hover { background-color: #ffffff !important; border-color: #ffffff !important; }
#sidebar_primary .kt-btn-ghost.bg-background i,
#sidebar_primary .kt-btn-ghost.bg-background:hover i { color: var(--primary) !important; }

/* Same for the ACTIVE secondary menu entry (.here): white pill, gold label */
#sidebar_secondary .kt-menu-item.here .kt-menu-link,
#sidebar_secondary .kt-menu-item.here .kt-menu-link:hover { background-color: #ffffff !important; border-color: #ffffff !important; }
#sidebar_secondary .kt-menu-item.here .kt-menu-title { color: var(--primary) !important; }

/* Brand wordmark */
.aurelux-wordmark { letter-spacing: 0.14em; }

/* iOS-style notification badge on the brand logo (count of unread notifications) */
.brand-logo { position: relative; display: inline-flex; }
.brand-logo-badge {
  position: absolute;
  top: -7px;
  inset-inline-end: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ef4444;                         /* iOS red */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border: 2px solid var(--aurelux-charcoal);   /* ring to lift it off the dark sidebar */
  box-sizing: border-box;
  cursor: pointer;
}
.brand-logo-badge:hover { background: #dc2626; }
/* On the light mobile top bar, ring the badge in the bar's colour instead */
#header .brand-logo-badge { border-color: var(--muted, #f4f4f5); }

/* Same badge on a rail icon (unread chat messages, request 403) */
#sidebar_primary .aurelux-rail-item .kt-btn { position: relative; }
.aurelux-rail-badge {
  position: absolute;
  top: 1px;
  inset-inline-end: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border: 2px solid var(--aurelux-charcoal);
  box-sizing: border-box;
  pointer-events: none;
}
.aurelux-rail-badge[hidden] { display: none; }

/* Left gutter between the charcoal sidebar and the content card (match the 20px gutters on the other sides) */
@media (min-width: 1024px) {
  .app-content { margin-inline-start: calc(var(--sidebar-width) + 1.25rem) !important; }
}

/* ---------- Clients list: search + filters bar ----------
   Mobile: one control per line, with top/bottom breathing room.
   Desktop: a single full-width row, columns sized by ratio so every label
   (search placeholder, "Toutes les années", …) fits. KTUI replaces each
   <select> with a sibling .kt-select-wrapper, so we size those. */
.clients-filters {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: stacked, one per line */
  gap: 0.625rem;
  width: 100%;
  padding-block: 0.5rem;          /* mobile margins top/bottom */
}
.clients-filters > * { min-width: 0; }                 /* allow columns to shrink */
.clients-filters .kt-input,
.clients-filters .kt-select-wrapper { width: 100%; max-width: 100%; }
@media (min-width: 1024px) {
  .clients-filters {
    /* search | Ville | Volume | Année | Statut | Stockage */
    grid-template-columns: 2.2fr 1.1fr 1.2fr 1.2fr 1.1fr 1.1fr;
    align-items: center;
    padding-block: 0;
  }
}

/* ---------- Sortable table headers ---------- */
.kt-sort-th:hover { color: var(--primary); }
.kt-sort-icon { opacity: 0; transition: opacity 0.15s ease; }
.kt-sort-th:hover .kt-sort-icon { opacity: 0.45; }
.kt-sort-th[aria-sort="ascending"] .kt-sort-icon,
.kt-sort-th[aria-sort="descending"] .kt-sort-icon { opacity: 1; color: var(--primary); }

/* ---------- Alerts: deeper success green (2026-08-04) ----------
   The template ships kt-alert-success on green-500; we prefer green-600
   across every alert variant for better contrast with the white text. */
.kt-alert-success { background-color: var(--color-green-600); }
.kt-alert-outline.kt-alert-success,
.kt-alert-mono.kt-alert-success .kt-alert-icon { color: var(--color-green-600); }

/* ---------- Sélecteur de date (flatpickr) ----------
   Le thème par défaut est neutre : on le raccorde à la palette du board
   (accent doré, mêmes rayons, même bordure que les kt-input). */
.flatpickr-calendar {
  border: 1px solid var(--input);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.12);
  font-family: inherit;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.flatpickr-day.today { border-color: var(--primary); }
.flatpickr-day:hover { background: var(--accent); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekday { color: var(--secondary-foreground); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.numInputWrapper input.cur-year { font-weight: 600; }
/* Le champ visible remplace l'input natif : il doit rester identique aux autres. */
input.flatpickr-alt { width: 100%; }

/* ============================================================
   Barre laterale : libelles sous les icones + colonne repliable
   (demande client 2026-08-31)

   Tout est ecrit ici en CSS simple, PAS en classes utilitaires : styles.css
   est purge, une classe Tailwind inedite ne produirait aucune regle (voir
   PROJECT.md section 4). Les regles ci-dessous ne font que SURCHARGER la
   maquette validee ; les supprimer rend la barre a son etat d'origine.
   ============================================================ */

/* Largeurs. Definies ici et non dans la classe du <body> pour la meme raison :
   `[--rail-width:96px]` n'existe pas dans le CSS compile. */
body.antialiased { --rail-width: 96px; }

@media (min-width: 1024px) {

  /* Le tiroir mobile garde sa largeur d'origine (290px) : seule la barre de
     bureau s'elargit, du nombre de pixels gagnes par le rail. */
  body.antialiased { --sidebar-width: 316px; }   /* rail 96 + colonne secondaire 220, inchangee */

  /* ---------- 1. Le rail porte maintenant un libelle sous chaque icone ---------- */
  /* PIEGE : KTUI RETIRE `top-0 bottom-0` de #sidebar sur desktop (ces classes
     font partie de data-kt-drawer-class, donc du mode tiroir mobile). La barre
     est donc `fixed` SANS reperes verticaux : sa hauteur suit son contenu et
     rien ne borne le rail. On la borne ici, sinon la liste des sections ne peut
     pas defiler et finit sous l'avatar quand toutes les sections seront livrees. */
  #sidebar { height: 100vh; }
  #sidebar_primary {
    width: var(--rail-width);
    gap: 0.75rem;
    height: 100vh;
    min-height: 0;
    /* Le pied de barre (deconnexion + avatar) est en position: fixed par-dessus :
       la zone defilante doit s'arreter au-dessus, sinon les dernieres sections
       passent sous l'avatar au lieu d'etre atteignables au defilement. */
    padding-bottom: 120px;
  }

  /* La pastille reste la meme pastille (memes classes, donc memes regles
     d'etat actif plus haut) : elle passe simplement en colonne et s'agrandit. */
  #sidebar_primary .aurelux-rail-item .kt-btn {
    width: calc(var(--rail-width) - 12px);
    height: auto;
    min-height: 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px 5px;
  }
  .aurelux-rail-label {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.01em;
    color: #a1a1aa;
    max-width: 100%;
    /* .kt-btn impose nowrap : sans cela un libelle long deborde de la pastille
       blanche de l'element actif au lieu de passer a la ligne. */
    white-space: normal;
    overflow-wrap: break-word;
  }
  #sidebar_primary .kt-btn-ghost:hover .aurelux-rail-label { color: var(--aurelux-gold); }
  #sidebar_primary .kt-btn-ghost.bg-background .aurelux-rail-label,
  #sidebar_primary .kt-btn-ghost.bg-background:hover .aurelux-rail-label { color: var(--primary); }

  /* La liste defile si un jour toutes les sections sont livrees : le rail ne
     doit jamais passer sous le pied de barre (avatar + deconnexion, fixes). */
  .aurelux-rail-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .aurelux-rail-list::-webkit-scrollbar { width: 0; }
  .aurelux-rail-item { width: 100%; display: flex; justify-content: center; position: relative; }

  /* ---------- 2. Bouton Reduire / Afficher ---------- */
  .aurelux-rail-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: calc(var(--rail-width) - 12px);
    padding: 5px 4px;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: #a1a1aa;
    cursor: pointer;
  }
  .aurelux-rail-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--aurelux-gold);
  }
  .aurelux-rail-toggle i { font-size: 14px; }
  .aurelux-rail-toggle-text { font-size: 9px; line-height: 1.2; letter-spacing: 0.02em; }

  /* ---------- 3. Etat replie ---------- */
  html.aurelux-sidebar-collapsed body.antialiased { --sidebar-width: var(--rail-width); }
  html.aurelux-sidebar-collapsed #sidebar_secondary { display: none; }
  html.aurelux-sidebar-collapsed #sidebar { width: var(--rail-width); }
  /* Replie, le volet remplace l'infobulle : les deux ensemble se chevauchent. */
  html.aurelux-sidebar-collapsed #sidebar_primary .kt-tooltip { display: none !important; }

  /* ---------- 4. Volet au survol (etat replie seulement) ----------
     Replie, le rail devient le seul acces aux sous-pages : le survol d'une
     section ouvre ses enfants. `position: fixed` + placement en JS, sinon la
     liste defilante du rail le rognerait. */
  .aurelux-rail-flyout { display: none; }
  html.aurelux-sidebar-collapsed .aurelux-rail-item:hover .aurelux-rail-flyout,
  html.aurelux-sidebar-collapsed .aurelux-rail-item:focus-within .aurelux-rail-flyout {
    display: block;
    position: fixed;
    z-index: 50;
    min-width: 200px;
    /* Le remplissage a gauche sert de pont : sans lui, les quelques pixels entre
       le rail et le volet suffisent a le refermer pendant le trajet de la souris. */
    padding: 8px 8px 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background-color: var(--aurelux-charcoal);
    box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.55);
  }
  .aurelux-rail-flyout-title {
    font-size: 11px;
    font-weight: 600;
    color: #f4f4f5;
    padding: 2px 8px 6px;
  }
  .aurelux-rail-flyout-link {
    display: block;
    font-size: 13px;
    color: #d4d4d8;
    padding: 6px 8px;
    border-radius: 0.375rem;
  }
  .aurelux-rail-flyout-link:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--aurelux-gold); }
  .aurelux-rail-flyout-link.here { background-color: #ffffff; color: var(--primary); font-weight: 500; }

  /* Le contenu suit la largeur reelle de la barre (transition douce). */
  .app-content { transition: margin-inline-start 0.18s ease; }
  #sidebar { transition: width 0.18s ease; }
}

/* Sous 1024px la barre est un tiroir : rien de tout cela ne s'applique. */
@media (max-width: 1023.98px) {
  .aurelux-rail-label,
  .aurelux-rail-flyout { display: none; }
}