/* =============================================================================
   TerraTrack — Boîte à outils (TD-031)
   =============================================================================
   Écran hub listant les outils commerciaux en cartes. TD-028 : fichier dédié,
   rien dans les god files. Utilise les tokens existants (var(--*)).

   Refonte UI : fidèle à la maquette Claude Design (« TerraTrack - Refonte App »,
   section data-view="toolbox"). Hub aéré — grille 3 colonnes, cartes verticales
   (pastille --tt-accent-soft en haut, titre, description), bloc « Exports
   récents » en card avec lignes row-hover et pastilles de statut.
   ========================================================================= */

.tbx-root {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 32px;
}

/* ------------------------------- En-tête ------------------------------- */
/* Maquette : h1 22px + sous-titre 13px, marge basse 18px. La pastille d'icône
   reste (template JS) mais discrète, alignée à gauche du titre. */
.tbx-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.tbx-hero-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--tt-r-3);
  background: var(--tt-accent-soft);
  color: var(--tt-accent);
}

.tbx-hero-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tt-fg);
}

.tbx-hero-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tt-fg-3);
}

/* ------------------------------- Grille -------------------------------- */
/* Maquette : repeat(3,1fr), gap 16px. */
.tbx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --------------------------- Cartes-outils ----------------------------- */
/* Maquette : carte verticale, padding 18px, pastille 40px en haut (margin-bottom
   12px), titre 14px/600, description 12px/--tt-fg-3 line-height 1.5. Surface
   blanche + shadow-1 + radius --tt-r-3 ; hover row-hover (surface-2). */
.tbx-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.tbx-card:hover {
  background: var(--tt-surface-2);
  border-color: var(--tt-border-strong);
  box-shadow: var(--tt-shadow-2);
  transform: translateY(-1px);
}

.tbx-card:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}

.tbx-card-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--tt-r-3);
  background: var(--tt-accent-soft);
  color: var(--tt-accent);
  margin-bottom: 12px;
}

.tbx-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tbx-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tbx-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-fg);
}

/* Tag : non présent dans la maquette de carte → micro-pastille discrète, ne
   doit pas alourdir le bloc. Conservée (donnée du registre TOOLS). */
.tbx-card-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--tt-r-pill);
  background: var(--tt-neutral-soft);
  color: var(--tt-fg-3);
}

.tbx-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tt-fg-3);
}

/* Chevron : absent de la maquette (cartes verticales sans affordance latérale).
   Masqué pour rester fidèle au rendu épuré. */
.tbx-card-chev {
  display: none;
}

/* --------------------------- Exports récents --------------------------- */
/* Maquette : card overflow:hidden, header 14px 16px + divider, body 6px 10px 10px,
   lignes row-hover (icône 30px --tt-r-2, titre 13px, méta 11px mono, pastille
   statut succès). */
.tbx-recent {
  margin-top: 16px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
  overflow: hidden;
}

.tbx-recent > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tt-divider);
}

/* Le template JS groupe l'eyebrow <span> + le <strong> dans un <div>. La
   maquette n'affiche qu'un titre simple : on garde le span comme titre 14px et
   on masque le sur-libellé <strong> pour rester fidèle. */
.tbx-recent > header > div {
  display: flex;
  flex-direction: column;
}

.tbx-recent > header span {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tt-fg);
}

.tbx-recent > header strong {
  display: none;
}

.tbx-recent > header em {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  color: var(--tt-fg-4);
}

.tbx-recent-list {
  display: block;
  padding: 6px 10px 10px;
}

.tbx-recent-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: default;
}

.tbx-recent-row + .tbx-recent-row {
  border-top: 1px solid var(--tt-divider);
}

.tbx-recent-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--tt-r-2);
  background: var(--tt-accent-soft);
  color: var(--tt-accent);
}

.tbx-recent-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

.tbx-recent-row strong,
.tbx-recent-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbx-recent-row strong {
  color: var(--tt-fg);
  font-size: 13px;
  font-weight: 600;
}

.tbx-recent-row small {
  margin-top: 2px;
  color: var(--tt-fg-3);
  font-size: 11px;
}

/* Date / méta latérale : pastille de statut « Généré » façon maquette. */
.tbx-recent-row em {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: var(--tt-success);
  background: var(--tt-success-soft);
  border: 1px solid var(--tt-success-border);
  border-radius: var(--tt-r-pill);
  padding: 2px 9px;
}

.tbx-recent-empty {
  margin: 6px 8px 10px;
  padding: 14px;
  border: 1px dashed var(--tt-border-strong);
  border-radius: var(--tt-r-3);
  color: var(--tt-fg-3);
}

.tbx-recent-empty strong,
.tbx-recent-empty span {
  display: block;
}

.tbx-recent-empty strong {
  color: var(--tt-fg);
  font-size: 13px;
}

.tbx-recent-empty span {
  margin-top: 3px;
  font-size: 12px;
}

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 1023px) {
  .tbx-root { padding: 0 0 24px; }
  .tbx-grid { grid-template-columns: 1fr; }
  .tbx-hero { margin-bottom: 16px; }
}