/* --- Heimdall: Glassmorphism + texte gris clair + hover bleu --- */
:root{
  --bg1:#0b1220;
  --bg2:#111827;

  --glass:rgba(255,255,255,.06);
  --b:rgba(255,255,255,.10);

  /* Texte gris très clair */
  --text: rgba(220,220,220,0.85);
  --text-soft: rgba(220,220,220,0.65);

  /* Bleu clair pour le hover */
  --hover-blue: #00CFFF;
}

body{
  font-family: "JetBrains Mono", monospace !important;
  font-size: 14px !important;
  background:linear-gradient(135deg,var(--bg1),var(--bg2)) !important;
  color: var(--text) !important;
}

/* Cartes / tuiles */
.item,.app{
  background:var(--glass) !important;
  border:1px solid var(--b) !important;
  border-radius:18px !important;
  backdrop-filter:blur(8px);
  box-shadow:0 3px 20px var(--hover-blue) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-sizing:border-box !important; /* évite le "saut" avec bordure 3px */
}

/* Hover : bordure 3px bleu clair + léger glow */
.item:hover,.app:hover{
  transform:translateY(-2px);
  border:3px solid var(--hover-blue) !important;
  box-shadow:
    0 0 0 2px rgba(96,165,250,0.20),
    0 14px 40px rgba(0,0,0,.45) !important;
}

/* Forcer la couleur de texte des tuiles (selon thème ça peut varier) */
.item, .app,
.item .title, .app .title,
.item .name, .app .name,
.item a, .app a{
  color: var(--text) !important;
}

/* Texte secondaire éventuel */
.item small, .app small,
.item .subtitle, .app .subtitle,
.item .description, .app .description{
  color: var(--text-soft) !important;
}

/* Barre de recherche */
input[type="search"], input.search, #search{
  font-family: "JetBrains Mono", monospace !important;
  color: var(--text) !important;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
}

input[type="search"]::placeholder, input.search::placeholder, #search::placeholder{
  color: var(--text-soft) !important;
}

/* ---------------------------
   Taille de police (à la fin)
   --------------------------- */

/* Titres des tuiles */
.item .title, .app .title,
.item .name,  .app .name{
  font-family: "JetBrains Mono", monospace !important;
  font-size: 16px !important;
}

window.addEventListener("load", () => {
  // Trouver le champ de recherche
  const search =
    document.querySelector('input[type="search"]') ||
    document.querySelector('#search') ||
    document.querySelector('input[placeholder*="Chercher"]') ||
    document.querySelector('input[type="text"]');

  if (!search) {
    console.log("[Heimdall] Champ de recherche introuvable");
    return;
  }

  // On cible le bloc qui contient réellement la barre (souvent un form, sinon parent)
  const form = search.closest("form") || search.parentElement;
  // On tente aussi un niveau au-dessus, parfois c’est lui qui bouge réellement
  const target = (form && form.parentElement) ? form.parentElement : form;

  // Nettoyer si déjà présent
  const old = document.querySelector("#heimdall-clock-wrap");
  if (old) old.remove();

  // ====== Horloge + date (fixe en haut) ======
  const wrap = document.createElement("div");
  wrap.id = "heimdall-clock-wrap";
  wrap.style.cssText = `
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px; /* moins d'espace entre heure et date */
    z-index:9999;
    pointer-events:none;
  `;

  const clock = document.createElement("div");
  clock.id = "heimdall-clock";
  clock.style.cssText = `
    padding:10px 18px;
    border-radius:14px;
    background:rgba(0,0,0,.38);
    color:rgba(220,220,220,0.92);
    font-family:system-ui,JetBrains Mono, monospace;
    font-size:34px;
    font-weight:600;
    letter-spacing:0.5px;
    line-height:1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  `;

  const date = document.createElement("div");
  date.id = "heimdall-date";
  date.style.cssText = `
    padding:7px 14px;
    border-radius:12px;
    background:rgba(0,0,0,.26);
    color:rgba(220,220,220,0.78);
    font-family:system-ui,JetBrains Mono, monospace;
    font-size:20px;
    font-weight:500;
    line-height:1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.40);
  `;

  wrap.appendChild(clock);
  wrap.appendChild(date);
  document.body.appendChild(wrap);

  // Date FR longue : "Samedi 31 Janvier"
  const formatDateFR = (d) => {
    const parts = new Intl.DateTimeFormat("fr-FR", {
      weekday: "long",
      day: "2-digit",
      month: "long"
    }).formatToParts(d);

    const get = (type) => (parts.find(p => p.type === type)?.value || "");
    const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;

    return `${cap(get("weekday"))} ${get("day")} ${cap(get("month"))}`;
  };

  // Heure + date
  const tick = () => {
    const d = new Date();
    clock.textContent = d.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
    date.textContent = formatDateFR(d);
  };
  tick();
  setInterval(tick, 1000);

  // ====== ✅ Garantir 20px entre la DATE et la barre ======
  // On garde le transform d'origine (si Heimdall en met un)
  const baseTransform = target.style.transform || "";

  const ensureGap = () => {
    // Reset avant recalcul
    target.style.transform = baseTransform;

    const wrapRect = wrap.getBoundingClientRect();     // bas de la date
    const targetRect = target.getBoundingClientRect(); // haut du bloc recherche

    const desiredTop = wrapRect.bottom + 20;           // ✅ 20px sous la date
    const delta = desiredTop - targetRect.top;

    if (delta > 0) {
      // On ajoute un translateY sans casser le reste
      const extra = ` translateY(${Math.ceil(delta)}px)`;
      target.style.transform = baseTransform + extra;
    }
  };

  // Laisse le layout se poser puis ajuste
  setTimeout(ensureGap, 50);
  setTimeout(ensureGap, 250);
  window.addEventListener("resize", ensureGap);
});