/* /Components/AgendaDayColumn.razor.rz.scp.css */
/* Uma coluna da grade. O separador entre calha e eventos (e entre colunas no
   split) e a borda ESQUERDA desta coluna (Figma no 1402:23003), nao uma borda
   direita da calha — o cabecalho carrega uma borda transparente de 1px para as
   duas faixas continuarem alinhadas. */
.day-column[b-6gu2w1gouz] {
    flex: 1 1 0;
    position: relative;
    border-left: 1px solid var(--color-agenda-grid-line);
    padding-right: 15px;
    box-sizing: border-box;
}

/* Clickable 30-min slots — a borda fica no topo, marcando o inicio do intervalo */
.day-slot[b-6gu2w1gouz] {
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    border-top: 1px dashed var(--color-agenda-grid-line-soft);
}

.day-slot--hour[b-6gu2w1gouz] {
    border-top: 1px solid var(--color-agenda-grid-line);
}

.day-slot--closed[b-6gu2w1gouz] {
    background: var(--color-agenda-slot-closed);
}

.day-slot:hover[b-6gu2w1gouz] {
    background: var(--color-button-header-bg-active);
}

/* Current time indicator — no split cada coluna tem o seu ponto, como no Figma. */
.day-now-line[b-6gu2w1gouz] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-feedback-success);
    z-index: 5;
    display: flex;
    align-items: center;
}

.day-now-dot[b-6gu2w1gouz] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-feedback-success);
    margin-left: -5px;
    flex-shrink: 0;
}

/* Os cards (.book-block*) vivem em wwwroot/css/app.css: tres views renderizam o
   mesmo card, e manter copias por componente foi o que deixou o layout divergir
   do design system. Aqui fica so a grade. */
/* /Components/AgendaDayView.razor.rz.scp.css */
.day-view[b-l4x5361ik1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Container de rolagem dos DOIS eixos. Precisa ser um so: cabecalho e colunas tem
   que rolar juntos na horizontal, e a calha de horas depende de `sticky left`
   contra este mesmo scrollport. Tentar separar (X aqui, Y no `.day-body`) nao
   funciona nem com `overflow-x: clip` — o `.day-body` continua sendo scroll
   container por causa do eixo Y, e a calha gruda nele em vez de neste. */
.day-scroll-x[b-l4x5361ik1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.day-scroll-x[b-l4x5361ik1]::-webkit-scrollbar {
    display: none;
}

/* No split a barra horizontal e o unico indicio de que ha mais colunas a direita
   (Figma 1557:64299, que mostra a barra no rodape), entao ela aparece. */
.day-scroll-x--split[b-l4x5361ik1] {
    scrollbar-width: thin;
}

.day-scroll-x--split[b-l4x5361ik1]::-webkit-scrollbar {
    display: block;
    height: 8px;
    width: 8px;
}

/* Day header row — Figma "Design System BF" no 1380:9842 */
.day-header-row[b-l4x5361ik1] {
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 7;
    width: max-content;
    min-width: 100%;
    border-bottom: 1px solid var(--color-agenda-grid-line);
    background: var(--color-surface-default);
}

/* Espacador da calha: o Figma reserva a largura com um "00:00" invisivel, sem borda. */
.day-hour-spacer[b-l4x5361ik1] {
    width: 50px;
    flex-shrink: 0;
}

.day-header-cell[b-l4x5361ik1] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 68px;
    padding: 8px;
    border-left: 1px solid transparent;
    box-sizing: border-box;
}

.day-header-stack[b-l4x5361ik1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 48px;
}

.day-header-abbr[b-l4x5361ik1] {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.day-header-num[b-l4x5361ik1] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

/* Só a variante "hoje" fica sobre a cor de marca. */
.day-header-num--today[b-l4x5361ik1] {
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
}

/* O corpo nao rola: quem rola e o `.day-scroll-x`. Ele so precisa ser tao largo
   quanto as colunas para o scrollport ter o que rolar. */
.day-body[b-l4x5361ik1] {
    display: flex;
    width: max-content;
    min-width: 100%;
}

.day-hours[b-l4x5361ik1] {
    width: 50px;
    flex-shrink: 0;
}

/* A calha de horas (e o espacador dela no cabecalho) fica fixa na esquerda
   enquanto as colunas rolam. O espacador e sticky nos dois eixos — e o canto. */
.day-hour-spacer[b-l4x5361ik1],
.day-hours[b-l4x5361ik1] {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--color-surface-default);
}

.day-hour-spacer[b-l4x5361ik1] {
    z-index: 8;
}

.day-hour-row[b-l4x5361ik1] {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--color-text-primary);
    padding: 0 8px;
    position: relative;
    box-sizing: border-box;
}

/* Trilho das colunas. Com uma coluna so, o `flex: 1 1 0` dela reproduz
   exatamente o antigo `.day-events`. */
.day-columns[b-l4x5361ik1] {
    display: flex;
    flex: 1;
    min-width: 0;
}

/* `::deep` e obrigatorio: `.day-column` e markup do AgendaDayColumn, e o CSS
   isolado deste componente nao carimba o atributo de escopo no markup do filho.
   Sem ele a regra nao casa com nada, em silencio. */
/* Sem padding lateral em nenhuma coluna do split: com `flex-basis: 0` o padding e
   somado por fora da divisao, entao um `padding-right` so na ultima a deixaria
   15px mais larga que as outras. O respiro do card vem do `right: 8px` dele. */
.day-columns--split[b-l4x5361ik1]  .day-column {
    min-width: 290px;
    padding-right: 0;
}

/* O cabecalho espelha a largura minima das colunas: sem isso as celulas encolhem
   enquanto as colunas nao, e os nomes desalinham ao rolar na horizontal. */
.day-header-row--split .day-header-cell[b-l4x5361ik1] {
    min-width: 290px;
}

/* Nome + avatar do colaborador, encostados na direita da coluna (Figma 1557:63119) */
.day-header-cell[b-l4x5361ik1] {
    min-width: 0;
}

