/*
 * Sistema visual semântico global do Meu Palcco.
 * Unifica ícones, estados, badges e navegação sem acoplar regras de negócio
 * aos módulos. Este arquivo deve ser carregado por último.
 */
:root {
    --ui-primary: #6d28d9;
    --ui-primary-strong: #4c1d95;
    --ui-primary-soft: #f3edff;
    --ui-primary-border: rgba(109, 40, 217, .22);

    --ui-success: #067647;
    --ui-success-soft: #ecfdf3;
    --ui-success-border: rgba(6, 118, 71, .22);

    --ui-warning: #b54708;
    --ui-warning-soft: #fff7ed;
    --ui-warning-border: rgba(181, 71, 8, .22);

    --ui-danger: #b42318;
    --ui-danger-soft: #fff1f0;
    --ui-danger-border: rgba(180, 35, 24, .22);

    --ui-info: #175cd3;
    --ui-info-soft: #eff8ff;
    --ui-info-border: rgba(23, 92, 211, .20);

    --ui-neutral: #5f566b;
    --ui-neutral-soft: #f5f3f7;
    --ui-neutral-border: rgba(95, 86, 107, .18);

    --ui-icon-size: 36px;
    --ui-icon-radius: 11px;
    --ui-status-radius: 999px;
}

/* Status: mesma geometria e tipografia em todas as páginas. */
:is(
    .ui-status,
    .finance-status,
    .service-status,
    .account-status,
    .cash-flow-badge,
    .contact-event-status,
    .event-history-chip,
    .event-history-readonly-badge,
    .status-pill,
    .probability-pill,
    .kanban-badge,
    .system-report-type
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid var(--ui-neutral-border);
    border-radius: var(--ui-status-radius);
    background: var(--ui-neutral-soft);
    color: var(--ui-neutral);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .005em;
    white-space: nowrap;
}

.ui-status--primary,
.ui-status--progress,
.status-pill,
.probability-pill,
.kanban-badge,
.system-report-type,
.event-history-readonly-badge {
    color: var(--ui-primary-strong) !important;
    background: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary-border) !important;
}

.ui-status--success,
.finance-status--paid,
.service-status--active,
.account-status--active,
.cash-flow-badge--entry,
.status-won,
.status-converted {
    color: var(--ui-success) !important;
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success-border) !important;
}

.ui-status--warning,
.finance-status--pending,
.finance-status--warning,
.kanban-badge--warning {
    color: var(--ui-warning) !important;
    background: var(--ui-warning-soft) !important;
    border-color: var(--ui-warning-border) !important;
}

.ui-status--danger,
.cash-flow-badge--output,
.status-lost,
.status-cancelled {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-soft) !important;
    border-color: var(--ui-danger-border) !important;
}

.ui-status--info {
    color: var(--ui-info) !important;
    background: var(--ui-info-soft) !important;
    border-color: var(--ui-info-border) !important;
}

.ui-status--neutral,
.service-status--inactive,
.account-status--archived {
    color: var(--ui-neutral) !important;
    background: var(--ui-neutral-soft) !important;
    border-color: var(--ui-neutral-border) !important;
}

/* Status dos eventos vinculados. */
.contact-event-card--venda-realizada .contact-event-status,
.contact-event-card--evento-realizado .contact-event-status {
    color: var(--ui-success) !important;
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success-border) !important;
}

.contact-event-card--venda-nao-realizada .contact-event-status,
.contact-event-card--evento-perdido .contact-event-status,
.contact-event-card--cancelado .contact-event-status {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-soft) !important;
    border-color: var(--ui-danger-border) !important;
}

.contact-event-card--abordagem .contact-event-status,
.contact-event-card--follow-up .contact-event-status,
.contact-event-card--acompanhamento .contact-event-status {
    color: var(--ui-warning) !important;
    background: var(--ui-warning-soft) !important;
    border-color: var(--ui-warning-border) !important;
}

.contact-event-card--negociacao .contact-event-status,
.contact-event-card--nova-empresa .contact-event-status,
.contact-event-card--novo-contato .contact-event-status,
.contact-event-card--pre-reserva .contact-event-status {
    color: var(--ui-primary-strong) !important;
    background: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary-border) !important;
}

/* Status do histórico de eventos. */
.event-history-item--realized-card .event-history-chip,
.event-history-item--done .event-history-chip {
    color: var(--ui-success) !important;
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success-border) !important;
}

.event-history-item--cancelled .event-history-chip,
.event-history-item--deleted .event-history-chip {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-soft) !important;
    border-color: var(--ui-danger-border) !important;
}

.event-history-item--schedule-card .event-history-chip,
.event-history-item--open.event-history-item--schedule-card .event-history-chip {
    color: var(--ui-warning) !important;
    background: var(--ui-warning-soft) !important;
    border-color: var(--ui-warning-border) !important;
}

