/* Page — fullscreen overlay with pinned header and scrollable content.
   Supports two layouts: hero (default) and compact. */

.detail-fullscreen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: var(--z-page);

  /* Desktop: no overlay — the sidebar stays, and the page renders in flow as
     the main column's content, scrolling with it like every other page. */
  @media (min-width: 1024px) {
    position: static;
    z-index: auto;
    min-height: 100%;
  }
}

.detail-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  @media (min-width: 1024px) {
    overflow: visible;
  }
}

.detail-header {
  flex-shrink: 0;

  &.detail-header--bordered {
    border-bottom: 1px solid var(--color-border);
  }
}

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* The 48px back button sets the row height; the padding only keeps it off the
     screen edges. Grow it and the topbar swallows the title below it. */
  padding: 4px var(--content-padding);

  /* Back and close are the same control wearing a different glyph, so they get
     the same target. The negative margin puts the ink back on the content edge
     the title below it uses. */
  .back-link {
    background: none;
    border: none;
    padding: 0;
    width: var(--back-tap-size);
    height: var(--back-tap-size);
    margin-left: calc(-1 * var(--back-ink-inset));
    flex: none;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    svg {
      width: var(--back-icon-size);
      height: var(--back-icon-size);
    }
  }

  .action-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
  }

  .edit-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-bg-secondary);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

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

.detail-hero {
  display: flex;
  flex-direction: column;
  padding: 4px var(--content-padding) var(--content-padding);
  gap: 4px;
  text-align: left;

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
  }

  .hero-title {
    --heading-lh: var(--line-height-base);
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .hero-icon {
      display: flex;
      align-items: center;
      height: calc(var(--text-2xl) * var(--heading-lh));
      flex-shrink: 0;
      color: var(--color-primary);
    }

    h1 {
      line-height: var(--heading-lh);
    }
  }
}

.detail-eyebrow {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.detail-description {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Desktop: the page is in flow, so the main column is the scroll container. */
  @media (min-width: 1024px) {
    overflow-y: visible;
  }
}

/* Desktop: a page hosting a master-detail split (pedidos, pagamentos pendentes)
   pins to the content area's height and lets the split's panes scroll instead. */
@media (min-width: 1024px) {
  .detail-fullscreen:has(.agenda-split) {
    height: 100%;

    .detail-page {
      min-height: 0;
      overflow: hidden;
    }

    .detail-content {
      overflow: hidden;
    }
  }
}

/* Compact layout — title centered in topbar */

.detail-topbar--compact {
  justify-content: space-between;

  /* The spacer balances the back button so the centred title stays centred. */
  .detail-topbar-spacer {
    width: calc(var(--back-tap-size) - var(--back-ink-inset));
    flex-shrink: 0;
  }

  .detail-topbar-title {
    flex: 1;
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .detail-topbar-muted {
    font-weight: var(--font-weight-normal);
    color: var(--color-muted);
  }
}

/* Small centered cue below the compact topbar — used by the day-detail page
   to carry the relative-distance phrase ("hoje", "amanhã", "em 3 dias").
   Sits tight under the title so the two read as a single stacked label. */
.detail-topbar-subtitle {
  margin: -12px 0 0;
  padding: 0 var(--content-padding) 8px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Field edit page — single-field edit layout */

.field-edit-page {
  display: flex;
  flex-direction: column;
  height: 100%;

  /* Desktop: an input and its button stretched across the whole content area
     read as a broken page; keyboard screens cap at the mobile column, left,
     aligned with the title above. */
  @media (min-width: 1024px) {
    max-width: var(--app-column);
  }

  /* .detail-hero already pads --content-padding below the title; this tops the
     title-to-field distance up to --wizard-body-gap. A subtitle takes that gap
     over, so the page only keeps the title's own smaller one. */
  padding: calc(var(--wizard-body-gap) - var(--content-padding)) var(--content-padding) 0;

  &:has(.field-edit-subtitle) {
    padding-top: calc(var(--wizard-title-gap) - var(--content-padding));
  }

  form {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}

.field-edit-subtitle {
  color: var(--color-muted);
  margin-bottom: var(--wizard-body-gap);
}

.field-edit-input {
  /* The page already pads horizontally — radio rows shouldn't double it. */
  .radio-list-option {
    padding-inline: 0;
  }

  .radio-list-extra {
    padding-inline: 38px 0;
  }

  .radio-list {
    margin-bottom: 16px;
  }
}

/* Layout and the --cta-gap separation come from .wizard_cta in _wizard.css. */
.field-edit-actions {
  padding-bottom: calc(12px + var(--safe-bottom));
}

.field-edit-password {
  margin-top: 24px;
}

/* A field-edit screen that genuinely needs more than one input — changing a password
   asks for the current one and then the new one twice. The single-field layout above
   carries no vertical rhythm of its own, so the stack supplies it. 24px matches the
   spacing the rest of this family already uses. */
.field-edit-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .field-edit-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.city-list {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .city-list-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .city-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .city-list-name {
    flex: 1;
    min-width: 0;
  }

  .city-list-state {
    flex: none;
    width: 72px;
  }

  .city-list-remove {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-muted);
    cursor: pointer;

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

  .city-list-add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 500;
    cursor: pointer;

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