/*
 * DataTable Rock UI (@RockUI/data/DataTable) dentro do layout legado.
 * A seleção (checkbox marcado, linha selecionada e barra de seleção) e a ação do estado vazio usam a cor primária do papel do usuário
 * (--sidebar-primary, de topbar-colors.html.twig; padrão em new-layout.css) no lugar do amarelo/laranja do DS.
 * Só os tokens são redefinidos, e só nesses pontos: o componente e o tokens.css continuam os do Rock UI.
 */

/* checkbox de cada linha e "selecionar todas" */
.rk-data-table .rk-checkbox {
    --rk-primary: var(--sidebar-primary);
}

/* linha selecionada e barra de seleção (borda, fundo e contador) */
.rk-data-table .rk-data-table__row[data-state="selected"],
.rk-data-table .rk-data-table__selection-bar {
    --rk-brand-surface: color-mix(in srgb, var(--sidebar-primary) 12%, white);
    /* mesma mistura do --sidebar-primary-hover de um papel; o padrão sem papel (#E89A1C) é escuro demais para borda */
    --rk-brand-border: color-mix(in srgb, var(--sidebar-primary) 30%, white);
    --rk-brand-ink: color-mix(in srgb, var(--sidebar-primary) 70%, black);
}

/* ação do estado vazio (ex.: "Novo fórum"): o Button padrão usa --rk-primary no fundo e no hover,
   e fica igual ao botão de novo item do cabeçalho da página */
.rk-data-table .rk-empty-state__action {
    --rk-primary: var(--sidebar-primary);
}

/* filtros no mobile (mobileFilters): contador do botão "Filtros" e "Limpar" dos chips aplicados */
.rk-data-table .rk-data-table__filters-count {
    --rk-primary: var(--sidebar-primary);
    --rk-primary-foreground: #fff;
}

.rk-data-table .rk-data-table__active-filters-clear {
    --rk-brand-blue: var(--sidebar-primary);
}

/* gaveta "Filtros e exibição": vai para o <body> quando aberta, por isso o seletor não passa pelo .rk-data-table.
   "Aplicar" (Button padrão) e os interruptores usam --rk-primary; a opção escolhida fica preenchida, como o "Aplicar" */
.rk-data-table__sheet-content {
    --rk-primary: var(--sidebar-primary);
    --rk-primary-hover: var(--sidebar-primary-hover);
    --rk-primary-foreground: #fff;
}

/* painel de filtros (Sheet com contentClass: 'rk-filter-sheet', ex.: Forum/_filterSheet.html.twig): também vai para o
   <body> quando aberto; "Filtrar" (Button padrão) e os destaques usam --rk-primary */
.rk-filter-sheet {
    --rk-primary: var(--sidebar-primary);
    --rk-primary-hover: var(--sidebar-primary-hover);
    --rk-primary-foreground: #fff;
}

/* botão "Filtros" do cabeçalho (page-title com filterSheet): fora da DataTable; o contador reaproveita o
   rk-data-table__filters-count (posição e tamanho) e ganha a cor do papel */
.rk-filter-trigger {
    position: relative;
    --rk-primary: var(--sidebar-primary);
    --rk-primary-foreground: #fff;
}

.rk-filter-trigger__count[hidden] {
    display: none;
}

/* chips dos filtros do painel aplicados, no desktop, abaixo da toolbar (bloco below_toolbar da DataTable, em
   Forum/_table.html.twig): o visual dos chips do mobile (rk-data-table__active-filter*); abaixo de 768px somem, porque
   lá ficam os chips da própria DataTable */
.rk-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    --rk-brand-blue: var(--sidebar-primary);
}

.rk-filter-chips .rk-data-table__active-filter,
.rk-filter-chips .rk-data-table__active-filters-clear {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    /* o contêiner do bloco também, para não sobrar o espaçamento (gap) da DataTable */
    .rk-filter-chips,
    .rk-data-table__below-toolbar:has(> .rk-filter-chips) {
        display: none;
    }
}

.rk-data-table__sheet-content .rk-data-table__sheet-options .rk-toggle-group__item[data-state="on"] {
    border-color: var(--sidebar-primary);
    background-color: var(--sidebar-primary);
    color: #fff;
}

/* cabeçalho da página no padrão Rock UI (opção breadcrumbItems do base/partials/page-title.html.twig): breadcrumb e
   descrição só com tokens do DS; a fonte (Inter) vem do reset de rk-* do core/base.css. O último item do breadcrumb
   (a página atual) é o título da página, como no legado: em destaque e na cor do papel */
.rk-page-header__breadcrumb .rk-breadcrumb__page[aria-current="page"] {
    font-weight: 600;
    color: var(--sidebar-primary);
}