.day-header-emp[b-l4x5361ik1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.day-header-emp-name[b-l4x5361ik1] {
    font-size: 12px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Os slots, a linha do "agora" e os cards moram no AgendaDayColumn (grade) e em
   wwwroot/css/app.css (cards). Aqui fica so o cabecalho e a calha de horas. */
/* /Components/AgendaMonthView.razor.rz.scp.css */
.month-view[b-61kyi15jqp] { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow-y: auto; }

.month-grid[b-61kyi15jqp] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

/* Celula — Figma "Design System BF" nos 1492:10984 / 1492:12959.
   Conteudo centrado na horizontal; a pilha de pilulas ocupa a largura toda. */
.month-cell[b-61kyi15jqp] {
    min-height: 100px;
    box-sizing: border-box;
    background: var(--color-surface-default);
    border-right: 1px solid var(--color-agenda-grid-line);
    border-bottom: 1px solid var(--color-agenda-grid-line);
    padding: 8px 4px 4px 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

/* Responsive: smaller screens get more height per cell */
@media (max-width: 1024px) {
    .month-cell[b-61kyi15jqp] {
        min-height: 140px;
    }
}

.month-cell:hover[b-61kyi15jqp] {
    background: var(--color-surface-subtle);
}

/* Dias fora do mes nao ganham fundo proprio: quem sinaliza a virada e o rotulo
   "1 jul." no numero. Esmaecer a celula inteira apagava tambem as pilulas. */
.month-cell--outside .month-cell-day[b-61kyi15jqp] {
    color: var(--color-text-tertiary);
}

/* Loja fechada — mesmo tom das celulas fechadas de Dia/Semana. */
.month-cell--closed[b-61kyi15jqp] {
    background: var(--color-agenda-slot-closed);
}

.month-cell-head[b-61kyi15jqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
}

.month-cell-abbr[b-61kyi15jqp] {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    text-transform: uppercase;
    line-height: 1;
}

.month-cell-day[b-61kyi15jqp] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 14px;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 1;
    white-space: nowrap;
}

/* Hoje: pilula de marca. O Figma desenha o hover identico ao "hoje"; aqui ele usa
   o tom claro, senao qualquer celula sob o cursor se disfarca de hoje. */
.month-cell-day--today[b-61kyi15jqp] {
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
}

.month-cell:hover .month-cell-day:not(.month-cell-day--today)[b-61kyi15jqp] {
    background: var(--color-button-header-bg-active);
}

.month-cell-pills[b-61kyi15jqp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    min-height: 0;
}

/* As pilulas (.month-pill*) vivem em wwwroot/css/app.css junto com os cards de
   Dia/Semana — sao a variante MensalView do mesmo componente do design system. */
/* /Components/AgendaPopoverCard.razor.rz.scp.css */
/* Casca dos popovers da Agenda — Design System BF, no 1507:30467.

   As regras `::deep` abaixo (linhas, rodape, badges, botoes) sao consumidas
   por BookDetailPopover e BlockDetailPopover: o cartao e o mesmo componente
   do design system, entao o estilo mora aqui e nao duplicado nos dois. */

.apc-backdrop[b-hqw6sfwpq1] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.apc-card[b-hqw6sfwpq1] {
    position: fixed;
    z-index: 1001;
    width: 345px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px var(--color-shadow-lg);
    outline: none;
}

/* Modo conclusao: o cartao cresce no lugar (ancorado no evento, estilo Google
   Calendar). overflow visivel para os dropdowns de pagamento nao serem cortados
   pela barra de rolagem do cartao; positionBookPopover reancora via
   ResizeObserver para ele continuar inteiro na tela ao expandir. */
.apc-card--wide[b-hqw6sfwpq1] {
    width: 440px;
    overflow: visible;
    max-height: none;
}

.apc-body[b-hqw6sfwpq1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 14px 14px;
}

/* ── Cabecalho ── */
.apc-header[b-hqw6sfwpq1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apc-actions[b-hqw6sfwpq1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.apc-actions-group[b-hqw6sfwpq1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apc-icon-btn[b-hqw6sfwpq1],
.apc-card[b-hqw6sfwpq1]  .apc-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-button-header-icon-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.apc-icon-btn:hover[b-hqw6sfwpq1],
.apc-card[b-hqw6sfwpq1]  .apc-icon-btn:hover {
    background: var(--color-surface-highlighted);
    color: var(--color-text-primary);
}

.apc-icon-btn .material-symbols-outlined[b-hqw6sfwpq1],
.apc-card[b-hqw6sfwpq1]  .apc-icon-btn .material-symbols-outlined {
    font-size: 24px;
}

.apc-card[b-hqw6sfwpq1]  .apc-icon-btn--danger:hover {
    background: var(--color-feedback-danger-subtle);
    color: var(--color-feedback-danger);
}

/* ── Identidade (tag + titulo + badges + colaborador) ── */
.apc-identity[b-hqw6sfwpq1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.apc-identity-text[b-hqw6sfwpq1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.apc-title[b-hqw6sfwpq1] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.apc-meta[b-hqw6sfwpq1] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.apc-badges[b-hqw6sfwpq1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Tag vertical — mesmas variantes do card da grade (.book-block). */
.apc-tag[b-hqw6sfwpq1] {
    flex-shrink: 0;
    align-self: stretch;
    width: 12px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-primary);
}

.apc-tag--scheduled[b-hqw6sfwpq1] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--color-brand-primary);
}

.apc-tag--confirmed[b-hqw6sfwpq1],
.apc-tag--inprogress[b-hqw6sfwpq1] {
    background: var(--color-brand-primary);
}

.apc-tag--completed[b-hqw6sfwpq1] {
    background: var(--color-surface-highlighted);
}

.apc-tag--cancelled[b-hqw6sfwpq1] {
    background: var(--color-border-default);
}

/* Hachura do bloqueio: mesmo tracado de .book-block--block::before em app.css
   (±45°, passo 5px na vertical, traco de 1px para sobreviver a dpr 1). */
.apc-tag--block[b-hqw6sfwpq1] {
    --agenda-hatch: color-mix(in srgb, var(--color-border-brand) 70%, black);
    background-color: var(--color-brand-primary);
    background-image:
        repeating-linear-gradient(45deg, var(--agenda-hatch) 0 1px, transparent 1px 3.54px),
        repeating-linear-gradient(-45deg, var(--agenda-hatch) 0 1px, transparent 1px 3.54px);
}

.apc-emp[b-hqw6sfwpq1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.apc-emp-avatar[b-hqw6sfwpq1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 6.75px;
    font-weight: 700;
    /* Precisa ser explicito: `1` encolhe a caixa da linha abaixo da caixa do
       tipo e o flex centra a caixa, nao a tinta — a inicial sobe ~1.75px (o
       descendente que a maiuscula nao usa). Herdar o line-height da pagina
       erra para o outro lado. Com `normal` a tinta fica centrada de fato. */
    line-height: normal;
    flex-shrink: 0;
}

.apc-emp-name[b-hqw6sfwpq1] {
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badges de status/origem ── */
.apc-card[b-hqw6sfwpq1]  .apc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 11px;
    line-height: normal;
    white-space: nowrap;
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--scheduled {
    background: var(--color-brand-primary);
    color: var(--color-text-primary);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--confirmed {
    background: var(--color-brand-primary-hover);
    color: var(--color-text-primary);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--inprogress {
    background: var(--color-badge-brand-text);
    color: var(--color-text-inverse);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--completed {
    background: var(--color-badge-success-text);
    color: var(--color-text-inverse);
}

/* Cancelado nao existe no design (a Agenda nao renderiza cancelados); o
   popover so chega nesse estado por busca direta por id. */
.apc-card[b-hqw6sfwpq1]  .apc-badge--cancelled {
    background: var(--color-badge-danger-bg);
    color: var(--color-badge-danger-text);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--block {
    background: var(--color-badge-neutral-text);
    color: var(--color-text-inverse);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--whatsapp {
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge--landing {
    background: var(--color-badge-brand-bg);
    color: var(--color-badge-brand-text);
}

.apc-card[b-hqw6sfwpq1]  .apc-badge-icon {
    font-size: 13px;
    line-height: 1;
}

/* ── Linhas de informacao ── */
.apc-card[b-hqw6sfwpq1]  .apc-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 16px;
    border-bottom: 1px solid var(--color-border-default);
}

.apc-card[b-hqw6sfwpq1]  .apc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.apc-card[b-hqw6sfwpq1]  .apc-row-icon {
    font-size: 18px;
    line-height: 1;
    color: var(--color-button-header-icon-default);
    flex-shrink: 0;
}

.apc-card[b-hqw6sfwpq1]  .apc-row-end {
    margin-left: auto;
}

/* ── Rodape ── */
.apc-card[b-hqw6sfwpq1]  .apc-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.apc-card[b-hqw6sfwpq1]  .apc-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.apc-card[b-hqw6sfwpq1]  .apc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 112px;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.apc-card[b-hqw6sfwpq1]  .apc-btn--primary {
    background: var(--color-button-primary-surface);
    color: var(--color-button-primary-text);
}

.apc-card[b-hqw6sfwpq1]  .apc-btn--primary:hover:not(:disabled) {
    background: var(--color-brand-primary-hover);
}

/* O contorno e `button/primary/border` (#9BA336) e o rotulo e
   `button/primary/text-on-soft` (#001F3F). Esse segundo token so e navy no tema
   limonada — em hortela/napolitano/etc ele resolve para #FFFFFF, e o rotulo
   sumiria no cartao branco. `text-heading` e escuro nos seis temas e vale
   #001F3F no limonada, entao bate com o spec sem quebrar os outros. Mesma
   armadilha do numero do dia na Programacao. */
.apc-card[b-hqw6sfwpq1]  .apc-btn--ghost {
    background: transparent;
    color: var(--color-text-heading);
    box-shadow: inset 0 0 0 1.5px var(--color-button-primary-border);
}

.apc-card[b-hqw6sfwpq1]  .apc-btn--ghost:hover:not(:disabled) {
    background: var(--color-surface-highlighted);
}

.apc-card[b-hqw6sfwpq1]  .apc-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
/* /Components/AgendaScheduleView.razor.rz.scp.css */
/* Visao "Programacao" — Figma "Design System BF" no 1497:15091.
   Medidas da variante `Dia` a 1088px. So tokens: nenhum hex a mao.

   Diferente de .book-block / .month-pill, que vivem em wwwroot/css/app.css porque tres
   views renderizam o mesmo card, esta forma de linha tem um unico consumidor — entao
   fica isolada por componente. */

.sched-view[b-ca1a12i7he] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sched-empty[b-ca1a12i7he] {
    padding: 48px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ── Grupo de dia ── */

.sched-day[b-ca1a12i7he] {
    position: relative;
    display: flex;
    gap: 32px;
    padding: 12px 8px;
    background: var(--color-surface-default);
    border-bottom: 1px solid var(--color-border-default);
    overflow: hidden;
}

/* Alinhada ao topo, nao centrada: num dia com muitos agendamentos a data centrada
   flutua no meio da lista e perde a relacao com a primeira linha. Com flex-start o
   badge de 24px cai sobre a primeira linha (centro em 24px contra 23.5px da linha), e
   o afastamento da borda vem do padding de 12px do grupo. */
.sched-day-col[b-ca1a12i7he] {
    width: 85px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* O Figma usa --color-text-on-brand nos dois estados, mas isso so funciona no tema
   limonada, onde o token e navy. Em hortela/napolitano/etc ele e #FFFFFF — branco sobre
   o cartao branco, e o numero some. Entao: on-brand so no badge, que de fato tem a cor
   da marca atras; nos demais dias, texto primario. */
.sched-day-num[b-ca1a12i7he] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.sched-day-num--today[b-ca1a12i7he] {
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-weight: 700;
}

/* `height: 24px` + centro: com a coluna alinhada ao topo, o texto de 11px encostaria na
   borda superior e o numero, que mora num badge de 24px, apareceria mais baixo que ele.
   Igualar a altura do badge poe os dois na mesma linha de base visual. */
.sched-day-labels[b-ca1a12i7he] {
    display: flex;
    align-items: center;
    height: 24px;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* ── Linhas de agendamento ── */

/* O Figma desenha a coluna com 280px na variante sem hover e `flex: 1` nas variantes
   de hover. Alternar isso em runtime deslocaria o layout no mouseover, entao a coluna
   e sempre fluida: as colunas internas tem largura fixa, o alinhamento se mantem, e o
   que sobra e espaco vazio que continua fazendo parte do alvo de hover. */
.sched-rows[b-ca1a12i7he] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sched-row[b-ca1a12i7he] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 4px 4px 4px 0;
    border-radius: 8px;
    cursor: pointer;
}

.sched-row:hover[b-ca1a12i7he] {
    background: var(--color-button-header-bg-active);
}

/* Mesma geometria de .month-pill (15px de altura, 0 8px, raio sm, 11px/500): e o mesmo
   componente do design system. */
/* Largura fixa, nao `max-width`: o Figma traz `max-w-[180px] w-full`, e e o que alinha
   servico e hora numa coluna so em todas as linhas. Deixar o chip encolher no conteudo
   faz cada linha comecar as colunas seguintes num x diferente.
   Os 180px do Figma sao a medida da variante `Dia` a 1088px; na Agenda a coluna e bem
   mais larga, entao o chip vai a 240px para caber nome inteiro sem elipse. */
.sched-row-chip[b-ca1a12i7he] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 15px;
    width: 240px;
    flex-shrink: 0;
    padding: 0 8px;
    margin-right: 16px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* O Figma usa o mesmo ponto nas quatro variantes, sem variar por status. Por
   COLABORADOR ele varia: com mais de um na loja o `EmployeeColorHelper.GetDotStyle`
   injeta `--card-color` / `--card-ring` na linha, e este e o unico lugar da
   Programacao onde a cor cabe. Sem injecao os dois `var()` caem no visual de
   sempre — a loja de um colaborador so nao muda em nada. */
.sched-dot[b-ca1a12i7he] {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--card-color, var(--color-brand-primary));
    box-shadow: inset 0 0 0 0.5px var(--card-ring, var(--color-brand-primary-disabled));
}

.sched-row-text[b-ca1a12i7he] {
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sched-row-service[b-ca1a12i7he],
.sched-row-time[b-ca1a12i7he] {
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Os 54px do Figma sao a medida da variante estreita e cortam quase todo nome de
   servico. Aqui a coluna vale 30% da faixa de linhas — larga o bastante para o nome
   inteiro sem esticar a linha ate a borda da tela, o que jogaria a hora longe do resto
   do conteudo. O que sobra a direita e espaco vazio que continua no alvo de hover. */
.sched-row-service[b-ca1a12i7he] {
    flex: 0 0 30%;
    min-width: 0;
    margin-right: 16px;
}

.sched-row-time[b-ca1a12i7he] {
    width: 40px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* ── Marcador de hoje ── */

/* left: 98px vem do vetor Rectangle 6544 (1498:17888): comeca 27px antes da coluna de
   linhas (x=125), de modo que o ponto fica a esquerda do chip do cliente.

   top: 12px = borda superior da primeira linha (o padding do grupo). No frame
   1498:21365 o traco aparece ACIMA do texto do primeiro cliente, nao cruzando ele —
   centrar na linha (23.5px) transforma o traco em tachado por cima do nome, do servico
   e da hora, porque a linha nao tem fundo proprio. */
.sched-today-line[b-ca1a12i7he] {
    position: absolute;
    left: 98px;
    right: 0;
    top: 12px;
    height: 1px;
    z-index: 0;
    background: var(--color-feedback-success);
    display: flex;
    align-items: center;
}

.sched-today-dot[b-ca1a12i7he] {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--color-feedback-success);
}
/* /Components/AgendaWeekView.razor.rz.scp.css */
.week-view[b-1i57wd3ddv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Horizontal & vertical scroll wrapper — scrolls both header and body together, hides scrollbar */
.week-scroll-wrapper[b-1i57wd3ddv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: none;
}

    .week-scroll-wrapper[b-1i57wd3ddv]::-webkit-scrollbar {
        display: none;
    }

/* Header row — sticky so it stays at top while scrolling vertically */
.week-header-row[b-1i57wd3ddv] {
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface-default);
}

/* Cabecalho de dia — Figma "Design System BF" no 1380:9842 */
.week-hour-col-header[b-1i57wd3ddv] {
    width: 50px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-agenda-grid-line);
}

/* O divisor de 1px x 20px entre colunas fica na base da celula (::before), no lugar
   de uma borda direita de altura cheia.
   Diferenca real entre as duas visoes: na Semana a celula e centrada
   (Figma no 1402:27609, justify-center); no Dia ela e alinhada a esquerda
   (no 1380:9842). Nao unificar. */
.week-day-header[b-1i57wd3ddv] {
    flex: 1;
    cursor: pointer;
    padding: 8px;
    height: 68px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    user-select: none;
    position: relative;
    border-bottom: 1px solid var(--color-agenda-grid-line);
    border-left: 1px solid transparent;
    min-width: 80px;
}

    .week-day-header[b-1i57wd3ddv]::before {
        content: "";
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 1px;
        height: 20px;
        background: var(--color-agenda-grid-line);
    }

    .week-day-header:hover .week-day-num[b-1i57wd3ddv] {
        background: var(--color-bg-page);
    }

    .week-day-header:hover .week-day-num--today[b-1i57wd3ddv] {
        background: var(--color-brand-primary);
    }

.week-day-stack[b-1i57wd3ddv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 48px;
}

.week-day-abbr[b-1i57wd3ddv] {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    text-transform: uppercase;
}

/* Circulo de 32px: sem flex-shrink: 0 o item e achatado pelo flex column da pilha
   (altura fixa de 48px) e o badge de hoje sai como pilula, nao como circulo. */
.week-day-num[b-1i57wd3ddv] {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

/* Só a variante "hoje" fica sobre a cor de marca. */
.week-day-num--today[b-1i57wd3ddv] {
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
}

/* Body container — scrolling handled by wrapper */
.week-scroll-body[b-1i57wd3ddv] {
    overflow: visible;
    min-height: 0;
    flex: 1;
    display: flex;
}

.week-hours-col[b-1i57wd3ddv] {
    width: 50px;
    flex-shrink: 0;
}

.week-hour-label[b-1i57wd3ddv] {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--color-text-primary);
    padding: 0 8px;
    box-sizing: border-box;
}

/* Day columns — o separador entre colunas e a borda ESQUERDA (Figma no 1402:23003),
   nao mais uma borda direita. O cabecalho carrega uma borda transparente de 1px para
   que a largura das colunas continue batendo com a do corpo. */
.week-day-col[b-1i57wd3ddv] {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--color-agenda-grid-line);
    min-width: 80px;
}

.week-day-col--today[b-1i57wd3ddv] {
    /* subtle highlight removed to stay clean */
}

/* Clickable 30-min slots — a borda fica no topo, marcando o inicio do intervalo */
.week-slot[b-1i57wd3ddv] {
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    border-top: 1px dashed var(--color-agenda-grid-line-soft);
}

.week-slot--hour[b-1i57wd3ddv] {
    border-top: 1px solid var(--color-agenda-grid-line);
}

.week-slot--closed[b-1i57wd3ddv] {
    background: var(--color-agenda-slot-closed);
}

.week-slot:hover[b-1i57wd3ddv] {
    background: var(--color-button-header-bg-active);
}

/* Current time */
.week-now-line[b-1i57wd3ddv] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-feedback-success);
    /* Acima dos cards da cascata (2 + indice), abaixo do cabecalho sticky (10).
       Cobre ate 7 agendamentos sobrepostos no mesmo horario; alem disso o card da
       frente cruza a linha — cosmetico, num cenario ja ilegivel por outros motivos. */
    z-index: 9;
    display: flex;
    align-items: center;
}

.week-now-dot[b-1i57wd3ddv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-feedback-success);
    margin-left: -5px;
    flex-shrink: 0;
}

/* Os cards de agendamento/bloqueio (.book-block*) vivem em wwwroot/css/app.css:
   Dia, Semana e Mes renderizam o mesmo card, e manter copias por componente foi
   o que deixou o layout divergir do design system. Aqui fica so a grade. */
/* /Components/AppButton.razor.rz.scp.css */
.app-btn[b-tkmbks3ecx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    text-decoration: none;
    line-height: var(--line-height-snug);
}

/* ── Sizes ── */
.app-btn--lg[b-tkmbks3ecx] {
    padding: 13px var(--spacing-7);
    font-size: 18px;
    min-height: 52px;
}

.app-btn--md[b-tkmbks3ecx] {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: 16px;
    min-height: 44px;
}

.app-btn--sm[b-tkmbks3ecx] {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-body-md-size);
    min-height: 36px;
}

.app-btn--xsm[b-tkmbks3ecx] {
    padding: 6px var(--spacing-3);
    font-size: var(--text-body-sm-size);
    min-height: 30px;
}

/* ── Primary ── */
.app-btn--primary[b-tkmbks3ecx] {
    background: var(--color-button-primary-bg);
    border-color: transparent;
    color: var(--color-button-text-primary);
}

.app-btn--primary:hover:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-button-primary-bg-hover);
}

.app-btn--primary:active:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-brand-primary-active);
}

.app-btn--primary:disabled[b-tkmbks3ecx] {
    background: var(--color-button-primary-bg-disabled);
    color: var(--color-button-text-disabled);
    cursor: not-allowed;
}

/* ── Secondary ── */
.app-btn--secondary[b-tkmbks3ecx] {
    background: var(--color-button-secondary-bg);
    border-color: var(--color-button-border);
    color: var(--color-button-text-secondary);
}

.app-btn--secondary:hover:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-button-secondary-bg-hover);
    border-color: var(--color-button-border-hover);
}

.app-btn--secondary:active:not(:disabled)[b-tkmbks3ecx] {
    border-color: var(--color-button-border-active);
}

.app-btn--secondary:disabled[b-tkmbks3ecx] {
    background: var(--color-button-secondary-bg-disabled);
    border-color: var(--color-button-border-disabled);
    color: var(--color-button-text-disabled);
    cursor: not-allowed;
}

/* Botao dos rodapes de painel/popover — 40px de altura e rotulo de 15px
   (no 1532:25866). Fica entre o `sm` (36) e o `md` (44), entao e um modificador
   em vez de um tamanho novo na escala; precisa morar aqui porque o CSS isolado
   do componente vence qualquer regra global de mesma especificidade. */
.app-btn--panel[b-tkmbks3ecx] {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
}

/* ── Ghost (contorno escuro) ──
   `button/primary/soft` do design system: 1.5px de contorno sobre fundo
   transparente. O Figma marca #001F3F em `text-on-soft`, mas esse token so e
   navy no tema limonada — em hortela/napolitano/etc ele e branco e o botao
   sumiria. `text-heading` e escuro nos seis temas e vale #001F3F no limonada.
   Mesma escolha do "Fechar" do popover da Agenda.

   O contorno e um `inset box-shadow` e nao um `border`: o Chromium arredonda
   border-width para pixel inteiro e os 1.5px do spec sairiam como 1px. */
.app-btn--ghost[b-tkmbks3ecx] {
    background: transparent;
    border-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-text-heading);
    color: var(--color-text-heading);
}

.app-btn--ghost:hover:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-surface-highlighted);
}

.app-btn--ghost:disabled[b-tkmbks3ecx] {
    box-shadow: inset 0 0 0 1.5px var(--color-button-border-disabled);
    color: var(--color-button-text-disabled);
    cursor: not-allowed;
}

/* ── Danger ── */
.app-btn--danger[b-tkmbks3ecx] {
    background: var(--color-feedback-danger);
    border-color: transparent;
    color: #fff;
}

.app-btn--danger:hover:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-feedback-danger-text);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.35);
}

.app-btn--danger:active:not(:disabled)[b-tkmbks3ecx] {
    background: var(--color-feedback-danger-text);
}

.app-btn--danger:disabled[b-tkmbks3ecx] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Loading ── */
.app-btn--loading[b-tkmbks3ecx] {
    cursor: not-allowed;
}

.app-btn__spinner[b-tkmbks3ecx] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: app-btn-spin-b-tkmbks3ecx 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes app-btn-spin-b-tkmbks3ecx {
    to { transform: rotate(360deg); }
}
/* /Components/AppCheckbox.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   AppCheckbox — Figma Design System BF, nó 1642:177
   (grade nos 6 temas: nó 1647:65418)
   ═══════════════════════════════════════════════════════════ */