/* Reportes internos: estado visível e padronizado. */
.system-report-status {
    margin-left: 7px;
    vertical-align: middle;
}
.system-report-card--aberto { border-left: 4px solid var(--ui-warning); }
.system-report-card--em_analise { border-left: 4px solid var(--ui-info); }
.system-report-card--corrigido { border-left: 4px solid var(--ui-success); }
.system-report-card--arquivado { border-left: 4px solid var(--ui-neutral); }

/* Ícones: mesma dimensão, borda, cor e interação em todo o sistema. */
:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .event-history-icon-action,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .pix-qr-button,
    .screen-remove-action,
    .report-widget__button,
    .reminder-button,
    .report-panel__close,
    .iframe-modal__close,
    .pix-qr-modal__close,
    [data-modal-close].icon-action
) {
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    min-width: var(--ui-icon-size);
    min-height: var(--ui-icon-size);
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-primary-border);
    border-radius: var(--ui-icon-radius);
    color: var(--ui-primary-strong);
    background: #fff;
    box-shadow: 0 5px 14px rgba(34, 25, 47, .07);
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .event-history-icon-action,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .pix-qr-button,
    .screen-remove-action,
    .report-widget__button,
    .reminder-button,
    .report-panel__close,
    .iframe-modal__close,
    .pix-qr-modal__close,
    [data-modal-close].icon-action
) :is(svg, .ui-button-icon) {
    width: 18px;
    height: 18px;
    display: block;
    color: inherit;
    opacity: 1;
    pointer-events: none;
}

:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .event-history-icon-action,
    .pix-qr-button,
    .report-widget__button,
    .reminder-button
):hover,
:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .event-history-icon-action,
    .pix-qr-button,
    .report-widget__button,
    .reminder-button
):focus-visible {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(109, 40, 217, .12), 0 10px 22px rgba(76, 29, 149, .18);
    outline: none;
    transform: translateY(-1px);
}

:is(.icon-action.success, .event-history-icon-action--success) {
    color: var(--ui-success) !important;
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success-border) !important;
}
:is(.icon-action.success, .event-history-icon-action--success):hover,
:is(.icon-action.success, .event-history-icon-action--success):focus-visible {
    color: #fff !important;
    background: var(--ui-success) !important;
    border-color: var(--ui-success) !important;
}

:is(.icon-action.warning, .account-action--archive) {
    color: var(--ui-warning) !important;
    background: var(--ui-warning-soft) !important;
    border-color: var(--ui-warning-border) !important;
}
:is(.icon-action.warning, .account-action--archive):hover,
:is(.icon-action.warning, .account-action--archive):focus-visible {
    color: #fff !important;
    background: var(--ui-warning) !important;
    border-color: var(--ui-warning) !important;
}

:is(
    .icon-action.danger,
    .account-action--delete,
    .kanban-delete-icon,
    .event-history-icon-action--danger,
    .event-history-icon-action--cancel,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .screen-remove-action
) {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-soft) !important;
    border-color: var(--ui-danger-border) !important;
}
:is(
    .icon-action.danger,
    .account-action--delete,
    .kanban-delete-icon,
    .event-history-icon-action--danger,
    .event-history-icon-action--cancel,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .screen-remove-action
):hover,
:is(
    .icon-action.danger,
    .account-action--delete,
    .kanban-delete-icon,
    .event-history-icon-action--danger,
    .event-history-icon-action--cancel,
    .event-history-file-delete,
    .provider-multiselect__remove,
    .crm-attachment-list__remove,
    .reminder-dismiss,
    .screen-remove-action
):focus-visible {
    color: #fff !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

:is(button, a)[aria-disabled="true"],
:is(button, a):disabled {
    cursor: not-allowed;
}
:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .event-history-icon-action
):disabled,
:is(
    .icon-action,
    .account-action,
    .kanban-edit-icon,
    .kanban-delete-icon,
    .event-history-icon-action
)[aria-disabled="true"] {
    color: #8b8498 !important;
    background: #f5f3f7 !important;
    border-color: #e5e0e9 !important;
    box-shadow: none !important;
    opacity: .68;
    transform: none !important;
}

/* Sidebar: um único padrão para ícones e indicação da página atual. */
.side-nav a {
    position: relative;
    border: 1px solid transparent;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.side-nav .nav-icon {
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.side-nav a:hover,
.side-nav a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .10);
    transform: none;
    outline: none;
}
.side-nav a.is-active,
.side-nav a[aria-current="page"] {
    color: #fff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-weight: 700;
}
.side-nav .nav-icon {
    position: relative;
}
.side-nav a.is-active .nav-icon,
.side-nav a[aria-current="page"] .nav-icon {
    color: #6d28d9;
    background: #f7f3ff;
    border-color: transparent;
    box-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 78% 72%, 78% 100%, 0 100%);
}
.side-nav a.is-active .nav-icon::after,
.side-nav a[aria-current="page"] .nav-icon::after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 4px;
    width: 12px;
    height: 2px;
    background: #f97316;
    pointer-events: none;
}

