/* ============================================================
   Selects (Dropdown, AutoComplete, RadioGroup, MultiSelect, Tags)
   ============================================================ */
.m50-autocomplete { position: relative; }
.m50-autocomplete__list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    list-style: none; margin: 4px 0 0; padding: 4px 0;
    background: var(--m50ui-surface); border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md); max-height: 240px; overflow-y: auto;
    box-shadow: var(--m50ui-shadow-md);
}
.m50-autocomplete__item { padding: 8px 12px; cursor: pointer; color: var(--m50ui-on-bg); }
.m50-autocomplete__item:hover { background: rgb(255 255 255 / 0.05); }

.m50-radio-group { display: flex; gap: var(--m50ui-sp-md); }
.m50-radio-group--vertical { flex-direction: column; }
.m50-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; }
.m50-radio-label { display: inline-flex; align-items: center; gap: var(--m50ui-sp-sm); color: var(--m50ui-on-bg); cursor: pointer; }
.m50-radio { accent-color: var(--m50ui-accent-text); width: 16px; height: 16px; }

.m50-multiselect { min-height: 80px; padding: 4px; }

.m50-tags {
    display: flex; flex-wrap: wrap; gap: var(--m50ui-sp-xs);
    padding: 6px 8px; background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md);
    min-height: var(--m50ui-touch-desktop); align-items: center;
}
.m50-tags:focus-within { border-color: var(--m50ui-focus-ring); box-shadow: 0 0 0 3px rgb(0 229 255 / 0.15); }
.m50-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--m50ui-accent-text); color: var(--m50ui-bg);
    font-size: var(--m50ui-fs-xs); font-weight: var(--m50ui-fw-semibold);
}
.m50-tag__close { background: transparent; border: none; color: inherit; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.m50-tags__input { flex: 1; min-width: 80px; border: none; background: transparent; color: var(--m50ui-on-bg); font: inherit; outline: none; padding: 4px; }

/* ============================================================
   Editor
   ============================================================ */
.m50-editor {
    border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md);
    background: var(--m50ui-surface); overflow: hidden;
    display: flex; flex-direction: column;
}
.m50-editor__toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; background: rgb(255 255 255 / 0.03);
    border-bottom: 1px solid var(--m50ui-border);
    font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface);
}
.m50-editor__type { font-weight: var(--m50ui-fw-semibold); color: var(--m50ui-accent-text); }
.m50-editor__lang { margin-left: auto; opacity: 0.7; }
.m50-editor__chip { padding: 1px 6px; border: 1px solid var(--m50ui-border); border-radius: 4px; }
.m50-editor__textarea {
    flex: 1; min-height: 200px;
    background: transparent; color: var(--m50ui-on-bg);
    border: none; padding: 10px 12px; font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: var(--m50ui-fs-sm); line-height: 1.5; resize: vertical; outline: none;
}
.m50-editor__monaco { width: 100%; min-height: 200px; }
.m50-editor__monaco:empty { display: none; }
.m50-editor__backend {
    padding: 1px 6px; border: 1px solid var(--m50ui-border); border-radius: 4px;
    margin-left: 4px; opacity: 0.6; font-size: 0.85em;
}

/* ============================================================
   File / Image Upload
   ============================================================ */
.m50-fileupload, .m50-imageupload {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--m50ui-sp-sm);
    padding: 10px 14px; border: 1px dashed var(--m50ui-border);
    border-radius: var(--m50ui-r-md); background: var(--m50ui-surface);
    color: var(--m50ui-on-bg); cursor: pointer;
    transition: border-color 150ms;
}
.m50-fileupload:hover, .m50-imageupload:hover { border-color: var(--m50ui-accent-text); }
.m50-fileupload__input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.m50-fileupload__hint { color: var(--m50ui-on-surface); }
.m50-fileupload__list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--m50ui-fs-sm); }
.m50-fileupload__list li { display: inline-flex; align-items: center; gap: 8px; color: var(--m50ui-on-surface); }

.m50-imageupload { display: flex; align-items: center; justify-content: center; min-width: 140px; min-height: 140px; padding: 0; }
.m50-imageupload__placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--m50ui-on-surface); }
.m50-imageupload__placeholder .m50-icon { font-size: 32px; }
.m50-imageupload__preview { width: 100%; height: 100%; object-fit: cover; border-radius: var(--m50ui-r-md); }

/* ============================================================
   Data: Table, Tree, Kanban
   ============================================================ */
.m50-table-wrap { overflow-x: auto; }
.m50-table { width: 100%; border-collapse: collapse; background: var(--m50ui-surface); color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-sm); }
.m50-table th, .m50-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--m50ui-border); }
.m50-table th { background: rgb(255 255 255 / 0.03); font-weight: var(--m50ui-fw-semibold); color: var(--m50ui-on-bg); }
.m50-table tbody tr:hover { background: rgb(255 255 255 / 0.02); }
.m50-table__loading, .m50-table__empty { padding: 24px; text-align: center; color: var(--m50ui-on-surface); }
.m50-table__pager { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px; font-size: var(--m50ui-fs-sm); color: var(--m50ui-on-surface); }

.m50-tree { list-style: none; padding: 0; margin: 0; background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-sm); }
.m50-tree ul { list-style: none; padding: 0; margin: 0; }
.m50-tree__row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: default; }
.m50-tree__row:hover { background: rgb(255 255 255 / 0.04); }
.m50-tree__toggle { background: transparent; border: none; color: var(--m50ui-on-surface); cursor: pointer; padding: 0 2px; }
.m50-tree__leaf { color: var(--m50ui-on-surface); width: 1em; text-align: center; }
.m50-tree__loading, .m50-tree__empty { padding: 12px; text-align: center; color: var(--m50ui-on-surface); }
/* Pager dos nós de 1º nível — fixo no rodapé enquanto a árvore (com overflow) rola. */
.m50-tree__pager {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 8px; justify-content: center;
    padding: 8px; font-size: var(--m50ui-fs-sm); color: var(--m50ui-on-surface);
    background: var(--m50ui-surface); border-top: 1px solid var(--m50ui-border);
}

