/* Axper Europe — css/templates.css
   Outils → Templates : cartes de fichiers à télécharger, fenêtre d'ajout (dépôt de fichier). */

/* Couleur de chaque type de fichier (celle de l'application correspondante) */
.k-excel { --kind: oklch(0.55 0.13 150); --kind-bg: oklch(0.55 0.13 150 / .12); }
.k-word { --kind: oklch(0.52 0.15 255); --kind-bg: oklch(0.52 0.15 255 / .12); }
.k-powerpoint { --kind: oklch(0.6 0.16 45); --kind-bg: oklch(0.6 0.16 45 / .13); }
.k-pdf { --kind: oklch(0.56 0.18 25); --kind-bg: oklch(0.56 0.18 25 / .11); }
.k-other { --kind: var(--muted); --kind-bg: var(--surface-2); }
:root[data-theme="dark"] .k-excel { --kind: oklch(0.78 0.13 150); --kind-bg: oklch(0.78 0.13 150 / .14); }
:root[data-theme="dark"] .k-word { --kind: oklch(0.78 0.11 255); --kind-bg: oklch(0.78 0.11 255 / .14); }
:root[data-theme="dark"] .k-powerpoint { --kind: oklch(0.8 0.13 55); --kind-bg: oklch(0.8 0.13 55 / .14); }
:root[data-theme="dark"] .k-pdf { --kind: oklch(0.76 0.14 25); --kind-bg: oklch(0.76 0.14 25 / .14); }

.tpl-surface { transition: box-shadow .25s, background-color .35s var(--ease); }
.tpl-surface.drag-over { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-soft); }
.tpl-surface .filters { align-items: center; }
.tpl-surface .search { flex: 1 1 260px; }
.tpl-filters { box-shadow: none; background: var(--surface-2); }
.tpl-zone { padding: 4px 16px 18px; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tpl-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 14px;
  padding: 14px; border-radius: 16px; background: var(--surface-2); transition: background-color .2s, transform .3s var(--spring);
  animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.tpl-card:hover { background: var(--surface-3); }
.tpl-card:hover .tpl-file { transform: translateY(-2px) rotate(-3deg); }

/* Icône de fichier : feuille au coin plié, avec l'extension */
.tpl-file {
  position: relative; grid-row: 1 / 3; width: 46px; height: 58px; border-radius: 8px 14px 8px 8px; background: var(--kind-bg); color: var(--kind);
  display: grid; place-items: end center; padding-bottom: 8px; transition: transform .4s var(--spring);
}
.tpl-file::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 0 14px 0 6px; background: color-mix(in srgb, var(--kind) 22%, transparent); }
.tpl-file span { font-size: 10px; font-weight: 800; letter-spacing: .04em; max-width: 42px; overflow: hidden; text-overflow: ellipsis; }

.tpl-body { min-width: 0; }
.tpl-body h3 { font-size: 15px; font-weight: 600; margin: 2px 0 3px; overflow-wrap: anywhere; }
.tpl-body p { margin: 0 0 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tpl-body small { display: block; font-size: 12px; color: var(--faint); line-height: 1.5; overflow-wrap: anywhere; }
.tpl-actions { display: flex; align-items: center; gap: 6px; }
.tpl-actions .primary.busy { opacity: .65; pointer-events: none; }
.tpl-actions .icon-button { background: var(--surface); box-shadow: none; }

.tpl-empty { display: grid; justify-items: center; gap: 4px; padding: 44px 20px; border: 2px dashed var(--line); border-radius: 18px; }
.tpl-empty > .ico { color: var(--accent-ink); margin-bottom: 6px; }

/* Fenêtre : zone de dépôt du fichier */
dialog label.tpl-drop {
  position: relative; display: grid; justify-items: center; gap: 4px; margin-top: 18px; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 16px; background: var(--surface-2); transition: border-color .2s, background-color .2s;
}
dialog label.tpl-drop .ico { color: var(--accent-ink); }
dialog label.tpl-drop strong { font-size: 14px; overflow-wrap: anywhere; }
dialog label.tpl-drop small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
dialog label.tpl-drop:hover, dialog label.tpl-drop.over { border-color: var(--accent); background: var(--accent-soft); }
dialog label.tpl-drop.picked { border-style: solid; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
dialog label.tpl-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }

@media (max-width: 600px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .tpl-zone { padding-inline: 12px; }
}