.app-cb[b-tb6hbzegx6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* O input é real e continua focável — `display: none` o tiraria da
   ordem de tabulação e mataria o teclado. */
.app-cb-input[b-tb6hbzegx6] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.app-cb-box[b-tb6hbzegx6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--cb-size);
    height: var(--cb-size);
    border-radius: calc(var(--cb-size) / 4);
    background: var(--cb-surface, transparent);
    color: var(--cb-fg);
    /* O contorno é inset box-shadow, NUNCA border: o Chromium arredonda
       border-width para pixel inteiro e os 1.5px de md/lg/xl sairiam com 1px.
       Mesma armadilha já resolvida em AppButton.razor.css. Bônus: sem border,
       a caixa mede exatamente --cb-size e o ícone centra contra ela inteira. */
    box-shadow: inset 0 0 0 var(--cb-stroke) var(--cb-border);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.app-cb-check[b-tb6hbzegx6] {
    width: var(--cb-icon);
    height: var(--cb-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.app-cb-label[b-tb6hbzegx6] {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ── Estados ────────────────────────────────────────────────── */

.app-cb-input:checked ~ .app-cb-box[b-tb6hbzegx6] {
    --cb-surface: var(--cb-checked-surface);
}

    .app-cb-input:checked ~ .app-cb-box .app-cb-check[b-tb6hbzegx6] {
        opacity: 1;
    }

/* Desabilitado troca contorno e glifo em qualquer valor; o preenchimento
   só entra quando também está marcado. O Figma modela "disabled" como um
   terceiro estado sempre marcado — aqui Disabled é ortogonal a Value, então
   desabilitado-e-desmarcado é só o contorno apagado. */
.app-cb-input:disabled ~ .app-cb-box[b-tb6hbzegx6] {
    --cb-border: var(--cb-disabled-border);
    --cb-fg: var(--cb-disabled-icon);
}

.app-cb-input:disabled:checked ~ .app-cb-box[b-tb6hbzegx6] {
    --cb-surface: var(--cb-disabled-surface);
}

.app-cb:has(.app-cb-input:disabled)[b-tb6hbzegx6] {
    cursor: not-allowed;
}

    .app-cb:has(.app-cb-input:disabled) .app-cb-label[b-tb6hbzegx6] {
        color: var(--color-text-disabled);
    }

/* :focus-visible (não :focus) para o anel não aparecer no clique de mouse.
   O Figma não desenha foco — sem isto o componente fica inoperável por teclado. */
.app-cb-input:focus-visible ~ .app-cb-box[b-tb6hbzegx6] {
    outline: 2px solid var(--color-border-brand);
    outline-offset: 2px;
}

/* ── Tamanhos ───────────────────────────────────────────────── */
/* Raio é sempre --cb-size / 4 (4/5/6/7/8px). O ícone não segue proporção
   limpa (.625 .60 .583 .607 .594), por isso os cinco valores são cravados. */

.app-cb--xs[b-tb6hbzegx6] {
    --cb-size: 16px;
    --cb-stroke: 1px;
    --cb-icon: 10px;
}

.app-cb--sm[b-tb6hbzegx6] {
    --cb-size: 20px;
    --cb-stroke: 1px;
    --cb-icon: 12px;
}

.app-cb--md[b-tb6hbzegx6] {
    --cb-size: 24px;
    --cb-stroke: 1.5px;
    --cb-icon: 14px;
}

.app-cb--lg[b-tb6hbzegx6] {
    --cb-size: 28px;
    --cb-stroke: 1.5px;
    --cb-icon: 17px;
}

.app-cb--xl[b-tb6hbzegx6] {
    --cb-size: 32px;
    --cb-stroke: 1.5px;
    --cb-icon: 19px;
}

/* ── Cores ──────────────────────────────────────────────────── */
/* default e neutral compartilham o disabled genérico color/button/disabled/*;
   primary, secondary e success têm o trio -disabled-* próprio. */

.app-cb--default[b-tb6hbzegx6] {
    --cb-border: var(--color-button-default-border);
    --cb-checked-surface: var(--color-button-default-surface);
    --cb-fg: var(--color-button-default-text);
    --cb-disabled-border: var(--color-button-disabled-border);
    --cb-disabled-surface: var(--color-button-disabled-surface);
    --cb-disabled-icon: var(--color-button-disabled-text);
}

.app-cb--neutral[b-tb6hbzegx6] {
    --cb-border: var(--color-button-neutral-border);
    --cb-checked-surface: var(--color-button-neutral-surface);
    --cb-fg: var(--color-button-neutral-text);
    --cb-disabled-border: var(--color-button-disabled-border);
    --cb-disabled-surface: var(--color-button-disabled-surface);
    --cb-disabled-icon: var(--color-button-disabled-text);
}

.app-cb--primary[b-tb6hbzegx6] {
    --cb-border: var(--color-button-primary-border);
    --cb-checked-surface: var(--color-button-primary-surface);
    --cb-fg: var(--color-button-primary-text);
    --cb-disabled-border: var(--color-button-primary-disabled-border);
    --cb-disabled-surface: var(--color-button-primary-disabled-surface);
    --cb-disabled-icon: var(--color-button-primary-disabled-icon);
}

.app-cb--secondary[b-tb6hbzegx6] {
    --cb-border: var(--color-button-secondary-border);
    --cb-checked-surface: var(--color-button-secondary-surface);
    --cb-fg: var(--color-button-secondary-text);
    --cb-disabled-border: var(--color-button-secondary-disabled-border);
    --cb-disabled-surface: var(--color-button-secondary-disabled-surface);
    --cb-disabled-icon: var(--color-button-secondary-disabled-icon);
}

.app-cb--success[b-tb6hbzegx6] {
    --cb-border: var(--color-button-success-border);
    --cb-checked-surface: var(--color-button-success-surface);
    --cb-fg: var(--color-button-success-text);
    --cb-disabled-border: var(--color-button-success-disabled-border);
    --cb-disabled-surface: var(--color-button-success-disabled-surface);
    --cb-disabled-icon: var(--color-button-success-disabled-icon);
}
/* /Components/BookDetailPopover.razor.rz.scp.css */
/* Especifico do popover de agendamento — Design System BF, no 1507:30467
   (variantes multi-services / min-services).

   A moldura, o cabecalho, as linhas (.apc-row*), o rodape e os botoes vem de
   AgendaPopoverCard.razor.css: sao o mesmo componente do design system, tambem
   usado pelo popover de bloqueio. Aqui ficam so a lista de itens, os totais e
   o passo de conclusao. */

.bdp-muted[b-krugevbhrn] {
    color: var(--color-text-tertiary);
}

/* ── Lista de servicos e produtos ──
   O Figma limita a lista a 108px com um esmaecimento branco na base, sinalizando
   que ha mais itens abaixo. Aqui ela rola de verdade; a mascara e o mesmo
   `inset` do spec, num overlay para nao capturar cliques. */
.bdp-items-wrap[b-krugevbhrn] {
    position: relative;
}

.bdp-items[b-krugevbhrn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 108px;
    overflow-y: auto;
}

.bdp-items-fade[b-krugevbhrn] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -8px 8px 0 color-mix(in srgb, var(--color-surface-default) 90%, transparent);
}

.bdp-item[b-krugevbhrn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    background: var(--color-surface-highlighted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-primary);
}

/* Largura fixa (nao max-width): e ela que alinha o contador e o preco numa
   coluna, como na lista da Programacao. */
.bdp-item-name[b-krugevbhrn] {
    flex: 0 0 151px;
    width: 151px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bdp-item-qty[b-krugevbhrn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 3px;
    border-radius: 16px;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.bdp-item-price[b-krugevbhrn] {
    margin-left: auto;
    white-space: nowrap;
}

/* ── Totais ──
   BookTotalsSummary tambem serve ao formulario de agendamento, entao a escala
   tipografica do popover e aplicada aqui em vez de no componente. */
.bdp-totals[b-krugevbhrn] {
    border-top: 1px solid var(--color-border-default);
}

.bdp-totals[b-krugevbhrn]  .bts-summary {
    gap: 4px;
    padding: 4px 0 0;
}

.bdp-totals[b-krugevbhrn]  .bts-row {
    font-size: 13px;
    line-height: 1.4;
}

.bdp-totals[b-krugevbhrn]  .bts-row--total {
    font-size: 15px;
    font-weight: 700;
}

/* ── Anotacao ── */
.bdp-note[b-krugevbhrn] {
    display: flex;
    gap: 8px;
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ── Passo de conclusao ── */
.bdp-section-label[b-krugevbhrn] {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
}

.bdp-discount-edit[b-krugevbhrn] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.bdp-discount-edit[b-krugevbhrn]  .form-group {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.bdp-discount-action[b-krugevbhrn] {
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-default);
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bdp-discount-action--save[b-krugevbhrn] {
    border-color: transparent;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
}

.bdp-discount-action:disabled[b-krugevbhrn] {
    opacity: 0.55;
    cursor: default;
}

.bdp-discount-btn[b-krugevbhrn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-brand-active);
    font-size: 0.8rem;
    padding: 4px 0;
    margin-top: 0.25rem;
}

.bdp-discount-btn .material-symbols-outlined[b-krugevbhrn] {
    font-size: 16px;
}
/* /Components/CurrencyInput.razor.rz.scp.css */
.field-hint[b-1qud67m67x] {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin-top: 3px;
}
/* /Components/CustomerHistoryModal.razor.rz.scp.css */
/* Overlay */
.chm-overlay[b-dpqalsr42j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* Dialog card */
.chm-dialog[b-dpqalsr42j] {
    background: var(--color-surface-default);
    border-radius: 4px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding-bottom: 10px;
}

/* Header */
.chm-header[b-dpqalsr42j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-default);
    flex-shrink: 0;
}

.chm-title[b-dpqalsr42j] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chm-close[b-dpqalsr42j] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chm-close:hover[b-dpqalsr42j] {
    color: var(--color-text-primary);
}

/* Scrollable body */
.chm-body[b-dpqalsr42j] {
    overflow-y: auto;
    flex: 1;
    padding: 0;
}

/* Loading / empty states */
.chm-state[b-dpqalsr42j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.chm-empty-icon[b-dpqalsr42j] {
    font-size: 2.5rem;
    color: #d1d5db;
}

/* Spinner */
.chm-spinner[b-dpqalsr42j] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: chm-spin-b-dpqalsr42j 0.7s linear infinite;
}

@keyframes chm-spin-b-dpqalsr42j {
    to { transform: rotate(360deg); }
}

/* Table */
.chm-table[b-dpqalsr42j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.chm-table thead th[b-dpqalsr42j] {
    position: sticky;
    top: 0;
    background: var(--color-bg-page);
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border-default);
}

.chm-table tbody tr[b-dpqalsr42j] {
    border-bottom: 1px solid var(--color-border-subtle);
}

.chm-table tbody tr:last-child[b-dpqalsr42j] {
    border-bottom: none;
}

.chm-table tbody tr:hover[b-dpqalsr42j] {
    background: var(--color-bg-page);
}

.chm-table td[b-dpqalsr42j] {
    padding: 0.65rem 1rem;
    color: var(--color-text-primary);
    vertical-align: top;
}

.chm-date[b-dpqalsr42j] {
    white-space: nowrap;
    color: var(--color-text-primary);
    font-weight: 500;
}

.chm-total[b-dpqalsr42j] {
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Desktop shows services/products as separate columns; items col hidden */
.chm-col-items[b-dpqalsr42j] {
    display: none;
}

/* Status badges */
.chm-badge[b-dpqalsr42j] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.chm-badge--scheduled[b-dpqalsr42j] {
    background: var(--color-feedback-info-subtle);
    color: var(--color-feedback-info);
}

.chm-badge--confirmed[b-dpqalsr42j] {
    background: var(--color-feedback-warning-subtle);
    color: var(--color-feedback-warning-text);
}

.chm-badge--inprogress[b-dpqalsr42j] {
    background: var(--color-brand-primary-disabled);
    color: var(--color-brand-primary-active);
}

.chm-badge--completed[b-dpqalsr42j] {
    background: var(--color-feedback-success-subtle);
    color: var(--color-feedback-success);
}

.chm-badge--cancelled[b-dpqalsr42j] {
    background: var(--color-feedback-danger-subtle);
    color: var(--color-feedback-danger);
}

/* Tablet responsive (≤ 1024px) */
@media (max-width: 1024px) {
    .chm-dialog[b-dpqalsr42j] {
        max-width: calc(100% - 2rem);
        max-height: 85vh;
    }

    .chm-col-services[b-dpqalsr42j],
    .chm-col-products[b-dpqalsr42j] {
        display: none;
    }

    .chm-col-items[b-dpqalsr42j] {
        display: table-cell;
    }

    .chm-table thead th[b-dpqalsr42j],
    .chm-table td[b-dpqalsr42j] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .chm-header[b-dpqalsr42j] {
        padding: 1rem;
    }
}

/* Items column — stacked services + products */
.chm-col-items[b-dpqalsr42j] {
    max-width: 200px;
}

.chm-col-items span[b-dpqalsr42j] {
    display: block;
    line-height: 1.4;
}

.chm-items-sep[b-dpqalsr42j] {
    display: block;
    height: 4px;
}

.chm-items-products[b-dpqalsr42j] {
    color: var(--color-text-secondary);
}
/* /Components/DataTable.razor.rz.scp.css */
.dt-page-size[b-f4gmrjiq6w] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    padding: 0 10px;
}

.dt-backdrop[b-f4gmrjiq6w] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dt-page-size-select-wrap[b-f4gmrjiq6w] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 4px 6px 4px 12px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.dt-page-size-value[b-f4gmrjiq6w] {
    line-height: 1;
}

.dt-page-size-chevron[b-f4gmrjiq6w] {
    font-size: 18px;
    color: var(--color-text-secondary);
    transition: transform 0.15s;
    line-height: 1;
}

.dt-page-size-select-wrap.open .dt-page-size-chevron[b-f4gmrjiq6w] {
    transform: rotate(180deg);
}

.dt-page-size-options[b-f4gmrjiq6w] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 100;
}

.dt-page-size-option[b-f4gmrjiq6w] {
    padding: 7px 16px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.1s;
}

.dt-page-size-option:hover:not(.selected)[b-f4gmrjiq6w] {
    background: var(--color-surface-subtle);
}

.dt-page-size-option.selected[b-f4gmrjiq6w] {
    background: var(--color-button-primary-bg);
    color: var(--color-text-on-brand);
    font-weight: 600;
}

.skeleton-row-inline[b-f4gmrjiq6w] {
    height: 20px;
    background: linear-gradient(90deg, #f0f1ea 25%, #e8e9e2 50%, #f0f1ea 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 2px;
}

.table-scroll-wrapper[b-f4gmrjiq6w] {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-scroll-wrapper[b-f4gmrjiq6w]::-webkit-scrollbar {
    display: none;
}
/* /Components/DateFilter.razor.rz.scp.css */
.df-backdrop[b-woer2w60ge] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.df-wrapper[b-woer2w60ge] {
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* Trigger button */
.df-trigger[b-woer2w60ge] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
}

    .df-trigger:hover[b-woer2w60ge] { border-color: var(--color-border-brand); }

.df-trigger--open[b-woer2w60ge] {
    border-color: var(--color-border-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-brand) 15%, transparent);
}

.df-trigger-icon[b-woer2w60ge] { font-size: 16px; color: var(--color-text-secondary); }
.df-trigger-label[b-woer2w60ge] { font-size: 0.875rem; color: var(--color-text-primary); }

.df-trigger-chevron[b-woer2w60ge] {
    font-size: 16px;
    color: var(--color-text-secondary);
    transition: transform 0.15s;
}

.df-trigger--open .df-trigger-chevron[b-woer2w60ge] { transform: rotate(180deg); }

/* Dropdown panel */
.df-panel[b-woer2w60ge] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 272px;
    z-index: 100;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    padding: 4px 0;
}

.df-panel--left[b-woer2w60ge] {
    right: auto;
    left: 0;
}

/* Preset items */
.df-item[b-woer2w60ge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

    .df-item:hover[b-woer2w60ge] { background: var(--color-bg-page); }

.df-item--active[b-woer2w60ge] { color: var(--color-brand-active); font-weight: 500; }

.df-check[b-woer2w60ge] { font-size: 16px; color: var(--color-brand-active); }

/* Divider */
.df-divider[b-woer2w60ge] {
    height: 1px;
    background: var(--color-border-default);
    margin: 4px 0;
}

/* Custom range section */
.df-custom[b-woer2w60ge] {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.df-custom-label[b-woer2w60ge] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.df-custom-pickers[b-woer2w60ge] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.df-custom-field[b-woer2w60ge] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.df-custom-field-label[b-woer2w60ge] {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* /Components/DatePicker.razor.rz.scp.css */
.dp-wrapper[b-n3cptk78br] {
    width: 100%;
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* ── Trigger ── */
.dp-trigger[b-n3cptk78br] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 10px 0 12px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-input-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .dp-trigger:hover:not(:disabled)[b-n3cptk78br] {
        border-color: var(--color-brand-secondary);
    }

.dp-trigger--disabled[b-n3cptk78br],
.dp-trigger:disabled[b-n3cptk78br] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-input-bg-disabled);
}

.dp-trigger--open[b-n3cptk78br] {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-input-border-focus) 20%, transparent);
}

.dp-trigger--error[b-n3cptk78br] {
    border-color: var(--color-input-border-error);
}

.dp-icon[b-n3cptk78br] {
    font-size: 16px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.dp-label[b-n3cptk78br] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-placeholder[b-n3cptk78br] {
    color: var(--color-input-placeholder);
}

/* ── Backdrop (closes the panel on outside click) ── */
.dp-backdrop[b-n3cptk78br] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

/* ── Calendar panel ── */
.dp-panel[b-n3cptk78br] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    padding: 10px 10px 12px;
    box-sizing: border-box;
}

/* ── Month header ── */
.dp-header[b-n3cptk78br] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
}

.dp-month-label[b-n3cptk78br] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: capitalize;
}

.dp-nav-btn[b-n3cptk78br] {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}

    .dp-nav-btn:hover[b-n3cptk78br] {
        background: var(--color-bg-page);
        color: var(--color-brand-active);
    }

/* ── Calendar grid ── */
.dp-grid[b-n3cptk78br] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-dow[b-n3cptk78br] {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dp-day[b-n3cptk78br] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

    .dp-day:hover:not(.dp-day--selected)[b-n3cptk78br] {
        background: var(--color-bg-page);
    }

.dp-day--other[b-n3cptk78br] {
    color: var(--color-text-tertiary);
}

.dp-day--selected[b-n3cptk78br] {
    background: var(--color-brand-secondary);
    color: #fff;
    font-weight: 600;
}

    .dp-day--selected:hover[b-n3cptk78br] {
        background: var(--color-brand-secondary);
    }

.dp-day--today[b-n3cptk78br] {
    border: 1.5px solid var(--color-brand-secondary);
    color: var(--color-brand-active);
    font-weight: 600;
}

.dp-day--closed[b-n3cptk78br] {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.45;
}

    .dp-day--closed:hover[b-n3cptk78br] {
        background: none;
    }

/* today + closed: keep today ring but mute it */
.dp-day--today.dp-day--closed[b-n3cptk78br] {
    border-color: #d1d5db;
    color: #d1d5db;
}
/* /Components/EmployeesManager.razor.rz.scp.css */
.employee-access-badge[b-y7lsn9qxmm] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.employee-access-badge .material-symbols-outlined[b-y7lsn9qxmm] {
    font-size: 13px;
}

.employee-access-section[b-y7lsn9qxmm] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: var(--border-1) solid var(--color-border-subtle);
}

.employee-access-title[b-y7lsn9qxmm] {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.employee-access-hint[b-y7lsn9qxmm] {
    margin: 4px 0 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
}
/* /Components/Forms/AgendaBookForm.razor.rz.scp.css */

/* ── Read-only lock notice ── */
.abf-lock-notice[b-uiqhxlxom7] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-feedback-warning-subtle);
    border: 1px solid var(--color-feedback-warning);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-feedback-warning-text);
}

    .abf-lock-notice .material-symbols-outlined[b-uiqhxlxom7] {
        font-size: 18px;
        flex-shrink: 0;
    }

/* ── Overlay that makes the entire form non-interactive ── */
.abf-form-overlay[b-uiqhxlxom7] {
    pointer-events: none;
    opacity: 0.6;
    user-select: none;
}

.abf-datetime-stack[b-uiqhxlxom7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Multi-select option rows ── */
.abf-multi-option[b-uiqhxlxom7] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.1s;
    box-sizing: border-box;
}

    .abf-multi-option:hover[b-uiqhxlxom7] {
        background: var(--color-bg-page);
    }

.abf-multi-option--active[b-uiqhxlxom7] {
    background: var(--color-bg-page);
}

    .abf-multi-option--active:hover[b-uiqhxlxom7] {
        background: var(--color-bg-page);
    }

.abf-multi-check[b-uiqhxlxom7] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-brand-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.abf-multi-name[b-uiqhxlxom7] {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abf-multi-price[b-uiqhxlxom7] {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* ── Read-only services list (shown instead of the dropdown when the booking is locked) ── */
.abf-svc-readonly-list[b-uiqhxlxom7] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

    .abf-svc-readonly-list .abf-multi-option[b-uiqhxlxom7] {
        cursor: default;
    }

    .abf-svc-readonly-list .abf-multi-option:hover[b-uiqhxlxom7] {
        background: none;
    }

    .abf-svc-readonly-list .abf-multi-option:not(:last-child)[b-uiqhxlxom7] {
        border-bottom: 1px solid var(--color-input-border);
    }

.abf-svc-readonly-empty[b-uiqhxlxom7] {
    display: block;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Contador dentro do trigger — no 1532:25695: pilula da marca, nao verde. */
.abf-multi-badge[b-uiqhxlxom7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Observacao — caixa de 96px com o contador abaixo, a direita (no 1532:25849). */
.abf-note-group[b-uiqhxlxom7] {
    position: relative;
}

.abf-note[b-uiqhxlxom7] {
    height: 96px;
    resize: vertical;
}

.abf-note-counter[b-uiqhxlxom7] {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ── "+ Criar novo cliente" footer ── */
.abf-cust-footer[b-uiqhxlxom7] {
    position: sticky;
    bottom: 0;
    background: rgba(249, 250, 243, 0.98);
    border-top: 1px solid var(--color-border-default);
    padding: 8px 16px 10px;
    display: flex;
    justify-content: flex-end;
}

.abf-cust-create-btn[b-uiqhxlxom7] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-brand-active);
    color: var(--color-brand-active);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 0 0 2px;
    line-height: 1.4;
}

.abf-cust-create-btn:hover[b-uiqhxlxom7] {
    opacity: 0.75;
}

.abf-cust-create-btn .material-symbols-outlined[b-uiqhxlxom7] {
    font-size: 18px;
}

/* ── New customer inline card ── */
.abf-new-cust-badge[b-uiqhxlxom7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-active);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 3px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.abf-new-cust-card[b-uiqhxlxom7] {
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    overflow: hidden;
}

.abf-new-cust-card--error[b-uiqhxlxom7] {
    border-color: var(--color-input-border-error);
}

.abf-new-cust-card-header[b-uiqhxlxom7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-default);
}

.abf-new-cust-card-label[b-uiqhxlxom7] {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.abf-new-cust-back-btn[b-uiqhxlxom7] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 4px;
    line-height: 1;
}

    .abf-new-cust-back-btn:hover[b-uiqhxlxom7] {
        color: var(--color-text-primary);
    }

    .abf-new-cust-back-btn .material-symbols-outlined[b-uiqhxlxom7] {
        font-size: 16px;
    }

.abf-new-cust-name-row[b-uiqhxlxom7] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--color-border-default);
    box-sizing: border-box;
}

.abf-new-cust-name-input[b-uiqhxlxom7] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    min-width: 0;
}

    .abf-new-cust-name-input[b-uiqhxlxom7]::placeholder {
        color: var(--color-input-placeholder);
    }

