/*
 * Contraste e reconhecimento de controles com ícones.
 * Centraliza o tratamento visual de botões exclusivamente icônicos sem
 * alterar a semântica ou a cor dos botões textuais do sistema.
 */

:where(
    .iframe-modal__close,
    .pix-qr-modal__close,
    .report-panel__close,
    .modal-header .icon-action,
    .import-modal__header .icon-action,
    [data-modal-close].icon-action
) {
    color: var(--primary-dark, #4c1d95) !important;
    background: #f7f2ff !important;
    border: 1px solid rgba(109, 40, 217, .28) !important;
    box-shadow: 0 5px 14px rgba(76, 29, 149, .10);
    opacity: 1;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

:where(
    .iframe-modal__close,
    .pix-qr-modal__close,
    .report-panel__close,
    .modal-header .icon-action,
    .import-modal__header .icon-action,
    [data-modal-close].icon-action
):hover,
:where(
    .iframe-modal__close,
    .pix-qr-modal__close,
    .report-panel__close,
    .modal-header .icon-action,
    .import-modal__header .icon-action,
    [data-modal-close].icon-action
):focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent, #f97316), var(--primary, #6d28d9)) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 4px rgba(109, 40, 217, .12), 0 10px 24px rgba(76, 29, 149, .20);
    outline: none;
    transform: translateY(-1px);
}

:where(
    .iframe-modal__close,
    .pix-qr-modal__close,
    .report-panel__close,
    .modal-header .icon-action,
    .import-modal__header .icon-action,
    [data-modal-close].icon-action
) :where(svg, .ui-button-icon) {
    color: inherit !important;
    opacity: 1 !important;
}

/* Ações icônicas em superfícies claras precisam parecer controles clicáveis. */
:where(
    .icon-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .account-action,
    .event-history-icon-action,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .pix-qr-button,
    .screen-remove-action
) {
    opacity: 1;
    border-style: solid;
    box-shadow: 0 4px 12px rgba(34, 25, 47, .07);
}

:where(
    .icon-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .account-action,
    .event-history-icon-action,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .pix-qr-button,
    .screen-remove-action
) :where(svg, .ui-button-icon) {
    color: inherit;
    opacity: 1;
}

:where(.icon-action, .kanban-edit-icon, .account-action, .pix-qr-button) {
    border-color: rgba(109, 40, 217, .22);
}

:where(.kanban-delete-icon, .event-history-file-delete, .provider-multiselect__remove, .crm-attachment-list__remove, .reminder-dismiss, .screen-remove-action) {
    border-color: rgba(180, 35, 24, .24);
}

:where(
    .icon-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .account-action,
    .event-history-icon-action,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .pix-qr-button,
    .screen-remove-action
):focus-visible {
    outline: 3px solid rgba(109, 40, 217, .20);
    outline-offset: 2px;
}

/* SVGs devem acompanhar a cor do botão, inclusive os de preenchimento. */
:where(button, a)[class*="icon"] > svg,
:where(button, a)[class*="action"] > svg,
:where(button, a) > .ui-button-icon > svg {
    color: inherit;
    opacity: 1;
}

/* Ícones desabilitados continuam legíveis, mas não parecem ativos. */
:where(button, a)[class*="icon"]:disabled,
:where(button, a)[class*="action"]:disabled,
:where(button, a)[aria-disabled="true"] {
    opacity: .56;
    box-shadow: none;
}

/* O controle de fechar do modal de Eventos é sempre visível sobre o cabeçalho claro. */
.iframe-modal--event-create .iframe-modal__close {
    color: #4c1d95 !important;
    background: #f4edff !important;
    border-color: rgba(76, 29, 149, .34) !important;
}

.iframe-modal--event-create .iframe-modal__close:hover,
.iframe-modal--event-create .iframe-modal__close:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #f97316, #6d28d9) !important;
    border-color: transparent !important;
}

/* Controles sobre a sidebar escura mantêm contraste inverso. */
.sidebar :where(.sidebar-toggle, .nav-icon),
.sidebar :where(.sidebar-toggle, .nav-icon) svg {
    color: rgba(255, 255, 255, .92);
}

.sidebar .sidebar-toggle {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
}

.sidebar .sidebar-toggle:hover,
.sidebar .sidebar-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .36);
    outline: 3px solid rgba(249, 115, 22, .28);
    outline-offset: 2px;
}