/* ============================================================
   HARD DÉCO — Lot 9K-1
   Socle visuel commun des pages dédiées.
   Cette couche harmonise la présentation sans modifier les modules.
   ============================================================ */

:root {
  --hd-dedicated-max-width: 1480px;
  --hd-dedicated-gap: 14px;
  --hd-dedicated-radius: 13px;
  --hd-dedicated-card-shadow: 0 3px 14px rgba(15, 23, 42, .045);
}

/* Cadre et rythme général ----------------------------------- */
:is(
  .project-page,
  .quote-page,
  .invoice-page,
  .client-page,
  .artist-page,
  .operations-page
) {
  width: 100%;
  max-width: var(--hd-dedicated-max-width);
  margin: 0 auto;
  padding: 20px 24px 48px;
  box-sizing: border-box;
}

:is(
  .project-page-content,
  .quote-page-content,
  .invoice-page-content,
  .client-page-content,
  .artist-page-content
) {
  gap: var(--hd-dedicated-gap);
}

:is(
  .project-page-toolbar,
  .quote-page-toolbar,
  .invoice-page-toolbar,
  .client-page-toolbar,
  .artist-page-toolbar
) .inner {
  width: 100%;
  max-width: var(--hd-dedicated-max-width);
  min-height: 54px;
  margin-inline: auto;
  padding: 8px 24px;
  box-sizing: border-box;
}

:is(
  .project-page-toolbar,
  .quote-page-toolbar,
  .invoice-page-toolbar,
  .client-page-toolbar,
  .artist-page-toolbar
) :is(.title, .project-page-breadcrumb, .quote-page-breadcrumb, .invoice-page-breadcrumb, .client-page-breadcrumb, .artist-page-breadcrumb) {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 12px;
  font-weight: 650;
}

/* Cartes maîtresses et en-têtes de fiche ------------------- */
:is(.project-page, .quote-page, .invoice-page, .client-page, .artist-page)
  :is(
    .project-page-hero,
    .quote-page-hero,
    .invoice-page-hero,
    .client-page-hero,
    .artist-page-hero,
    .project-page-editor,
    .quote-page-editor,
    .invoice-page-editor,
    .client-page-editor,
    .artist-page-editor,
    .project-page-section,
    .quote-page-section,
    .invoice-page-section,
    .client-page-section,
    .artist-page-section
  ) {
  border-radius: var(--hd-dedicated-radius);
  box-shadow: var(--hd-dedicated-card-shadow);
}

:is(
  .project-page-hero,
  .quote-page-hero,
  .invoice-page-hero,
  .client-page-hero,
  .artist-page-hero
) {
  min-height: 118px;
  padding: 22px 24px;
  border-color: color-mix(in srgb, var(--border) 92%, transparent);
}

:is(
  .project-page-color,
  .quote-page-accent,
  .invoice-page-accent,
  .client-page-accent,
  .artist-page-accent
) {
  width: 4px;
}

:is(
  .project-page-kicker,
  .quote-page-kicker,
  .invoice-page-kicker,
  .client-page-kicker,
  .artist-page-kicker
) {
  gap: 8px;
  margin-bottom: 5px;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .055em;
}

:is(
  .project-page-heading,
  .quote-page-heading,
  .invoice-page-heading,
  .client-page-heading,
  .artist-page-heading
) h1 {
  margin-block: 6px 9px;
  color: var(--hd-color-text, var(--text));
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -.025em;
}

:is(
  .project-page-status,
  .quote-page-status,
  .invoice-page-status,
  .client-page-type,
  .artist-page-role,
  .artist-page-status
) {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

:is(
  .project-page-hero-meta,
  .quote-page-hero-meta,
  .invoice-page-hero-meta,
  .client-page-hero-meta,
  .artist-page-hero-meta
) {
  gap: 8px;
}

:is(
  .project-page-hero-meta > div,
  .quote-page-hero-meta > div,
  .invoice-page-hero-meta > div,
  .client-page-hero-meta > *,
  .artist-page-hero-meta > *
) {
  min-width: 0;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel));
  box-sizing: border-box;
}

.project-page-hero-meta > div {
  border-left-width: 1px;
}

:is(
  .project-page-hero-meta,
  .quote-page-hero-meta,
  .invoice-page-hero-meta
) small {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  font-weight: 550;
}

/* Indicateurs ----------------------------------------------- */
:is(
  .project-page-kpi,
  .quote-page-kpi,
  .invoice-page-kpis > div,
  .client-page-kpis > button,
  .artist-page-kpis > button
) {
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 12px;
  background: var(--hd-color-surface, var(--panel));
  box-shadow: var(--hd-dedicated-card-shadow);
  box-sizing: border-box;
}

:is(
  .project-page-kpi,
  .quote-page-kpi,
  .invoice-page-kpis > div
) small,
:is(.client-page-kpis, .artist-page-kpis) small {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  line-height: 1.25;
}

:is(
  .project-page-kpi,
  .quote-page-kpi,
  .invoice-page-kpis > div
) strong,
:is(.client-page-kpis, .artist-page-kpis) strong {
  color: var(--hd-color-text, var(--text));
  font-size: 15px;
  font-weight: 720;
  line-height: 1.2;
}

/* Onglets ---------------------------------------------------- */
:is(
  .project-page-tabs,
  .quote-page-tabs,
  .invoice-page-tabs,
  .client-page-tabs,
  .artist-page-tabs
) {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
  scrollbar-width: none;
}