.m50-kanban { display: flex; gap: var(--m50ui-sp-md); overflow-x: auto; padding: 4px; }
.m50-kanban__column { flex: 0 0 240px; background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); display: flex; flex-direction: column; min-height: 200px; --m50ui-kanban-accent: var(--m50ui-accent-text); }
.m50-kanban__col-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 2px solid var(--m50ui-kanban-accent); }
.m50-kanban__col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m50-kanban__card { padding: 8px 10px; background: rgb(255 255 255 / 0.04); border-radius: var(--m50ui-r-sm); color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-sm); }
.m50-kanban__empty { color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-xs); padding: 8px; text-align: center; opacity: 0.6; }

/* Table — toolbar de filtros + search global */
.m50-table__toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border);
    border-bottom: none;
    border-radius: var(--m50ui-r-md) var(--m50ui-r-md) 0 0;
    flex-wrap: wrap;
}
/* SearchField (Design System, catálogo): campo + lupa + limpar. A busca rápida da tabela e a busca nos filhos da árvore usam
   o mesmo desenho. Cresce no espaço livre da barra (o "Buscar em {nome}" não corta) e nunca passa da largura da tela. */
.m50-search-field,
.m50-table__search { display: inline-flex; align-items: center; gap: 6px; background: var(--m50ui-bg); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); padding: 4px 8px; flex: 1 1 16rem; min-width: min(100%, 240px); max-width: 40rem; }
.m50-search-field:focus-within,
.m50-table__search:focus-within { border-color: var(--m50ui-focus-ring); box-shadow: 0 0 0 3px rgb(0 229 255 / 0.15); }
.m50-search-field__input,
.m50-table__search-input { background: transparent; border: none; outline: none; color: var(--m50ui-on-bg); font: inherit; flex: 1; min-width: 0; }
.m50-search-field__input::-webkit-search-cancel-button { display: none; }   /* o "limpar" é o do componente */
.m50-search-field__limpar,
.m50-table__search-clear { background: transparent; border: none; color: var(--m50ui-on-surface); cursor: pointer; padding: 0 4px; font-size: 16px; line-height: 1; min-width: 24px; min-height: 24px; }
.m50-search-field__icone { display: inline-flex; color: var(--m50ui-on-surface); }
.m50-table__filter-badge { display: inline-flex; align-items: center; gap: 6px; }

