@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Aurora / Glass Table (drop-in on <table class="tableData">) ───────── */
@layer components {
  table.tableData{
    @apply text-[13.5px] md:text-[14.5px] font-medium text-slate-100;
    @apply border-separate border-spacing-0;
    @apply shadow-2xl;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(1200px 600px at -20% -40%, rgba(59,130,246,.14), transparent 60%),
      radial-gradient(900px 480px at 120% 140%, rgba(236,72,153,.10), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 6px 30px rgba(0,0,0,.35);
  }

  /* fin liseré extérieur */
  table.tableData::after{
    content:"";
    position:absolute; inset:0;
    border-radius:16px;
    pointer-events:none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1.5px inset rgba(0,0,0,.25);
  }

  /* En-tête lisible et compact */
  .tableData thead th{
    @apply text-left font-semibold tracking-wide uppercase;
    @apply text-slate-200;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    padding: .65rem 1rem;
    white-space: nowrap;
  }
  .tableData thead th:first-child{ border-top-left-radius:16px; }
  .tableData thead th:last-child { border-top-right-radius:16px;  }

  /* Corps */
  .tableData tbody td{
    @apply text-slate-100/90 align-middle;
    padding: .55rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: transparent;
  }

  /* zébrage doux uniquement sur grandes lignes */
  .tableData tbody tr:nth-child(odd) td{
    background: rgba(255,255,255,.03);
  }

  /* hover subtil mais net */
  .tableData tbody tr:hover td{
    background: rgba(255,255,255,.06);
  }

  /* dernière colonne = pourcentages alignés proprement */
  .tableData tbody td:last-child{
    text-align: right;
    font-variant-numeric: tabular-nums; /* aligne les chiffres */
    letter-spacing: .1px;
    min-width: 6.5rem;
  }

  /* petites pastilles couleur <i> */
  .tableData tbody td i{
    display:inline-block; vertical-align:middle;
    width:.6rem; height:.6rem; margin-right:.5rem;
    border-radius:9999px;
    background: var(--dot, #60a5fa);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.55) inset,
      0 1px 0 rgba(0,0,0,.30);
  }

  /* palette par défaut si aucune couleur spécifiée */
  .tableData tbody tr:nth-child(1) td i{ --dot:#60a5fa; } /* bleu */
  .tableData tbody tr:nth-child(2) td i{ --dot:#f59e0b; } /* ambre */
  .tableData tbody tr:nth-child(3) td i{ --dot:#34d399; } /* émeraude */
  .tableData tbody tr:nth-child(4) td i{ --dot:#e2e8f0; } /* gris clair */

  /* variant ultra-compact si tu ajoutes .is-compact sur la table */
  .tableData.is-compact thead th{ padding:.5rem .75rem; }
  .tableData.is-compact tbody td{ padding:.45rem .75rem; }
  
  @media (max-width: 560px){
      .tableData{ width:100%; min-width:0; border-radius:14px; }
      .tableData thead{ display:none; }        /* cache l’en-tête */
      .tableData, .tableData tbody, .tableData tr, .tableData td { display:block; width:100%; }
  
      .tableData tbody tr{
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        padding: .5rem .75rem;
        margin: .5rem 0;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
      }
  
      .tableData tbody td{
        border:0;                         /* plus de séparateurs horizontaux */
        padding: .4rem 0;                 /* espace vertical */
      }
  
      /* Ligne “clé: valeur” avec label injecté depuis data-th */
      .tableData tbody td::before{
        content: attr(data-th);
        display:block;
        font-size: .72rem;
        letter-spacing:.03em;
        text-transform: uppercase;
        color: rgba(255,255,255,.65);
        margin-bottom: .15rem;
      }
  
      /* % mieux mis en avant */
      .tableData tbody td:last-child{
        text-align:left;
        font-size: 1.05rem;
        font-variant-numeric: tabular-nums;
        color: #fff;
      }
  
      /* pastille dans la 1ère cellule */
      .tableData tbody td:first-child i{
        margin-right:.45rem;
        transform: translateY(1px);
      }
  }
  
}