:root{
    --primary:#003B4F;
    --accent:#007bff;
    --muted:#f5f7f9;
    --tile-bg:#ffffff;
    --tile-border:#e6eef2;
}

*{box-sizing:border-box}
body{
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(180deg,var(--muted),#fff);
    color:#222;
    margin:0;
    padding:0;
}

/* header */
.site-header{
    background:linear-gradient(90deg,var(--primary),#005f75);
    color:#fff;
    padding:14px 0;
}
.site-header .brand-img{
    height:75px;
}
.site-header .brand{display:inline-block}
.user-info .btn{color:#fff;border-color:rgba(255,255,255,.2)}

/* tiles */
.tile{
    display:block;
    background:var(--tile-bg);
    border:1px solid var(--tile-border);
    padding:18px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(2,20,32,0.04);
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}
.tile:hover{
    transform:translateY(-3px);
    transition:all .15s ease;
}

/* gift images */
.gift-img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #ddd}

/* invit cards */
.invit-card{border-left:4px solid var(--accent)}

/* responsive grid tweaks */
.grid-overview .row>.col-12{padding:8px}

/* panels toggled by JS */
.toggle-panel{transition:all .15s ease}
.d-none{display:none !important}

/* tables */
.table th, .table td{vertical-align:middle}

/* small helpers */
.gap-2{gap:8px;display:flex;flex-wrap:wrap}

/* Pastel buttons theme (specific for les contrôles de la zone admin) */
:root{
  --pastel-gift: #cfeefe;   /* cadeau (bleu pâle) */
  --pastel-friend: #e9f7e6; /* amis (vert pâle) */
  --pastel-create: #fff1d6; /* créer (pêche pâle) */
  --pastel-delete: #ffdada; /* supprimer (rose pâle) */
  --pastel-ghost: rgba(0,0,0,0.06);
  --btn-radius: 8px;
}

/* base */
.btn-pastel {
  border-radius: var(--btn-radius);
  padding: .325rem .6rem;
  font-size: .86rem;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  color: #08303f;
}

/* specific actions */
.btn-pastel-gift {
  background: linear-gradient(180deg, var(--primary), #007a94);
  border-color: rgba(0, 95, 117, 0.1);
  color: white;
}

.btn-pastel-gift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3,46,59,0.06);

  /* garder le même rayon que la base */
  border-radius: var(--btn-radius);

  /* fond blanc centré + contour gradient arrondi via backgrounds empilés */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(180deg, var(--primary), #007a94) border-box;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;

  /* texte en dégradé */
  color: transparent;
  background-image: linear-gradient(180deg, var(--primary), #007a94);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-pastel-friend {
  background: linear-gradient(180deg, var(--primary), #007a94);
  border-color: rgba(0, 95, 117, 0.1);
  color: white;
}
.btn-pastel-friend:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3,46,59,0.06);

  /* garder le même rayon que la base */
  border-radius: var(--btn-radius);

  /* fond blanc centré + contour gradient arrondi via backgrounds empilés */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(180deg, var(--primary), #007a94) border-box;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;

  /* texte en dégradé */
  color: transparent;
  background-image: linear-gradient(180deg, var(--primary), #007a94);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-pastel-create {
  background: linear-gradient(180deg, var(--primary), #007a94);
  border-color: rgba(0, 95, 117, 0.1);
  color: white;
}
.btn-pastel-create:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3,46,59,0.06);

  /* garder le même rayon que la base */
  border-radius: var(--btn-radius);

  /* fond blanc centré + contour gradient arrondi via backgrounds empilés */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(180deg, var(--primary), #007a94) border-box;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;

  /* texte en dégradé */
  color: transparent;
  background-image: linear-gradient(180deg, var(--primary), #007a94);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-pastel-delete {
  background: linear-gradient(180deg, var(--pastel-delete), #ffbfbf);
  color: #5b0707;
  border-color: rgba(120,20,20,0.06);
}
.btn-pastel-delete:hover,
.btn-pastel-delete:focus { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(120,20,20,0.06); }

/* ghost (paramètres) */
.btn-pastel-ghost {
  background: transparent;
  border: 1px solid var(--pastel-ghost);
  color: #08303f;
  backdrop-filter: blur(2px);
}
.btn-pastel-ghost:hover,
.btn-pastel-ghost:focus { background: #f7fbfd; transform: translateY(-2px); }

/* small size tweaks to keep spacing consistent */
.btn-pastel.btn-sm { padding: .25rem .5rem; font-size: .82rem; }

/* emoji inside button */
.btn-emoji { font-size: 1.05rem; line-height: 1; padding-left: .55rem; padding-right: .55rem; }

/* Grid-friendly friend items (multiple per row) */
.friend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
  height: 68px;               /* compact height */
  overflow: hidden;
}

.friend-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(3,20,30,0.05);
}

.friend-left { display:flex; align-items:center; gap:10px; min-width:0; }
.friend-avatar {
  width:44px; height:44px; border-radius:8px;
  background: linear-gradient(180deg, var(--primary), #007a94);
  color: white;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.95rem; border:1px solid var(--tile-border);
  flex: 0 0 44px;
}
.friend-meta { overflow:hidden; min-width:0; }
.friend-name { font-weight:700; font-size:0.95rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/* Checkbox styling */
.friend-right { flex: 0 0 auto; display:flex; align-items:center; }
.friend-check { width:18px; height:18px; accent-color:#2aa0e8; }

/* focus and keyboard support */
.friend-item:focus-within { outline: 3px solid rgba(38,135,189,0.12); box-shadow: 0 10px 24px rgba(38,135,189,0.06); }

/* tight spacing on mobile */
@media (max-width:576px) {
  .friend-item { height: auto; padding:8px; }
  .friend-avatar { width:40px; height:40px; }
  .friend-name { font-size:.92rem; }
}
}
/* colonne fixe (ajuster la largeur en px ou %) */
.table td, .table th { vertical-align: middle; }
.table th.text-center, .table td.text-center { white-space: nowrap; }

/* cibler les 3 colonnes d'action (mettre la même largeur) */
.table td:nth-last-child(3),
.table td:nth-last-child(2),
.table td:nth-last-child(1),
.table thead th:nth-child(4),
.table thead th:nth-child(5),
.table thead th:nth-child(6) {
  width: 70px; /* ajustez : 90-140px selon besoin */
  max-width: 90px;
  text-align: center;
}

/* boutons icônes carrés et cohérents */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* taille des icônes bootstrap inside btn-icon */
.btn-icon .bi {
  font-size: 15px; /* ajustez si besoin */
  line-height: 1;
}

/* espace entre colonnes d'action et ergonomie */
.table td .btn + .btn { margin-left: 6px; }

/* pour petits écrans : réduire la largeur des colonnes d'action */
@media (max-width: 576px) {
  .table td:nth-last-child(3),
  .table td:nth-last-child(2),
  .table td:nth-last-child(1) {
    width: 32%;
    display: inline-block;
  }
  .btn-icon { width: 34px; height: 34px; }
}
.container.py-4 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.table-fixed { table-layout: fixed; width: 100%; }

/* colonnes fixes */
.col-image { width: 96px; max-width: 96px; }
.col-link, .col-buy { width: 110px; max-width: 110px; }

/* nom : au maximum 50% de la largeur totale */
.col-name {
  min-height: 80px;      /* au moins la hauteur de .gift-img */
  padding: 10px 12px;
  vertical-align: middle;
}


/* prix : prendra l'espace restant, empêcher la coupure entre montant et "environ" */
.col-price { white-space: nowrap; text-align: center; }

/* troncature et mise en forme à l'intérieur de la colonne Nom */
.col-name .fw-semibold,
.col-name .text-muted.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
/* agrandit toutes les icônes check2-circle */
.bi-check2-circle {
  font-size: 1.6rem; /* ajuste : 1rem = taille de base du texte */
  line-height: 1;
}
.icon-purchased {
  color: #0f5132;        /* couleur demandée */
  font-size: 1.6rem;     /* ajuste si besoin (ex : 1.2rem → plus petit, 2rem → plus grand) */
  line-height: 1;
  vertical-align: middle;
}

/* si l'icône est dans un bouton outline ou span et que la couleur est écrasée */
.btn .icon-purchased,
span.icon-purchased {
  color: #0f5132 !important;
}

/* focus / hover (optionnel) pour accessibilité */
.icon-purchased:focus,
.icon-purchased:hover {
  filter: brightness(0.95);
  outline: none;
}
.table thead {
  background: linear-gradient(90deg, var(--primary), #005f75);
  color: #fff;
}

/* forcer les cellules d'entête transparentes pour ne pas "casser" le dégradé */
.table thead th {
  background: transparent !important;
  color: #ffffff;
  border-color: rgba(255,255,255,0.08);
}
.btn-login {
    background: linear-gradient(90deg, var(--primary), #005f75);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
}

.btn-login:hover {
    background: linear-gradient(90deg, #005f75, var(--primary));
    color: #fff;
}

.btn-create-account {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    padding: 8px 16px;
    border-radius: 4px;
}

.btn-create-account:hover {
    background: #fff;
    color: #005f75;
}
/* Mobile cards */
.gift-card {
  background: rgba(255,255,255,0.97);
  color: #000;
  border-radius: 8px;
  padding: 12px;
}
.gift-card-img {
  width: 64px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}
/* Boutons dans les cards */
.gift-card .btn { font-size: .85rem; padding: .35rem .6rem; }

/* Option: augmenter espacement pour mobile */
@media (max-width: 575.98px) {
  .gift-card { margin-left: 0.25rem; margin-right: 0.25rem; }
}
/* classes personnalisées pour controler l'affichage responsive */
.show-desktop { display: none; }    /* desktop hidden by default */
.show-mobile  { display: none; }    /* mobile hidden by default */

/* >= 576px : affichage desktop */
@media (min-width: 576px) {
  .show-desktop { display: block !important; }
  .show-mobile  { display: none !important; }
}

/* < 576px : affichage mobile */
@media (max-width: 575.98px) {
  .show-desktop { display: none !important; }
  .show-mobile  { display: block !important; }
}
  .btn-soft-edit {
    background-color: #d6eaff;
    color: #0b3d91;
    border: 1px solid #b3d7ff;
  }

  .btn-soft-edit:hover {
    background-color: #c2ddf9;
    color: #072f6b;
  }

  .btn-soft-delete {
    background-color: #ffe0e0;
    color: #a12626;
    border: 1px solid #f5bcbc;
  }

  .btn-soft-delete:hover {
    background-color: #f7caca;
    color: #811d1d;
  }
@media (max-width: 720px) {
  .btn .btn-text { 
    display: none; 
  }
  /* optionnel : garder un bon alignement des boutons */
  .btn { 
    padding-left: .5rem; 
    padding-right: .5rem; 
  }
}
@media (max-width: 576px) {
  /* Empiler toutes les colonnes : forcer les .col et .col-auto à 100% */
  #ajout_cadeau .row > .col,
  #ajout_cadeau .row > .col-auto {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Rendre l'input prix + checkbox sur la même ligne, en compact */
  #ajout_cadeau .row > .col-auto.form-check,
  #ajout_cadeau .row > .col-auto input#prix_cadeau {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  /* Créer une zone compacte pour prix + checkbox */
  #ajout_cadeau .price-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
  }

  /* Ajustements visuels pour champs empilés */
  #ajout_cadeau .form-control {
    width: 100%;
    box-sizing: border-box;
  }

  /* Réduire un peu les paddings des boutons sur mobile */
  #ajout_cadeau .btn {
    padding: .35rem .6rem;
    font-size: .9rem;
  }

  /* Optionnel : garder la checkbox alignée et lisible */
  #ajout_cadeau .form-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }
}