/* Telas da administração (guia 2.30). Cores só por token; alturas pela escala --size-*. A cor de um produto é dado
   (como a de uma tag) e chega no style. As prévias e os quadros dos logos mostram o outro tema redefinindo os tokens
   só dentro deles (screens/admin.js, TEMAS). */

/* ---------- listas ---------- */
.dt .adm-fill{width:100%;max-width:0}   /* a coluna principal pega a sobra da linha e corta o texto */
a.link-cell{text-decoration:none}
.adm-picon{width:24px;height:24px;border-radius:var(--radius-item);object-fit:contain;flex-shrink:0}
.adm-picon.vazio{display:inline-grid;place-items:center;background:var(--muted);color:var(--muted-foreground)}
.adm-prods{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.adm-prods .adm-picon{width:20px;height:20px;border-radius:4px}
.adm-mais{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:999px;background:var(--muted);color:var(--foreground);font-size:12px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums}
.adm-badges{display:flex;flex-wrap:wrap;gap:4px}
@container (min-width:40rem){.adm-badges{flex-wrap:nowrap}}   /* com espaço, os papéis numa linha só */
/* amostra de cor de produto: o quadrado de 16px com contorno e o hex em mono */
.adm-cores{display:flex;gap:12px}
.adm-sw{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.adm-sw-c{width:16px;height:16px;border-radius:4px;box-shadow:0 0 0 1px var(--edge);flex-shrink:0}
.adm-sw-v{font-family:var(--font-mono);font-size:12px;line-height:16px}

/* ---------- formulários ---------- */
.adm-ms{display:grid;min-width:0}   /* o seletor múltiplo na largura do campo */
.adm-papeis{display:grid;gap:12px}
.adm-papeis .check{align-items:flex-start}
.adm-papeis .ck{margin-top:2px}
.adm-papel{display:grid}
.adm-papel small{font-size:12px;line-height:16px;color:var(--muted-foreground)}
.adm-sk-campo{height:var(--size-default)}

/* cor: o seletor nativo (um quadrado na altura padrão) e o hex */
.adm-cor{display:flex;gap:8px;min-width:0}
.adm-cor-hex{flex:1;font-family:var(--font-mono)}
.adm-cor-sel{flex:0 0 auto;width:var(--size-default);height:var(--size-default);padding:3px;border:1px solid var(--input);border-radius:var(--radius-control);background:var(--input-bg);cursor:pointer}
.adm-cor-sel::-webkit-color-swatch-wrapper{padding:0}
.adm-cor-sel::-webkit-color-swatch{border:0;border-radius:4px}
.adm-cor-sel::-moz-color-swatch{border:0;border-radius:4px}
.adm-cor-sel:focus-visible{border-color:var(--ring)}
/* sem cor (a secundária é opcional): o quadrado vazio, cortado, em vez do preto que o seletor nativo mostraria */
.adm-cor-sel.vazio::-webkit-color-swatch{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--muted-foreground) 50%,transparent calc(50% + 1px))!important}
.adm-cor-sel.vazio::-moz-color-swatch{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--muted-foreground) 50%,transparent calc(50% + 1px))!important}

/* logos: um quadro por versão, no fundo do tema dela */
/* claro e escuro lado a lado: 1 coluna no estreito, 2 (logo · ícone em pares), 4 com espaço */
.adm-logos-wrap{container-type:inline-size}
.adm-logos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:26rem){.adm-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:52rem){.adm-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.adm-logo{display:grid;gap:8px;align-content:start;min-width:0}
.adm-tile,.adm-sk-tile{height:96px}
.adm-tile{display:grid;place-items:center;padding:12px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--background);color:var(--muted-foreground);overflow:hidden}
.adm-tile img{max-width:100%;max-height:40px;object-fit:contain}
.adm-tile.icone img{width:40px;height:40px}
.adm-tile-vazio{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px}
.adm-err{color:var(--danger)}

/* prévia do que a primária pinta: o item ativo do menu, o botão principal e um link, em cada tema */
.adm-pv-wrap{display:grid;gap:8px;margin-top:24px}
.adm-pv-wrap h3{font-size:14px;line-height:20px}
.adm-pv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.adm-pv-tile{--edge:color-mix(in srgb,var(--foreground) 10%,transparent);display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--background);color:var(--foreground)}
.adm-pv-tile figcaption{color:var(--muted-foreground)}
.adm-pv-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:12px;align-items:center}
.adm-pv-nav{display:grid;gap:2px;padding:6px;background:var(--sidebar);border:1px solid var(--border);border-radius:var(--radius-control)}
.adm-pv-main{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px;background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control)}
.adm-pv-link{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.adm-pv .btn,.adm-pv .sb-item{cursor:default}
.adm-pv .sb-item:hover{background:transparent}
.adm-pv .sb-item[aria-current=page]:hover{background:var(--primary)}