/* Table — filter dropdown por coluna */
.m50-table__th-content { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.m50-table__filter-btn { background: transparent; border: none; color: var(--m50ui-on-surface); cursor: pointer; font-size: 10px; padding: 2px 4px; border-radius: var(--m50ui-r-sm); }
.m50-table__filter-btn:hover { background: rgb(0 229 255 / 0.1); color: var(--m50ui-accent-text); }
.m50-table__filter-btn--active { color: var(--m50ui-accent-text); background: rgb(0 229 255 / 0.08); }
.m50-table__filter-panel {
    position: absolute; top: 100%; left: 0; z-index: 20;
    background: var(--m50ui-surface);
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md);
    padding: 12px;
    min-width: 220px;
    box-shadow: var(--m50ui-shadow-lg);
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px;
}
.m50-table__filter-texto { display: flex; flex-direction: column; gap: 4px; }
.m50-table__filter-range { display: flex; gap: 4px; }
.m50-table__filter-range .m50-input { flex: 1; min-width: 0; }
.m50-table__filter-checkboxes { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.m50-table__filter-bool { display: flex; flex-direction: column; gap: 4px; }
.m50-table__filter-actions { display: flex; justify-content: flex-end; gap: 4px; padding-top: 4px; border-top: 1px solid var(--m50ui-border); margin-top: 4px; }

/* Table — linhas interativas (row click) */
.m50-table__row--interactive { cursor: pointer; }
.m50-table__row--interactive:hover td { background: rgb(0 229 255 / 0.05); }
.m50-table__row--selected td { background: rgb(0 229 255 / 0.10); }
.m50-table__row--selected:hover td { background: rgb(0 229 255 / 0.14); }
.m50-table__select-cell { width: 40px; text-align: center; }
.m50-table__select-cell .m50-checkbox { vertical-align: middle; }
.m50-table__selection-badge { display: inline-flex; align-items: center; gap: 6px; }
.m50-table__export { display: inline-flex; gap: 4px; margin-left: auto; }
.m50-table__sort {
    background: transparent; border: none; color: var(--m50ui-on-bg);
    cursor: pointer; font: inherit; font-weight: var(--m50ui-fw-semibold);
    padding: 2px 6px; border-radius: var(--m50ui-r-sm);
    display: inline-flex; align-items: center; gap: 4px;
    transition: background 120ms ease, color 120ms ease;
}
.m50-table__sort:hover {
    color: var(--m50ui-accent-text);
    background: rgb(0 229 255 / 0.12);
}
.m50-table__sort:focus { outline: none; }
.m50-table__sort:focus-visible {
    outline: 2px solid var(--m50ui-focus-ring);
    outline-offset: 1px;
}

/* Edição inline */
.m50-table__add { margin-left: 8px; }
.m50-table__actions-cell { text-align: right; white-space: nowrap; width: 90px; }
.m50-table__action {
    background: transparent; border: 1px solid transparent; color: var(--m50ui-on-bg);
    cursor: pointer; padding: 2px 6px; border-radius: var(--m50ui-r-sm); font-size: 1em;
    margin-left: 2px;
}
.m50-table__action:hover { background: rgb(0 229 255 / 0.10); border-color: var(--m50ui-border); }
.m50-table__action--ok:hover { color: #4caf50; border-color: #4caf50; }
.m50-table__action--cancel:hover { color: #ff9800; border-color: #ff9800; }
.m50-table__action--danger:hover { color: #f44336; border-color: #f44336; }
.m50-table__cell--editing { padding: 2px 4px !important; background: rgb(0 229 255 / 0.06); }
.m50-table__edit-input { width: 100%; min-width: 0; padding: 2px 6px; font-size: 0.95em; }
.m50-table__row--editing td { background: rgb(255 193 7 / 0.06); }
.m50-table__row--new td { background: rgb(76 175 80 / 0.08); border-top: 2px dashed rgb(76 175 80 / 0.4); }

/* Templates / Expand */
.m50-table__expand-cell { width: 32px; text-align: center; }
.m50-table__expand-btn {
    background: transparent; border: none; color: var(--m50ui-on-bg);
    cursor: pointer; padding: 2px 6px; font-size: 0.85em;
}
.m50-table__expand-btn:hover { color: var(--m50ui-accent-text); }
.m50-table__row--expanded td { background: rgb(0 229 255 / 0.04); }
.m50-table__expanded-cell { padding: 12px 16px !important; border-top: 1px dashed var(--m50ui-border); }
.m50-table__footer { padding: 8px 12px; border-top: 1px solid var(--m50ui-border); }

/* Layout dinâmico */
.m50-table--compact th, .m50-table--compact td { padding: 2px 6px; font-size: 0.9em; }
.m50-table--comfortable th, .m50-table--comfortable td { padding: 12px 16px; line-height: 1.6; }
.m50-table__th--draggable { cursor: grab; }
.m50-table__th--draggable:active { cursor: grabbing; }
.m50-table__columns-menu { position: relative; display: inline-block; }
.m50-table__columns-menu-panel {
    position: absolute; top: 100%; right: 0; z-index: 50;
    background: var(--m50ui-surface); border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md); padding: 8px 10px; min-width: 180px;
    box-shadow: var(--m50ui-shadow-md);
    display: flex; flex-direction: column; gap: 6px;
}

/* Row DnD */
.m50-table__row--drag-over td { box-shadow: inset 0 -2px 0 var(--m50ui-accent-text); }
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }

/* Keyboard navigation */
.m50-table:focus { outline: 2px solid var(--m50ui-focus-ring); outline-offset: -2px; }
.m50-table__cell--focused { outline: 2px solid var(--m50ui-accent-text); outline-offset: -2px; position: relative; z-index: 1; }

/* Virtualização (sticky thead + scroll; Blazor <Virtualize> ativa via Control.Virtualization) */
.m50-table-wrap--virtualized { max-height: 540px; overflow-y: auto; position: relative; }
.m50-table-wrap--virtualized thead th { position: sticky; top: 0; background: var(--m50ui-surface); z-index: 5; }

/* Real-time: linha alterada externamente (flash temporário) */
@keyframes m50-row-flash {
    0%   { background: rgb(255 235 59 / 0.28); box-shadow: inset 3px 0 0 #ffc107; }
    60%  { background: rgb(255 235 59 / 0.18); box-shadow: inset 3px 0 0 #ffc107; }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.m50-table__row--changed td { animation: m50-row-flash 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .m50-table__row--changed td { animation: none; background: rgb(255 235 59 / 0.18); }
}

/* Grouping + agregações */
.m50-table__group-header td {
    background: rgb(0 229 255 / 0.10); cursor: pointer;
    font-weight: var(--m50ui-fw-semibold);
}
.m50-table__group-header:hover td { background: rgb(0 229 255 / 0.16); }
.m50-table__group-toggle { display: inline-block; width: 1.2em; }
.m50-table__group-total td {
    background: rgb(255 255 255 / 0.04); font-style: italic;
    border-top: 1px dashed var(--m50ui-border);
}
.m50-table__grand-total td {
    background: rgb(0 229 255 / 0.08); font-weight: var(--m50ui-fw-bold);
    border-top: 2px solid var(--m50ui-border);
}

/* ============================================================
   EditableHost — edição in-place em Display controls
   ============================================================ */
.m50-editable { position: relative; display: inline-block; }
.m50-editable--available {
    cursor: text;
    border-radius: var(--m50ui-r-sm);
    padding: 1px 4px;
    transition: background-color 120ms, outline-color 120ms;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.m50-editable--available:hover {
    background: rgb(0 229 255 / 0.06);
    outline: 1px dashed var(--m50ui-border);
    outline-offset: 2px;
}
.m50-editable--available:focus-visible {
    outline: 2px solid var(--m50ui-focus-ring);
    outline-offset: 2px;
}

.m50-editable__icon {
    position: absolute;
    top: 0; right: -22px;
    width: 18px; height: 18px;
    background: transparent;
    border: none;
    color: var(--m50ui-on-surface);
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms;
    font-size: 12px;
    padding: 0;
    border-radius: var(--m50ui-r-sm);
}
.m50-editable__icon:hover { background: rgb(0 229 255 / 0.12); color: var(--m50ui-accent-text); }
.m50-editable--available:hover .m50-editable__icon,
.m50-editable--available:focus-within .m50-editable__icon { opacity: 1; }

.m50-editable--editing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.m50-editable__commit,
.m50-editable__cancel {
    width: 28px; height: 28px;
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-sm);
    background: var(--m50ui-surface);
    color: var(--m50ui-on-bg);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.m50-editable__commit { color: var(--m50ui-success); border-color: var(--m50ui-success); }
.m50-editable__commit:hover { background: var(--m50ui-success); color: var(--m50ui-on-success); }
.m50-editable__cancel { color: var(--m50ui-danger); border-color: var(--m50ui-danger); }
.m50-editable__cancel:hover { background: var(--m50ui-danger); color: var(--m50ui-on-danger); }

.m50-editable__error {
    flex-basis: 100%;
    color: var(--m50ui-danger);
    font-size: var(--m50ui-fs-xs);
    margin-top: 2px;
}

/* Mobile/touch: ícone sempre visível (hover não funciona em touch puro) */
@media (hover: none) and (pointer: coarse) {
    .m50-editable__icon { opacity: 1; }
    .m50-editable--available { padding: 4px 8px; }
    .m50-editable--available:hover {
        background: transparent;
        outline: none;
    }
}

/* Kanban — drag and drop visual feedback */
.m50-kanban__card[draggable="true"] { cursor: grab; }
.m50-kanban__card[draggable="true"]:active { cursor: grabbing; }
.m50-kanban__card--dragging { opacity: 0.4; }
.m50-kanban__column--drop-target { outline: 2px dashed var(--m50ui-accent-text); outline-offset: -2px; background: rgb(0 229 255 / 0.05); }

/* Tree — drag and drop visual feedback */
.m50-tree__row { user-select: none; }
.m50-tree__row[draggable="true"] { cursor: grab; }
.m50-tree__row[draggable="true"]:active { cursor: grabbing; }
.m50-tree__row--dragging { opacity: 0.45; }
.m50-tree__row--drop-before { box-shadow: inset 0 2px 0 0 var(--m50ui-accent-text); }
.m50-tree__row--drop-after  { box-shadow: inset 0 -2px 0 0 var(--m50ui-accent-text); }
.m50-tree__row--drop-inside { background: rgb(0 229 255 / 0.12); outline: 1px dashed var(--m50ui-accent-text); outline-offset: -2px; border-radius: var(--m50ui-r-sm); }
.m50-tree__leaf { user-select: none; }

/* ============================================================
   Tabs / Accordion / Wizard / Modal / Drawer
   ============================================================ */
.m50-tabs__bar { display: flex; gap: 4px; border-bottom: 1px solid var(--m50ui-border); }
.m50-tabs--bottom .m50-tabs__bar { order: 2; border-top: 1px solid var(--m50ui-border); border-bottom: none; }
.m50-tabs--left, .m50-tabs--right { display: flex; }
.m50-tabs--left .m50-tabs__bar { flex-direction: column; border-right: 1px solid var(--m50ui-border); border-bottom: none; }
.m50-tabs__tab { background: transparent; border: none; padding: 8px 14px; color: var(--m50ui-on-surface); cursor: pointer; font: inherit; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.m50-tabs__tab--active { color: var(--m50ui-accent-text); border-bottom-color: var(--m50ui-accent-text); }
.m50-tabs__panel { padding: var(--m50ui-sp-md) 0; }

.m50-accordion { display: flex; flex-direction: column; gap: 4px; }
.m50-accordion__item { background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); overflow: hidden; }
.m50-accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: transparent; border: none; color: var(--m50ui-on-bg); cursor: pointer; font: inherit; font-weight: var(--m50ui-fw-semibold); }
.m50-accordion__header:hover { background: rgb(255 255 255 / 0.03); }
.m50-accordion__body { padding: 0 14px 14px; }

.m50-wizard { display: flex; flex-direction: column; gap: var(--m50ui-sp-md); }
.m50-wizard__steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; align-items: center; }
.m50-wizard__step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: var(--m50ui-fs-sm); }
.m50-wizard__step--complete { background: var(--m50ui-success); color: var(--m50ui-on-success); }
.m50-wizard__step--current  { background: var(--m50ui-accent-text); color: var(--m50ui-bg); }
.m50-wizard__step--pending  { background: var(--m50ui-border); color: var(--m50ui-on-surface); }
.m50-wizard__marker { width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 0.2); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--m50ui-fw-bold); font-size: var(--m50ui-fs-xs); }
.m50-wizard__content { padding: var(--m50ui-sp-md); background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); min-height: 120px; }
.m50-wizard__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Modal sempre no centro da área VISÍVEL (Design System §12.6): o fundo ocupa a altura real da janela (dvh desconta barras
   do navegador e teclado do celular) e a caixa nunca passa dela; se ainda assim crescer, o fundo rola em vez de cortar. */