.abf-new-cust-phone[b-uiqhxlxom7] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    padding: 0 10px 0 14px;
    box-sizing: border-box;
}

.abf-new-cust-phone-input[b-uiqhxlxom7] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    min-width: 0;
}

    .abf-new-cust-phone-input[b-uiqhxlxom7]::placeholder {
        color: var(--color-input-placeholder);
    }

.abf-subtotal[b-uiqhxlxom7] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.abf-subtotal-row[b-uiqhxlxom7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.abf-subtotal-total[b-uiqhxlxom7] {
    margin: 0.5rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-subtle);
    font-weight: 700;
    font-size: 1rem;
}

.abf-dep-flag-row[b-uiqhxlxom7] {
    display: flex;
    gap: 8px;
}
/* /Components/Forms/EmployeeAvailabilityForm.razor.rz.scp.css */
/* ── Availability Shift Cards (mirrors TenantMyStore's Horário de Funcionamento) ── */

.availability-days[b-1f568x2ywa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.availability-day-card[b-1f568x2ywa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 12px 16px;
}

.availability-day-card--closed[b-1f568x2ywa] {
    background: var(--color-surface-raised);
}

.availability-day-header[b-1f568x2ywa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-name[b-1f568x2ywa] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.availability-day-card--closed .day-name[b-1f568x2ywa] {
    color: var(--color-text-tertiary);
}

.availability-closed-pill[b-1f568x2ywa] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 999px;
    padding: 2px 10px;
}

.availability-shift-row[b-1f568x2ywa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.availability-shift-sep[b-1f568x2ywa] {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
}

.avail-time-cell[b-1f568x2ywa] {
    min-width: 0;
    flex: 1;
}

/* TimePicker's dropdown wheel needs ~200px (two 64px wheels + colon + padding),
   but this narrow SlidePanel shrinks each .avail-time-cell well below that —
   let the panel size to its content instead of matching the shrunk wrapper. */
.avail-time-cell[b-1f568x2ywa]  .tp-panel {
    width: max-content;
    min-width: 100%;
}

.btn-remove-shift[b-1f568x2ywa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-feedback-danger);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-remove-shift:hover[b-1f568x2ywa] {
    background: var(--color-feedback-danger-subtle);
    border-color: var(--color-input-border-error);
}

.btn-remove-shift .material-symbols-outlined[b-1f568x2ywa] {
    font-size: 18px;
}

.btn-add-shift[b-1f568x2ywa] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px dashed var(--color-border-default);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 10px;
}

.btn-add-shift:hover[b-1f568x2ywa] {
    background: var(--color-surface-raised);
}

.btn-add-shift:disabled[b-1f568x2ywa] {
    opacity: 0.6;
    cursor: default;
}

.avail-error[b-1f568x2ywa] {
    font-size: 0.875rem;
    color: var(--color-feedback-danger-text);
    background: var(--color-feedback-danger-subtle);
    border: 1px solid var(--color-input-border-error);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 10px;
}

.avail-skeleton-group[b-1f568x2ywa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avail-skeleton-row[b-1f568x2ywa] {
    height: 44px;
    border-radius: 8px;
    width: 100%;
}
/* /Components/Forms/ProductPickerList.razor.rz.scp.css */
/* No own scroll/max-height here on purpose: nesting a second scrollable region inside
   .sidebar-body makes touch-scroll gesture disambiguation unreliable (the outer panel
   body and this list fight over the drag, and the list rarely wins) and its scrollbar
   has no gutter, so it clips the row content. .sidebar-body is the single scroll owner. */
.ppl-list[b-tikxjv2dgv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppl-row[b-tikxjv2dgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--color-table-row-default);
    border-radius: var(--radius-md);
}

.ppl-row-main[b-tikxjv2dgv] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.ppl-name[b-tikxjv2dgv] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-input-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-stepper[b-tikxjv2dgv] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ppl-step-btn[b-tikxjv2dgv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--color-input-bg);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-md);
    color: var(--color-input-text);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.ppl-step-btn:hover:not(:disabled)[b-tikxjv2dgv] {
    background: var(--color-brand-primary);
}

.ppl-step-btn:disabled[b-tikxjv2dgv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ppl-step-btn .material-symbols-outlined[b-tikxjv2dgv] {
    font-size: 16px;
}

.ppl-qty[b-tikxjv2dgv] {
    width: 50px;
    height: 36px;
    text-align: center;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ppl-qty[b-tikxjv2dgv]::-webkit-outer-spin-button,
.ppl-qty[b-tikxjv2dgv]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ppl-qty:focus[b-tikxjv2dgv] {
    outline: none;
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-input-border-focus) 20%, transparent);
}

.ppl-qty-readonly[b-tikxjv2dgv] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.ppl-price[b-tikxjv2dgv] {
    min-width: 96px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-input-text);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.ppl-delete[b-tikxjv2dgv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-feedback-danger);
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.15s;
}

.ppl-delete:hover[b-tikxjv2dgv] {
    background: var(--color-feedback-danger-subtle);
}

.ppl-delete .material-symbols-outlined[b-tikxjv2dgv] {
    font-size: 20px;
}

.ppl-empty[b-tikxjv2dgv] {
    color: var(--color-input-placeholder);
    font-size: 0.75rem;
    margin: 4px 0 0;
    padding: 0 12px;
}

.ppl-out-of-stock[b-tikxjv2dgv] {
    color: var(--color-feedback-danger);
    font-weight: 500;
}

.ppl-stock-hint[b-tikxjv2dgv] {
    display: block;
    color: var(--color-feedback-warning-text);
    font-size: 0.75rem;
    margin: -2px 0 2px;
    padding: 0 16px;
}
/* /Components/Forms/SaleForm.razor.rz.scp.css */
/* SaleForm relies entirely on shared/global styles (form-group, abf-sel-*, form-control-readonly)
   and the scoped styles of ProductPickerList. No local styles needed here. */
/* /Components/LoadRetry.razor.rz.scp.css */
.load-retry[b-xbsecwty37] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    min-height: 240px;
    text-align: center;
}

.load-retry__icon[b-xbsecwty37] {
    font-size: 48px;
    color: var(--color-text-muted);
}

.load-retry__text[b-xbsecwty37] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
}

.load-retry__btn[b-xbsecwty37] {
    margin-top: 4px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.load-retry__btn:hover:not(:disabled)[b-xbsecwty37] {
    background: var(--color-brand-primary-hover);
}

.load-retry__btn:disabled[b-xbsecwty37] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/MessageBadge.razor.rz.scp.css */
/* Design System BF, no 1502:24347 — pilula de 24px, sem contorno.

   O no traz DUAS camadas de fundo, mas so uma pinta: em `background-image` a
   PRIMEIRA camada fica por cima, e o spec lista `platform/whatsapp-subtle`
   (#E9FAEF, opaca) antes de `button/primary/surface-soft` (a marca a 15%) —
   ou seja, a marca fica coberta e e resto do componente-base do botao.
   Amostrar o render do Figma da #E9FAEF cravado. Empilhar a marca por cima
   tinge a pilula com a cor do tenant: no maracuja ela sai alaranjada. */
.msg-badge[b-sujkgrefkh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    padding: 0 12px 0 16px;
    border: none;
    border-radius: 9999px;
    background: var(--color-platform-whatsapp-subtle);
    color: var(--color-feedback-success);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

/* Hover nao esta no spec; escurece a propria mint em direcao ao verde do
   rotulo, sem puxar a cor do tenant para dentro do botao. */
.msg-badge:hover:not(.msg-badge--open)[b-sujkgrefkh] {
    background: color-mix(in srgb, var(--color-platform-whatsapp-subtle) 88%, var(--color-feedback-success));
}

/* Estado aberto nao existe no Figma; mantido solido para o botao nao sumir
   atras do dropdown. */
.msg-badge--open[b-sujkgrefkh] {
    background: var(--color-feedback-success);
    color: var(--color-text-inverse);
}

/* Caixa de 14px com o glifo de 12.6px centrado — o spec desenha o icone com
   5% de recuo dentro do quadro, entao as duas medidas sao explicitas. */
.msg-badge__icon[b-sujkgrefkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.msg-badge__icon svg[b-sujkgrefkh] {
    display: block;
    width: 12.6px;
    height: 12.6px;
    fill: currentColor;
}

.msg-badge__label[b-sujkgrefkh] {
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    flex-shrink: 0;
}

.msg-badge__chevron[b-sujkgrefkh] {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.msg-badge--open .msg-badge__chevron[b-sujkgrefkh] {
    transform: rotate(180deg);
}
/* /Components/MessageDropdownButton.razor.rz.scp.css */
.msg-btn-wrapper[b-l2qxeekcy7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}


.msg-overlay[b-l2qxeekcy7] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: transparent;
}

.msg-dropdown[b-l2qxeekcy7] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    max-width: 260px;
    overflow: hidden;
}

.msg-dropdown-item[b-l2qxeekcy7] {
    display: block;
    width: 100%;
    padding: 9px 14px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-dropdown-item:last-child[b-l2qxeekcy7] {
    border-bottom: none;
}

.msg-dropdown-item:hover:not(:disabled)[b-l2qxeekcy7] {
    background: var(--color-bg-page);
}

.msg-dropdown-item:disabled[b-l2qxeekcy7] {
    opacity: 0.5;
    cursor: default;
}

.msg-dropdown-state[b-l2qxeekcy7] {
    padding: 10px 14px;
    font-size: 13px;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msg-dropdown-create-link[b-l2qxeekcy7] {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--color-brand-active);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
}
/* /Components/MiniCalendar.razor.rz.scp.css */
.mini-cal[b-424lc3ikto] {
    padding: 0 16px 16px;
}

.mini-cal-header[b-424lc3ikto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mini-cal-month-label[b-424lc3ikto] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-transform: capitalize;
    text-align: center;
    flex: 1;
}

.mini-cal-nav-btn[b-424lc3ikto] {
    width: 24px;
    height: 24px;
    background: var(--color-surface-raised);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.mini-cal-nav-btn:hover[b-424lc3ikto] {
    background: var(--color-border-default);
}

.mini-cal-grid[b-424lc3ikto] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 4px 0 0;
}

.mini-cal-dow[b-424lc3ikto] {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 4px 0;
    background: var(--color-bg-page);
}

.mini-cal-dow:first-child[b-424lc3ikto] { border-radius: 6px 0 0 6px; }
.mini-cal-dow:nth-child(7)[b-424lc3ikto] { border-radius: 0 6px 6px 0; }

.mini-cal-day[b-424lc3ikto] {
    width: 28px;
    height: 28px;
    margin: 1px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.mini-cal-day:hover[b-424lc3ikto] {
    background: var(--color-border-default);
}

.mini-cal-day--other[b-424lc3ikto] {
    color: var(--color-text-tertiary);
}

.mini-cal-day--today[b-424lc3ikto] {
    color: var(--color-brand-active);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--color-brand-primary);
}

.mini-cal-day--selected[b-424lc3ikto] {
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-weight: 700;
}
/* /Components/ModalShell.razor.rz.scp.css */
.ms-overlay[b-bwbnencwxr] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.4);
}

.ms-dialog[b-bwbnencwxr] {
    background: var(--color-surface-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.15));
    pointer-events: auto;
}

