@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(var(--split-list-min), 5fr) minmax(var(--split-detail-min), 6fr);
      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, which carry their own
     --content-padding, so it only supplies the number row up top. */
  .detail-pane-view {
    padding-bottom: 48px;
  }

  .detail-pane-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--desktop-header-height);
    padding: 0 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-md);
    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;
    }
  }

  /* Desktop: a split's record rows sit --row-inset in from the column, their text
     on the --content-padding line like every other column's. */
  .agenda-split {
    @media (min-width: 1024px) {
      .agenda-schedule-list,
      .customer-picker-list {
        padding-inline: var(--row-inset);
      }

      .agenda-schedule-item,
      .customer-picker-card {
        padding-inline: calc(var(--content-padding) - var(--row-inset));
      }

      /* Serviços shares a padded container with its labels, so its rows step out of it.
         Atividade's rows inset themselves in feed.css. */
      .services-list {
        margin-inline: calc(var(--row-inset) - var(--content-padding));
      }

      .service-item {
        padding-inline: calc(var(--content-padding) - var(--row-inset));
      }
    }
  }

  /* split-nav marks whichever row feeds the pane, whatever list it belongs to.
     The selected row wears the sidebar's current-page wash, with no border: a
     border is a state chip's identity, and would read as Confirmado. */
  .agenda-split-selected {
    @media (min-width: 1024px) {
      background: var(--color-brand-wash);
      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;
  }

  /* The header's month title gives way first: a long month shrinks to an ellipsis before any
     control leaves the row. */
  .agenda-topbar .page-header-bar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .agenda-topbar .agenda-month-selector {
    min-width: 0;

    h1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Search and the Lista/Colunas switch: outlined circles of the chips' height, on a full tap
     target that reaches past the outline. */
  .agenda-header-icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      inset: -6px;
    }

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

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

  .agenda-mode-form {
    display: flex;
  }

  /* Desktop keeps the field in Lista, and Colunas has the sidebar's Buscar. */
  .agenda-search-open {
    @media (min-width: 1024px) {
      display: none;
    }
  }

  .agenda-search-cancel {
    flex: none;
    min-height: var(--back-tap-size);
    padding: 0 0 0 8px;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: var(--text-base);
    cursor: pointer;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  /* The phone's search opens over the header row, which steps aside until Cancelar. */
  .agenda-topbar--searching {
    @media (width < 1024px) {
      .page-header-bar {
        display: none;
      }

      .agenda-search {
        display: flex;
        padding-top: var(--safe-top);
      }
    }
  }

  /* 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 {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 var(--content-padding) 8px;

    @media (min-width: 1024px) {
      display: flex;

      &.agenda-search--phone-only {
        display: none;
      }
    }

    .search-bar-wrapper {
      flex: 1;
      min-width: 0;
      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 {
    scroll-margin-top: var(--agenda-topbar-height, 128px);
  }

  .agenda-day-list {
    display: flex;
    gap: 10px;
    padding: 6px var(--content-padding) 22px;
  }

  /* 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);
  }

  .agenda-share-prompt {
    display: flex;
    width: auto;
    margin: var(--content-padding) var(--content-padding) 0;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    white-space: normal;
  }

  .agenda-share-prompt-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .agenda-share-prompt-description {
    font-weight: var(--font-weight-normal);
  }

  /* 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);
    }
  }

  /* "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;
  }

  /* The new chip's menu and the right-click menus keep each item on one line. */
  .agenda-new-menu .overflow-menu-item,
  .context-menu .overflow-menu-item {
    white-space: nowrap;
  }

  /* A right-click menu, at the pointer (day_menu_controller.js, row_menu_controller.js). */
  .overflow-menu-dropdown.context-menu {
    position: fixed;
    top: var(--context-menu-y, 0);
    left: var(--context-menu-x, 0);
    right: auto;
  }

  /* ===== Shared row list — the agenda, the day detail, the reviews queue and the
     browsable history all render appointments with this same anatomy. ===== */
  /* Rows carry their own side padding, so a selected row's or a Bloqueio's wash holds its
     content on the same columns as every other row; a list pulls back by it to keep its text
     on the page's edge. */
  .agenda-schedule-list {
    padding: 0 calc(var(--content-padding) - var(--row-padding));
  }

  .agenda-schedule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px var(--row-padding);
    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. */
  .agenda-schedule-item-time-col {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* 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 {
    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);
  }

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

  /* A Lista row opens on when: its start and end, then its state. */
  .agenda-schedule-item-when {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
  }

  .agenda-schedule-item-state {
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-state-pending-text);
  }

  .agenda-schedule-item-period {
    font-size: var(--text-label);
    color: var(--color-muted);
  }

  /* The client, and beside it the agenda, quieter. */
  .agenda-schedule-item-who {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }

  /* 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-detail,
  .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);
  }

  /* The Pedidos filter: a quiet select at the end of the title row, its chevron in the select's
     end padding. */
  .reviews-filter {
    display: flex;
    align-items: center;

    .reviews-filter-select {
      appearance: none;
      field-sizing: content;
      min-height: var(--back-tap-size);
      padding: 0 20px 0 0;
      border: none;
      background: transparent;
      color: var(--color-primary);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
    }

    .reviews-filter-chevron {
      width: 16px;
      height: 16px;
      margin-left: -16px;
      color: var(--color-primary);
      pointer-events: none;
    }
  }

  .reviews-more {
    display: block;
    padding: 16px var(--content-padding);
    text-align: center;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }

  /* Pedidos and Pagamentos a receber: name, services, then the day; the value and chevron
     centre on the services line. The time lives on the record. */
  .reviews-list,
  .receivables-list {
    .agenda-schedule-item {
      align-items: center;
    }

    .agenda-schedule-item-end {
      align-items: center;
    }

    .agenda-schedule-item-chevron {
      margin-top: 0;
    }

    .agenda-schedule-item-date-line {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-caption);
      color: var(--color-muted);
      font-variant-numeric: tabular-nums;
    }

    .agenda-schedule-item-date--soon {
      color: var(--color-warning-text);
      font-weight: var(--font-weight-semibold);
    }

    .agenda-schedule-item-qualifier {
      margin-left: 4px;
    }

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

  /* Pagamentos a receber: A cobrar and Cobrados as a segmented pill (the plan card's
     Mensal/Anual). */
  .receivables-controls {
    padding: 4px var(--content-padding) 12px;
  }

  .receivables-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 3px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
  }

  .receivables-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--radius-pill);
    color: var(--color-text-light);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    &[aria-current="page"] {
      background: var(--color-bg-white);
      color: var(--color-text);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }
  }

  /* A long press opens the row menu (row_menu_controller.js), not the system's link preview. */
  .receivables-list .agenda-schedule-item {
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* A long press opens the appointment's menu (agenda_entry_menu_controller.js), not the system's
     link preview, and a held Colunas card drags itself, not its link. */
  [data-agenda-entry] {
    @media (pointer: coarse) {
      -webkit-touch-callout: none;
      -webkit-user-drag: none;
      user-select: none;
    }
  }

  /* On desktop a click on the row already opens the record in the pane. */
  .receivables-drawer-record {
    @media (min-width: 1024px) {
      display: none;
    }
  }

  /* A week past the last charge, or past the atendimento when never charged. */
  .receivable-status--overdue {
    color: var(--color-warning-text);
    font-weight: var(--font-weight-semibold);
  }

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

  /* Day detail: the share button hands the day's atendimentos to the share sheet. */
  .schedule-day-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .schedule-day-share {
    width: var(--back-tap-size);
    height: var(--back-tap-size);
  }

  /* With several agendas the share button asks which one. The drawer already pads
     horizontally, so the radio rows don't double it. */
  .day-sheet-drawer {
    .day-sheet-drawer-question {
      margin: 0 0 var(--section-label-gap);
    }

    .radio-list-option {
      padding-inline: 0;
    }

    .action-stack {
      margin-top: var(--content-padding);
    }
  }

  /* ===== Bloqueio de horário: a block among the appointments (agenda/_entries). ===== */
  /* A Bloqueio is one hatched row: context, so gray, never a state colour. */
  .agenda-schedule-item.agenda-schedule-item--blocked {
    padding-bottom: 12px;
    background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--color-border) 6px 7px);
    color: var(--color-muted);

    .agenda-schedule-item-time {
      color: var(--color-muted);
    }

    .agenda-schedule-item-name {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--color-muted);
    }

    .agenda-schedule-item-lock {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
    }
  }

  /* A day holding only a whole-day Bloqueio: the wash reaches as far below the date as it starts
     above it. */
  .agenda-day-list:has(> .agenda-day-rows > .agenda-block-whole-day:only-child) {
    .agenda-day-rail {
      padding-bottom: 12px;
    }

    .agenda-block-whole-day {
      min-height: 100%;
    }
  }

  /* ===== Several agendas: Lista and Colunas (AgendasHelper#agenda_mode) ===== */
  /* A Lista row names its agenda beside the client, until a chip narrows the list to one. */
  .agenda-schedule-item-agenda {
    flex: none;
    max-width: 50%;
    font-size: var(--text-sm);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .agenda-filtered & {
      display: none;
    }
  }

  /* The row scrolls sideways, so it pads room for the chips' taller tap areas. */
  .agenda-chips {
    display: flex;
    gap: 6px;
    padding: 6px var(--content-padding);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* A chip is the header pills' height; its tap area reaches the full 48px. The wizard's chips are
     links that mark the current one; the agenda's are toggles. */
  .agenda-chip {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      inset: -6px 0;
    }

    &[aria-pressed="true"],
    &[aria-current="true"] {
      border-color: var(--color-text);
      background: var(--color-bg-tertiary);
      color: var(--color-text);
    }

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

  .agenda-chip-count {
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  /* Colunas: a column per agenda on one time axis, an hour as tall as a list row, each entry
     as tall as it lasts. Columns keep a floor and scroll sideways past what the width holds. */
  .agenda-columns {
    --agenda-hour: 80px;
    --agenda-column-min: 170px;
    --agenda-columns-template: repeat(var(--agenda-columns), minmax(var(--agenda-column-min), 1fr));

    padding-bottom: 22px;
    /* Its pinned band stays under the topbar's. */
    isolation: isolate;

    /* One column of hour labels heads the grid. */
    @media (min-width: 1024px) {
      --agenda-hour: 90px;
      --agenda-columns-template: var(--agenda-hours-width) repeat(var(--agenda-columns), minmax(var(--agenda-column-min), 1fr));
    }
  }

  /* The day page's rows carry the neighbourhood too. */
  .schedule-day-columns .agenda-columns {
    --agenda-hour: 96px;

    @media (min-width: 1024px) {
      --agenda-hour: 116px;
    }
  }

  /* Pinned under the topbar until the next day's band pushes it away. */
  .agenda-columns-head {
    position: sticky;
    top: var(--agenda-topbar-height, 0px);
    z-index: var(--z-popup);
    padding-top: 10px;
    background: var(--color-bg);

    .schedule-day-columns & {
      top: 0;
      padding-top: 0;
    }
  }

  .agenda-columns-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--content-padding) 4px;
    color: var(--color-text);
    text-decoration: none;

    &:active {
      opacity: 0.6;
    }
  }

  .agenda-columns-dom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
  }

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

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

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

  /* The grid sits on the content line, under the date's circle. */
  .agenda-columns-track {
    overflow-x: hidden;
    padding-inline: var(--content-padding);
  }

  /* Its first hour line tucks under the names' border instead of doubling it. */
  .agenda-columns-body {
    margin-top: -1px;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .agenda-columns-names,
  .agenda-columns-grid {
    display: grid;
    grid-template-columns: var(--agenda-columns-template);
  }

  .agenda-columns-names {
    border-bottom: 1px solid var(--color-border);
  }

  /* The phone has no hour column: its labels sit in the agenda columns. */
  .agenda-columns-gutter {
    @media (width < 1024px) {
      display: none;
    }
  }

  /* An agenda's name heads its column, on its cards' text line; a count with no room left beside
     it goes under it. */
  .agenda-columns-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    min-width: 0;
    padding: 8px var(--row-padding);
    border-left: 1px solid var(--color-border);
  }

  .agenda-columns-agenda {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }

  /* The phone counts in a number beside the name; the desktop has room to say atendimentos. */
  .agenda-columns-count {
    font-size: var(--text-caption);
    color: var(--color-muted);
    white-space: nowrap;

    @media (width < 1024px) {
      display: none;
    }
  }

  .agenda-columns-count--short {
    display: none;
    font-size: var(--text-sm);

    @media (width < 1024px) {
      display: inline;
    }
  }

  /* Isolated, so the order inside it (an entry hovered over the now line) stays below the pinned
     names. */
  .agenda-columns-grid {
    position: relative;
    isolation: isolate;
  }

  /* Hour lines run behind every column; the axis opens on the hour, so they fall on the clock's. */
  .agenda-columns-column {
    position: relative;
    height: calc(var(--span) * var(--agenda-hour) / 60);
    background: repeating-linear-gradient(to bottom, var(--color-border-light) 0 1px, transparent 1px var(--agenda-hour));
    border-left: 1px solid var(--color-border);
  }

  /* An entry is a card on the hour lines, short of the column's end so the lines still show beside
     it. Its lines stack in a wrapping column: a line the card's height can't hold wraps to a second
     column past the card's edge, so it leaves whole instead of cut. */
  .agenda-columns-entry {
    position: absolute;
    inset-inline: 0 5%;
    top: calc(var(--start) * var(--agenda-hour) / 60);
    height: calc(var(--length) * var(--agenda-hour) / 60 - 2px);
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    gap: 2px calc(2 * var(--row-padding));
    overflow: hidden;
    padding: 8px var(--row-padding);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-brand-wash);
    color: var(--color-text);
    text-decoration: none;

    > * {
      width: 100%;
    }

    &:active {
      opacity: 0.6;
    }

    @media (hover: hover) {
      &:hover {
        z-index: 1;
        box-shadow: inset 0 0 0 1.5px var(--color-brand-light);
      }
    }
  }

  /* A Pedido is the pending state's grey. */
  .agenda-columns-entry--pending {
    background: var(--color-state-pending-bg);
  }

  /* A card that can move (Remarcar) is dragged with the mouse (agenda_drag_controller.js); while it
     moves it shows where it would start. */
  .agenda-columns-entry[data-reschedule-url] {
    @media (pointer: fine) {
      cursor: grab;
    }
  }

  .agenda-columns-entry--dragging {
    z-index: var(--z-popup);
    cursor: grabbing;
    box-shadow: inset 0 0 0 2px var(--color-brand);
    opacity: 0.9;

    &::after {
      content: attr(data-drop-time);
      position: absolute;
      top: 4px;
      right: 4px;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      background: var(--color-brand);
      color: var(--color-on-brand);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      font-variant-numeric: tabular-nums;
    }
  }

  .agenda-columns-entry--blocked {
    background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--color-border) 6px 7px);
    color: var(--color-muted);
  }

  .agenda-columns-entry-name {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }

  .agenda-columns-entry-lock {
    flex: none;
    width: 14px;
    height: 14px;
  }

  .agenda-columns-entry-time {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: var(--text-caption);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;

    .agenda-columns-entry--done & .agenda-schedule-item-mark {
      color: var(--color-success-text);
    }
  }

  .agenda-columns-entry-state {
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-state-pending-text);
  }

  .agenda-columns-entry-state--alert {
    color: var(--color-danger);
  }

  .agenda-columns-entry-period {
    font-size: var(--text-label);
    color: var(--color-muted);
  }

  .agenda-columns-entry-detail {
    font-size: var(--text-caption);
    color: var(--color-muted);
  }

  .agenda-columns-hours {
    position: relative;
  }

  /* An hour's label sits on its line. On the phone it shows in a column where no card covers it;
     the desktop names every hour in its hour column. */
  .agenda-columns-hour {
    position: absolute;
    top: calc(var(--start) * var(--agenda-hour) / 60);
    padding: 8px var(--row-padding);
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;

    .agenda-columns-hours & {
      padding-inline: 0;
    }

    .agenda-columns-column & {
      @media (min-width: 1024px) {
        display: none;
      }
    }
  }

  /* The line starts with a dot centred on its start, the way a calendar marks now: the grid's edge
     on the phone, the hour column's end on the desktop. */
  .agenda-columns-now {
    position: absolute;
    inset-inline: 0;

    @media (min-width: 1024px) {
      inset-inline-start: var(--agenda-hours-width);
    }

    top: calc(var(--start) * var(--agenda-hour) / 60);
    height: 1.5px;
    background: var(--color-primary);
    pointer-events: none;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--color-primary);
      translate: -50% -50%;
    }
  }

  /* Colunas takes the whole width: no pane beside it. Its days and header stop at
     --agenda-column-max a column, so the header's actions stay near the grid; the scroller keeps
     the width. --agenda-count is the business's agendas, set on the split or the page. */
  .agenda-split--columns {
    @media (min-width: 1024px) {
      grid-template-columns: minmax(0, 1fr);

      > .agenda-detail-pane {
        display: none;
      }

      .agenda-page > *,
      .agenda-columns {
        max-width: calc(var(--agenda-hours-width) + var(--agenda-count) * var(--agenda-column-max) + 2 * var(--content-padding));
      }
    }
  }

  /* An unchosen mode renders both, and the width picks: Lista on the phone, Colunas on the desktop. */
  .agenda-only-columns {
    @media (width < 1024px) {
      display: none;
    }
  }

  .agenda-only-list {
    @media (min-width: 1024px) {
      display: none;
    }
  }
}

/* On desktop the Pedidos filter follows the title instead of the row's far end. Outside the layer:
   the topbar's own rules (page.css) are unlayered. */
@media (min-width: 1024px) {
  .detail-topbar:has(.reviews-filter) .detail-topbar-title {
    flex: none;
  }
}

/* The day page in Colunas runs the grid the page's full width. Outside the layer, like the split
   it overrides (page.css). */
@media (min-width: 1024px) {
  .detail-fullscreen:has(.agenda-split.agenda-split--columns) .detail-page {
    grid-template-columns: minmax(0, 1fr);

    .detail-header {
      max-width: calc(var(--agenda-hours-width) + var(--agenda-count) * var(--agenda-column-max) + 2 * var(--content-padding));
    }
  }
}