.m50-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; box-sizing: border-box; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: rgb(0 0 0 / 0.55); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal, 1002); }
.m50-modal { margin: auto; background: var(--m50ui-surface); border-radius: var(--m50ui-r-lg); border: 1px solid var(--m50ui-border); max-width: 90vw; max-height: 90vh; max-height: calc(100dvh - 32px); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--m50ui-shadow-lg); }
.m50-modal--small      { width: 360px; }
.m50-modal--medium     { width: 560px; }
.m50-modal--large      { width: 800px; }
.m50-modal--extralarge { width: 1100px; }
.m50-modal--fullscreen { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
.m50-modal-backdrop:has(> .m50-modal--fullscreen) { padding: 0; }
.m50-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--m50ui-border); }
.m50-modal__title  { margin: 0; font-size: var(--m50ui-fs-lg); color: var(--m50ui-on-bg); }
.m50-modal__close  { background: transparent; border: none; color: var(--m50ui-on-surface); font-size: 24px; cursor: pointer; line-height: 1; }
.m50-modal__body   { padding: 16px; overflow-y: auto; }

.m50-drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); z-index: 999; }
.m50-drawer { position: absolute; background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); box-shadow: var(--m50ui-shadow-lg); display: flex; flex-direction: column; }
.m50-drawer--left   { top: 0; bottom: 0; left: 0; }
.m50-drawer--right  { top: 0; bottom: 0; right: 0; }
.m50-drawer--top    { top: 0; left: 0; right: 0; }
.m50-drawer--bottom { bottom: 0; left: 0; right: 0; }
.m50-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--m50ui-border); }
.m50-drawer__title  { margin: 0; font-size: var(--m50ui-fs-lg); color: var(--m50ui-on-bg); }
.m50-drawer__close  { background: transparent; border: none; color: var(--m50ui-on-surface); font-size: 24px; cursor: pointer; line-height: 1; }
.m50-drawer__body   { padding: 16px; overflow-y: auto; flex: 1; }