/* Ícones do topo seguem o mesmo padrão sem interferir no botão textual Sair. */
.topbar-actions :is(.reminder-button, .report-widget__button) {
    color: var(--ui-primary-strong);
    background: #fff;
    border-color: var(--ui-primary-border);
}

@media (max-width: 760px) {
    :root { --ui-icon-size: 40px; }
    :is(
        .ui-status,
        .finance-status,
        .service-status,
        .account-status,
        .cash-flow-badge,
        .contact-event-status,
        .event-history-chip,
        .kanban-badge
    ) {
        white-space: normal;
        text-align: center;
    }
}

/* Dashboard usa as mesmas cores semânticas dos demais módulos. */
.dashboard-command-kpi--success { --kpi-color: var(--ui-success) !important; }
.dashboard-command-kpi--expense { --kpi-color: var(--ui-danger) !important; }
.dashboard-command-kpi--pending { --kpi-color: var(--ui-warning) !important; }
.dashboard-command-kpi--events { --kpi-color: var(--ui-primary) !important; }
.dashboard-command-result.is-positive {
    color: var(--ui-success);
    background: var(--ui-success-soft);
    border-color: var(--ui-success-border);
}
.dashboard-command-result.is-negative {
    color: var(--ui-danger);
    background: var(--ui-danger-soft);
    border-color: var(--ui-danger-border);
}
.finance-compact-row--success b,
.dashboard-final-finance-row--success b,
.finance-row.success .finance-bar span { background: var(--ui-success) !important; }
.finance-compact-row--danger b,
.dashboard-final-finance-row--danger b,
.finance-row.danger .finance-bar span { background: var(--ui-danger) !important; }
.attention-compact-card--danger::before,
.dashboard-final-attention-item--danger::before,
.attention-card-danger .attention-bar i { background: var(--ui-danger) !important; }
.attention-compact-card--warning::before,
.dashboard-final-attention-item--warning::before,
.attention-card-warning .attention-bar i { background: var(--ui-warning) !important; }

/* Confirmações destrutivas não usam a mesma cor de ações primárias. */
.action-confirm-icon {
    color: var(--ui-danger) !important;
    background: var(--ui-danger-soft) !important;
    border: 1px solid var(--ui-danger-border);
}
.action-confirm-submit {
    color: #fff;
    background: var(--ui-danger) !important;
    box-shadow: 0 12px 28px rgba(180, 35, 24, .18) !important;
}
.action-confirm-submit:hover,
.action-confirm-submit:focus-visible {
    background: #912018 !important;
}

/* Etapas do Kanban recebem a mesma paleta semântica dos badges. */
.kanban-column {
    --kanban-tone: var(--ui-neutral);
    --kanban-tone-soft: var(--ui-neutral-soft);
    --kanban-tone-border: var(--ui-neutral-border);
}
.kanban-column--tone-primary {
    --kanban-tone: var(--ui-primary);
    --kanban-tone-soft: var(--ui-primary-soft);
    --kanban-tone-border: var(--ui-primary-border);
}
.kanban-column--tone-info {
    --kanban-tone: var(--ui-info);
    --kanban-tone-soft: var(--ui-info-soft);
    --kanban-tone-border: var(--ui-info-border);
}
.kanban-column--tone-warning {
    --kanban-tone: var(--ui-warning);
    --kanban-tone-soft: var(--ui-warning-soft);
    --kanban-tone-border: var(--ui-warning-border);
}
.kanban-column--tone-success {
    --kanban-tone: var(--ui-success);
    --kanban-tone-soft: var(--ui-success-soft);
    --kanban-tone-border: var(--ui-success-border);
}
.kanban-column--tone-danger {
    --kanban-tone: var(--ui-danger);
    --kanban-tone-soft: var(--ui-danger-soft);
    --kanban-tone-border: var(--ui-danger-border);
}
.kanban-column .kanban-column-header {
    position: relative;
    color: var(--kanban-tone);
    background: var(--kanban-tone-soft);
    border-bottom-color: var(--kanban-tone-border);
}
.kanban-column .kanban-column-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--kanban-tone);
}
.kanban-column .kanban-column-header h2 { color: inherit; }
.kanban-column .kanban-column-header small { color: color-mix(in srgb, var(--kanban-tone) 78%, #4b4355); }