/*
 * assets/css/flow_ui_extras.css — componentes de UI do Flow À FRENTE do canonical (plano 0085 — sem "#" aqui: o teste de hex lê o arquivo inteiro).
 *
 * Drawer acoplado (assets/js/drawers.js, opts.docked), seletor de ícone (window.IconPicker) e
 * grade de dados (window.DataGrid), os dois em assets/js/flow_ui_extras.js. Vocabulário visual
 * só do ui_03 (u3-control, u3-select-panel, u3-segment, u3-icon-btn, u3-chip); classes próprias
 * só .ip-* / .dg / .dg-tone / .dg-wide / .dg-count / .dg-bar (as três últimas do plano 0091: modo largo,
 * contador e barra da grade) e o atributo aside[data-drawer-docked]. Cor só por token — sem hex; a única
 * exceção é o branco literal da 1ª coluna fixa do modo largo, que espelha o bg-white do corpo do modal.
 * ui.css e design-system.css são verbatim do canonical e não mudam por causa disto.
 */

/* ── Drawer acoplado ───────────────────────────────────────────────────────────────────────────
 * 35 < 40 (menu do celular) < 50 (#defaultModal) < 70/80 (fundo e drawer comum) < 90 (#confirmModal)
 * < 2000 (painéis). O topo e a altura vêm inline do drawers.js; quem afasta o conteúdo é a página,
 * por --drawer-docked-*. */
aside[data-drawer-docked] {
    z-index: 35;
    box-shadow: inset 1px 0 0 var(--line);
}

/* ── Seletor de ícone (window.IconPicker) ──────────────────────────────────────────────────────
 * Casca = u3-select-panel + u3-select-search + u3-segment; o botão é um u3-control. */
.ip-panel { width: min(22rem, calc(100vw - 1rem)); }
.ip-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; max-height: 15rem; overflow-y: auto; }
.ip-grid button { display: grid; place-items: center; height: 2.5rem; border-radius: var(--r-control); color: rgb(var(--slate-600)); }
.ip-grid button:hover { background: rgb(var(--slate-100)); color: rgb(var(--ink)); }
.ip-grid button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ip-grid button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-contrast); }
.ip-grid svg { width: 1.125rem; height: 1.125rem; }
.dark .ip-grid button { color: rgb(var(--slate-300)); }
.dark .ip-grid button:hover { background: rgb(var(--slate-700)); color: rgb(var(--slate-50)); }
.dark .ip-grid button[aria-selected="true"] { background: color-mix(in srgb, var(--brand-primary) 22%, transparent); color: rgb(var(--slate-50)); }
.ip-grid .ip-off { opacity: 0.4; cursor: not-allowed; }
.ip-foot { margin-top: 0.5rem; font-size: 0.6875rem; color: rgb(var(--slate-450)); }
.dark .ip-foot { color: rgb(var(--slate-400)); }
/* Inválido: o runtime marca o hidden (App.applyFieldErrors); o botão logo depois espelha. */
input.is-invalid + .ip-trigger { border-color: var(--danger-base); }

/* ── Grade de dados (window.DataGrid) ──────────────────────────────────────────────────────────
 * As cores do tom vêm do contêiner (toneColors → --dg-tone-*); os padrões vivem SÓ como reserva
 * do var() abaixo — declarar --dg-tone-* aqui venceria o valor herdado do contêiner. */
.dg { width: 100%; border-collapse: separate; border-spacing: 0.25rem; }
.dg th { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--slate-450)); text-align: left; padding: 0 0.25rem; }
.dg td { padding: 0; }
.dg .u3-control { height: 2.25rem; font-size: 0.8125rem; padding: 0 0.75rem; min-width: 6rem; }
.dg-tone { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); }
.dg-tone[data-tone="accent"] { background: var(--dg-tone-accent, var(--brand-primary)); }
.dg-tone[data-tone="secondary"] { background: var(--dg-tone-secondary, var(--cat-2)); }

/* Modo largo (DataGrid wide, plano 0091): o invólucro rola nos dois sentidos com o cabeçalho e a 1ª coluna
 * fixos; a célula de texto é textarea que quebra linha. O fundo da 1ª coluna espelha o corpo do modal
 * (bg-white / dark:bg-slate-900 do shell_modals.php) — o design-system.css não tem token de branco. */
.dg-wide { max-height: min(64vh, 40rem); overflow: auto; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.dg-wide .dg { border-spacing: 0; width: max-content; min-width: 100%; }
.dg-wide .dg th, .dg-wide .dg td { padding: .3rem .25rem; vertical-align: top; min-width: 10rem; max-width: 24rem; }
.dg-wide .dg td:last-child, .dg-wide .dg th:last-child { min-width: 0; }
.dg-wide .dg thead th { position: sticky; top: 0; z-index: 2; background: rgb(var(--slate-100)); }
.dark .dg-wide .dg thead th { background: rgb(var(--slate-800)); }
.dg-wide .dg tbody td:first-child { position: sticky; left: 0; z-index: 1; background: rgb(255 255 255); }
.dark .dg-wide .dg tbody td:first-child { background: rgb(var(--slate-900)); }
.dg-wide .dg thead th:first-child { position: sticky; left: 0; z-index: 3; }
.dg-wide .dg textarea { height: auto; min-height: 2.25rem; padding: .5rem .75rem; line-height: 1.35; resize: none; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; display: block; width: 100%; }
.dg-count { font-size: .75rem; color: rgb(var(--slate-450)); }
.dark .dg-count { color: rgb(var(--slate-400)); }

/* O ícone de MARCA da rede nas caixas de canal (`social_icon_svg()`/`socialSvg()`): cinza desmarcado, a cor da rede
   marcado. Veio de `content_plan_editor.css` em 15/10/2026 (plano 0139): as Pautas e o Planejador usam o mesmo campo. */
.cpe-ch-ico { flex: none; color: rgb(var(--slate-400)); transition: color var(--dur-fast) var(--ease-out); }
input:checked + .cpe-ch-ico { color: var(--ch, rgb(var(--ink))); }
.dark input:checked + .cpe-ch-ico { color: var(--ch, rgb(var(--slate-100))); }
.dark input:checked + .cpe-ch-ico[data-dark-ink] { color: rgb(var(--slate-100)); }