/* ============================================================
   ContextMenu / Toolbar
   ============================================================ */
.m50-menu { background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); padding: 4px; display: inline-flex; flex-direction: column; min-width: 200px; box-shadow: var(--m50ui-shadow-md); }
.m50-menu__item { width: 100%; background: transparent; border: none; padding: 8px 12px; text-align: left; color: var(--m50ui-on-bg); cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: var(--m50ui-r-sm); font: inherit; }
.m50-menu__item:hover:not(:disabled) { background: rgb(255 255 255 / 0.06); }
.m50-menu__item:focus-visible { background: rgb(255 255 255 / 0.06); outline: 2px solid var(--m50ui-accent-text); outline-offset: -2px; } /* teclado: o item focado se vê (WCAG 2.4.7) */
.m50-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
.m50-menu__label { flex: 1; }
.m50-menu__shortcut { background: rgb(255 255 255 / 0.05); padding: 1px 6px; border-radius: 4px; font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }
.m50-menu__caret { color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-xs); }
.m50-menu__divider { border: none; border-top: 1px solid var(--m50ui-border); margin: 4px 0; }

/* Menu de contexto oficial (ContextMenu com "Aberto", Docs/PLANO_TELA_DOS_GERENCIADORES.md §6D): flutua na janela, acima até do
   modal (pode abrir de dentro de um). A camada pega o clique fora para fechar; no computador ela é transparente. */
.m50-menu-camada { position: fixed; inset: 0; z-index: calc(var(--z-modal, 1002) + 1); }
.m50-menu--contexto { position: fixed; top: 0; left: 0; max-height: calc(100dvh - 16px); max-width: min(22rem, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; }
/* Nasce invisível e aparece já no lugar (o JS posiciona e marca "pronto"): sem piscar no canto da tela. */
.m50-menu--contexto:not(.m50-menu--pronto) { visibility: hidden; }
.m50-menu__item--perigo { color: var(--m50ui-danger, #ef4444); }
.m50-menu__titulo,
.m50-menu__cancelar { display: none; }
/* Toque longo abre o menu do elemento: o navegador não mostra o "copiar/compartilhar" dele por cima. */
[data-m50-contexto] { -webkit-touch-callout: none; }

/* Folha inferior (celular ou toque): encosta embaixo, comandos de 48 px, o de perigo separado no fim, "Cancelar" à vista. */
.m50-menu-camada--folha { display: flex; align-items: flex-end; background: rgb(0 0 0 / 0.45); }
.m50-menu--folha { position: static; width: 100%; max-width: none; max-height: 80dvh; min-width: 0; box-sizing: border-box; border-radius: var(--m50ui-r-lg) var(--m50ui-r-lg) 0 0; border-bottom: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
.m50-menu--folha .m50-menu__titulo { display: block; padding: 8px 12px 10px; color: var(--m50ui-on-bg-muted); font-size: var(--m50ui-fs-sm); font-weight: var(--m50ui-fw-semibold); border-bottom: 1px solid var(--m50ui-border); margin-bottom: 4px; overflow-wrap: anywhere; }
.m50-menu--folha .m50-menu__item { min-height: 48px; font-size: var(--m50ui-fs-md); }
.m50-menu--folha .m50-menu__shortcut { display: none; }
.m50-menu--folha .m50-menu__cancelar { display: flex; justify-content: center; margin-top: 4px; border-top: 1px solid var(--m50ui-border); border-radius: 0; color: var(--m50ui-on-bg); font-weight: var(--m50ui-fw-semibold); }
@media (prefers-reduced-motion: no-preference) {
    .m50-menu--folha { animation: m50-folha-sobe var(--m50-duration-fast, 150ms) ease-out; }
}
@keyframes m50-folha-sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modal com PresentationHint = Sheet: no celular, folha inferior (encosta embaixo, cantos de cima arredondados); no computador,
   o modal de sempre, no centro da área visível (DS §12.6). */
@media (max-width: 640px) {
    .m50-modal-backdrop--folha { align-items: flex-end; padding: 0; }
    .m50-modal--folha { width: 100%; max-width: none; max-height: 85dvh; margin: 0; border-radius: var(--m50ui-r-lg) var(--m50ui-r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .m50-modal--folha { animation: m50-folha-sobe var(--m50-duration-fast, 150ms) ease-out; }
}

.m50-toolbar { display: inline-flex; gap: 4px; padding: 4px; background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); align-items: center; }
.m50-toolbar--vertical { flex-direction: column; align-items: stretch; }

/* ============================================================
   Toast / Breadcrumb / Pagination / StepIndicator
   ============================================================ */
.m50-toast {
    min-width: 220px; max-width: 360px;
    padding: 10px 14px; border-radius: var(--m50ui-r-md);
    background: var(--m50ui-surface); border: 1px solid var(--m50ui-border);
    box-shadow: var(--m50ui-shadow-lg); color: var(--m50ui-on-bg);
}
.m50-toast--info    { border-left: 4px solid var(--m50ui-info); }
.m50-toast--success { border-left: 4px solid var(--m50ui-success); }
.m50-toast--warning { border-left: 4px solid var(--m50ui-warning); }
.m50-toast--danger  { border-left: 4px solid var(--m50ui-danger); }
.m50-toast__title { display: block; color: var(--m50ui-on-bg); margin-bottom: 2px; }
.m50-toast__message { color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-sm); }

.m50-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--m50ui-fs-sm); color: var(--m50ui-on-surface); }
.m50-breadcrumb a { color: var(--m50ui-accent-text); text-decoration: none; }
.m50-breadcrumb a:hover { text-decoration: underline; }
.m50-breadcrumb__item { display: inline-flex; align-items: center; gap: 4px; }
.m50-breadcrumb__item--current { color: var(--m50ui-on-bg); font-weight: var(--m50ui-fw-semibold); }
.m50-breadcrumb__sep { padding: 0 4px; color: var(--m50ui-on-surface); }

.m50-pagination { display: inline-flex; align-items: center; gap: 4px; font-size: var(--m50ui-fs-sm); color: var(--m50ui-on-bg); flex-wrap: wrap; }
.m50-pagination__btn { min-width: 32px; min-height: 32px; padding: 4px 8px; background: transparent; border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-sm); color: var(--m50ui-on-bg); cursor: pointer; font: inherit; }
.m50-pagination__btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.05); }
.m50-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.m50-pagination__btn--active { background: var(--m50ui-accent-text); color: var(--m50ui-bg); border-color: var(--m50ui-accent-text); }
.m50-pagination__ellipsis { padding: 0 4px; color: var(--m50ui-on-surface); }
.m50-pagination__pagesize select { background: var(--m50ui-surface); color: var(--m50ui-on-bg); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-sm); padding: 2px 6px; }
.m50-pagination__info { margin-left: 8px; color: var(--m50ui-on-surface); }