.rk-page-header__description {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: var(--rk-text-sm);
    line-height: var(--rk-text-sm-lh);
    color: var(--rk-muted-foreground);
}

.rk-page-header__info {
    flex-shrink: 0;
}

/* cor do papel para tudo que é "primary" do Rock UI numa página migrada (skill rock-ui-list-page-migration).
   Aplicar no wrapper do conteúdo da página e no contentClass das camadas que vão para o <body> (Sheet, AlertDialog,
   DropdownMenu, Popover), que saem do wrapper ao abrir. Só os tokens primários mudam: os semânticos (--rk-positive,
   --rk-warning, --rk-destructive, --rk-info) continuam os do Rock UI. O hover escurece a cor do papel, porque o
   --sidebar-primary-hover de um papel é a versão clara (fundo de item do menu), que não serve para botão */
.rk-role-primary {
    --rk-primary: var(--sidebar-primary);
    --rk-primary-hover: color-mix(in srgb, var(--sidebar-primary) 85%, black);
    --rk-primary-foreground: #fff;
    --rk-ring: var(--sidebar-primary);
    --rk-brand-blue: var(--sidebar-primary);
    --rk-brand-blue-hover: color-mix(in srgb, var(--sidebar-primary) 85%, black);
    --rk-brand-surface: color-mix(in srgb, var(--sidebar-primary) 12%, white);
    --rk-brand-border: color-mix(in srgb, var(--sidebar-primary) 30%, white);
    --rk-brand-ink: color-mix(in srgb, var(--sidebar-primary) 70%, black);
}

/* botão Novo do cabeçalho no Rock UI (page-title com rockActions): abaixo de 768px ocupa a linha inteira */
@media (max-width: 767.98px) {
    .rk-page-new-action {
        flex: 1 1 100%;
    }

    .rk-page-new-action > .rk-button {
        width: 100%;
    }
}

/* modo cards da DataTable (mobileCards), abaixo de 768px: mais espaço entre os cards (33px) que o padrão do
   componente (8px). A classe a mais (.rk-data-table) vence a regra do componente, qualquer que seja a ordem dos CSS */
@media (max-width: 767.98px) {
    .rk-data-table.rk-data-table--cards .rk-data-table__table > tbody[data-rk-dt-body]:not([hidden]) {
        gap: 33px;
    }
}

/* "Mais filtros" da gaveta do mobile (Collapsible com .rk-more-filters): o gatilho traz os dois rótulos, e o
   data-state da raiz, que o Collapsible alterna, decide qual aparece ("Menos filtros" quando aberto) */
.rk-more-filters[data-state="open"] > [data-collapsible-trigger] .rk-more-filters__closed,
.rk-more-filters:not([data-state="open"]) > [data-collapsible-trigger] .rk-more-filters__open {
    display: none;
}

/* Sheet (painel de filtros e outros Sheets do app): borda embaixo do cabeçalho e em cima do rodapé, para separá-los
   do corpo que rola. O espaço entre eles sai do gap do painel (16px) e vira padding do corpo, para as bordas
   encostarem no cabeçalho e no rodapé e o respiro ficar dentro da área que rola. O [data-slot] vence a regra do
   componente, qualquer que seja a ordem dos CSS. O sheet.css do Rock UI não muda (serve as docs /rock-ui), nem a
   gaveta do mobile (rk-drawer) */
.rk-sheet__content[data-slot="sheet-content"] {
    gap: 0;
}

.rk-sheet__content[data-slot="sheet-content"] > .rk-sheet__body {
    padding-block: 16px;
}

.rk-sheet__header {
    border-bottom: 1px solid var(--rk-border);
}

.rk-sheet__footer {
    border-top: 1px solid var(--rk-border);
}

/* ResponsiveDialog com wide: 'sheet' (painel lateral no desktop, ex.: filtro dos widgets dos dashboards): o mesmo
   visual dos Sheets acima. Na gaveta do celular (data-variant="drawer") fica o visual da gaveta das listagens */
.rk-responsive-dialog__content[data-variant="sheet"] > .rk-responsive-dialog__header {
    border-bottom: 1px solid var(--rk-border);
}

.rk-responsive-dialog__content[data-variant="sheet"] > .rk-responsive-dialog__body {
    padding-block: 16px;
}

.rk-responsive-dialog__content[data-variant="sheet"] > .rk-responsive-dialog__footer {
    border-top: 1px solid var(--rk-border);
}

/* texto copiável (@CoreBundle/Components/RockUI/_copy.html.twig, controller rk-copy): botão sem cara de botão, com
   foco visível; com data-copied (1,5 s depois de copiar), o ícone de copiar dá lugar ao de confirmado */
.rk-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}

.rk-copy:focus-visible {
    outline: 2px solid var(--rk-ring);
    outline-offset: 2px;
}

