@layer page {
  /* ===== Page layout =====
     One continuous list: header, a sticky search field, then day groups running
     from today forward, with the past hanging above the fold. */

  /* Desktop split: agenda list on the left, the tapped appointment's detail on
     the right (split-nav feeds the pane). On mobile the wrapper dissolves and
     the pane doesn't exist. */
  .agenda-split {
    display: contents;

    @media (min-width: 1024px) {
      display: grid;
      grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
      height: 100%;
    }
  }

  .agenda-detail-pane {
    display: none;

    @media (min-width: 1024px) {
      display: block;
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid var(--color-border);
    }
  }

  /* Generic left pane for splits whose list isn't the agenda page itself
     (pedidos, pagamentos pendentes). Unstyled on mobile — just a wrapper. */
  .agenda-split-list {
    @media (min-width: 1024px) {
      height: 100%;
      overflow-y: auto;
      padding-bottom: 24px;
    }
  }

  /* turbo-frame is inline by default; the empty state centers against its height. */
  .agenda-detail-frame {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .agenda-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-subtle);

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

    p {
      margin: 0;
      font-size: var(--text-sm);
    }
  }

  /* The pane borrows the fullscreen page's sections, so it only supplies what
     the page chrome used to: horizontal padding and the number row up top. */
  .detail-pane-view {
    max-width: 720px;
    padding: 8px 16px 48px;
  }

  .detail-pane-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--content-padding);

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

  .detail-pane-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
  }

  .agenda-page {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--nav-bar-height) + 16px);

    @media (min-width: 1024px) {
      height: 100%;
      overflow-y: auto;
      padding-bottom: 24px;
    }

    .page-header-actions {
      gap: 10px;
    }
  }

  /* split-nav marks whichever row feeds the pane, whatever list it belongs to.
     The selected row wears the state-chip language: wash plus inset border. */
  .agenda-split-selected {
    @media (min-width: 1024px) {
      background: var(--color-brand-wash);
      box-shadow: inset 0 0 0 1.5px var(--color-state-confirmed-border);
      border-radius: var(--radius-sm);
    }
  }

  /* The title is the month, and the month is a control — tapping it opens the grid. */
  .agenda-month-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;

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

    svg {
      width: 18px;
      height: 18px;
      color: var(--color-muted);
    }

    &:active {
      opacity: 0.6;
    }
  }

  /* Chip family — the header's "hoje" and "Novo" and the list's edge buttons wear one
     outlined-gray treatment, so every secondary affordance on the page reads alike and
     none of them competes with the brand colour inside the list. Each keeps only its own
     shape below. */
  .agenda-today-chip,
  .agenda-new-chip,
  .agenda-load-more {
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: none;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;

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

    &:active {
      background: var(--color-bg-tertiary);
    }
  }

  /* "hoje" — the way back to now after wandering off into another month. */
  .agenda-today-chip {
    padding: 6px 12px;
  }

  /* Header and search are pinned as one block: the list runs in both directions with
     no beginning and no end, so the orientation controls can never scroll away. */
  .agenda-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-popup);
    background: var(--color-bg);
  }

  /* Field internals are shared with the search page, trimmed down here: the agenda's
     search sits inside pinned chrome, so every pixel it takes is a row it hides. */
  .agenda-search {
    padding: 0 var(--content-padding) 8px;

    .search-bar-wrapper {
      padding: 0.5rem 0.75rem;
    }

    /* The wrapper owns the field's height; the input inherits the global 0.75rem
       form padding, which would stack a second box inside it. */
    .search-bar-input {
      padding: 0;
    }
  }

  /* The list opens scrolled — the anchor day sits below a fortnight of past — so it
     stays hidden for the one frame between paint and the scroll landing. The delayed
     animation is a dead man's switch: if the controller never runs, the list reveals
     itself anyway rather than staying invisible. Add ?visibility=off to skip the mask. */
  .agenda-list--masking {
    visibility: hidden;
    animation: agenda-unmask 0s linear 400ms forwards;
  }

  @keyframes agenda-unmask {
    to {
      visibility: visible;
    }
  }

  /* ===== Day groups =====
     Whitespace separates the days, not a rule: the rows inside a day are already
     hairline-separated, and a second line at the same weight only flattens the two
     levels into one. The rail carries the grouping; the gap just gives it room. */
  .agenda-day {
    display: flex;
    gap: 10px;
    padding: 6px var(--content-padding) 22px;
    scroll-margin-top: var(--agenda-topbar-height, 128px);
  }

  /* Left rail — weekday over day number, and a tap target onto the day's detail page.
     The rows keep their own time column, so start times still line up within the day
     while the rail carries the date once.

     The 12.5px is 12px — the first row's own padding, which puts the two text boxes
     level — plus half a pixel. Level boxes aren't level glyphs: both texts share the
     1.375 line-height, so the smaller weekday gets less half-leading and its caps ride
     higher than the row's time. The half-pixel gives it back, and the letters line up. */
  .agenda-day-rail {
    flex: 0 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 12.5px;
    text-decoration: none;
    color: var(--color-text);

    &:active {
      opacity: 0.6;
    }
  }

  .agenda-day-dow {
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* Sized as a circle on every day so today's brand fill costs no layout shift. */
  .agenda-day-dom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }

  .agenda-day--today .agenda-day-dow {
    color: var(--color-primary);
  }

  .agenda-day--today .agenda-day-dom {
    background: var(--color-primary);
    color: var(--color-on-brand);
  }

  .agenda-day-rows {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  .agenda-day-empty {
    padding: 12px 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  /* The "now" hairline inside today's group — the only brand-coloured rule in the list. */
  .agenda-now-line {
    position: relative;
    height: 1px;
    margin: 8px 0;
    background: var(--color-primary);

    &::before {
      content: '';
      position: absolute;
      left: -3px;
      top: -3px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-primary);
    }

    /* The line already separates the rows; a hairline right under it would double up. */
    & + .agenda-schedule-item {
      border-top: none;
    }

    /* When "now" precedes every appointment of the day it has nothing to separate, so
       it rides the top edge instead of pushing the rows down — otherwise it would knock
       the rail's date out of line with the first appointment's time. */
    &:first-child {
      position: absolute;
      inset: 0 0 auto;
      margin: 0;
    }
  }

  /* ===== Edge controls ===== */
  .agenda-edge-control {
    padding: 8px var(--content-padding);

    /* No past to reach and no end note to show — take up no room at all. */
    &:empty {
      padding: 0;
    }
  }

  .agenda-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
  }

  .agenda-list-end {
    padding: 12px 0;
    text-align: center;
    font-size: var(--text-caption);
    color: var(--color-muted);
  }

  /* Search spans past and future, so the today boundary gets drawn once, in place. */
  .agenda-today-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px var(--content-padding) 8px;
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }
  }

  /* ===== Month picker drawer ===== */
  .agenda-month-year {
    margin: 14px 0 8px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
  }

  .agenda-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .agenda-month-cell {
    padding: 12px 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    font-size: var(--text-sm);
    color: var(--color-text);

    &.is-current {
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
    }

    &.is-active {
      background: var(--color-primary-selected);
      color: #fff;
    }
  }

  /* "Novo" CTA — outlined gray chip in the hub header, matching the muted icon buttons. */
  .agenda-new-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 6px 9px;
  }

  /* ===== Shared row list — the agenda, the day detail, the reviews queue and the
     browsable history all render appointments with this same anatomy. ===== */
  .agenda-schedule-list {
    padding: 0 var(--content-padding);
  }

  .agenda-schedule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);

    &:first-child {
      border-top: none;
    }

    /* Last row's bottom space comes from the following section divider's margin,
       so the gap to the divider equals the divider's own margin — no double spacing. */
    &:last-child {
      padding-bottom: 0;
    }

    &:active {
      opacity: 0.6;
    }
  }

  /* Time over its state mark — the time leads, the mark sits quietly beneath it.
     The column widens on the reviews queue (longer distance phrases) so the
     name column still starts at a consistent x within the page. */
  .agenda-schedule-item-time-col {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .reviews-list .agenda-schedule-item-time-col {
    width: 72px;
  }

  /* Time is the index, not the content: a quiet small/muted lead + its own column
     + tabular figures keep it scannable without out-shouting the name (the anchor
     below). One voice across the agenda — the live day, the requests queue, and the
     browsable history all read the time the same way. */
  .agenda-schedule-item-time {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }

  .agenda-schedule-item-mark {
    display: inline-flex;

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

  /* Micro-label family — small, semibold, lowercase. The whole agenda schedule
     reads with one quiet voice; the color carries the semantics (brand =
     appointment domain, red = alert, green = done, gray = chrome). */
  .agenda-schedule-item-now,
  .agenda-schedule-item-action,
  .agenda-schedule-item-distance {
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  /* "agora" — the one legitimate brand accent: this session is happening now. */
  .agenda-schedule-item-now {
    color: var(--color-primary);
  }

  /* Reviews queue: a muted distance phrase under the time. */
  .agenda-schedule-item-distance {
    color: var(--color-muted);
  }

  .agenda-schedule-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* The name is the row's anchor — the one element carrying real weight. */
  .agenda-schedule-item-name {
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-schedule-item-neighborhood,
  .agenda-schedule-item-services {
    font-size: var(--text-caption);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Right column — value stacks above the action cue, chevron sits beside. */
  .agenda-schedule-item-end {
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
  }

  .agenda-schedule-item-value-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
  }

  /* Appointment value — informational by default, not actionable. */
  .agenda-schedule-item-value {
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Action cue — pending = brand "revisar pedido", reviews = brand
     "responder pedido". The alert variant flags unpaid completed rows. */
  .agenda-schedule-item-action {
    color: var(--color-primary);
  }

  .agenda-schedule-item-action--alert {
    color: var(--color-danger);
  }

  /* Reviews queue: every row is a pending request, so a brand CTA on each one
     reads as alarm rather than signal. Mute it to gray (the row + chevron already
     say "tap to act") and wrap it to two lines to keep the right rail narrow. */
  .reviews-list .agenda-schedule-item-action {
    color: var(--color-muted);
    white-space: normal;
    width: min-content;
    text-align: right;
  }

  .agenda-schedule-item-chevron {
    width: 16px;
    height: 16px;
    color: var(--color-gray-500);
    margin-top: 1px;
  }

  /* Done rows: only the small green check is colored — name/time/value stay in
     the default voice so a past day of completed work doesn't read as a wall
     of green. */
  .agenda-schedule-item--done .agenda-schedule-item-mark {
    color: var(--color-success-text);
  }

  /* Unpaid completed: the value side comes back red + bold, signaling "this
     row is the one that wants attention." */
  .agenda-schedule-item--unpaid .agenda-schedule-item-value {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
  }

  .agenda-schedule-empty {
    padding: 28px var(--content-padding);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* ===== Month calendar (kept for wizard) ===== */
  .month-calendar {
    padding: 8px var(--content-padding) var(--content-padding);
  }

  .month-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 16px;
  }

  .month-calendar-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;

    svg {
      width: 18px;
      height: 18px;
      stroke: var(--color-muted);
      fill: none;
      stroke-width: 2;
    }
  }

  .month-calendar-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .month-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--text-label);
    color: var(--color-muted);
    font-weight: var(--font-weight-semibold);
    padding-bottom: 8px;
    text-transform: capitalize;
  }

  .month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .month-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    border-radius: 50%;
    text-decoration: none;
    color: var(--color-text);
    position: relative;

    &.empty {
      pointer-events: none;
    }

    &.is-today {
      font-weight: var(--font-weight-bold);
      background: var(--color-primary);
      color: var(--color-on-brand);
    }

    &.has-dot::after {
      content: '';
      position: absolute;
      bottom: 4px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--color-primary);
    }

    &.is-today.has-dot::after {
      background: #fff;
    }
  }

  .month-calendar-loading {
    height: 200px;
  }

  /* ===== Hub summary sections (Pedidos, Pagamentos a receber) ===== */
  .agenda-summary-headline {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  .agenda-summary-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 10px 0 14px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-muted);
  }

  .agenda-summary-positive {
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-text);
  }

  /* Booking-link URL — rendered as the "headline" of the booking link section. */
  .agenda-booking-link-url {
    /*font-family: var(--font-mono);*/
    font-size: var(--text-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-text);
    word-break: break-all;
  }
}