.m50-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.m50-steps--vertical { flex-direction: column; }
.m50-steps__item { display: flex; align-items: flex-start; gap: 8px; }
.m50-steps__marker { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--m50ui-fw-bold); font-size: var(--m50ui-fs-sm); background: var(--m50ui-border); color: var(--m50ui-on-surface); }
.m50-steps__item--complete .m50-steps__marker { background: var(--m50ui-success); color: var(--m50ui-on-success); }
.m50-steps__item--current  .m50-steps__marker { background: var(--m50ui-accent-text); color: var(--m50ui-bg); }
.m50-steps__body { display: flex; flex-direction: column; gap: 2px; }
.m50-steps__label { color: var(--m50ui-on-bg); font-size: var(--m50ui-fs-sm); }
.m50-steps__desc { color: var(--m50ui-on-surface); font-size: var(--m50ui-fs-xs); }

/* ===== Tree editável (colunas, edição in-place, ações, teclado) ===== */
.m50-tree-host { position: relative; }
.m50-tree__principal { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.m50-tree__label { overflow-wrap: break-word; min-width: 0; }
.m50-tree__row--colunas,
.m50-tree__cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(var(--m50-tree-colunas, 0), minmax(4.5rem, 9rem)) calc(var(--m50-tree-acoes, 0) * 34px);
    align-items: center;
    column-gap: 12px;
}
.m50-tree__cabecalho { padding: 6px 9px; font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); border-bottom: 1px solid var(--m50ui-border); }
.m50-tree__col { min-width: 0; overflow-wrap: anywhere; }
.m50-tree__col--num { text-align: right; font-variant-numeric: tabular-nums; }
.m50-tree__acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; position: relative; }
.m50-tree__acao { min-width: 32px; min-height: 32px; }
.m50-tree__row:focus-visible { outline: 2px solid var(--m50ui-accent-text); outline-offset: -2px; }
.m50-tree__row--selecionado { background: rgb(0 229 255 / 0.08); }
.m50-tree__row--apagado .m50-tree__label,
.m50-tree__row--apagado .m50-tree__col { color: var(--m50ui-on-surface); opacity: 0.7; }
.m50-tree-host--arrastando .m50-tree__row > * { pointer-events: none; }
.m50-tree__row--drop-recusado { background: rgb(239 68 68 / 0.10); outline: 1px dashed var(--m50ui-danger, #ef4444); outline-offset: -2px; cursor: not-allowed; }
.m50-tree__edicao { min-height: 32px; padding: 2px 8px; width: 100%; max-width: 28rem; }
.m50-tree__edicao--erro { border-color: var(--m50ui-danger, #ef4444); }
.m50-tree__erro { font-size: var(--m50ui-fs-xs); color: var(--m50ui-danger, #ef4444); padding-bottom: 4px; }
/* LazyLoad: "Carregando…" e o erro com "Tentar de novo" no lugar dos filhos do nó aberto */
.m50-tree__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; padding-bottom: 4px; padding-right: 8px; font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }
.m50-tree__estado--erro > span { color: var(--m50ui-danger, #ef4444); overflow-wrap: anywhere; }
/* Buscar nos filhos: a caixinha no topo dos filhos do nó (SearchField). */
.m50-tree__busca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; padding-bottom: 4px; padding-right: 8px; }
.m50-tree__busca .m50-search-field { flex: 1 1 14rem; min-width: 0; max-width: 28rem; }
.m50-tree__buscando { display: inline-flex; align-items: center; gap: 6px; font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }
.m50-tree__salvando { font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); white-space: nowrap; }
.m50-tree__menu {
    position: absolute; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: 4px; min-width: 14rem;
    background: var(--m50ui-surface); border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); box-shadow: var(--m50ui-shadow-lg);
}
.m50-tree__menu-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 6px 10px;
    background: transparent; border: 0; border-radius: var(--m50ui-r-sm); color: var(--m50ui-on-bg); font: inherit; text-align: left; cursor: pointer;
}
.m50-tree__menu-item:hover, .m50-tree__menu-item:focus-visible { background: rgb(255 255 255 / 0.06); outline: 2px solid var(--m50ui-accent-text); outline-offset: -2px; }
.m50-tree__menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.m50-tree__menu-item--perigo { color: var(--m50ui-danger, #ef4444); }
.m50-tree__menu-item kbd { font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }
.m50-tree__anuncio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
    .m50-tree__cabecalho { display: none; }
    .m50-tree__row--colunas { display: flex; column-gap: 8px; }
    .m50-tree__row--colunas .m50-tree__principal { flex: 1 1 0; min-width: 0; }
    .m50-tree__row--colunas .m50-tree__col,
    .m50-tree__row--colunas .m50-tree__acoes { flex: 0 0 auto; }
    .m50-tree__row--colunas .m50-tree__col { font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface); }
    .m50-tree__col--opcional { display: none; }
    .m50-tree__acao { min-width: 44px; min-height: 44px; }
    .m50-tree__menu-item kbd { display: none; }   /* atalhos de teclado não servem no celular */
}

/* ===== DateRange (intervalo de datas: gatilho + painel com atalhos, calendário e campos) ===== */
.m50-daterange { position: relative; min-width: 0; }
.m50-daterange__gatilho {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--m50ui-sp-sm);
    min-height: 44px; min-width: 15rem; cursor: pointer; text-align: left; font: inherit;
}
.m50-daterange__gatilho:focus-visible { outline: 2px solid var(--m50ui-accent-text); outline-offset: 2px; }
.m50-daterange__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m50-daterange__icone { flex: 0 0 auto; color: var(--m50ui-on-surface-muted); }
.m50-daterange__fundo { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.m50-daterange__painel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1001;
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "atalhos calendario" "atalhos campos" "rodape rodape";
    gap: var(--m50ui-sp-sm) var(--m50ui-sp-md); padding: var(--m50ui-sp-md);
    width: max-content; max-width: calc(100vw - 32px);
    background: var(--m50ui-surface); color: var(--m50ui-on-surface);
    border: 1px solid var(--m50ui-border); border-radius: var(--m50ui-r-md); box-shadow: var(--m50ui-shadow-lg);
}
.m50-daterange__atalhos { grid-area: atalhos; display: flex; flex-direction: column; gap: 2px; padding-right: var(--m50ui-sp-md); border-right: 1px solid var(--m50ui-border); }
.m50-daterange__atalho {
    min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--m50ui-r-sm); background: transparent;
    color: var(--m50ui-on-surface); font: inherit; font-size: var(--m50ui-fs-sm); text-align: left; cursor: pointer; white-space: nowrap;
}
.m50-daterange__atalho:hover { background: color-mix(in srgb, var(--m50ui-on-surface) 8%, transparent); }
.m50-daterange__atalho[aria-pressed="true"] { background: color-mix(in srgb, var(--m50ui-accent-text) 18%, transparent); color: var(--m50ui-on-surface); font-weight: var(--m50ui-fw-semibold); box-shadow: inset 3px 0 0 var(--m50ui-accent-text); }
.m50-daterange__atalho:focus-visible, .m50-daterange__dia:focus-visible { outline: 2px solid var(--m50ui-accent-text); outline-offset: 1px; }
.m50-daterange__calendario { grid-area: calendario; position: relative; }
.m50-daterange__navegacao { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; pointer-events: none; }
.m50-daterange__seta { pointer-events: auto; min-width: 36px; min-height: 36px; font-size: var(--m50ui-fs-lg); line-height: 1; }
.m50-daterange__meses { display: flex; gap: var(--m50ui-sp-lg); }
.m50-daterange__mes { border-collapse: separate; border-spacing: 0; }
.m50-daterange__nome-do-mes { caption-side: top; height: 36px; line-height: 36px; padding: 0 40px; text-align: center; color: var(--m50ui-on-surface); font-weight: var(--m50ui-fw-semibold); }
.m50-daterange__mes th { width: 36px; padding: 2px 0; font-size: var(--m50ui-fs-xs); font-weight: var(--m50ui-fw-regular); color: var(--m50ui-on-surface-muted); }
.m50-daterange__celula, .m50-daterange__vazio { padding: 1px 0; text-align: center; }
.m50-daterange__celula--dentro { background: color-mix(in srgb, var(--m50ui-accent-text) 20%, transparent); }
.m50-daterange__celula--inicio { background: linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--m50ui-accent-text) 20%, transparent) 50%); }
.m50-daterange__celula--fim { background: linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--m50ui-accent-text) 20%, transparent) 50%); }
.m50-daterange__dia {
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: var(--m50ui-on-surface); font: inherit; font-size: var(--m50ui-fs-sm); font-variant-numeric: tabular-nums; cursor: pointer;
}
.m50-daterange__dia:hover { background: color-mix(in srgb, var(--m50ui-on-surface) 10%, transparent); }
.m50-daterange__dia--hoje { box-shadow: inset 0 0 0 1px var(--m50ui-accent-text); }
.m50-daterange__dia--ponta, .m50-daterange__dia--ponta:hover { background: var(--m50ui-accent-text); color: var(--m50ui-bg); font-weight: var(--m50ui-fw-bold); }
.m50-daterange__dia[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.m50-daterange__campos { grid-area: campos; display: flex; gap: var(--m50ui-sp-sm); }
.m50-daterange__campo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; font-size: var(--m50ui-fs-xs); color: var(--m50ui-on-surface-muted); }
.m50-daterange__rodape { grid-area: rodape; display: flex; align-items: center; justify-content: space-between; gap: var(--m50ui-sp-md); flex-wrap: wrap;
    padding-top: var(--m50ui-sp-sm); border-top: 1px solid var(--m50ui-border); }
