/* =========================================================================
* micro-interactions.css — Admin V2
*
* Sistema compartilhado de microinterações para o admin v2.
* Todas as classes usam o prefixo `mi-` (micro-interactions).
*
* Conteúdo:
* 1. Tokens (variáveis CSS de duração/easing)
* 2. Botões: mi-btn-elevated, mi-btn-elevated-lift, mi-btn-quiet, mi-pressable, mi-icon-tone (stroke/fill SVG)
* 3. Animações de ícone: spin, rise, tilt, sway, squeeze
* (dentro de botão via .mi-btn-icon E standalone via .mi-icon-standalone)
* 4. Featured icon (container redondo do modal): 5 variantes
* 5. Modal animado: container, overlay, content, __content-swap
* 6. Container expansível: mi-collapsible (grid trick)
* 7. Checkbox v2 animado: mi-checkbox + keyframe mi-checkbox-mark
* 8. Chosen-drop v2: mi-chosen (override do Chosen.js)
* 9. Action dropdown ⋮: mi-row-actions-trigger / mi-row-actions-dropdown
* 9b.Bootstrap button dropdown: mi-bs-dropdown + chevron 0→180°
* 10. Tooltip animation (override Bootstrap)
* 11. Reduced motion fallback (obrigatório)
*
* Como usar nas views v2:
* echo $this->Html->css('v2/micro-interactions');
* ========================================================================= */
/* -------------------------------------------------------------------------
* 1. Tokens
* ------------------------------------------------------------------------- */
:root {
--mi-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
--mi-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--mi-ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
--mi-ease-bouncy: cubic-bezier(0.34, 1.2, 0.64, 1);
--mi-ease-checkbox: cubic-bezier(0.33, 1, 0.64, 1);
--mi-duration-fast: 0.15s;
--mi-duration-base: 0.22s;
--mi-duration-modal: 0.28s;
/* Use o token JS via `getComputedStyle(...).getPropertyValue('--mi-modal-close-ms')` */
--mi-modal-close-ms: 260;
--mi-brand: #FF2B34;
--mi-focus-ring: 0 0 0 2px rgba(255, 43, 52, 0.35);
}
/* -------------------------------------------------------------------------
* 2. Botões
*
* .mi-btn-elevated — padrão v2: hover = `background-color` mais escuro (0.18s),
* sem subir; clique = scale(0.97) + inset shadow.
*
* .mi-btn-elevated-lift — modificador (com `mi-btn-elevated`): hover sobe 2px.
* Usar em botões só com ícone (`mi-btn-icon`) ou se o usuário pedir.
*
* .mi-btn-quiet — botão DISCRETO, não levanta, só muda background no hover.
* Usar em containers apertados (toolbars, barras inline).
*
* .mi-pressable — utilitário standalone, só o feedback de pressionamento.
* Aplicar em links/cards/tags que devem ter feedback de clique.
* ------------------------------------------------------------------------- */
.mi-btn-elevated {
transition:
transform var(--mi-duration-base) var(--mi-ease-standard),
box-shadow var(--mi-duration-base) var(--mi-ease-standard),
background-color 0.18s var(--mi-ease-standard),
border-color 0.18s var(--mi-ease-standard),
color 0.18s var(--mi-ease-standard),
filter var(--mi-duration-fast) ease;
}
.mi-btn-elevated.mi-btn-elevated-lift:hover:not(:active) {
transform: translateY(-2px);
}
.mi-btn-elevated:active,
.mi-btn-elevated:hover:active {
transform: scale(0.97);
box-shadow: inset 0 1px 3px rgba(10, 13, 18, 0.12);
filter: saturate(0.94);
}
.mi-btn-elevated:focus-visible {
outline: 2px solid var(--mi-brand);
outline-offset: 2px;
}
.mi-btn-quiet {
transition:
background 0.18s var(--mi-ease-standard),
background-color 0.18s var(--mi-ease-standard),
color 0.18s var(--mi-ease-standard),
border-color 0.18s var(--mi-ease-standard),
box-shadow var(--mi-duration-base) var(--mi-ease-standard),
transform var(--mi-duration-base) var(--mi-ease-standard),
filter var(--mi-duration-fast) ease;
}
.mi-btn-quiet:hover {
background: #ebebeb;
color: #181d27;
}
.mi-btn-quiet:active,
.mi-btn-quiet:hover:active {
/* Feedback de clique unificado: encolhe (scale 0.97) + afunda (inset shadow)
+ dessatura levemente. O transform garante visibilidade do "press" mesmo
em botões cujo background é fixado com !important (ex: .d_button vermelho
da marca), onde o inset shadow sozinho sumiria. */
transform: scale(0.97);
box-shadow: inset 0 1px 3px rgba(10, 13, 18, 0.12);
filter: saturate(0.92) brightness(0.97);
}
.mi-btn-quiet:focus-visible {
outline: 2px solid var(--mi-brand);
outline-offset: 2px;
}
/*
* .mi-pressable — versão LIMPA (default): só scale + filter.
* Use em links, textos, grupos sem fundo/borda.
* NÃO aplica inset-shadow (que viraria um quadrado
* visível em elementos transparentes).
*
* .mi-pressable-card — adiciona inset-shadow para parecer "afundar".
* Use SOMENTE em cards/containers com background
* sólido e border-radius próprio.
*/
.mi-pressable,
.mi-pressable-card {
transition:
transform var(--mi-duration-base) var(--mi-ease-standard),
box-shadow var(--mi-duration-base) var(--mi-ease-standard),
filter var(--mi-duration-base) var(--mi-ease-standard);
}
.mi-pressable:active,
.mi-pressable:hover:active,
.mi-pressable-card:active,
.mi-pressable-card:hover:active {
transform: scale(0.97);
filter: saturate(0.94);
}
.mi-pressable-card:active,
.mi-pressable-card:hover:active {
box-shadow: inset 0 1px 3px rgba(10, 13, 18, 0.12);
}
/**
* Transição suave em stroke/fill/opacidade de ícones SVG (evita mudança de cor “seca”).
* Use no wrapper do ícone (ex.: headbar sino, links só com SVG).
*/
.mi-icon-tone svg path,
.mi-icon-tone svg circle,
.mi-icon-tone svg line,
.mi-icon-tone svg polyline,
.mi-icon-tone svg polygon,
.mi-icon-tone svg rect,
.mi-icon-tone svg ellipse {
transition:
stroke var(--mi-duration-base) var(--mi-ease-standard),
fill var(--mi-duration-base) var(--mi-ease-standard),
opacity var(--mi-duration-base) var(--mi-ease-standard);
}
/* -------------------------------------------------------------------------
* 3. Animações de ícone
*
* Duas variantes de uso:
* - Dentro de botão:
* - Standalone:
*
* 5 animações pré-definidas:
* mi-icon-spin → girar ida-e-volta (engrenagem, settings)
* mi-icon-rise → subir e voltar (padrão genérico)
* mi-icon-download → descer e voltar (download, exportar)
* mi-icon-tilt → inclinar lateral (editar, lápis)
* mi-icon-sway → balançar leve (sino, tags)
* mi-icon-squeeze → espremer Y (olho, visibility)
* ------------------------------------------------------------------------- */
.mi-btn-icon .fa, .mi-btn-icon svg,
.mi-icon-standalone .fa, .mi-icon-standalone svg,
svg.mi-icon-standalone, i.mi-icon-standalone {
transform-origin: 50% 50%;
transition:
transform var(--mi-duration-base) var(--mi-ease-standard),
color 0.14s ease;
will-change: transform;
}
/* Standalone: ícone "solto", sem background/border. Hover muda cor levemente. */
.mi-icon-standalone {
color: #5a5a5a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Garante que .hidden continua funcionando mesmo com a regra acima carregando depois. */
.mi-icon-standalone.hidden {
display: none;
}
.mi-icon-standalone:hover {
color: #181d27;
}
.mi-icon-standalone:active {
transform: scale(0.93);
}
.mi-icon-standalone:focus-visible {
outline: 2px solid var(--mi-brand);
outline-offset: 2px;
border-radius: 4px;
}
/* As animações abaixo aplicam ao filho (.fa::before / svg) — NUNCA ao próprio
* elemento que carrega `mi-icon-standalone` — para evitar transforms duplicados
* (pai + filho) que faziam o ícone "viajar" fora do eixo.
*
* Caso especial: quando a classe está direto num `