/* Primary booking-link hub.
   Weights: 400 body/metric labels, 500 row labels/period chips, 600 values &
   section headers. No 300 (anemic at this size); 700 is for full .btn CTAs only. */
@layer page {
  /* ── Topbar kebab menu ────────────────────────────────────────── */
  /* Delete reads red in the dropdown — label and icon both. */
  .overflow-menu-item--danger {
    color: var(--color-danger);

    svg { color: var(--color-danger); }
  }

  /* ── Hero: state line + URL field ─────────────────────────────── */
  .link-hero {
    padding: 0 var(--content-padding);
  }

  .link-state-line {
    margin: 6px 0 10px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-muted);
    line-height: var(--line-height-md);
  }

  .link-state {
    font-weight: var(--font-weight-semibold);
  }

  .link-state--on { color: var(--color-success-text); }
  .link-state--off { color: var(--color-muted); }

  .link-url-field {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  .link-url-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: center;
    text-overflow: ellipsis;
  }

  .link-url-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    border: none;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    cursor: pointer;

    svg { width: 18px; height: 18px; }
    &:active { background: var(--color-bg-secondary); transform: scale(0.97); }
  }

  /* ── Spec sheet (flows under the hero on whitespace alone) ─────── */
  .link-spec {
    margin-top: 18px;

    /* The section divider below already separates this list from Desempenho. */
    .list-row:last-child { border-bottom: none; }
  }

  .link-spec-toggle {
    width: 100%;
    border: none;
    border-bottom: 0.5px solid var(--color-border);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;

    /* Clicks fall through to the row (which opens the confirm drawer) — the
       toggle is a state mirror, never flips on the spot. */
    .toggle-switch { pointer-events: none; }
  }

  /* ── Desempenho ───────────────────────────────────────────────── */
  .link-perf-header {
    align-items: center;
  }

  /* Pills come from .perf-period-pill (performance.css) so both pages read the same. */
  .link-period-selector {
    display: inline-flex;
    gap: 8px;
  }

  /* Metric rows come from .perf-metrics (performance.css), but here they sit
     directly on the page — no card — so the section reads like the spec list
     above it. The variant also anchors the info popover and spaces trend chips. */
  .link-perf-metrics {
    background: none;
    border-radius: 0;
    /* The value-note popover extends past the rows — don't clip it. */
    overflow: visible;

    .perf-metric {
      padding: 12px 0;
    }

    .label {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .value {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-variant-numeric: tabular-nums;
    }

    .link-perf-info {
      display: inline-flex;
      border: none;
      background: none;
      padding: 0;
      color: var(--color-muted);
      cursor: pointer;

      svg { width: 13px; height: 13px; }
    }

    .link-perf-note {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: var(--z-popup);
      margin-top: 4px;
      width: max-content;
      max-width: 240px;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--color-text);
      color: var(--color-bg-white);
      font-size: var(--text-xs);
      font-weight: var(--font-weight-normal);
      line-height: var(--line-height-md);
    }
  }

  /* Inline trend delta — green up, amber down (attention, not alarm — matching
     the finances/performance change indicators). */
  .trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;

    svg { width: 12px; height: 12px; }
  }

  .trend--up { color: var(--color-success-text); }
  .trend--down { color: var(--color-accent-amber-dark); }

  /* ── Recomendações / insights ─────────────────────────────────── */
  /* A consistent stacked pair: same box treatment, only the icon differs. */
  .link-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;

    .insight-item {
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: var(--text-xs);
      line-height: var(--line-height-md);

      svg { width: 14px; height: 14px; margin-top: 2px; }
    }

    /* Same light tint for both — only the icon distinguishes them. */
    .insight-item--positive,
    .insight-item--constructive {
      background: var(--color-bg-light);
    }

    .insight-item--positive svg { color: var(--color-success-text); }
    .insight-item--constructive svg { color: var(--color-muted); }

    .insight-benefit { font-weight: var(--font-weight-semibold); color: var(--color-text); }
    .insight-dash,
    .insight-explain { color: var(--color-muted); }
  }

  /* ── Confirm / delete drawer spacing ──────────────────────────── */
  /* Even spacing between the message and stacked action buttons comes from the
     container, so each button stays margin-free regardless of order. */
  #link-delete-drawer .drawer-step-content,
  #link-active-drawer .drawer-step-content {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .cancel-drawer-message { margin-bottom: 0; }
  }

  /* Text-only cancel — centered, not the leading-icon layout of .btn.wide. */
  .link-drawer-cancel {
    justify-content: center;
    text-align: center;
  }

  /* ── Field editors ────────────────────────────────────────────── */
  .form-select {
    cursor: pointer;
  }

  .link-service-options {
    display: flex;
    flex-direction: column;
  }

  .link-service-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--color-border);
    cursor: pointer;
  }

  .link-service-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
  }

  .link-service-name {
    font-size: var(--text-base);
    color: var(--color-text);
  }

  /* ── Create-primary empty state ───────────────────────────────── */
  .link-create {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 48px;
  }

  .link-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    color: var(--color-text);

    svg { width: 26px; height: 26px; }
  }

  .link-create-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .link-create .empty-hint {
    max-width: 280px;
  }

  .link-create-button {
    margin-top: 12px;
  }
}