.rk-copy .rk-copy__icon {
    flex-shrink: 0;
    color: var(--rk-muted-foreground);
}

.rk-copy .rk-copy__icon--done,
.rk-copy[data-copied] .rk-copy__icon:not(.rk-copy__icon--done) {
    display: none;
}

.rk-copy[data-copied] .rk-copy__icon--done {
    display: inline-block;
    color: var(--rk-positive);
}

/* campo de data (@CoreBundle/Components/RockUI/_datePicker.html.twig, controller rk-date-picker): o botão com a cara
   de um campo (largura toda, texto à esquerda, placeholder apagado) e o rodapé do Popover com o "Limpar". A raiz do
   Popover é inline-block no Rock UI: aqui ela ocupa a linha, para o botão poder ter a largura do campo */
.rk-date-picker > .rk-popover {
    display: block;
}

.rk-date-picker__trigger {
    width: 100%;
    justify-content: flex-start;
    font-weight: 400;
}

.rk-date-picker__value[data-empty] {
    color: var(--rk-muted-foreground);
}

/* o calendar.css do Rock UI deixa o Calendar transparente dentro de um Popover (fica com o branco do --rk-popover);
   no campo de data ele mantém o fundo próprio (--rk-background), e o Popover inteiro (com o rodapé) acompanha, para
   não sobrar branco nos cantos arredondados. A classe dupla vence a regra do componente */
.rk-popover__content.rk-date-picker__content,
.rk-popover__content.rk-date-picker__content .rk-calendar {
    background-color: var(--rk-background);
}

.rk-date-picker__footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 8px 8px;
    border-top: 1px solid var(--rk-border);
}

/* modal de formulário (@CoreBundle/Components/RockUI/_formDialog.html.twig, controller rk-form-dialog): ResponsiveDialog
   com progresso, abas sublinhadas das etapas, rodapé "Etapa X de N" e o estado de sucesso. O conteúdo vai para o <body>
   ao abrir, por isso as regras ficam na classe do conteúdo (.rk-form-dialog), e não na página. */
.rk-form-dialog [hidden] { display: none !important; }
.rk-form-dialog__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rk-form-dialog__panel { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; min-width: 0; }
.rk-form-dialog__steps { gap: 8px; min-width: 0; }
/* abas das etapas que não cabem (a gaveta do celular, formulários com muitas etapas): carrossel, sem barra de scroll (as
   Tabs a escondem). Botões anterior/próximo nas bordas, com a borda da lista esmaecida embaixo deles, do lado em que há
   abas fora da vista (data-overflow-start/end, marcados pelo rk-form-dialog, que mostra os botões e rola até a aba
   ativa). O arraste no toque continua; o pan-x explícito: o corpo da gaveta só deixa rolar na vertical (touch-action: pan-y). */
