/* HARD DECO — Lot 11A-5.24 : finitions des vues d'ensemble. */

/* Aligne l'accueil sur le cadre commun des pages dediees. */
.main.home-root {
  width: 100%;
  max-width: var(--hd-dedicated-max-width, 1480px);
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Detache visuellement les onglets des cartes de contenu voisines. */
:is(.project-page-tabs, .quote-page-tabs, .invoice-page-tabs) {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 3%, var(--panel));
  box-shadow:
    0 8px 22px rgba(15, 23, 42, .075),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

:is(.project-page-tabs, .quote-page-tabs, .invoice-page-tabs)
  button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 13%, transparent);
}

/* La prochaine etape reprend toujours la couleur d'accent choisie. */
:is(.project-page-next-action, .document-next-action) {
  --next-tone: var(--accent) !important;
}

/* Centre la loupe et reserve sa place dans la valeur du champ. */
.home-command .searchbar > .lucide {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.home-command .searchbar input {
  padding-left: 46px;
}

@media (max-width: 900px) {
  .main.home-root { padding-inline: 16px; }
}

@media (max-width: 620px) {
  .main.home-root { padding-inline: 10px; }
}