.m50-daterange__resumo { font-size: var(--m50ui-fs-sm); color: var(--m50ui-on-surface-muted); }
.m50-daterange__botoes { display: inline-flex; gap: var(--m50ui-sp-sm); }
@media (max-width: 640px) {
    /* celular: folha inferior com atalhos e a roda de data nativa (UX Design §16), sem a grade do calendário */
    .m50-daterange__gatilho { width: 100%; min-width: 0; }
    .m50-daterange__fundo { background: color-mix(in srgb, var(--m50ui-bg) 60%, transparent); }
    .m50-daterange__painel {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; overflow-y: auto;
        grid-template-columns: 1fr; grid-template-areas: "atalhos" "campos" "rodape";
        border-radius: var(--m50ui-r-lg) var(--m50ui-r-lg) 0 0;
    }
    .m50-daterange__calendario { display: none; }
    .m50-daterange__atalhos { flex-direction: row; flex-wrap: wrap; padding-right: 0; border-right: 0; }
    .m50-daterange__atalho { min-height: 44px; border: 1px solid var(--m50ui-border); }
    .m50-daterange__campos .m50-input { min-height: 44px; }
    .m50-daterange__botoes { width: 100%; }
    .m50-daterange__botoes .m50-button { flex: 1 1 0; min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
    .m50-daterange__painel { animation: m50-daterange-entra 120ms ease-out; }
    @keyframes m50-daterange-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Campo de arquivo oficial (m50-input type=file): o botão nativo do navegador vira o botão secundário do tema — sem ele,
   sai cinza-claro do sistema sobre o tema escuro (DS §12, contraste §15.3). */
.m50-input[type="file"] {
    padding-block: calc(4px * var(--m50ui-ds, 1));
    cursor: pointer;
}

.m50-input[type="file"]::file-selector-button {
    margin-inline-end: var(--m50ui-sp-sm);
    padding: calc(6px * var(--m50ui-ds, 1)) calc(14px * var(--m50ui-ds, 1));
    border: 0;
    border-radius: var(--m50ui-r-sm);
    background: var(--m50ui-secondary);
    color: var(--m50ui-on-secondary);
    font: inherit;
    font-size: var(--m50ui-fs-sm);
    cursor: pointer;
}

.m50-input[type="file"]::file-selector-button:hover {
    filter: brightness(1.1);
}

.m50-input[type="file"]:focus-visible {
    outline: 2px solid var(--m50ui-focus-ring);
    outline-offset: 2px;
}

/* Painéis da página (PaineisDaPagina — Docs/PLANO_TELA_DOS_GERENCIADORES.md §6H). O principal fica na largura da folha (21 cm);
   quando cada margem tem pelo menos 15 rem, os painéis moram nelas (esquerda, direita) e na faixa embaixo do principal. Com
   menos espaço, tudo desce para baixo do principal, na ordem. Em tela cheia, o principal ocupa tudo e os painéis somem. */
.m50-paineis {
    container: m50-paineis / inline-size;
    padding: var(--m50ui-sp-sm);
    box-sizing: border-box;
}

.m50-paineis__grade {
    display: grid;
    gap: var(--m50ui-sp-md);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "principal" "esquerda" "direita" "embaixo";
    max-width: 21cm;
    margin-inline: auto;
}

.m50-paineis__principal {
    grid-area: principal;
    min-width: 0;
    padding: var(--m50ui-sp-md);
    border-radius: var(--m50ui-r-md);
    background: var(--m50ui-surface);
    color: var(--m50ui-on-surface);
}

.m50-paineis__barra {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--m50ui-sp-xs);
    margin-bottom: var(--m50ui-sp-xs);
}

.m50-paineis__lado {
    display: flex;
    flex-direction: column;
    gap: var(--m50ui-sp-md);
    min-width: 0;
}

.m50-paineis__lado--esquerda { grid-area: esquerda; }
.m50-paineis__lado--direita { grid-area: direita; }
.m50-paineis__lado--embaixo { grid-area: embaixo; }

@container m50-paineis (min-width: 82rem) {
    .m50-paineis__grade {
        max-width: none;
        grid-template-columns: minmax(15rem, 1fr) minmax(0, 21cm) minmax(15rem, 1fr);
        grid-template-areas: "esquerda principal direita" "esquerda embaixo direita";
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    /* As colunas das margens acompanham a rolagem e rolam por dentro quando passam da altura da janela. */
    .m50-paineis__lado--esquerda,
    .m50-paineis__lado--direita {
        position: sticky;
        top: var(--m50ui-sp-sm);
        max-height: calc(100dvh - 12rem);
        overflow-y: auto;
    }
}

.m50-paineis--tela-cheia .m50-paineis__grade {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "principal";
}

.m50-painel {
    min-width: 0;
    border: 1px solid var(--m50ui-border);
    border-radius: var(--m50ui-r-md);
    background: var(--m50ui-surface);
    color: var(--m50ui-on-surface);
}

.m50-painel__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--m50ui-sp-xs);
    padding: var(--m50ui-sp-xs);
    border-bottom: 1px solid var(--m50ui-border);
}