:is(
  .project-page-tabs,
  .quote-page-tabs,
  .invoice-page-tabs,
  .client-page-tabs,
  .artist-page-tabs
)::-webkit-scrollbar {
  display: none;
}

:is(
  .project-page-tabs,
  .quote-page-tabs,
  .invoice-page-tabs,
  .client-page-tabs,
  .artist-page-tabs
) button {
  min-height: 40px;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 11px;
  font-weight: 680;
}

:is(
  .project-page-tabs,
  .quote-page-tabs,
  .invoice-page-tabs,
  .client-page-tabs,
  .artist-page-tabs
) button:hover {
  background: var(--hd-color-surface-subtle, var(--hover));
  color: var(--hd-color-text, var(--text));
}

:is(
  .project-page-tabs,
  .quote-page-tabs,
  .invoice-page-tabs,
  .client-page-tabs,
  .artist-page-tabs
) button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
}

/* Sections de contenu --------------------------------------- */
:is(
  .project-page-section,
  .quote-page-section,
  .invoice-page-section,
  .client-page-section,
  .artist-page-section
) > header h2 {
  color: var(--hd-color-text, var(--text));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

:is(
  .project-page-section,
  .quote-page-section,
  .invoice-page-section,
  .client-page-section,
  .artist-page-section
) > header svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

:is(
  .project-page-details,
  .quote-page-details,
  .invoice-page-details,
  .client-page-details,
  .artist-page-details
) dt {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .025em;
}

:is(
  .project-page-details,
  .quote-page-details,
  .invoice-page-details,
  .client-page-details,
  .artist-page-details
) dd {
  color: var(--hd-color-text, var(--text));
  font-size: 12px;
  font-weight: 620;
  line-height: 1.45;
}

/* Pages opérationnelles ------------------------------------- */
.operations-page {
  gap: 16px;
}

.operations-page-header {
  min-height: 76px;
  padding: 4px;
}

.operations-page-header h1 {
  gap: 10px;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -.025em;
}

.operations-page-header h1 .lucide {
  width: 22px;
  height: 22px;
}

.operations-page-header p:not(.operations-page-kicker) {
  max-width: 760px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.operations-page :is(.operations-card, .charges-page-card, .charges-period-bar, .planning-calendar-inline, .planning-tasks-card) {
  border-radius: var(--hd-dedicated-radius);
  box-shadow: var(--hd-dedicated-card-shadow);
}

/* États de chargement et d’erreur --------------------------- */
:is(
  .project-page-state,
  .quote-page-state,
  .invoice-page-state,
  .client-page-state,
  .artist-page-state
) {
  min-height: 260px;
  color: var(--hd-color-text-muted, var(--muted));
}

:is(
  .project-page-spinner,
  .quote-page-spinner,
  .invoice-page-spinner,
  .client-page-spinner,
  .artist-page-spinner
) {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

@media (max-width: 900px) {
  :root {
    --hd-dedicated-gap: 12px;
  }

  :is(
    .project-page,
    .quote-page,
    .invoice-page,
    .client-page,
    .artist-page,
    .operations-page
  ) {
    padding: 16px 16px calc(var(--app-mobile-nav-h, 68px) + 28px);
  }

  :is(
    .project-page-toolbar,
    .quote-page-toolbar,
    .invoice-page-toolbar,
    .client-page-toolbar,
    .artist-page-toolbar
  ) .inner {
    padding-inline: 16px;
  }

  :is(
    .project-page-hero,
    .quote-page-hero,
    .invoice-page-hero,
    .client-page-hero,
    .artist-page-hero
  ) {
    padding: 19px;
  }
}

@media (max-width: 720px) {
  :is(
    .project-page,
    .quote-page,
    .invoice-page,
    .client-page,
    .artist-page,
    .operations-page
  ) {
    padding: 12px 10px calc(var(--app-mobile-nav-h, 68px) + 22px);
  }

  :is(
    .project-page-toolbar,
    .quote-page-toolbar,
    .invoice-page-toolbar,
    .client-page-toolbar,
    .artist-page-toolbar
  ) .inner {
    min-height: 52px;
    padding-inline: 10px;
  }

  :is(
    .project-page-heading,
    .quote-page-heading,
    .invoice-page-heading,
    .client-page-heading,
    .artist-page-heading
  ) h1 {
    font-size: clamp(23px, 7vw, 28px);
  }

  :is(
    .project-page-tabs,
    .quote-page-tabs,
    .invoice-page-tabs,
    .client-page-tabs,
    .artist-page-tabs
  ) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  :is(
    .project-page-tabs,
    .quote-page-tabs,
    .invoice-page-tabs,
    .client-page-tabs,
    .artist-page-tabs
  ) button {
    min-width: max-content;
    flex: 1 0 auto;
    scroll-snap-align: start;
  }

  .operations-page-header {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  :is(
    .project-page-hero,
    .quote-page-hero,
    .invoice-page-hero,
    .client-page-hero,
    .artist-page-hero
  ) {
    padding: 17px 16px;
  }

  :is(
    .project-page-hero-meta > div,
    .quote-page-hero-meta > div,
    .invoice-page-hero-meta > div,
    .client-page-hero-meta > *,
    .artist-page-hero-meta > *
  ) {
    min-height: 44px;
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.client-page-kpis, .artist-page-kpis) button {
    transition: none;
  }
}