/*
 * CSS propre à mykiwi, chargé après celui de Filament (aucune compilation nécessaire :
 * il suffit de modifier ce fichier et de recharger la page).
 */

:root {
  --primary-kiwi: #ABC738;
}

/* Titre de l'application (header et page de connexion) */
.mykiwi-brand b {
  color: var(--primary-kiwi);
}

/* Formulaire sur une seule colonne, sans occuper toute la largeur de la page */
.mykiwi-formulaire-etroit {
  max-width: 40rem;
}

/*
 * Badges : même nuance que les boutons colorés de Filament (ex. statut dans le formulaire
 * d'inventaire : fond 400 / texte 900 en clair, fond 600 / texte 950 en sombre),
 * au lieu du fond pâle (50) par défaut.
 */

/*
.fi-badge.fi-color {
  background-color: var(--color-400);
  --text: var(--color-900);
  --tw-ring-color: transparent;
}

.dark .fi-badge.fi-color {
  background-color: var(--color-600);
  --text: var(--color-950);
}
*/

/*
 * Le CSS de Filament ne contient que ses classes « fi-* », pas d'utilitaires Tailwind
 * (flex, gap-4, opacity-60...) : les vues du projet utilisent les classes ci-dessous.
 */

/* Lignes de tableau « terminées » (congés passés, objets HS ou perdus, comptes désactivés) */
.mykiwi-attenue {
  opacity: 60%;
}

/* Ligne de tableau tout juste enregistrée (retour depuis l'édition), estompée après quelques secondes */
.mykiwi-ligne-modifiee {
  animation: mykiwi-surbrillance 15s ease-out;
}

@keyframes mykiwi-surbrillance {
  from {
    background-color: color-mix(in srgb, var(--primary-kiwi) 35%, transparent);
  }

  to {
    background-color: transparent;
  }
}

.mykiwi-discret {
  color: var(--gray-500);
  font-size: .875rem;
}

.mykiwi-texte {
  font-size: .875rem;
  line-height: 1.5;
}

.mykiwi-texte p {
  margin: 0 0 .25rem;
}

.mykiwi-code {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: .375rem;
  background: color-mix(in oklab, currentcolor 10%, transparent);
  word-break: break-all;
  user-select: all;
}

/* Récap mensuel des congés */
.mykiwi-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mykiwi-filtre-mois {
  width: 12rem;
}

.mykiwi-filtre-annee {
  width: 8rem;
}

.mykiwi-message {
  user-select: all;
}

.mykiwi-bloc {
  padding-top: .5rem;
}

.mykiwi-nom {
  font-weight: 700;
}

/*
 * Accueil : raccourcis vers les outils, par blocs, avec recherche et métier mis en avant
 * (x-cloak : règle déjà injectée par Livewire)
 */
.mykiwi-outils-entete {
  display: grid;
  gap: .75rem;
}

.mykiwi-outils-metiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.mykiwi-outils-metier {
  padding: .25rem .875rem;
  border: 1.5px solid color-mix(in oklab, currentcolor 18%, transparent);
  border-radius: 999px;
  font-size: .875rem;
  cursor: pointer;
}

.mykiwi-outils-metier:hover {
  border-color: var(--primary-kiwi);
}

.mykiwi-outils-metier[aria-pressed="true"] {
  border-color: var(--primary-kiwi);
  background: var(--primary-kiwi);
  color: var(--gray-950);
  font-weight: 700;
}

.mykiwi-outils-statut {
  min-height: 1.5em;
  margin: 0;
}

/* Blocs empilés en colonnes (effet « masonry ») : un bloc court ne laisse pas de vide sous lui */
.mykiwi-outils-groupes {
  margin-top: .25rem;
  column-gap: 1rem;
  columns: 21rem;
}

/*
 * inline-block : un bloc n'est jamais fragmenté entre deux colonnes (plus sûr que break-inside: avoid,
 * une grille fragmentée perdant l'écart entre ses rangées dans certains navigateurs)
 */