.m50-painel--recolhido .m50-painel__cabecalho { border-bottom: 0; }

.m50-painel__titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--m50ui-fs-sm);
    font-weight: var(--m50ui-fw-semibold);
}

.m50-painel__alternar,
.m50-painel__opcoes {
    border: 0;
    border-radius: var(--m50ui-r-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-height: 32px;
}

.m50-painel__alternar {
    display: flex;
    align-items: center;
    gap: var(--m50ui-sp-xs);
    width: 100%;
    padding: 0 var(--m50ui-sp-xs);
    text-align: left;
}

.m50-painel__opcoes {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
}

.m50-painel__alternar:hover,
.m50-painel__opcoes:hover,
.m50-painel__opcoes[aria-expanded="true"] {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.m50-painel__alternar:focus-visible,
.m50-painel__opcoes:focus-visible {
    outline: 2px solid var(--m50ui-focus-ring);
    outline-offset: 2px;
}

.m50-painel__seta { display: inline-block; transition: transform .15s ease; }
.m50-painel--recolhido .m50-painel__seta { transform: rotate(-90deg); }

.m50-painel__corpo {
    padding: var(--m50ui-sp-sm);
    max-height: 28rem;
    overflow: auto;
    font-size: var(--m50ui-fs-sm);
    overflow-wrap: anywhere;
}

.m50-paineis__anuncio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .m50-painel__seta { transition: none; }
}

/* O que o painel segue ("segue: nó focado", "fixado em …") — GP-K. */
.m50-painel__conexao {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--m50ui-fs-xs);
    font-weight: var(--m50ui-fw-regular);
    color: var(--m50ui-on-surface-muted);
}