.ms-header[b-bwbnencwxr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.ms-header-text[b-bwbnencwxr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ms-badge[b-bwbnencwxr] {
    align-self: flex-start;
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-2);
}

.ms-title[b-bwbnencwxr] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.ms-close[b-bwbnencwxr] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 2px;
    line-height: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.ms-close:hover[b-bwbnencwxr] {
    color: var(--color-text-primary);
}

.ms-close .material-symbols-outlined[b-bwbnencwxr] {
    font-size: var(--icon-20);
}

.ms-body[b-bwbnencwxr] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.ms-footer[b-bwbnencwxr] {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-6);
}
/* /Components/NotificationDropdown.razor.rz.scp.css */
.nd-overlay[b-86sbeb1ni7] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.nd-panel[b-86sbeb1ni7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nd-header[b-86sbeb1ni7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.nd-title[b-86sbeb1ni7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.nd-mark-btn[b-86sbeb1ni7] {
    font-size: 11px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.nd-mark-btn:hover[b-86sbeb1ni7] { color: var(--color-text-primary); }
.nd-mark-btn:disabled[b-86sbeb1ni7] { opacity: 0.5; cursor: default; }

.nd-loading[b-86sbeb1ni7], .nd-empty[b-86sbeb1ni7] {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.nd-empty-icon[b-86sbeb1ni7] { font-size: 32px; color: #d1d5db; }

.nd-list[b-86sbeb1ni7] { overflow-y: auto; max-height: 320px; }

.nd-item[b-86sbeb1ni7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--color-border-subtle);
}

.nd-item:hover[b-86sbeb1ni7] { background: var(--color-bg-page); }
.nd-item--unread[b-86sbeb1ni7] { background: rgba(219,230,76,0.06); }

.nd-dot[b-86sbeb1ni7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-active);
    margin-top: 5px;
    flex-shrink: 0;
}

.nd-dot--read[b-86sbeb1ni7] { background: transparent; }

.nd-item-body[b-86sbeb1ni7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.nd-item-title[b-86sbeb1ni7] {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-item--unread .nd-item-title[b-86sbeb1ni7] { font-weight: 600; }

.nd-item-body-text[b-86sbeb1ni7] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.nd-item-time[b-86sbeb1ni7] {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.nd-footer[b-86sbeb1ni7] {
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-subtle);
    text-align: center;
}

.nd-footer a[b-86sbeb1ni7] {
    font-size: 12px;
    color: var(--color-brand-active);
    text-decoration: none;
    font-weight: 500;
}

.nd-footer a:hover[b-86sbeb1ni7] { text-decoration: underline; }
/* /Components/PublicBookingFlow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   PublicBookingFlow — public, mobile-first self-booking wizard
   embedded in TenantLandingPage. Tokens-only (wwwroot/css/tokens.css).
   NOTE: @keyframes are scoped by Blazor CSS isolation, so this file
   defines its own spinner keyframe (pbf-spin) rather than relying on
   a global one.
   ═══════════════════════════════════════════════════════════ */

.pbf-root[b-abcnfv4spf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-top: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--color-surface-default);
    border: var(--border-1) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ── Progress ────────────────────────────────────────────────────────────── */

.pbf-progress[b-abcnfv4spf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.pbf-progress-label[b-abcnfv4spf] {
    font-size: var(--text-caption-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
}

.pbf-progress-bar[b-abcnfv4spf] {
    height: var(--spacing-1);
    border-radius: var(--radius-full);
    background: var(--color-border-subtle);
    overflow: hidden;
}

.pbf-progress-fill[b-abcnfv4spf] {
    height: 100%;
    background: var(--color-brand-primary);
    border-radius: var(--radius-full);
    transition: width 0.2s;
}

/* ── Step shell ──────────────────────────────────────────────────────────── */

.pbf-step[b-abcnfv4spf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.pbf-step-title[b-abcnfv4spf] {
    margin: 0;
    font-size: var(--text-heading-md-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

.pbf-empty[b-abcnfv4spf] {
    margin: 0;
    font-size: var(--text-body-md-size);
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--spacing-6) 0;
}

/* ── Nav footer ──────────────────────────────────────────────────────────── */

.pbf-nav[b-abcnfv4spf] {
    display: flex;
    gap: var(--spacing-3);
}

.pbf-nav-btn[b-abcnfv4spf] {
    flex: 1;
    justify-content: center;
}

/* ── Step 1: services (abf-sel-* dropdown, styled to match the shared pattern
   used by AgendaBookForm — those rules live in each consuming component's own
   scoped CSS by existing convention, so they're mirrored here too) ─────────── */

.abf-multi-option[b-abcnfv4spf] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.1s;
    box-sizing: border-box;
}

    .abf-multi-option:hover[b-abcnfv4spf] {
        background: var(--color-bg-page);
    }

.abf-multi-option--active[b-abcnfv4spf] {
    background: var(--color-bg-page);
}

    .abf-multi-option--active:hover[b-abcnfv4spf] {
        background: var(--color-bg-page);
    }

.abf-multi-check[b-abcnfv4spf] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-brand-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.abf-multi-name[b-abcnfv4spf] {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abf-multi-price[b-abcnfv4spf] {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* Count badge inside trigger */
.abf-multi-badge[b-abcnfv4spf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-brand-secondary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Step 2: professional ───────────────────────────────────────────────── */

.pbf-option-list[b-abcnfv4spf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.pbf-option-card[b-abcnfv4spf] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    min-height: var(--spacing-11);
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-1) solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface-default);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pbf-option-card--selected[b-abcnfv4spf] {
    border-color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
}

.pbf-option-radio[b-abcnfv4spf] {
    font-size: var(--icon-24);
    color: var(--color-brand-primary);
    flex-shrink: 0;
}

.pbf-option-label[b-abcnfv4spf] {
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ── Step 4: slots ───────────────────────────────────────────────────────── */

.pbf-loading[b-abcnfv4spf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-body-md-size);
}

.pbf-spinner[b-abcnfv4spf] {
    width: var(--spacing-5);
    height: var(--spacing-5);
    border: 2px solid var(--color-border-default);
    border-top-color: var(--color-brand-primary);
    border-radius: var(--radius-full);
    animation: pbf-spin-b-abcnfv4spf 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes pbf-spin-b-abcnfv4spf {
    to { transform: rotate(360deg); }
}

.pbf-slot-grid[b-abcnfv4spf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
}

.pbf-slot-btn[b-abcnfv4spf] {
    min-height: var(--spacing-11);
    padding: var(--spacing-2);
    border: var(--border-1) solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface-default);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pbf-slot-btn:hover[b-abcnfv4spf] {
    border-color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
    color: var(--color-brand-active);
}

/* DatePicker is a shared, mobile-first component that stretches to its parent's
   full width — fine on a narrow phone viewport, but the day cells (aspect-ratio: 1
   inside a 7-column grid) blow up once the parent is a wide desktop column. Cap it
   with ::deep since the picker's markup belongs to DatePicker's own CSS scope. */
@media (min-width: 768px) {
    .pbf-step[b-abcnfv4spf]  .dp-wrapper {
        max-width: 320px;
    }
}

.pbf-error[b-abcnfv4spf] {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    background: var(--color-feedback-danger-subtle);
    color: var(--color-feedback-danger-text);
    font-size: var(--text-body-sm-size);
    font-weight: var(--font-weight-medium);
}

/* ── Step 6: confirm / summary ──────────────────────────────────────────── */

.pbf-summary[b-abcnfv4spf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    border: var(--border-1) solid var(--color-border-default);
}

.pbf-summary-row[b-abcnfv4spf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: var(--border-1) solid var(--color-border-subtle);
}

.pbf-summary-row:last-child[b-abcnfv4spf] {
    border-bottom: none;
}

.pbf-summary-label[b-abcnfv4spf] {
    font-size: var(--text-body-sm-size);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.pbf-summary-value[b-abcnfv4spf] {
    font-size: var(--text-body-sm-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: right;
}

/* ── Done step ───────────────────────────────────────────────────────────── */

.pbf-step--done[b-abcnfv4spf] {
    align-items: center;
    text-align: center;
}

.pbf-done-icon[b-abcnfv4spf] {
    font-size: var(--icon-40);
    color: var(--color-feedback-success);
}
/* /Components/SlidePanel.razor.rz.scp.css */
/* /Components/StatusBadge.razor.rz.scp.css */
.status-badge[b-2db86q8quc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: var(--text-badge-size, 11px);
    font-weight: var(--text-badge-weight, 600);
    white-space: nowrap;
    line-height: 1;
}

.status-badge--scheduled[b-2db86q8quc],
.status-badge--open[b-2db86q8quc] {
    background: var(--color-badge-brand-bg);
    color: var(--color-badge-brand-text);
}

.status-badge--confirmed[b-2db86q8quc] {
    background: var(--color-badge-info-bg);
    color: var(--color-badge-info-text);
}

.status-badge--in-progress[b-2db86q8quc] {
    background: var(--color-badge-warning-bg);
    color: var(--color-badge-warning-text);
}

.status-badge--completed[b-2db86q8quc],
.status-badge--sale-completed[b-2db86q8quc],
.status-badge--active[b-2db86q8quc],
.status-badge--payment-completed[b-2db86q8quc] {
    background: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
}

.status-badge--cancelled[b-2db86q8quc],
.status-badge--inactive[b-2db86q8quc],
.status-badge--payment-refunded[b-2db86q8quc],
.status-badge--neutral[b-2db86q8quc] {
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
}

.status-badge--blocked[b-2db86q8quc],
.status-badge--payment-pending[b-2db86q8quc],
.status-badge--payment-failed[b-2db86q8quc] {
    background: var(--color-badge-danger-bg);
    color: var(--color-badge-danger-text);
}

/* Expense variants */
.status-badge--expense-paid[b-2db86q8quc] {
    background: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
}

.status-badge--expense-pending[b-2db86q8quc] {
    background: var(--color-badge-warning-bg);
    color: var(--color-badge-warning-text);
}

.status-badge--expense-overdue[b-2db86q8quc] {
    background: var(--color-badge-danger-bg);
    color: var(--color-badge-danger-text);
}

.status-badge--expense-fixed[b-2db86q8quc] {
    background: var(--color-badge-info-bg);
    color: var(--color-badge-info-text);
}

.status-badge--expense-oper[b-2db86q8quc] {
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
}

/* Promotion variants */
.status-badge--promo[b-2db86q8quc] {
    background: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
}

.status-badge--promo-scheduled[b-2db86q8quc] {
    background: var(--color-badge-neutral-bg);
    color: var(--color-badge-neutral-text);
}
/* /Components/TimePicker.razor.rz.scp.css */
.tp-wrapper[b-bfobw6zc36] {
    width: 100%;
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* ── Input row ── */
.tp-input-row[b-bfobw6zc36] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: text;
}

    .tp-input-row:hover:not(.tp-input-row--disabled)[b-bfobw6zc36] {
        border-color: var(--color-brand-secondary);
    }

    .tp-input-row:focus-within[b-bfobw6zc36] {
        border-color: var(--color-input-border-focus);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-input-border-focus) 20%, transparent);
    }

.tp-input-row--disabled[b-bfobw6zc36] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-input-bg-disabled);
}

    .tp-input-row--disabled input[b-bfobw6zc36] {
        cursor: not-allowed;
        pointer-events: none;
    }

.tp-input-row--error[b-bfobw6zc36] {
    border-color: var(--color-input-border-error);
}

.tp-icon[b-bfobw6zc36] {
    font-size: 16px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.tp-text-input[b-bfobw6zc36] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-input-text);
    min-width: 0;
}

    .tp-text-input[b-bfobw6zc36]::placeholder {
        color: var(--color-input-placeholder);
    }
/* /Components/ToggleSwitch.razor.rz.scp.css */
.ts-root[b-xyhp8l2g2a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.ts-label[b-xyhp8l2g2a] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    white-space: nowrap;
    user-select: none;
}

.ts-track[b-xyhp8l2g2a] {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 500px;
    background: var(--color-border-default);
    transition: background 0.25s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
    padding: 3px;
    display: flex;
    align-items: center;
}

.ts-track--on[b-xyhp8l2g2a] {
    background: var(--color-brand-primary-hover);
}

.ts-root:focus-visible .ts-track[b-xyhp8l2g2a] {
    outline: 1.5px solid var(--color-brand-primary);
    outline-offset: 1px;
}

.ts-thumb[b-xyhp8l2g2a] {
    position: absolute;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background: var(--color-text-secondary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1), background 0.25s cubic-bezier(.4, 0, .2, 1);
}

.ts-track--on .ts-thumb[b-xyhp8l2g2a] {
    background: var(--color-surface-default);
    transform: translateX(18px);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ei24u21spw] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-ei24u21spw] {
    flex: 1;
    background-color: #f6f7ed;
}

.sidebar[b-ei24u21spw] {
    background-color: #000;
    position: relative;
}

.content[b-ei24u21spw] {
    padding: 2rem;
}

@media (max-width: 640.98px) {
    .content[b-ei24u21spw] {
        padding: 1rem;
    }
}

@media (min-width: 641px) {
    .page[b-ei24u21spw] {
        flex-direction: row;
    }

    .sidebar[b-ei24u21spw] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        transition: width 0.25s ease;
        overflow: hidden;
    }

    .sidebar-collapsed .sidebar[b-ei24u21spw] {
        width: 68px;
    }

}
/* /Layout/NavMenu.razor.rz.scp.css */
.sidebar-container[b-pscr3g9tpo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #9ca3af;
    overflow: hidden;
}

.sidebar-header[b-pscr3g9tpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    justify-content: initial;
}

.sidebar-container.collapsed .sidebar-header[b-pscr3g9tpo] {
    justify-content: center;
    padding: 1.25rem 0.5rem;
}

.logo-link[b-pscr3g9tpo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
}

.logo-icon[b-pscr3g9tpo] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text[b-pscr3g9tpo] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name[b-pscr3g9tpo] {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.logo-subtitle[b-pscr3g9tpo] {
    font-size: 0.6rem;
    color: #6b7280;
    letter-spacing: 0.15em;
}

.navbar-toggler[b-pscr3g9tpo] {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 0.25rem 0.5rem;
    margin-left: auto;
}

.navbar-toggler-icon[b-pscr3g9tpo] {
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-section[b-pscr3g9tpo] {
    flex: 1;
    padding: 0 0.75rem;
    overflow-y: auto;
}

.sidebar-container.collapsed .nav-section[b-pscr3g9tpo] {
    padding: 0 0.4rem;
}

.nav-label-row[b-pscr3g9tpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem;
}

.nav-label[b-pscr3g9tpo] {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #9ca3af;
}

.sidebar-toggle[b-pscr3g9tpo] {
    display: none;
}

@media (min-width: 641px) {
    .sidebar-toggle[b-pscr3g9tpo] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid #444;
        color: #9ca3af;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
        flex-shrink: 0;
    }

    .sidebar-toggle:hover[b-pscr3g9tpo] {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .collapsed-toggle[b-pscr3g9tpo] {
        width: 36px;
        height: 36px;
        border: none;
        margin: 0 auto 0.15rem;
    }
}

.nav-icon[b-pscr3g9tpo] {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.sidebar-container.collapsed .nav-icon[b-pscr3g9tpo] {
    margin-right: 0;
}

[b-pscr3g9tpo] .nav-link {
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 0.15rem;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-container.collapsed[b-pscr3g9tpo]  .nav-link {
    justify-content: center;
    padding: 0.6rem;
}

[b-pscr3g9tpo] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

[b-pscr3g9tpo] .nav-link.active {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.sidebar-footer[b-pscr3g9tpo] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border-top: 1px solid #374151;
    margin-top: auto;
}

.sidebar-container.collapsed .sidebar-footer[b-pscr3g9tpo] {
    justify-content: center;
    padding: 1rem 0.5rem;
}

.user-avatar[b-pscr3g9tpo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #374151;
    color: #d1d5db;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-info[b-pscr3g9tpo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.user-name[b-pscr3g9tpo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-pscr3g9tpo] {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-btn[b-pscr3g9tpo] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.logout-btn:hover[b-pscr3g9tpo] {
    color: #dc3545;
}

@media (min-width: 641px) {
    .navbar-toggler[b-pscr3g9tpo] {
        display: none;
    }

    .collapse[b-pscr3g9tpo] {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}
/* /Layout/TenantLayout.razor.rz.scp.css */
.tenant-shell[b-cx1m6m0uje] {
    display: flex;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    /* cursor is inherited: default the whole tenant area to an arrow so plain
       text/labels don't show the text (I-beam) cursor. Interactive elements
       declare their own cursor: pointer, and real text fields restore the
       caret via the input/textarea rule in app.css. */
    cursor: default;
}

.tenant-main[b-cx1m6m0uje] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg-page);
    min-width: 0;
}

.tenant-topbar[b-cx1m6m0uje] {
    height: 56px;
    background: var(--color-surface-default);
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

.tenant-page-title[b-cx1m6m0uje] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.topbar-actions[b-cx1m6m0uje] {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.topbar-icon-btn[b-cx1m6m0uje] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-button-header-icon-default);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.topbar-icon-btn:hover[b-cx1m6m0uje] {
    background: var(--color-button-header-bg-hover);
    color: var(--color-button-header-icon-hover);
}

.topbar-icon-btn--active[b-cx1m6m0uje] {
    background: var(--color-button-header-bg-active);
    border-color: var(--color-button-header-border-active);
    color: var(--color-button-header-icon-active);
}

.topbar-icon-btn--active:hover[b-cx1m6m0uje] {
    background: var(--color-button-header-bg-active);
    color: var(--color-button-header-icon-active);
}

.topbar-badge[b-cx1m6m0uje] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: var(--color-feedback-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


.tenant-content[b-cx1m6m0uje] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Lock background scroll while a SlidePanel is open — prevents scroll chaining
   from reaching .tenant-content through the fixed overlay on touch devices */
.tenant-content:has(.sidebar-overlay)[b-cx1m6m0uje] {
    overflow: hidden;
    touch-action: none;
}

/* ── Tablet layout ── */
@media (max-width: 1024px) {
    .tenant-shell[b-cx1m6m0uje] {
        position: relative;
    }

    .tenant-shell[b-cx1m6m0uje]::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 40;
    }

    /* Show overlay when sidebar is expanded (NOT collapsed) */
    .tenant-shell:has(> .tenant-sidebar:not(.collapsed))[b-cx1m6m0uje]::before {
        opacity: 1;
        pointer-events: auto;
        /* prevent touch-scroll chaining through the overlay */
        touch-action: none;
    }

    /* Lock content scroll while nav is open — pointer-events alone doesn't stop scroll chaining */
    .tenant-shell:has(> .tenant-sidebar:not(.collapsed)) .tenant-content[b-cx1m6m0uje] {
        overflow: hidden;
        touch-action: none;
    }
}
/* /Layout/TenantNavMenu.razor.rz.scp.css */
/* ── Sidebar container ── */
.tenant-sidebar[b-cgrfjfe59y] {
    width: 232px;
    background: var(--color-bg-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100dvh;
    overflow: hidden;
    color: var(--color-text-on-sidebar);
    transition: width 0.25s ease;
}

    .tenant-sidebar.collapsed[b-cgrfjfe59y] {
        width: 64px;
    }

/* ── Header ── */
.tenant-sidebar-header[b-cgrfjfe59y] {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.tenant-header-left[b-cgrfjfe59y] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.tenant-logo-badge[b-cgrfjfe59y] {
    width: 32px;
    height: 32px;
    background: var(--color-avatar-bg-1);
    color: var(--color-text-on-brand);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-avatar-size);
    flex-shrink: 0;
}

.tenant-logo-img[b-cgrfjfe59y] {
    height: 32px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.tenant-logo-text[b-cgrfjfe59y] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tenant-app-name[b-cgrfjfe59y] {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-on-sidebar);
    line-height: 1.2;
    white-space: nowrap;
}

.tenant-shop-name[b-cgrfjfe59y] {
    font-size: 11px;
    color: var(--color-text-on-sidebar-muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Toggle button ── */
.tenant-sidebar-toggle[b-cgrfjfe59y] {
    background: var(--color-sidebar-item-hover-bg);
    border: none;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    flex-shrink: 0;
    transition: background 0.12s;
}

    .tenant-sidebar-toggle:hover[b-cgrfjfe59y] {
        background: var(--color-sidebar-item-hover-bg);
        filter: brightness(1.4);
    }

/* ── Nav body ── */
.tenant-nav-body[b-cgrfjfe59y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Targets the specific container */
    .tenant-nav-body[b-cgrfjfe59y]::-webkit-scrollbar {
        width: 6px;
    }

    /* The track (background) */
    .tenant-nav-body[b-cgrfjfe59y]::-webkit-scrollbar-track {
        background: transparent;
    }

    /* The draggable handle */
    .tenant-nav-body[b-cgrfjfe59y]::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* Subtle grey */
        border-radius: 10px;
        border: 1px solid transparent;
    }

        /* Hover effect for better UX */
        .tenant-nav-body[b-cgrfjfe59y]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

.tenant-sidebar.collapsed .tenant-nav-body[b-cgrfjfe59y] {
    align-items: center;
    padding: 16px 8px;
    gap: 16px;
}

/* ── Nav section ── */
.tenant-nav-section[b-cgrfjfe59y] {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tenant-nav-section--bottom[b-cgrfjfe59y] {
    margin-top: auto;
}

.tenant-sidebar.collapsed .tenant-nav-section[b-cgrfjfe59y] {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    gap: 8px;
}

/* O Figma mantém 16px dentro de cada seção colapsada, então seção→seção lê 32px
   (16 do gap do corpo + 16 aqui). */
.tenant-sidebar.collapsed .tenant-nav-section + .tenant-nav-section[b-cgrfjfe59y] {
    margin-top: 16px;
}

/* ── Section label ── */
.tenant-nav-section-label-wrapper[b-cgrfjfe59y] {
    /* flex column como no Figma: sem contexto inline, o strut do bloco não
       infla a caixa do label acima dos 10px do token. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0.4;
    border-bottom: 1px solid var(--color-sidebar-border);
    padding: 0 8px 4px;
    width: 100%;
    margin-bottom: 0;
}

.tenant-nav-section-label[b-cgrfjfe59y] {
    font-size: 10px;
    font-weight: 600;
    /* line-height 100% do token de tipografia — sem isso o leading herdado
       infla a caixa do label e o gap de 4px até a linha lê como 9px. */
    line-height: 1;
    color: var(--color-sidebar-section-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Nav link ── */
[b-cgrfjfe59y] .tenant-nav-link {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 8px;
    color: var(--color-text-on-sidebar-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.tenant-sidebar.collapsed[b-cgrfjfe59y]  .tenant-nav-link {
    justify-content: center;
    padding: 8px;
    width: 34px;
}

[b-cgrfjfe59y] .tenant-nav-link:hover:not(.tenant-nav-disabled):not(.active) {
    background: var(--color-sidebar-item-hover-bg);
    color: var(--color-text-on-sidebar);
    text-decoration: none;
}

[b-cgrfjfe59y] .tenant-nav-link.active {
    background: var(--color-sidebar-item-active-bg);
    color: var(--color-sidebar-item-active-text);
    text-decoration: none;
}

.tenant-nav-disabled[b-cgrfjfe59y] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Icon (Material Symbols) ── */
.tenant-nav-icon[b-cgrfjfe59y] {
    font-size: 18px !important;
    flex-shrink: 0;
    font-variation-settings: 'opsz' 20, 'wght' 400, 'FILL' 0, 'GRAD' 0;
    line-height: 1;
}

/* ── Footer ── */
.tenant-sidebar-footer[b-cgrfjfe59y] {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Figma aninha uma linha de 48px com 8px de recuo dentro de um container 8px/16px;
       achatado aqui: 8+48+8 = 64 de altura, 16+8 = 24 de recuo à esquerda. */
    padding: 8px 16px 8px 24px;
    min-height: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.tenant-sidebar-footer--collapsed[b-cgrfjfe59y] {
    justify-content: center;
    padding: 8px;
    min-height: 0;
}

/* ── Tablet layout ── */
@media (max-width: 1024px) {
    .tenant-sidebar[b-cgrfjfe59y] {
        width: 64px;
        position: static;
        height: auto;
        overflow: visible;
        transition: none;
    }

    .tenant-sidebar.collapsed[b-cgrfjfe59y] {
        width: 64px;
        position: static;
        height: auto;
    }

    /* Expanded state: full-width overlay (no content shift) */
    .tenant-sidebar:not(.collapsed)[b-cgrfjfe59y] {
        position: fixed;
        left: 0;
        top: 0;
        width: 232px;
        height: 100dvh;
        z-index: 50;
    }
}

.tenant-user-avatar[b-cgrfjfe59y] {
    width: 32px;
    height: 32px;
    background: var(--color-avatar-bg-1);
    color: var(--color-text-on-brand);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.tenant-user-avatar--btn[b-cgrfjfe59y] {
    border: none;
    padding: 0;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tenant-user-avatar--btn:hover[b-cgrfjfe59y] {
    filter: brightness(1.1);
}

.tenant-user-info[b-cgrfjfe59y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tenant-user-name[b-cgrfjfe59y] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-on-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-user-role[b-cgrfjfe59y] {
    font-size: 11px;
    color: var(--color-text-on-sidebar-muted);
    opacity: 0.6;
    white-space: nowrap;
}

.tenant-logout-btn[b-cgrfjfe59y] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.12s;
    flex-shrink: 0;
}

    .tenant-logout-btn:hover[b-cgrfjfe59y] {
        color: var(--color-feedback-danger);
    }
/* /Pages/Tenant/TenantAgenda.razor.rz.scp.css */
/* ── Root layout ──
   Grade de 2×2: a toolbar ocupa só a coluna do calendário (Figma nó 1402:26774),
   e a sidebar começa na linha de baixo, alinhada ao topo do card da grade.
   Grid em vez de wrappers aninhados: os três blocos ficam irmãos no markup e o
   alinhamento entre toolbar e calendário passa a ser estrutural. */
.agenda-root[b-hung4satr6] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* ── Toolbar ──
   As regras visuais da barra (pílula "Hoje", botões redondos de seta, rótulo do
   período) moram em wwwroot/css/app.css: o Caixa Diário renderiza a mesma barra,
   e CSS isolado de página não alcança o markup da outra tela. Aqui fica só o que
   é desta grade e o que precisa de `::deep`. */
.agenda-toolbar[b-hung4satr6] {
    grid-column: 2;
    grid-row: 1;
}

/* Busca da toolbar: colapsada é o próprio botão redondo; expandida, o campo do
   FilterSearchInput desce dos 36px padrão para os 32px da barra. O `::deep` é
   obrigatório aqui — o escopo do CSS isolado só é carimbado no markup desta
   página, então sem ele estas duas regras não alcançariam o componente. (As
   regras de forma do botão e do ícone já vêm globais do app.css.) */
.agenda-tb-search[b-hung4satr6] {
    display: flex;
    align-items: center;
}

.agenda-tb-search[b-hung4satr6]  .fsi-wrapper {
    height: 32px;
    width: 200px;
    border-radius: 9999px;
}

/* Estado "filtro preenchido" da busca — o FilterSearchInput monta esta classe a
   partir de CollapsedActiveClass, e ela precisa sobreviver ao colapso do campo,
   que é o único sinal de que a grade ainda está filtrada. */
.agenda-tb-search[b-hung4satr6]  .agenda-tb-icon-btn--active {
    background: var(--color-brand-primary);
}

/* ── Seletor de visão (dropdown) ── */
.agenda-tb-dd[b-hung4satr6] {
    position: relative;
}

.agenda-tb-dd-trigger[b-hung4satr6] {
    padding: 0 12px 0 16px;
}

.agenda-tb-dd-backdrop[b-hung4satr6] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.agenda-tb-dd-panel[b-hung4satr6] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.agenda-tb-dd-item[b-hung4satr6] {
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-family-base);
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
}

.agenda-tb-dd-item:hover[b-hung4satr6] {
    background: var(--color-surface-subtle);
}

.agenda-tb-dd-item--active[b-hung4satr6] {
    background: var(--color-button-header-bg-active);
    font-weight: var(--font-weight-semibold);
}

/* ── Left sidebar ──
   O cartão em si, o botão "Criar agendamento" e o filtro de colaboradores vivem
   em wwwroot/css/app.css (compartilhados com o Caixa Diário), assim como
   `.emp-avatar` / `.emp-avatars`. Aqui fica a posição na grade e o que é só da
   Agenda. */
.agenda-sidebar[b-hung4satr6] {
    grid-column: 1;
    grid-row: 2;
}

/* Contorno tracejado sobre o card branco — tinta escura, não a de contraste da
   marca. Só a Agenda cria bloqueios, então este botão não desceu para o app.css. */
.btn-create-block[b-hung4satr6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    height: 40px;
    margin: 0 16px 16px;
    padding: 0 16px;
    background: transparent;
    color: var(--color-text-primary);
    border: 1.5px dashed var(--color-text-primary);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-create-block:hover[b-hung4satr6] {
    background: var(--color-button-header-bg-active);
}


/* ── Right calendar area ── */
.agenda-main[b-hung4satr6] {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.agenda-main--loading[b-hung4satr6] {
    opacity: 0.7;
    pointer-events: none;
}

.agenda-skeleton[b-hung4satr6] {
    flex: 1;
    /* Same shimmer treatment as the Dashboard skeleton (design-system tokens) */
    background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-surface-subtle) 50%, var(--color-border-default) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 12px;
}

.agenda-reload-overlay[b-hung4satr6] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.agenda-spinner[b-hung4satr6] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #1a1c15;
    border-radius: 50%;
    animation: dash-spin 0.8s linear infinite;
}

.agenda-error[b-hung4satr6] {
    margin: 16px;
    padding: 10px 16px;
    background: #fee2e2;
    border-radius: 6px;
    color: #dc3545;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agenda-error button[b-hung4satr6] {
    background: none;
    border: none;
    cursor: pointer;
    color: #dc3545;
    font-size: 16px;
}

/* ── Tablet sidebar toggle (FAB) ── */
.agenda-sidebar-backdrop[b-hung4satr6] {
    display: none;
}

.agenda-sidebar-toggle[b-hung4satr6] {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    border: none;
    cursor: pointer;
    z-index: 52;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    align-items: center;
    justify-content: center;
}

.agenda-sidebar-toggle .material-symbols-outlined[b-hung4satr6] {
    font-size: 22px;
}

@media (max-width: 1024px) {
    /* A sidebar vira drawer (position: fixed, fora do fluxo), então a grade colapsa
       para uma coluna só e toolbar/calendário passam a ocupá-la. */
    .agenda-root[b-hung4satr6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .agenda-toolbar[b-hung4satr6],
    .agenda-main[b-hung4satr6] {
        grid-column: 1;
    }

    /* Busca e engrenagem já são atalhos de verdade, então continuam no tablet;
       o campo aberto encolhe para não empurrar o seletor de visão. */
    .agenda-tb-search[b-hung4satr6]  .fsi-wrapper {
        width: 168px;
    }

    .agenda-toolbar[b-hung4satr6] {
        gap: 8px;
    }

    .agenda-tb-group[b-hung4satr6] {
        gap: 12px;
    }

    .agenda-sidebar-backdrop[b-hung4satr6] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 49;
    }

    .agenda-sidebar-toggle[b-hung4satr6] {
        display: flex;
    }

    .agenda-sidebar[b-hung4satr6] {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        z-index: 50;
        width: 240px;
        border-radius: 0 12px 12px 0;
        align-self: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        overflow-y: auto;
    }

    .agenda-sidebar--open[b-hung4satr6] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
}

@media (max-width: 640px) {
    /* No celular a barra não comporta os atalhos junto de Hoje / navegação /
       seletor de visão — eles saem primeiro, como antes. */
    .agenda-tb-tools[b-hung4satr6] {
        display: none;
    }
}

/* ── Block slide-panel: date+time stacked layout ── */
.abf-datetime-stack[b-hung4satr6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Block slide-panel: bulk mode ── */
.block-bulk-toggle-row[b-hung4satr6] {
    margin-bottom: 0.5rem;
}

.block-weekday-row[b-hung4satr6] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.block-weekday-btn[b-hung4satr6] {
    min-width: 40px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.block-weekday-btn:hover[b-hung4satr6] {
    border-color: var(--color-brand-secondary);
}

.block-weekday-btn--active[b-hung4satr6] {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-weight: 600;
}
/* /Pages/Tenant/TenantAgendamentos.razor.rz.scp.css */
/* ── Services cell ── */
.services-cell[b-n3qopv1jww] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Customer cell ── */
.customer-cell[b-n3qopv1jww] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-cell .cell-trunc[b-n3qopv1jww] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Tenant/TenantCashRegister.razor.rz.scp.css */
/* ── Root layout ──
   Mesma grade 2×2 da Agenda (Figma "Design System BF" nó 1693:62748): a barra de
   período ocupa só a coluna do conteúdo, e a sidebar começa na linha de baixo,
   alinhada ao topo do primeiro card. Sem padding próprio — `.tenant-content` já
   dá os 24px da página. */
.cx-root[b-hvoxw5gm93] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-content: start;
}

.cx-toolbar[b-hvoxw5gm93] {
    grid-column: 2;
    grid-row: 1;
}

.cx-sidebar[b-hvoxw5gm93] {
    grid-column: 1;
    grid-row: 2;
}

/* A sidebar, a barra de período e o cartão de KPI vêm de wwwroot/css/app.css —
   são os mesmos componentes da Agenda e do Dashboard. */
.cx-emp-search[b-hvoxw5gm93] {
    margin: 0 8px 6px;
}

.cx-main[b-hvoxw5gm93] {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Aviso de recorte ──
   O filtro da sidebar alcança as duas listagens, não os totais. */
.cx-filter-note[b-hvoxw5gm93] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--color-feedback-info-text);
    background: var(--color-feedback-info-subtle);
    border-radius: 8px;
}

.cx-filter-note .material-symbols-outlined[b-hvoxw5gm93] {
    font-size: 18px;
    color: var(--color-feedback-info);
}

/* ── Card de seção ── */
.cx-card[b-hvoxw5gm93] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
}

/* Cabeçalho clicável: a linha inteira é o alvo, mas o conteúdo fica encostado à
   esquerda — no Figma o chevron vem logo depois do contador, não na outra ponta. */
.cx-card-head[b-hvoxw5gm93] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.cx-card-title[b-hvoxw5gm93] {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
}

.cx-card-count[b-hvoxw5gm93] {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-on-brand);
    background: var(--color-brand-primary);
    border-radius: 999px;
}

.cx-card-hint[b-hvoxw5gm93] {
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
}

.cx-card-chevron[b-hvoxw5gm93] {
    margin-left: 8px;
    font-size: 18px;
    font-variation-settings: 'opsz' 18, 'wght' 400, 'FILL' 0, 'GRAD' 0;
    line-height: 1;
    color: var(--color-text-heading);
}

.cx-empty[b-hvoxw5gm93] {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-tertiary);
}

/* ── Agendamentos do dia ── */
.cx-appt-list[b-hvoxw5gm93] {
    display: flex;
    flex-direction: column;
}

/* A margem negativa faz o realce de hover cobrir a folga do card sem deslocar o
   texto, que continua alinhado com o título da seção. */
.cx-appt[b-hvoxw5gm93] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.cx-appt:last-child[b-hvoxw5gm93] {
    border-bottom: none;
}

.cx-appt:hover[b-hvoxw5gm93] {
    background: var(--color-surface-subtle);
}

.cx-appt-time[b-hvoxw5gm93] {
    width: 48px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.cx-appt-main[b-hvoxw5gm93] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cx-appt-customer[b-hvoxw5gm93] {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-appt-services[b-hvoxw5gm93] {
    font-size: 12px;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-appt-emp[b-hvoxw5gm93] {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Link "Ver mais +N" — Figma nó 1631:48474. `--color-feedback-info` é o único
   token que vale #1E488F nos seis temas; `button/secondary/surface` clareia em
   napolitano e hortelã e o texto sumiria no card branco. */
.cx-more[b-hvoxw5gm93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0 24px;
    background: none;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-feedback-info);
    cursor: pointer;
    transition: background 0.15s;
}

.cx-more:hover[b-hvoxw5gm93] {
    background: var(--color-surface-subtle);
}

/* ── Entradas por método ── */
.cx-method-row[b-hvoxw5gm93] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.cx-method-card[b-hvoxw5gm93] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
}

.cx-method-head[b-hvoxw5gm93] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cx-method-name[b-hvoxw5gm93] {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.cx-method-net[b-hvoxw5gm93] {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-feedback-success);
}

.cx-method-breakdown[b-hvoxw5gm93] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border-subtle);
}

.cx-method-line[b-hvoxw5gm93] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.cx-method-gross-val[b-hvoxw5gm93] {
    color: var(--color-feedback-success-text);
}

.cx-method-fee-val[b-hvoxw5gm93] {
    color: var(--color-feedback-danger);
}

/* ── Tabelas ──
   `border-collapse: separate` é obrigatório: com `collapse` o Chromium ignora o
   border-radius das células e o cabeçalho perde os cantos arredondados. */
.cx-table-wrap[b-hvoxw5gm93] {
    overflow-x: auto;
}

.cx-table[b-hvoxw5gm93] {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.cx-table th[b-hvoxw5gm93] {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background: var(--color-surface-highlighted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-table thead th:first-child[b-hvoxw5gm93] {
    border-radius: 8px 0 0 8px;
}

.cx-table thead th:last-child[b-hvoxw5gm93] {
    border-radius: 0 8px 8px 0;
}

.cx-table td[b-hvoxw5gm93] {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-table tbody tr:last-child td[b-hvoxw5gm93] {
    border-bottom: none;
}

/* Larguras do Figma nó 1619:1689 — a coluna "Itens" fica sem largura e absorve a
   sobra, que é o que `table-layout: fixed` faz com a única coluna livre.
   O `min-width` daqui não é decorativo: as cinco colunas fixas somam 710px, então
   com os 720px do `.cx-table` a coluna livre ficava com 10px e o "ITENS" do
   cabeçalho (que é `nowrap`) transbordava por cima do "MÉTODO". */
.cx-table--movement[b-hvoxw5gm93] { min-width: 900px; }
.cx-table--movement th:nth-child(1)[b-hvoxw5gm93] { width: 90px; }
.cx-table--movement th:nth-child(2)[b-hvoxw5gm93] { width: 200px; }
.cx-table--movement th:nth-child(3)[b-hvoxw5gm93] { width: 180px; }
.cx-table--movement th:nth-child(5)[b-hvoxw5gm93] { width: 120px; }
.cx-table--movement th:nth-child(6)[b-hvoxw5gm93] { width: 120px; }

.cx-table--expense th:nth-child(2)[b-hvoxw5gm93] { width: 200px; }
.cx-table--expense th:nth-child(3)[b-hvoxw5gm93] { width: 120px; }

.cx-num[b-hvoxw5gm93] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cx-total-row td[b-hvoxw5gm93] {
    font-weight: var(--font-weight-bold);
    border-top: 1px solid var(--color-border-default);
}

.cx-method-pill[b-hvoxw5gm93] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: 999px;
}

/* ── Skeleton ── */
.cx-skeleton[b-hvoxw5gm93] {
    background: linear-gradient(90deg,
        var(--color-surface-subtle) 25%,
        var(--color-surface-raised) 37%,
        var(--color-surface-subtle) 63%);
    background-size: 400% 100%;
    animation: cx-shimmer-b-hvoxw5gm93 1.4s ease infinite;
    border-radius: 12px;
}

.cx-skeleton--card[b-hvoxw5gm93] { height: 97px; }
.cx-skeleton--block[b-hvoxw5gm93] { height: 260px; }

@keyframes cx-shimmer-b-hvoxw5gm93 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Responsivo ── */
@media (max-width: 1024px) {
    .cx-root[b-hvoxw5gm93] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        row-gap: 16px;
    }

    .cx-toolbar[b-hvoxw5gm93] {
        grid-column: 1;
        grid-row: 1;
    }

    .cx-sidebar[b-hvoxw5gm93] {
        grid-column: 1;
        grid-row: 2;
    }

    .cx-main[b-hvoxw5gm93] {
        grid-column: 1;
        grid-row: 3;
    }

    .cx-kpi-row[b-hvoxw5gm93] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cx-kpi-row[b-hvoxw5gm93] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Tenant/TenantCustomers.razor.rz.scp.css */
.phone-cell[b-plj9zggfcd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.last-cell[b-plj9zggfcd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.last-rel[b-plj9zggfcd] {
    font-size: 0.8rem;
    font-weight: 700;
}

.last-rel.ld-g[b-plj9zggfcd] {
    color: var(--color-feedback-success);
}

.last-rel.ld-a[b-plj9zggfcd] {
    color: var(--color-feedback-warning-text);
}

.last-rel.ld-r[b-plj9zggfcd] {
    color: var(--color-feedback-danger);
}

.last-date[b-plj9zggfcd] {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
}

.last-none[b-plj9zggfcd] {
    color: var(--color-text-tertiary);
}
/* /Pages/Tenant/TenantDashboard.razor.rz.scp.css */
.dash-root[b-1swz4jeapo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    position: relative;
}

/* ── Period filter row ── */
.dash-filter-row[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    position: relative;
}

/* Reload overlay (spinner shown during filter changes when data already exists) */
.dash-reload-overlay[b-1swz4jeapo] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-bg-page) 65%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 4px;
}

.dash-spinner[b-1swz4jeapo] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--color-chart-primary);
    border-radius: 50%;
    animation: dash-spin 0.7s linear infinite;
}

/* KPI Cards — o cartao, o grid e os textos vivem em wwwroot/css/app.css
   (o Caixa Diario usa o mesmo componente). Aqui fica so o badge de tendencia,
   que e exclusivo do Dashboard, e os pontos de quebra desta pagina. */

.kpi-badge-trend[b-1swz4jeapo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}

.kpi-badge-trend--up[b-1swz4jeapo] {
    background: #e6f2ed;
    color: #00804c;
}

.kpi-badge-trend--down[b-1swz4jeapo] {
    background: color-mix(in srgb, #DC3545 15%, transparent);
    color: #DC3545;
}

.kpi-badge-trend--stable[b-1swz4jeapo] {
    background: var(--color-bg-page);
    color: var(--color-text-tertiary);
}

/* Charts */
.charts-row[b-1swz4jeapo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bottom */
.bottom-row[b-1swz4jeapo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bottom-row--fill[b-1swz4jeapo] {
    flex: 1;
    align-content: stretch;
}

.bottom-row--fill .data-card[b-1swz4jeapo] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.data-card-body[b-1swz4jeapo] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Data cards */
.data-card[b-1swz4jeapo] {
    background: var(--color-surface-default);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    padding: 16px;
    overflow: hidden;
}

.data-card-header[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.data-card-title[b-1swz4jeapo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-heading);
    margin-bottom: 12px;
}

.data-card-header .data-card-title[b-1swz4jeapo] {
    margin-bottom: 0;
}

.data-card-period[b-1swz4jeapo] {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-table-header-text);
    white-space: nowrap;
}

/* Skeleton loading */
/* NOTE: @keyframes shimmer is defined in wwwroot/css/app.css (global)
   because Blazor CSS isolation scopes @keyframes and prevents them from
   being referenced by the animation property in component stylesheets. */
.skeleton-card[b-1swz4jeapo], .skeleton-chart[b-1swz4jeapo], .skeleton-table[b-1swz4jeapo] {
    background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-surface-subtle) 50%, var(--color-border-default) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 12px;
}

.skeleton-card[b-1swz4jeapo] { height: 100px; }
.skeleton-chart[b-1swz4jeapo] { height: 240px; }
.skeleton-table[b-1swz4jeapo] { height: 220px; }
.skeleton-chart-inline[b-1swz4jeapo] { height: 200px; border-radius: 8px; }

/* Responsive */
@media (max-width: 900px) {
    .kpi-row--flat[b-1swz4jeapo] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .kpi-row--flat[b-1swz4jeapo] { grid-template-columns: 1fr; }
    .top-subcards[b-1swz4jeapo] { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .charts-row[b-1swz4jeapo], .bottom-row[b-1swz4jeapo] { grid-template-columns: 1fr; }

    /* Allow horizontal scroll for tables/lists on tablets */
    .data-card[b-1swz4jeapo] {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbar but keep scroll behavior */
    .data-card[b-1swz4jeapo]::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .data-card[b-1swz4jeapo] {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Team table: ensure minimum width for proper display */
    .team-table[b-1swz4jeapo] {
        min-width: 600px;
    }

    /* Top list: ensure items don't compress too much */
    .top-list[b-1swz4jeapo] {
        min-width: 100%;
    }

    .top-item[b-1swz4jeapo] {
        min-width: calc(100% - 20px);
    }
}


/* Team table */
.team-table[b-1swz4jeapo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.team-table thead tr[b-1swz4jeapo] {
    background: var(--color-table-row-highlight);
}

.team-table th[b-1swz4jeapo] {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-table-header-text);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.team-table th:first-child[b-1swz4jeapo] {
    border-radius: 4px 0 0 4px;
}

.team-table th:last-child[b-1swz4jeapo] {
    border-radius: 0 4px 4px 0;
}

.team-table td[b-1swz4jeapo] {
    padding: 10px 10px;
    border-bottom: 1px solid var(--color-table-border);
    color: var(--color-text-primary);
}

.rank-cell[b-1swz4jeapo] {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.rank-badge[b-1swz4jeapo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rank-color) 18%, var(--color-bg-page));
    color: color-mix(in srgb, var(--rank-color) 70%, var(--color-text-primary));
    font-size: 12px;
    font-weight: 700;
}

.emp-name-cell[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emp-info[b-1swz4jeapo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.emp-name[b-1swz4jeapo] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-heading);
    white-space: nowrap;
}

.emp-avatar[b-1swz4jeapo] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    color: white;
}

.emp-avatar--owner[b-1swz4jeapo] {
    background: var(--color-avatar-bg-1);
    color: var(--color-text-on-brand);
}

.emp-avatar--employee[b-1swz4jeapo] {
    background: var(--color-role-employee-text);
    color: #fff;
}

.emp-avatar--freelancer[b-1swz4jeapo] {
    background: var(--color-role-freelancer-text);
    color: #fff;
}

/* Staff role badge */
.staff-tag[b-1swz4jeapo] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.staff-tag--owner[b-1swz4jeapo] {
    background: var(--color-role-owner-bg);
    color: var(--color-role-owner-text);
}

.staff-tag--employee[b-1swz4jeapo] {
    background: var(--color-role-employee-bg);
    color: var(--color-role-employee-text);
}

.staff-tag--freelancer[b-1swz4jeapo] {
    background: var(--color-role-freelancer-bg);
    color: var(--color-role-freelancer-text);
}

.revenue-cell[b-1swz4jeapo] {
    font-weight: 700;
    color: var(--color-text-primary);
}

.pct-cell[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-bar-track[b-1swz4jeapo] {
    width: 60px;
    height: 6px;
    background: var(--color-border-default);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.mini-bar-fill[b-1swz4jeapo] {
    height: 100%;
    background: var(--color-chart-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.pct-label[b-1swz4jeapo] {
    font-size: 11px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Top tabs */
.top-tabs[b-1swz4jeapo] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-default);
}

.top-tab[b-1swz4jeapo] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.12s;
}

.top-tab.active[b-1swz4jeapo] {
    color: var(--color-text-heading);
    border-bottom-color: var(--color-chart-primary);
}

.top-subcards[b-1swz4jeapo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 0 4px;
}

.top-subcard[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-surface-default));
    border: 1px solid color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
}

.top-subcard-icon[b-1swz4jeapo] {
    font-size: 22px;
    flex-shrink: 0;
}

.top-subcard-icon--completed[b-1swz4jeapo] {
    color: var(--color-brand-active);
}

.top-subcard-icon--pending[b-1swz4jeapo] {
    color: var(--color-brand-primary);
    opacity: 0.5;
}

.top-subcard-body[b-1swz4jeapo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-subcard-value[b-1swz4jeapo] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.top-subcard-label[b-1swz4jeapo] {
    font-size: 11px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Top list */
.top-list[b-1swz4jeapo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.top-item[b-1swz4jeapo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-rank[b-1swz4jeapo] {
    width: 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
    flex-shrink: 0;
}

.top-item-body[b-1swz4jeapo] {
    flex: 1;
    min-width: 0;
}

.top-item-row[b-1swz4jeapo] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.top-item-name[b-1swz4jeapo] {
    font-size: 13px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-item-count[b-1swz4jeapo] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
    margin-left: 8px;
}

.bar-track[b-1swz4jeapo] {
    height: 6px;
    background: var(--color-border-default);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill[b-1swz4jeapo] {
    height: 100%;
    background: var(--color-chart-primary);
    border-radius: 3px;
    transition: width 0.3s;
}


/* Top Clientes meta row */
.top-cust-meta[b-1swz4jeapo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.top-item-books[b-1swz4jeapo] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.top-item-revenue[b-1swz4jeapo] {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}
/* /Pages/Tenant/TenantLandingPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   TenantLandingPage — public, mobile-first storefront page.
   Tokens-only (see wwwroot/css/tokens.css). Base styles target a
   ~360–420px viewport; @media (min-width: 768px) centers content
   in a max-width column for tablet/desktop.
   NOTE: @keyframes are scoped by Blazor CSS isolation, so this file
   reuses the global `shimmer` keyframe defined in wwwroot/css/app.css
   (same pattern as TenantDashboard.razor.css).
   ═══════════════════════════════════════════════════════════ */

.lp-root[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: var(--color-bg-page);
    font-family: var(--font-family-base);
    padding: var(--spacing-6) var(--spacing-4) calc(var(--spacing-20) + var(--spacing-8));
    box-sizing: border-box;
    gap: var(--spacing-8);
}

/* ── Loading / error states ─────────────────────────────────────────────── */

.lp-state-wrap[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 60vh;
}

.lp-skeleton[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.lp-skeleton-hero[b-aumk17gmvg],
.lp-skeleton-block[b-aumk17gmvg] {
    background: linear-gradient(90deg, var(--color-border-default) 25%, var(--color-surface-subtle) 50%, var(--color-border-default) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-lg);
}

.lp-skeleton-hero[b-aumk17gmvg] {
    height: 220px;
}

.lp-skeleton-block[b-aumk17gmvg] {
    height: 160px;
}

.lp-skeleton-block--sm[b-aumk17gmvg] {
    height: 64px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.lp-hero[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-6);
    margin: calc(-1 * var(--spacing-6)) calc(-1 * var(--spacing-4)) 0;
    background: linear-gradient(160deg, var(--color-hero-gradient-start) 0%, var(--color-hero-gradient-end) 100%);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.lp-hero-logo[b-aumk17gmvg] {
    width: var(--spacing-20);
    height: var(--spacing-20);
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface-default);
    box-shadow: var(--shadow-md);
}

.lp-hero-badge[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-20);
    height: var(--spacing-20);
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-text-on-brand);
    font-size: var(--text-display-size);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-md);
}

.lp-hero-name[b-aumk17gmvg] {
    margin: 0;
    font-size: var(--text-display-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-on-brand);
}

.lp-hero-tagline[b-aumk17gmvg] {
    margin: 0;
    max-width: 420px;
    font-size: var(--text-body-md-size);
    color: var(--color-text-on-brand);
    opacity: 0.75;
}

.lp-hero-whatsapp[b-aumk17gmvg] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    min-height: var(--spacing-11);
    border-radius: var(--radius-full);
    background: var(--color-whatsapp-brand);
    color: var(--color-whatsapp-text);
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.lp-hero-whatsapp:hover[b-aumk17gmvg] {
    background: var(--color-whatsapp-brand-hover);
}

/* ── Generic section shell ──────────────────────────────────────────────── */

.lp-section[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.lp-section-title[b-aumk17gmvg] {
    margin: 0;
    font-size: var(--text-heading-lg-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

/* ── Booking entry ───────────────────────────────────────────────────────── */

.lp-book-btn[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    min-height: var(--spacing-14);
    padding: var(--spacing-3) var(--spacing-5);
    border: none;
    border-radius: var(--radius-lg);
    /* Fundo vem do token de BOTAO, nao de `--color-brand-primary`: no aperol a
       cor da marca (#F34723) da 3.7:1 com o rotulo e reprova AA, enquanto o
       `primary/surface` do Figma (#C2391C) da 5.4:1. O par bg/texto tem que sair
       da mesma familia — misturar marca com `--color-button-text-primary` foi o
       que deixou este CTA fora da correcao de contraste dos temas. */
    background: var(--color-button-primary-bg);
    color: var(--color-button-text-primary);
    font-family: inherit;
    font-size: var(--text-heading-md-size);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 0.15s;
}

.lp-book-btn:hover[b-aumk17gmvg] {
    background: var(--color-button-primary-bg-hover);
}

.lp-book-btn .material-symbols-outlined[b-aumk17gmvg] {
    font-size: var(--icon-24);
}

.lp-booking-placeholder[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-2);
    padding: var(--spacing-8) var(--spacing-4);
    border: var(--border-1) dashed var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface-default);
}

.lp-booking-placeholder-icon[b-aumk17gmvg] {
    font-size: var(--icon-40);
    color: var(--color-text-tertiary);
}

.lp-booking-placeholder-title[b-aumk17gmvg] {
    margin: 0;
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.lp-booking-placeholder-sub[b-aumk17gmvg] {
    margin: 0;
    font-size: var(--text-body-sm-size);
    color: var(--color-text-secondary);
}

/* ── Principais serviços ─────────────────────────────────────────────────── */

.lp-services-grid[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.lp-service-card[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-4);
    background: var(--color-surface-default);
    border: var(--border-1) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.lp-service-name[b-aumk17gmvg] {
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.lp-service-meta-row[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-service-duration[b-aumk17gmvg] {
    font-size: var(--text-caption-size);
    color: var(--color-text-tertiary);
}

.lp-service-price[b-aumk17gmvg] {
    font-size: var(--text-heading-sm-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-active);
}

/* ── Nossa equipe ────────────────────────────────────────────────────────── */

.lp-team-grid[b-aumk17gmvg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5);
}

.lp-team-member[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    width: var(--spacing-20);
}

.lp-team-avatar[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-12);
    height: var(--spacing-12);
    border-radius: var(--radius-full);
    background: var(--color-avatar-bg-1);
    color: var(--color-avatar-text);
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-bold);
}

.lp-team-name[b-aumk17gmvg] {
    font-size: var(--text-caption-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: center;
}

/* ── Sobre nós ───────────────────────────────────────────────────────────── */

.lp-about-text[b-aumk17gmvg] {
    margin: 0;
    font-size: var(--text-body-md-size);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
}

/* ── Horário & endereço ──────────────────────────────────────────────────── */

.lp-hours-list[b-aumk17gmvg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-hours-row[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: var(--border-1) solid var(--color-border-subtle);
    font-size: var(--text-body-sm-size);
}

.lp-hours-row--closed[b-aumk17gmvg] {
    color: var(--color-text-tertiary);
}

.lp-hours-day[b-aumk17gmvg] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.lp-hours-row--closed .lp-hours-day[b-aumk17gmvg] {
    color: var(--color-text-tertiary);
}

.lp-hours-range[b-aumk17gmvg] {
    color: var(--color-text-secondary);
}

.lp-address-link[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--spacing-11);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-default);
    border: var(--border-1) solid var(--color-border-default);
    color: var(--color-brand-accent);
    font-size: var(--text-body-sm-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.lp-address-link .material-symbols-outlined[b-aumk17gmvg] {
    font-size: var(--icon-20);
    color: var(--color-brand-accent);
    flex-shrink: 0;
}

/* ── Redes sociais ───────────────────────────────────────────────────────── */

.lp-socials-row[b-aumk17gmvg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.lp-social-link[b-aumk17gmvg] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--spacing-11);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-surface-default);
    border: var(--border-1) solid var(--color-border-default);
    color: var(--color-text-primary);
    font-size: var(--text-body-sm-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.lp-social-link .material-symbols-outlined[b-aumk17gmvg] {
    font-size: var(--icon-20);
    color: var(--color-text-secondary);
}

.lp-bottom-spacer[b-aumk17gmvg] {
    height: var(--spacing-4);
}

/* ── Sticky bottom CTA bar ───────────────────────────────────────────────── */

.lp-sticky-cta[b-aumk17gmvg] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface-default);
    border-top: var(--border-1) solid var(--color-border-default);
    box-shadow: var(--shadow-lg);
    z-index: 20;
}

.lp-sticky-btn[b-aumk17gmvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    flex: 1;
    min-height: var(--spacing-11);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-body-md-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.lp-sticky-btn .material-symbols-outlined[b-aumk17gmvg] {
    font-size: var(--icon-20);
}

.lp-sticky-btn--primary[b-aumk17gmvg] {
    /* Mesmo par de tokens do `.lp-book-btn` — ver a nota la. */
    background: var(--color-button-primary-bg);
    color: var(--color-button-text-primary);
}

.lp-sticky-btn--primary:hover[b-aumk17gmvg] {
    background: var(--color-button-primary-bg-hover);
}

.lp-sticky-btn--whatsapp[b-aumk17gmvg] {
    background: var(--color-whatsapp-brand);
    color: var(--color-whatsapp-text);
}

.lp-sticky-btn--whatsapp:hover[b-aumk17gmvg] {
    background: var(--color-whatsapp-brand-hover);
}

/* ── Tablet / desktop ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .lp-root[b-aumk17gmvg] {
        align-items: center;
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }

    .lp-root > *[b-aumk17gmvg] {
        width: 100%;
        max-width: 640px;
    }

    .lp-services-grid[b-aumk17gmvg] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-sticky-cta[b-aumk17gmvg] {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 640px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}
/* /Pages/Tenant/TenantMyStore.razor.rz.scp.css */
/* ── Page root override ──────────────────────────────────────────────────── */

.dash-root[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    position: relative;
}

.store-root[b-vj1djleur8] {
    gap: var(--spacing-6) !important;
}

/* ── Card grid (master) ──────────────────────────────────────────────────── */

.store-grid[b-vj1djleur8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-4);
}

.store-nav-card[b-vj1djleur8] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    min-height: 104px;
    text-align: left;
    padding: var(--spacing-5);
    background: var(--color-surface-default);
    border: var(--border-1) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.store-nav-card:hover[b-vj1djleur8] {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-md);
}

.store-nav-card:focus-visible[b-vj1djleur8] {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

.store-nav-card__badge[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-badge-brand-bg);
    color: var(--color-badge-brand-text);
}

.store-nav-card__badge .material-symbols-outlined[b-vj1djleur8] {
    font-size: var(--icon-24);
}

.store-nav-card__body[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.store-nav-card__title[b-vj1djleur8] {
    font-size: var(--text-heading-sm-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.store-nav-card__desc[b-vj1djleur8] {
    font-size: var(--text-body-sm-size);
    color: var(--color-text-secondary);
}

.store-nav-card__chevron[b-vj1djleur8] {
    font-size: var(--icon-20);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* ── Section detail ──────────────────────────────────────────────────────── */

.store-detail[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.store-back[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    align-self: flex-start;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface-default);
    border: 1.5px solid var(--color-text-disabled);
    border-radius: var(--radius-md);
    color: var(--color-badge-neutral-text);
    font-family: inherit;
    font-size: var(--text-body-sm-size);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.store-back:hover[b-vj1djleur8] {
    background: var(--color-surface-raised);
    color: var(--color-badge-neutral-text);
}

.store-back:focus-visible[b-vj1djleur8] {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

.store-back .material-symbols-outlined[b-vj1djleur8] {
    font-size: var(--icon-18);
}

.store-subsection[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.store-subsection-title[b-vj1djleur8] {
    font-size: var(--text-heading-sm-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.store-subdivider[b-vj1djleur8] {
    height: var(--border-1);
    background: var(--color-border-subtle);
    margin: var(--spacing-1) 0;
}

/* ── Store Card ──────────────────────────────────────────────────────────── */

.store-card[b-vj1djleur8] {
    background: var(--color-surface-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.store-card-header[b-vj1djleur8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-card-icon[b-vj1djleur8] {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.store-card-title[b-vj1djleur8] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.store-card-description[b-vj1djleur8] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.store-card-footer[b-vj1djleur8] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ── Inline save row (label + input + attached button) ──────────────────── */

.store-inline-save-row[b-vj1djleur8] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-3);
    max-width: 320px;
}

.store-inline-save-row__input[b-vj1djleur8],
[b-vj1djleur8] .store-inline-save-row__input {
    flex: 1;
    margin-bottom: 0;
}

.store-inline-save-row__btn[b-vj1djleur8] {
    flex-shrink: 0;
}

/* ── Form Grid ───────────────────────────────────────────────────────────── */

.store-form-grid[b-vj1djleur8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.store-form-grid--full[b-vj1djleur8],
[b-vj1djleur8] .store-form-grid--full {
    grid-column: 1 / -1;
}

.form-group[b-vj1djleur8] {
    margin-bottom: 1rem;
}

.required-mark[b-vj1djleur8] {
    color: #dc3545;
}

.store-error[b-vj1djleur8] {
    font-size: 0.875rem;
    color: #dc3545;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */

.store-skeleton-group[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-input[b-vj1djleur8] {
    height: 38px;
    border-radius: 8px;
    width: 100%;
}

.skeleton-row[b-vj1djleur8] {
    height: 44px;
    border-radius: 8px;
    width: 100%;
}

/* ── Availability Shift Cards ────────────────────────────────────────────── */

.availability-days[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.availability-day-card[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 12px 16px;
}

.availability-day-card--closed[b-vj1djleur8] {
    background: var(--color-surface-raised);
}

.availability-day-header[b-vj1djleur8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-name[b-vj1djleur8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.availability-day-card--closed .day-name[b-vj1djleur8] {
    color: var(--color-text-tertiary);
}

.availability-status-pill[b-vj1djleur8] {
    font-size: var(--text-badge-size);
    font-weight: var(--text-badge-weight);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    padding: 2px 10px;
}

.availability-status-pill--closed[b-vj1djleur8] {
    background: var(--color-feedback-danger);
}

.availability-status-pill--open[b-vj1djleur8] {
    background: var(--color-feedback-success);
}

.availability-shift-row[b-vj1djleur8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.availability-shift-sep[b-vj1djleur8] {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
}

/* TimePicker wrapper inside a shift row */
.avail-time-cell[b-vj1djleur8] {
    min-width: 0;
    flex: 1;
}

.btn-remove-shift[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #dc3545;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-remove-shift:hover[b-vj1djleur8] {
    background: #fef2f2;
    border-color: #fecaca;
}

.btn-remove-shift .material-symbols-outlined[b-vj1djleur8] {
    font-size: 18px;
}

.btn-add-shift[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-heading);
    background: transparent;
    border: 1.5px dashed var(--color-text-heading);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-add-shift:hover[b-vj1djleur8] {
    background: var(--color-surface-raised);
}

.btn-add-shift:disabled[b-vj1djleur8] {
    color: var(--color-button-text-disabled);
    border-color: var(--color-button-border-disabled);
    cursor: not-allowed;
}

.btn-add-shift:disabled:hover[b-vj1djleur8] {
    background: transparent;
}

/* ── Spinner inside button ───────────────────────────────────────────────── */

.btn-spinner[b-vj1djleur8] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: var(--color-text-primary);
    border-radius: 50%;
    animation: dash-spin 0.7s linear infinite;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.btn-spinner--white[b-vj1djleur8] {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

/* ── Password modal overrides ────────────────────────────────────────────── */

.modal-dialog--form[b-vj1djleur8] {
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 28px 28px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-dialog--form h3[b-vj1djleur8] {
    margin-bottom: 12px;
}

.modal-dialog--form .form-group[b-vj1djleur8] {
    margin-bottom: 14px;
}

/* ── Logo Upload ─────────────────────────────────────────────────────────── */

.logo-upload-area[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logo-preview[b-vj1djleur8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 80px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface-raised);
}

.logo-preview-img[b-vj1djleur8] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 80px;
    border: 1px dashed var(--color-border-default);
    border-radius: 10px;
    background: var(--color-surface-raised);
}

.logo-placeholder-icon[b-vj1djleur8] {
    font-size: 40px;
    color: var(--color-text-tertiary);
}

.logo-placeholder-text[b-vj1djleur8] {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 6px;
}

.logo-upload-actions[b-vj1djleur8] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-upload-logo[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-upload-logo:hover[b-vj1djleur8] {
    background: var(--color-border-default);
}

.btn-remove-logo[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc3545;
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-remove-logo:hover[b-vj1djleur8] {
    background: #fef2f2;
}

/* ── Theme Picker ────────────────────────────────────────────────────────── */

.theme-grid[b-vj1djleur8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.theme-card[b-vj1djleur8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface-default);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.theme-card:hover[b-vj1djleur8] {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
}

.theme-card--selected[b-vj1djleur8] {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
}

.theme-card-preview[b-vj1djleur8] {
    width: 100%;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    border: 1px solid var(--color-border-subtle);
}

.theme-card-sidebar[b-vj1djleur8] {
    width: 28%;
    background: var(--color-bg-sidebar);
    flex-shrink: 0;
}

.theme-card-page[b-vj1djleur8] {
    flex: 1;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}

.theme-card-accent[b-vj1djleur8] {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-brand-primary);
    flex-shrink: 0;
}

.theme-card-line[b-vj1djleur8] {
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-default);
    opacity: 0.6;
}

.theme-card-line--short[b-vj1djleur8] {
    width: 55%;
}

.theme-card-line--long[b-vj1djleur8] {
    width: 80%;
}

.theme-card-check[b-vj1djleur8] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 16px;
    color: var(--color-brand-primary);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.theme-card-label[b-vj1djleur8] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Landing Page ────────────────────────────────────────────────────────── */

.lp-about-textarea[b-vj1djleur8] {
    resize: vertical;
    min-height: 88px;
    font-family: inherit;
}

/* ── Multi-select option rows (Serviços em destaque dropdown) ── */
.abf-multi-option[b-vj1djleur8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.1s;
    box-sizing: border-box;
}

.abf-multi-option:hover[b-vj1djleur8] {
    background: var(--color-bg-page);
}

.abf-multi-option--active[b-vj1djleur8] {
    background: var(--color-bg-page);
}

.abf-multi-check[b-vj1djleur8] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-brand-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.abf-multi-name[b-vj1djleur8] {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abf-multi-badge[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-brand-secondary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.lp-social-list[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-social-row[b-vj1djleur8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-social-platform-wrapper[b-vj1djleur8] {
    flex: 0 0 160px;
}

.lp-social-url[b-vj1djleur8],
[b-vj1djleur8] .lp-social-url {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.lp-preview-link[b-vj1djleur8] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.lp-preview-link:hover[b-vj1djleur8] {
    background: var(--color-border-default);
}

/* ── Placeholder section (Meu Plano) ─────────────────────────────────────── */

.store-placeholder[b-vj1djleur8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0 24px;
    color: var(--color-text-tertiary);
    text-align: center;
}

.store-placeholder__icon[b-vj1djleur8] {
    font-size: 48px;
    color: var(--color-border-default);
}

.store-placeholder__title[b-vj1djleur8] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.store-placeholder__sub[b-vj1djleur8] {
    font-size: 13px;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .store-grid[b-vj1djleur8] {
        grid-template-columns: 1fr;
    }

    .store-form-grid[b-vj1djleur8] {
        grid-template-columns: 1fr;
    }

    .lp-social-row[b-vj1djleur8] {
        flex-wrap: wrap;
    }

    .lp-social-platform-wrapper[b-vj1djleur8] {
        flex: 1 1 100%;
    }
}
/* /Pages/Tenant/TenantNotifications.razor.rz.scp.css */
.notif-root[b-ih2k04s393] {
    padding: 0 4px;
}

.notif-loading[b-ih2k04s393], .notif-empty[b-ih2k04s393] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    color: #9ca3af;
    font-size: 14px;
    gap: 12px;
}

.notif-empty-icon[b-ih2k04s393] { font-size: 48px; color: #d1d5db; }

.notif-list[b-ih2k04s393] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.notif-item[b-ih2k04s393] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f6f7ed;
    transition: background 0.12s;
}

.notif-item:last-child[b-ih2k04s393] { border-bottom: none; }
.notif-item--unread[b-ih2k04s393] { background: rgba(219,230,76,0.06); }

.notif-dot[b-ih2k04s393] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00804d;
    flex-shrink: 0;
}

.notif-dot--read[b-ih2k04s393] { background: transparent; }

.notif-item-body[b-ih2k04s393] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-title[b-ih2k04s393] {
    font-size: 14px;
    color: #374151;
    font-weight: 400;
}

.notif-item--unread .notif-title[b-ih2k04s393] { font-weight: 600; }

.notif-body[b-ih2k04s393] {
    font-size: 13px;
    color: #6b7280;
}

.notif-time[b-ih2k04s393] {
    font-size: 12px;
    color: #9ca3af;
}

.notif-delete-btn[b-ih2k04s393] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.notif-delete-btn:hover[b-ih2k04s393] {
    background: #fef2f2;
    color: #dc3545;
}
/* /Pages/Tenant/TenantPayments.razor.rz.scp.css */
.filter-sel-trigger[b-xawx44rir1] {
    min-width: 170px;
    height: 36px;
    font-size: 0.85rem;
}

.filter-sel-panel[b-xawx44rir1] {
    min-width: 170px;
    z-index: 300;
}
/* /Pages/Tenant/TenantSales.razor.rz.scp.css */
.sale-summary[b-uwpja16kav] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sale-summary-row[b-uwpja16kav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.sale-summary-divider[b-uwpja16kav] {
    border-top: 1px solid var(--color-border-subtle);
    margin: 0;
}

.sale-summary-row--total[b-uwpja16kav] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary);
}