.mykiwi-outils-groupe {
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.mykiwi-outils-groupe-large {
  display: block;
  column-span: all;
}

.mykiwi-outils-groupe .fi-section {
  transition: opacity .2s;
}

.mykiwi-outils-groupe-hors .fi-section {
  opacity: 60%;
}

/* Grille : la tuile remplit toute la hauteur de sa rangée */
.mykiwi-outils-grille>li {
  display: grid;
  position: relative;
}

.mykiwi-outils-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mykiwi-outils-groupe-compact .mykiwi-outils-grille {
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}

/*
 * Contenu aligné en haut : icônes et noms à la même hauteur dans une rangée, quelle que soit la longueur
 * de la description. Conteneur de requête : le texte suit la largeur de la tuile (unités cqi) au lieu de déborder.
 */
.mykiwi-outil {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: .625rem .375rem;
  container-type: inline-size;
  border: 2px solid transparent;
  border-radius: .75rem;
  background: color-mix(in oklab, currentcolor 4%, transparent);
  color: inherit;
  text-align: center;
  text-decoration: none;
  gap: .3125rem;
  transition: opacity .2s, filter .2s, border-color .2s;
}

.mykiwi-outil:hover {
  border-color: color-mix(in oklab, currentcolor 18%, transparent);
}

/* Toutes les icônes dans la même boîte, quelles que soient leurs proportions */
.mykiwi-outil img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.mykiwi-outils-groupe-compact .mykiwi-outil img {
  width: 1.75rem;
  height: 1.75rem;
}

.mykiwi-outil-nom {
  font-size: clamp(.75rem, 14cqi, .875rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.mykiwi-outil-description {
  color: var(--gray-500);
  font-size: clamp(.6875rem, 13cqi, .8125rem);
  line-height: 1.25;
  text-wrap: balance;
}

.mykiwi-outil-pour-moi .mykiwi-outil {
  background: color-mix(in oklab, var(--primary-kiwi) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-kiwi) 55%, transparent);
}

.mykiwi-outil-pour-moi .mykiwi-outil::after {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--primary-kiwi);
  content: "";
}

.mykiwi-outil-autre .mykiwi-outil {
  opacity: 30%;
  filter: grayscale(1);
}

.mykiwi-outil-autre .mykiwi-outil:hover,
.mykiwi-outil-autre .mykiwi-outil:focus-visible {
  opacity: 100%;
  filter: none;
}

/* Étoile des favoris : visible au survol ou au focus, toujours visible une fois l'outil en favori ou sur écran tactile */
.mykiwi-outil-favori {
  position: absolute;
  top: .125rem;
  left: .125rem;
  opacity: 0%;
  transition: opacity .2s;
}

.mykiwi-outils-grille>li:hover .mykiwi-outil-favori,
.mykiwi-outil-favori:focus-visible,
.mykiwi-outil-favori-actif {
  opacity: 100%;
}

@media (hover: none) {
  .mykiwi-outil-favori {
    opacity: 100%;
  }
}

.mykiwi-outils-vide {
  margin: 1rem 0 0;
  padding: 1.5rem;
  border: 1.5px dashed color-mix(in oklab, currentcolor 18%, transparent);
  border-radius: .75rem;
  color: var(--gray-500);
}

.mykiwi-outils-vide button {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mykiwi-outil,
  .mykiwi-outil-favori,
  .mykiwi-outils-groupe .fi-section {
    transition: none;
  }
}

@media (max-width: 30rem) {
  .mykiwi-outils-grille {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  }

  .mykiwi-outil-description {
    display: none;
  }
}

/* Finances */
.mykiwi-ligne-somme {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in oklab, currentcolor 10%, transparent);
}

.mykiwi-ligne-somme:last-child {
  border-bottom: 0;
}

.mykiwi-ligne-somme summary {
  cursor: pointer;
}

.mykiwi-liste {
  margin: .5rem 0 0 1.25rem;
  padding: 0;
  font-size: .875rem;
  list-style: disc;
}

.mykiwi-liste li {
  margin-bottom: .375rem;
}

.mykiwi-somme-success {
  color: var(--success-600);
}

.mykiwi-somme-gray {
  color: var(--gray-500);
}

.mykiwi-total {
  font-weight: 700;
}

/* Tableaux mensuels de la compta (statistiques, TVA) */
.mykiwi-tableau-conteneur {
  overflow-x: auto;
}

.mykiwi-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.mykiwi-tableau th,
.mykiwi-tableau td {
  padding: .375rem .75rem;
  border-bottom: 1px solid color-mix(in oklab, currentcolor 10%, transparent);
  text-align: right;
  white-space: nowrap;
}