.rk-form-dialog__steps-carousel { position: relative; min-width: 0; }
.rk-form-dialog__steps-nav {
	position: absolute;
	top: 2px;
	z-index: 2;
	border-radius: 9999px;
	box-shadow: var(--rk-shadow-sm);
}
.rk-form-dialog__steps-nav--previous { left: 0; }
.rk-form-dialog__steps-nav--next { right: 0; }
.rk-tabs.rk-form-dialog__steps[data-orientation="horizontal"] > .rk-tabs__list {
	max-width: 100%;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
}
.rk-tabs.rk-form-dialog__steps > .rk-tabs__list[data-overflow-end] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.rk-tabs.rk-form-dialog__steps > .rk-tabs__list[data-overflow-start] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.rk-tabs.rk-form-dialog__steps > .rk-tabs__list[data-overflow-start][data-overflow-end] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.rk-form-dialog__step-done,
.rk-form-dialog__step-number { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.rk-form-dialog .rk-responsive-dialog__footer,
.rk-form-dialog[data-variant="drawer"] .rk-responsive-dialog__footer { flex-direction: column; align-items: stretch; gap: 16px; }
.rk-form-dialog[data-variant="dialog"] .rk-responsive-dialog__footer { padding-top: 0; }
.rk-form-dialog[data-variant="drawer"] .rk-responsive-dialog__footer { padding-top: 0; }
.rk-form-dialog__bar { display: flex; align-items: center; gap: 8px; }
.rk-form-dialog__counter {
	margin-right: auto;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 20px;
	color: var(--rk-muted-foreground);
}
.rk-form-dialog__actions { display: flex; gap: 8px; margin-left: auto; }
/* gaveta: contador em cima, botões na largura toda */
.rk-form-dialog[data-variant="drawer"] .rk-form-dialog__bar { flex-direction: column; align-items: stretch; }
.rk-form-dialog[data-variant="drawer"] .rk-form-dialog__counter { margin: 0; text-align: center; }
.rk-form-dialog[data-variant="drawer"] .rk-form-dialog__actions { margin: 0; }
.rk-form-dialog[data-variant="drawer"] .rk-form-dialog__actions > * { flex: 1 1 0%; }
/* estado de sucesso */
.rk-form-dialog__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px 0 8px;
	text-align: center;
}
.rk-form-dialog__success-icon {
	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: var(--rk-positive-surface);
	color: var(--rk-positive);
}
.rk-form-dialog__success-icon svg { width: 24px; height: 24px; }
.rk-form-dialog__success-text { display: flex; flex-direction: column; gap: 6px; }
.rk-form-dialog__success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* erro de um campo (o rk-form-dialog marca o form-item/field com os erros do servidor) */
.rk-form-dialog [data-slot="form-item"][data-invalid] .rk-form-label,
.rk-form-dialog [data-slot="field"][data-invalid] .rk-label { color: var(--rk-destructive); }
/* grade dos campos de formulário no Rock UI: uma coluna no celular; 2 ou 3 a partir de 640px; __full ocupa a linha */
.rk-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) {
	.rk-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rk-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rk-form-grid__full { grid-column: 1 / -1; }
/* itens com min-width: auto crescem até o texto nowrap do valor (ex.: Combobox) e invadem a coluna vizinha */
.rk-form-grid > * { min-width: 0; }
/* campo de cor do _formField (Input type=color): a amostra ocupa o campo, sem a moldura do navegador */
.rk-input.rk-form-color { padding: 4px; cursor: pointer; }
.rk-input.rk-form-color::-webkit-color-swatch-wrapper { padding: 0; }
.rk-input.rk-form-color::-webkit-color-swatch { border: 0; border-radius: calc(var(--rk-radius) - 4px); }
.rk-input.rk-form-color::-moz-color-swatch { border: 0; border-radius: calc(var(--rk-radius) - 4px); }
/* Valor em destaque, acima das abas (conta a receber e conta a pagar) */
.invoice-to-receive-form__value,
.invoice-pay-form__value { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); background-color: var(--rk-muted); }
.invoice-to-receive-form__value .rk-input,
.invoice-pay-form__value .rk-input { max-width: 280px; height: 48px; font-size: 22px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
/* parcelas: valor, vencimento e situação numa linha; a coluna do selo tem largura mínima para as linhas alinharem com
   situações de rótulos diferentes ("Paga", "A vencer") */
.invoice-to-receive-form__parcel,
.invoice-pay-form__parcel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(max-content, 104px); align-items: center; gap: 8px; }
.invoice-to-receive-form__generate,
.invoice-pay-form__generate { display: flex; align-items: flex-end; gap: 8px; }
.invoice-to-receive-form__generate > .rk-form-item,
.invoice-pay-form__generate > .rk-form-item { flex: 1 1 auto; min-width: 0; }
/* empresa externa (Company/RockUI/_*Fields, ex.: contabilidade): seções com título e o CNPJ com o botão de busca na
   Receita ao lado */
.company-external-form { display: grid; gap: 20px; }
.company-external-form__section { display: grid; gap: 12px; }
.company-external-form__title { margin: 0; font-size: 15px; font-weight: 600; }
.company-external-form__cnpj { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.company-external-form__cnpj > .rk-form-item { flex: 1 1 auto; min-width: 0; }
/* fórum: o Professor fica obrigatório com Disciplina (data-required, ligado pelo script do Forum/_formDialog) */
.forum-form [data-required="true"] .rk-form-label::after { content: " *"; color: var(--rk-destructive); }
/* turma: dias e horários (dia, início, término e remover numa linha; no celular, o dia ocupa a linha) e o calendário
   (as aulas em colunas) */
.course-class-form__days,
.course-class-form__schedules { display: grid; gap: 16px; }
.course-class-form__days-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.course-class-form__title { margin: 0; font-size: 15px; font-weight: 600; }
.course-class-form__day-list { display: grid; gap: 12px; }
.course-class-form__day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.course-class-form__day > :first-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
	.course-class-form__day { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
	.course-class-form__day > :first-child { grid-column: auto; }
}
.course-class-form__schedule-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.course-class-form__schedule-list:empty { display: none; }
.course-class-form__loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--rk-muted-foreground); }
.course-class-form__loading[hidden] { display: none; }
/* dias do After School, sem o botão de remover */
.course-class-form__day--fixed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 640px) {
	.course-class-form__day--fixed { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* blocos do After School: um grupo por dia, com os itens em cartões */
.course-class-form__block { display: grid; gap: 12px; }
.course-class-form__block-item { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius); }
.course-class-form__block-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* dia da semana ao lado do rótulo da aula */
.course-class-form__weekday { color: var(--rk-muted-foreground); font-weight: 400; }