/* 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-3xl);
    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 single-column page caps at the mobile column, left, so its header
   actions stay beside its content; only a master-detail split takes the width. */
@media (min-width: 1024px) {
  .detail-fullscreen:not(:has(.agenda-split)) .detail-page {
    max-width: var(--app-column);
  }
}

/* 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.
   The page itself becomes the split's grid, so the header heads the list column
   and the pane runs the full height beside it, as on the agenda. */
@media (min-width: 1024px) {
  .detail-fullscreen:has(.agenda-split) {
    height: 100%;

    .detail-page {
      display: grid;
      grid-template-columns: minmax(var(--split-list-min), 5fr) minmax(var(--split-detail-min), 6fr);
      grid-template-rows: auto auto minmax(0, 1fr);
      min-height: 0;
      overflow: hidden;
    }

    .detail-parent-link {
      grid-area: 1 / 1;
    }

    .detail-header {
      grid-area: 2 / 1;
    }

    .detail-content,
    .agenda-split {
      display: contents;
    }

    .agenda-split > :not(.agenda-detail-pane) {
      grid-area: 3 / 1;
    }

    .agenda-detail-pane {
      grid-area: 1 / 2 / -1 / 3;
    }
  }
}

/* Compact layout — title centered in topbar */

/* Three columns, the outer two equal, so the title stays centred however wide the action is. */
.detail-topbar--compact {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  column-gap: 8px;

  > :last-child {
    justify-self: end;
  }

  /* 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;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    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);
}

/* The desktop's way back from a page the sidebar doesn't list: the parent's name,
   above the title. Mobile keeps the back button and never shows it. */
.detail-parent-link {
  display: none;

  @media (min-width: 1024px) {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 16px var(--content-padding) 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: var(--color-text);
      }
    }
  }
}

/* Desktop: the header is a website's — the title top-left, its actions at the
   right end of the same row, and no back button (the sidebar and the parent link
   carry the way around). */
@media (min-width: 1024px) {
  .detail-topbar {
    .back-link {
      display: none;
    }

    &:not(:has(> :not(.back-link))) {
      display: none;
    }
  }

  .detail-topbar--compact {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    min-height: var(--desktop-header-height);
    padding-block: 0;

    .detail-topbar-spacer {
      display: none;
    }

    .detail-topbar-title {
      text-align: left;
      font-size: var(--text-lg);
    }
  }

  .detail-topbar-subtitle {
    margin-top: -12px;
    text-align: left;
  }

  .detail-parent-link + .detail-header {
    .detail-topbar--compact {
      min-height: 0;
      padding-block: 4px 16px;
    }

    &:has(> .detail-hero) {
      padding-top: 4px;
    }
  }

  /* Hero: the actions leave the topbar row above the title for the title's own. */
  .detail-header:has(> .detail-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 16px;

    > * {
      grid-column: 1 / -1;
    }

    .detail-topbar {
      display: contents;

      > :not(.back-link) {
        grid-row: 1;
        grid-column: 2;
        padding-right: var(--content-padding);
      }
    }

    .detail-hero {
      grid-row: 1;
      grid-column: 1;
    }
  }
}

/* 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 and sits close under the title (the hero's padding shrinks for it,
     below). */
  padding: calc(var(--wizard-body-gap) - var(--content-padding)) var(--content-padding) 0;

  &:has(.field-edit-subtitle) {
    padding-top: 0;
  }

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

/* Desktop: the field edit as a modal (shared/_field_edit) — the wizard's card, as
   tall as its one field instead of the wizard's fixed height. */
.field-edit-modal {
  @media (min-width: 1024px) {
    height: auto;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
  }

  .field-edit-modal-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  .field-edit-page {
    height: auto;
    padding-top: 8px;
    padding-bottom: var(--content-padding);
  }
}

.detail-fullscreen:has(.field-edit-subtitle) .detail-hero {
  padding-bottom: calc(var(--wizard-title-gap) / 2);
}

.field-edit-subtitle {
  color: var(--color-muted);
  font-size: var(--text-lg);
  margin: 0 0 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));
}

/* The service price picker grows a field under its selected row, so it trims its
   height to keep the save button on screen: no divider under the last row, and the
   row's own bottom padding stands in for most of the gap above the button. */
.field-edit-input:has(.service-pricing) {
  .radio-list {
    margin-bottom: 0;
  }

  .radio-list-item:last-child {
    border-bottom: none;
  }

  + .field-edit-actions {
    margin-top: calc(var(--cta-gap) / 4);
  }
}

/* The price picker on a screen that must fit a phone without scrolling: tighter rows, and only
   the picked option keeps its description. */
.service-pricing--compact {
  .radio-list-option {
    padding-block: 11px;
  }

  .radio-list-option:not(.selected) .radio-list-description {
    display: none;
  }

  .radio-list-extra {
    padding-bottom: 12px;
  }
}

/* The recurrence choices as a two-column grid of tiles, the picked one in the brand's wash. */
.radio-list--tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  .radio-list-item {
    border-bottom: none;
  }

  .radio-list-option {
    justify-content: center;
    min-height: 48px;
    height: 100%;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;

    &:has(.radio-list-input:checked) {
      border-color: var(--color-brand);
      background: var(--color-brand-wash);
      color: var(--color-brand);

      .radio-list-label {
        font-weight: var(--font-weight-semibold);
      }
    }

    &:has(.radio-list-input:focus-visible) {
      outline: 3px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  .radio-list-content {
    flex: initial;
  }

  .radio-list-label {
    font-size: var(--text-sm);
  }

  .radio-list-radio {
    display: none;
  }
}

.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;
  }
}