.mykiwi-tableau th:first-child {
  text-align: left;
}

.mykiwi-tableau thead th {
  font-weight: 600;
  white-space: normal;
}

.mykiwi-tableau tfoot th,
.mykiwi-tableau tfoot td {
  border-top: 2px solid color-mix(in oklab, currentcolor 25%, transparent);
  font-weight: 700;
}

.mykiwi-tableau a {
  text-decoration: underline;
}

.mykiwi-somme-positive {
  color: var(--success-600);
}

.mykiwi-somme-negative {
  color: var(--danger-600);
}

/* Statistiques : colonnes de graphiques */
.mykiwi-stats-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 2rem;
}

.mykiwi-stats-titre {
  margin: 0 0 .5rem;
  font-weight: 600;
}

.mykiwi-tableau-simple {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.mykiwi-tableau-simple th,
.mykiwi-tableau-simple td {
  padding: .375rem .75rem;
  border-bottom: 1px solid color-mix(in oklab, currentcolor 10%, transparent);
}

.mykiwi-tableau-simple td {
  text-align: right;
  white-space: nowrap;
}

.mykiwi-tableau-simple th {
  font-weight: 500;
  text-align: left;
}

.mykiwi-tableau-simple tr.mykiwi-total th,
.mykiwi-tableau-simple tr.mykiwi-total td {
  font-weight: 700;
}

/* Aperçu des e-mails avant envoi */
.mykiwi-apercu {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid color-mix(in oklab, currentcolor 15%, transparent);
  border-radius: .5rem;
}

.mykiwi-apercu-corps {
  max-height: 24rem;
  padding: .5rem 0;
  overflow-y: auto;
  border-top: 1px solid color-mix(in oklab, currentcolor 10%, transparent);
  font-size: .875rem;
  line-height: 1.5;
}

.mykiwi-apercu-corps p {
  margin: 0 0 .5rem;
}

/* Liste de documents à télécharger (modale des attestations) */
.mykiwi-liste-documents {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mykiwi-liste-documents li {
  display: flex;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(0 0 0 / 8%);
  gap: 1rem;
}

.mykiwi-liste-documents li strong {
  flex: 1;
}

/* Rapprochement bancaire : onglets et lignes déjà traitées */
.mykiwi-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mykiwi-ligne-faite {
  opacity: 60%;
}

/* Colonnes issues du CSV de la banque (fond bleu léger) */
.mykiwi-col-banque {
  background-color: rgb(59 130 246 / 8%);
}

/* Rapprochement bancaire : en-têtes de tableau collants (le tableau défile dans une zone à hauteur bornée) */
.mykiwi-table-collante .fi-ta-content-ctn {
  max-height: calc(100vh - 12rem);
  overflow: auto;
}

.mykiwi-table-collante .fi-ta-table>thead>tr>th {
  position: sticky;
  z-index: 2;
  top: 0;
  background-color: #F9FAFB;
}

.dark .mykiwi-table-collante .fi-ta-table>thead>tr>th {
  background-color: #18181B;
}

/* Le fond bleu des colonnes de la banque reste opaque sous l'en-tête collant */
.mykiwi-table-collante .fi-ta-table>thead>tr>th.mykiwi-col-banque {
  background-image: linear-gradient(rgb(59 130 246 / 8%), rgb(59 130 246 / 8%));
}

/* Totaux du formulaire de devis : jours et total € HT en grand, colonne « avec options » mise en valeur */
.mykiwi-devis-totaux {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.mykiwi-devis-totaux th,
.mykiwi-devis-totaux td {
  padding: .375rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, currentcolor 10%, transparent);
  text-align: right;
  white-space: nowrap;
}

.mykiwi-devis-totaux th:first-child {
  padding-left: 0;
  font-weight: 500;
  text-align: left;
}

.mykiwi-devis-totaux thead th {
  opacity: 70%;
  font-weight: 600;
}

.mykiwi-devis-totaux-majeur th,
.mykiwi-devis-totaux-majeur td {
  padding-block: .625rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.mykiwi-devis-totaux-retenu {
  background-color: color-mix(in oklab, var(--primary-kiwi) 18%, transparent);
  font-weight: 700;
}