/*
 * Fase 46.0.7 — Fundação de UI/UX e acessibilidade.
 * Camada transversal: tokens, foco, hierarquia, responsividade e componentes base.
 */
:root {
    --app-space-1: .25rem;
    --app-space-2: .5rem;
    --app-space-3: .75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
    --app-space-8: 2rem;
    --app-radius-sm: .375rem;
    --app-radius-md: .625rem;
    --app-radius-lg: .875rem;
    --app-control-height: 2.75rem;
    --app-focus-color: var(--tblr-primary, #206bc4);
    --app-focus-ring: rgba(32, 107, 196, .28);
    --app-text-muted: #52637a;
    --app-border-color: var(--tblr-border-color, #d8dee8);
    --app-surface: var(--tblr-bg-surface, #fff);
    --app-surface-subtle: var(--tblr-bg-surface-secondary, #f6f8fb);
    --app-shadow-sm: 0 1px 2px rgba(24, 36, 51, .04);
}

html { scroll-padding-top: 1rem; }
body {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}
body[data-authenticated="true"] .page-wrapper { min-width: 0; }

/* Navegação por teclado */
.skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    transform: translateY(-180%);
    padding: .75rem 1rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--tblr-body-color, #182433);
    box-shadow: 0 .5rem 1.5rem rgba(24, 36, 51, .22);
    font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--app-focus-color) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-ring) !important;
}

/* Estrutura e hierarquia das páginas */
.page-body {
    padding-block: var(--app-space-6);
}

/* R79 UI corrective — the authenticated workspace owns the full page-wrapper.
 * Vertical rhythm belongs to each page, not to #main-content itself. */
#main-content.page-body {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
#main-content > .app-container {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding-block: 0;
    padding-inline: var(--app-space-4);
}
.app-container { min-width: 0; }
.page-header,
.app-page-header {
    margin: 0 0 var(--app-space-5);
}
.page-header > .row,
.app-page-header > .row {
    row-gap: var(--app-space-3);
}
.page-title {
    display: flex;
    align-items: flex-start;
    gap: var(--app-space-2);
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.page-title .icon { flex: 0 0 auto; margin-top: .08em; }
.page-header .text-muted,
.app-page-header .text-muted {
    max-width: 70ch;
    color: var(--app-text-muted) !important;
}
.page-header .btn-list,
.app-page-header .btn-list {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Controles e ações */
.btn:not(.btn-sm) { min-height: var(--app-control-height); }
.btn-sm { min-height: 2.25rem; }
.btn { gap: .375rem; font-weight: 500; }
.form-control:not(textarea),
.form-select { min-height: var(--app-control-height); }
.form-label { font-weight: 600; color: var(--tblr-body-color, #182433); }
.form-hint, .text-muted { color: var(--app-text-muted) !important; }
.form-check-input { min-width: 1.25rem; min-height: 1.25rem; }

/* Superfícies e cards */
.card {
    border-color: var(--app-border-color);
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-sm);
}
.card-header,
.card-footer { padding: var(--app-space-4) var(--app-space-5); }
.card-title { line-height: 1.3; }
.app-kpi-card { height: 100%; }
.app-kpi-card .card-body { min-height: 7.25rem; }
.app-kpi-card .h1 { margin-bottom: 0 !important; line-height: 1.1; }
.app-filter-bar { background: var(--app-surface); }
.app-filter-grid { display: flex; flex-wrap: wrap; gap: var(--app-space-3); align-items: end; width: 100%; }
.app-filter-grid > * { min-width: min(100%, 11rem); }
.app-filter-grid .app-filter-grow { flex: 1 1 18rem; }

/* Tabelas e ações densas */
.app-table-region,
.table-responsive {
    position: relative;
    max-width: 100%;
    scrollbar-gutter: stable;
}
.app-table-region:focus-visible,
.table-responsive:focus-visible { border-radius: var(--app-radius-sm); }
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table th { white-space: nowrap; font-size: .75rem; letter-spacing: .02em; }
.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    margin: -.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
}
.table-actions .btn,
td .btn-list.flex-nowrap .btn-sm {
    min-width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
}

/* Empty state comum */
.app-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--app-space-2);
    padding: clamp(2rem, 5vw, 4rem) var(--app-space-4);
    color: var(--app-text-muted);
    text-align: center;
}
.app-empty-state .app-empty-state-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--app-surface-subtle);
    font-size: 1.5rem;
}
.app-empty-state strong { color: var(--tblr-body-color, #182433); }

/* Badges não dependem somente de cor: preserva texto e borda */
.badge { border: 1px solid currentColor; font-weight: 600; }

/* Modal e feedback */
.modal-content { border-radius: var(--app-radius-lg); }
.modal-header, .modal-footer { padding: var(--app-space-4) var(--app-space-5); }
.alert[role="alert"] { border-left-width: .25rem; }
.toast-container { pointer-events: none; }
.toast-container .toast { pointer-events: auto; }

/* Sidebar e navegação */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link[aria-current="page"] {
    font-weight: 700;
    background: rgba(255, 255, 255, .09);
}
.navbar-vertical .nav-link { min-height: 2.75rem; }

/* Dashboard */
.app-dashboard-actions { display: flex; flex-wrap: wrap; gap: var(--app-space-2); }
.app-chart-region { position: relative; min-height: 18rem; }

/* Conteúdo somente para leitores de tela sem depender de framework externo */
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 767.98px) {
    .page-body { padding-block: var(--app-space-4); }
    #main-content > .app-container,
    .app-container { padding-inline: var(--app-space-3); }

    .page-header > .row,
    .app-page-header > .row {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
    }
    .page-header .col,
    .page-header .col-auto,
    .app-page-header .col,
    .app-page-header .col-auto {
        width: 100%;
        margin-left: 0 !important;
    }
    .page-header .btn-list,
    .app-page-header .btn-list,
    .app-dashboard-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .page-header .btn-list > *,
    .app-page-header .btn-list > *,
    .app-dashboard-actions > * { width: 100%; justify-content: center; }

    .card-header,
    .card-footer { padding: var(--app-space-4); }
    .app-filter-grid { align-items: stretch; }
    .app-filter-grid > *,
    .app-filter-grid .app-filter-grow { flex: 1 1 100%; width: 100%; max-width: none !important; min-width: 0 !important; }

    .table-responsive table { min-width: 48rem; }
    .app-view--agenda .table-responsive table { min-width: 52rem; }
    .app-view--contacts .table-responsive table { min-width: 68rem; }
    .card-footer.d-flex { flex-wrap: wrap; gap: var(--app-space-3); }
    .card-footer .pagination { margin-left: 0 !important; overflow-x: auto; max-width: 100%; }

    .app-kpi-card .card-body { min-height: 6.5rem; }
    .app-chart-region { min-height: 15rem; }
}

@media (max-width: 575.98px) {
    .page-title { font-size: 1.3rem; }
    .btn-group { display: flex; flex-wrap: wrap; }
    .btn-group > .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea):focus-visible { outline: 2px solid Highlight !important; }
    .badge, .card, .btn, .form-control, .form-select { border-color: CanvasText; }
}

/* Fase 46.0.7.2 — formulários e modais */
.app-form,
.app-modal-form { min-width: 0; }
.app-modal-form { display: block; }
.app-form-feedback {
    margin-bottom: var(--app-space-4);
    border-left-width: .25rem;
}
.form-label.required::after,
.form-label:has(+ :is(input, select, textarea)[required])::after {
    content: " *";
    color: var(--tblr-danger, #d63939);
    font-weight: 700;
}
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--tblr-danger, #d63939);
    background-position: right calc(.375em + .1875rem) center;
}
.form-hint,
.form-text,
.app-field-help {
    display: block;
    margin-top: var(--app-space-1);
    line-height: 1.4;
}
fieldset.app-form-section {
    min-width: 0;
    margin: 0 0 var(--app-space-5);
    padding: 0;
    border: 0;
}
fieldset.app-form-section > legend {
    margin-bottom: var(--app-space-3);
    font-size: 1rem;
    font-weight: 700;
}
.modal[role="dialog"] .modal-content {
    overflow: hidden;
    border: 1px solid var(--app-border-color);
    box-shadow: 0 1.25rem 3rem rgba(24, 36, 51, .22);
}
.modal[role="dialog"] .modal-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
}
.modal[role="dialog"] .modal-body {
    padding: var(--app-space-5);
}
.modal[role="dialog"] .modal-header {
    align-items: flex-start;
    gap: var(--app-space-3);
}
.modal[role="dialog"] .btn-close {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: calc(var(--app-space-2) * -1) calc(var(--app-space-2) * -1) 0 auto;
}
.app-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2);
    background: var(--app-surface);
}
.app-modal-actions .btn:not(.btn-link) {
    min-width: 7rem;
    justify-content: center;
}
.modal-dialog-scrollable .app-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.form-selectgroup-label {
    min-height: var(--app-control-height);
    display: inline-flex;
    align-items: center;
}

@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable {
        width: auto;
        max-width: none;
        min-height: calc(100% - 1rem);
        margin: .5rem;
    }
    .modal-dialog-scrollable { height: calc(100% - 1rem); }
    .modal[role="dialog"] .modal-content { max-height: calc(100dvh - 1rem); }
    .modal[role="dialog"] .modal-header,
    .modal[role="dialog"] .modal-body,
    .modal[role="dialog"] .modal-footer {
        padding-inline: var(--app-space-4);
    }
    .app-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .app-modal-actions > *,
    .app-modal-actions .btn,
    .app-modal-actions .btn-list {
        width: 100%;
        margin-inline: 0 !important;
    }
    .app-modal-actions .btn { justify-content: center; }
    .app-modal-actions .me-auto { order: -1; }
    .modal .input-group {
        flex-wrap: wrap;
        gap: var(--app-space-2);
    }
    .modal .input-group > .form-control,
    .modal .input-group > .form-select,
    .modal .input-group > .flex-grow-1 {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        border-radius: var(--app-radius-sm) !important;
    }
    .modal .input-group > .btn,
    .modal .input-group > .input-group-text {
        border-radius: var(--app-radius-sm) !important;
    }
}

/* Fase 46.0.7.3.1 — Inbox e tabelas responsivas */
.app-table-mobile-tools {
    padding: var(--app-space-3) var(--app-space-4);
    border-top: 1px solid var(--app-border-color);
    background: var(--app-surface-subtle);
}
.inbox-ticket-select {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.inbox-ticket-select:hover { color: inherit; }
.inbox-ticket-select:focus-visible {
    border-radius: var(--app-radius-sm);
}
.inbox-mobile-back { display: none; }
.app-view--inbox .inbox-list-pane,
.app-view--inbox .inbox-conversation-pane { min-width: 0; }
.app-view--inbox .inbox-stats { scrollbar-width: thin; }
.app-view--inbox .inbox-bulk-actions .btn { flex: 0 0 auto; }

@media (max-width: 1199.98px) {
    .app-view--inbox .inbox-list-pane,
    .app-view--inbox .inbox-conversation-pane {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    .app-view--inbox .inbox-conversation-pane { display: none; }
    .app-view--inbox.inbox-has-active-ticket .inbox-list-pane { display: none; }
    .app-view--inbox.inbox-has-active-ticket .inbox-conversation-pane { display: block; }
    .app-view--inbox .inbox-mobile-back { display: inline-flex; }
    .app-view--inbox .chat-card { min-height: calc(100dvh - 8rem); }
}

@media (max-width: 767.98px) {
    .app-table-region:has(.app-table-stack-mobile) {
        overflow: visible;
        border: 0;
        padding: 0 var(--app-space-3) var(--app-space-3);
    }
    .app-table-stack-mobile {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 var(--app-space-3);
        background: transparent;
    }
    .app-table-stack-mobile thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .app-table-stack-mobile tbody,
    .app-table-stack-mobile tr,
    .app-table-stack-mobile td { display: block; width: 100%; }
    .app-table-stack-mobile tbody { border: 0; }
    .app-table-stack-mobile tbody tr:not(.app-table-state-row) {
        overflow: hidden;
        margin-bottom: var(--app-space-3);
        border: 1px solid var(--app-border-color);
        border-radius: var(--app-radius-md);
        background: var(--app-surface);
        box-shadow: var(--app-shadow-sm);
    }
    .app-table-stack-mobile tbody tr:not(.app-table-state-row) td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
        gap: var(--app-space-3);
        align-items: start;
        padding: var(--app-space-3) var(--app-space-4);
        border-bottom: 1px solid var(--app-border-color);
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .app-table-stack-mobile tbody tr:not(.app-table-state-row) td:last-child { border-bottom: 0; }
    .app-table-stack-mobile tbody tr:not(.app-table-state-row) td::before {
        content: attr(data-label);
        color: var(--app-text-muted);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }
    .app-table-stack-mobile .app-table-card-actions .btn-list {
        flex-wrap: wrap !important;
        justify-content: flex-start;
    }
    .app-table-stack-mobile .app-table-card-actions .btn {
        flex: 1 1 8rem;
        min-width: 0;
    }
    .app-table-stack-mobile .app-table-state-row,
    .app-table-stack-mobile .app-table-state-row td {
        display: block;
        width: 100%;
    }
    .app-table-stack-mobile .app-table-state-row td::before { content: none; }
    .app-table-stack-mobile .app-empty-state {
        border: 1px solid var(--app-border-color);
        border-radius: var(--app-radius-md);
        background: var(--app-surface);
    }
    .app-view--inbox .inbox-bulk-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .app-view--inbox .inbox-bulk-actions > small { grid-column: 1 / -1; }
    .app-view--inbox .inbox-bulk-actions .btn { width: 100%; justify-content: center; }
    .app-view--inbox .card-header .btn-list { justify-content: flex-start !important; }
}

/* Fase 46.0.7.4 — áreas administrativas densas */
.app-admin-dense-layout {
    --app-dense-section-gap: var(--app-space-5);
}
.app-section-nav {
    position: sticky;
    top: .5rem;
    z-index: 20;
    display: flex;
    gap: var(--app-space-2);
    align-items: center;
    max-width: 100%;
    margin: 0 0 var(--app-space-5);
    padding: var(--app-space-2);
    overflow-x: auto;
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: color-mix(in srgb, var(--app-surface) 94%, transparent);
    box-shadow: var(--app-shadow-sm);
    backdrop-filter: blur(8px);
    scrollbar-width: thin;
}
.app-section-nav-link,
.app-section-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: var(--app-radius-sm);
    color: var(--tblr-body-color, #182433);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.app-section-nav-link:hover,
.app-section-subnav a:hover { background: var(--app-surface-subtle); }
.app-section-nav-link[aria-current="location"] {
    background: var(--tblr-primary, #206bc4);
    color: #fff;
}
.app-dense-section {
    scroll-margin-top: 5.5rem;
    margin-bottom: var(--app-dense-section-gap);
}
.app-section-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-1);
    margin: calc(-1 * var(--app-space-2)) 0 var(--app-space-4);
    padding: var(--app-space-2);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-subtle);
}
.app-section-subnav a { min-height: 2.25rem; font-size: .8125rem; }
.app-section-block {
    scroll-margin-top: 6rem;
    padding-block: var(--app-space-2);
}
.app-section-block + hr { margin-block: var(--app-space-5); }
.app-dense-card-header {
    flex-wrap: wrap;
    gap: var(--app-space-3);
}
.app-dense-card-header > .ms-auto,
.app-dense-card-header .btn-list.ms-auto { margin-left: auto !important; }
.app-kpi-grid > [class*="col-"] { min-width: 10rem; }
.app-view--operations .card-header .btn-list,
.app-view--operations .app-dense-card-header .btn-list {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.app-view--operations .card-sm .card-body.d-flex {
    flex-wrap: wrap;
    gap: var(--app-space-3);
}
.app-view--operations .card-sm .card-body.d-flex > .ms-auto {
    margin-left: auto !important;
}
.app-view--reports .app-report-list {
    display: grid;
    gap: var(--app-space-3);
}
.app-view--reports .app-report-list > li { min-width: 0; }
.app-view--reports .app-report-list .card { margin: 0; }
.app-view--reports .dropdown-menu { min-width: 13rem; }
.app-period-selector .btn[aria-pressed="true"] { font-weight: 700; }

@media (max-width: 991.98px) {
    .app-section-nav {
        position: relative;
        top: auto;
        margin-inline: calc(-1 * var(--app-space-1));
    }
    .app-view--operations .app-dense-card-header,
    .app-view--operations .d-flex.align-items-center.mb-2,
    .app-view--operations .d-flex.align-items-center.mb-3 {
        align-items: flex-start !important;
    }
    .app-view--operations .app-dense-card-header > .ms-auto,
    .app-view--operations .app-dense-card-header .btn-list.ms-auto,
    .app-view--operations .d-flex.align-items-center > .ms-auto {
        width: 100%;
        margin-left: 0 !important;
    }
    .app-view--operations .app-dense-card-header .btn-list,
    .app-view--operations .d-flex.align-items-center > .btn-list {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .app-section-nav { padding: var(--app-space-1); }
    .app-section-nav-link { min-height: 2.75rem; }
    .app-section-subnav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-section-subnav a {
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
    .app-view--operations .card-header .btn-list,
    .app-view--operations .app-dense-card-header .btn-list,
    .app-view--reports .page-header .btn-list {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .app-view--operations .card-header .btn-list > *,
    .app-view--operations .app-dense-card-header .btn-list > *,
    .app-view--reports .page-header .btn-list > * { width: 100%; }
    .app-view--reports .page-header .btn-group { width: 100%; }
    .app-view--reports .page-header .btn-group > .btn { width: 100%; }
    .app-view--reports .app-report-list .row.align-items-center {
        align-items: flex-start !important;
        row-gap: var(--app-space-2);
    }
    .app-view--reports .app-report-list .col-auto { width: auto; }
    .app-view--admin-dashboard .app-period-selector {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
}

@media (forced-colors: active) {
    .app-section-nav-link[aria-current="location"] {
        border: 2px solid Highlight;
        background: Highlight;
        color: HighlightText;
    }
}

/* Fase 46.0.7.5 — contraste AA, reflow e estados alternativos */
.btn-success {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: #1f7a36;
    --tblr-btn-border-color: #1f7a36;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: #19672e;
    --tblr-btn-hover-border-color: #175f2a;
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: #175f2a;
    --tblr-btn-active-border-color: #155827;
}
.bg-success:not(.avatar),
.badge.bg-success { background-color: #1f7a36 !important; color: #fff !important; }
.btn-warning,
.badge.bg-warning { color: #182433 !important; }

@media (max-width: 720px) {
    .app-section-nav,
    .app-section-subnav,
    .btn-list,
    .app-dashboard-actions { max-width: 100%; }
    .app-admin-dense-layout .card-header,
    .app-admin-dense-layout .card-footer { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto !important; }
    .modal.fade .modal-dialog,
    .collapsing,
    .progress-bar,
    .spinner-border,
    .spinner-grow { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
    :where(.btn, button, input, select, textarea, [role="button"]) {
        border: 1px solid ButtonText !important;
        forced-color-adjust: auto;
    }
    .skip-link { border: 2px solid Highlight; }
}

/* Cores semânticas com contraste mínimo AA sobre superfícies claras. */
.text-success { color: #1f7a36 !important; }
.text-info { color: #176b87 !important; }
.btn-outline-success {
    --tblr-btn-color: #1f7a36;
    --tblr-btn-border-color: #1f7a36;
    --tblr-btn-hover-bg: #1f7a36;
    --tblr-btn-hover-border-color: #1f7a36;
    --tblr-btn-hover-color: #fff;
}
.btn-outline-warning {
    --tblr-btn-color: #805100;
    --tblr-btn-border-color: #9a6200;
    --tblr-btn-hover-bg: #805100;
    --tblr-btn-hover-border-color: #805100;
    --tblr-btn-hover-color: #fff;
}
.btn-outline-info {
    --tblr-btn-color: #176b87;
    --tblr-btn-border-color: #176b87;
    --tblr-btn-hover-bg: #176b87;
    --tblr-btn-hover-border-color: #176b87;
    --tblr-btn-hover-color: #fff;
}
.badge.bg-info { background-color: #176b87 !important; color: #fff !important; }
.bg-success-lt { color: #166534 !important; }
.bg-info-lt { color: #0e5a73 !important; }
.bg-warning-lt { color: #704500 !important; }


/* Fase 46.1.1.1 — contraste semântico AA e evidências visuais neutras */
:root {
    --app-aa-secondary-text: #334155;
    --app-aa-secondary-solid: #4b5563;
    --app-aa-green-text: #14532d;
    --app-aa-purple-text: #5b21b6;
    --app-aa-danger-text: #a11220;
    --app-aa-danger-solid: #c92a2a;
    --app-aa-warning-text: #6b3f00;
    --app-aa-orange-solid-text: #182433;
}

/* Badges claros: preservar a cor semântica com foreground AA. */
.badge.bg-secondary-lt,
.bg-secondary-lt:not(.avatar) {
    color: var(--app-aa-secondary-text) !important;
}
.badge.bg-green-lt,
.bg-green-lt:not(.avatar) {
    color: var(--app-aa-green-text) !important;
}
.badge.bg-purple-lt,
.bg-purple-lt:not(.avatar) {
    color: var(--app-aa-purple-text) !important;
}
.badge.bg-danger-lt,
.bg-danger-lt:not(.avatar) {
    color: var(--app-aa-danger-text) !important;
}

.badge.bg-orange {
    color: var(--app-aa-orange-solid-text) !important;
}

/* Badges e avatares sólidos não podem herdar foreground igual ao fundo. */
.badge.bg-danger {
    background-color: var(--app-aa-danger-solid) !important;
    color: #fff !important;
}
.badge.bg-secondary,
.avatar.bg-secondary {
    background-color: var(--app-aa-secondary-solid) !important;
    color: #fff !important;
}
.avatar.bg-success {
    background-color: #1f7a36 !important;
    color: #fff !important;
}

/* Ações outline e alertas com foreground AA em superfícies claras. */
/* F3C/R69 — todos os alert-info da página de perfil permanecem AA mesmo quando
   o Tabler os renderiza sobre superfície branca. #0e5a73 = ~7.70:1 sobre #fff.
   A classe é deliberadamente escopada ao /profile para não alterar outros módulos. */
.profile-info-alert-aa,
.profile-info-alert-aa .alert-title,
.profile-info-alert-aa strong,
.profile-info-alert-aa i,
.profile-info-alert-aa a,
.notification-critical-recovery-note,
.notification-critical-recovery-note .alert-title,
.notification-critical-recovery-note strong,
.notification-critical-recovery-note i {
    color: #0e5a73 !important;
}

/* R114 — o alert-info do Help herdava #4299e1 sobre #f6f8fb (2.87:1).
   Mantemos o fundo informativo do tema, mas fixamos foreground escuro e AA
   para título, ícone, texto e links. #0e5a73 = ~7.23:1 sobre #f6f8fb. */
.app-help-info-alert-aa,
.app-help-info-alert-aa strong,
.app-help-info-alert-aa i,
.app-help-info-alert-aa a {
    color: #0e5a73 !important;
}

/* R115 — o alerta introdutório da biblioteca de Templates usa a mesma superfície
   informativa clara do Help. Mantemos o tema e fixamos somente o foreground
   desse bloco para WCAG AA. #0e5a73 = ~7.23:1 sobre #f6f8fb. */
.app-template-library-info-alert-aa,
.app-template-library-info-alert-aa strong,
.app-template-library-info-alert-aa i,
.app-template-library-info-alert-aa a {
    color: #0e5a73 !important;
}

/* R118 Wave A1 — Departamentos usa a superfície informativa clara do tema.
   O foreground padrão #4299e1 sobre #f6f8fb fica em ~2.87:1; fixamos
   somente este alerta em #0e5a73 para manter contraste WCAG AA. */
.service-desk-info-alert-aa,
.service-desk-info-alert-aa strong,
.service-desk-info-alert-aa i,
.service-desk-info-alert-aa a {
    color: #0e5a73 !important;
}

/* R118 Wave A1 — contador da lista de Tickets. O tema pode herdar
   foreground muted dentro do card-title; fixe branco sobre #0054a6 (~7.45:1). */
.ticket-total-badge-aa {
    background-color: #0054a6 !important;
    color: #fff !important;
}

/* R118 Wave A1 — fallback de foco visível para as três superfícies novas.
   O contrato global usa :focus-visible; nestas rotas também garantimos :focus
   porque o audit navega pelo skip-link e por regiões com tabindex injetado. */
body:is(
    [data-page="main.departments_page"],
    [data-page="main.tickets_page"],
    [data-page="main.tenant_selection_page"]
) :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline: 3px solid var(--app-focus-color) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-ring) !important;
}


/* R118 Wave A2 — superfícies informativas de Governança de Contatos e Lote.
   O tema usa foreground azul-claro sobre #f6f8fb; fixe #0e5a73 (~7.23:1). */
.visual-wave-a2-info-alert-aa,
.visual-wave-a2-info-alert-aa strong,
.visual-wave-a2-info-alert-aa i,
.visual-wave-a2-info-alert-aa a {
    color: #0e5a73 !important;
}

/* R118 Wave A2 — foco por teclado garantido nas três novas superfícies. */
body:is(
    [data-page="main.contact_governance_page"],
    [data-page="main.agenda_groups_page"],
    [data-page="main.batch_send_page"]
) :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline: 3px solid var(--app-focus-color) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-ring) !important;
}

/* R118 Wave A3 — foco por teclado na superfície comercial de seleção de plano. */
body[data-page="main.select_plan"] :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline: 3px solid var(--app-focus-color) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--app-focus-ring) !important;
}

/* F3C/R68 — os contadores de uso do perfil não podem herdar o foreground
   cinza do tema. Branco sobre #0054a6 = ~7.45:1, acima do WCAG AA. */
.profile-usage-badge {
    background-color: #0054a6 !important;
    color: #fff !important;
}

.btn-outline-danger {
    --tblr-btn-color: var(--app-aa-danger-text);
    --tblr-btn-border-color: var(--app-aa-danger-text);
    --tblr-btn-hover-bg: var(--app-aa-danger-text);
    --tblr-btn-hover-border-color: var(--app-aa-danger-text);
    --tblr-btn-hover-color: #fff;
}
.text-warning { color: #744500 !important; }
.alert-warning,
.alert-warning .alert-title,
.alert-warning li {
    color: var(--app-aa-warning-text) !important;
}
.alert-warning .alert-link,
.alert-warning .alert-link:hover,
.alert-warning .alert-link:focus-visible {
    color: #92400e !important;
}
.alert-danger,
.alert-danger .alert-title,
.alert-danger li {
    color: #9f1239 !important;
}

/* Paginação indisponível: texto legível, sem aparência de link acionável. */
.page-item.disabled .page-link,
.page-link[aria-disabled="true"] {
    color: #475569 !important;
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}
.page-item.disabled .page-link[aria-hidden="true"] {
    cursor: default;
}

/* O mascaramento das evidências é feito pelo Playwright; o campo real permanece neutro. */
#public-auth-app input[type="password"],
#public-auth-app input[type="password"]:focus,
#public-auth-app input[type="password"]:-webkit-autofill {
    background-color: #fff !important;
    color: #182433 !important;
    -webkit-text-fill-color: #182433 !important;
}

/* R38 — contraste AA em menus tenant e badges informativos. */
.navbar-vertical .dropdown-menu .text-muted,
.navbar-vertical .dropdown-menu .dropdown-item-text.text-muted,
.navbar-vertical .dropdown-menu .dropdown-header {
    color: #b8c4d4 !important;
}
.navbar-vertical .dropdown-menu .badge.bg-secondary-lt {
    color: #dbe5f0 !important;
    background-color: #27384d !important;
}
.badge.bg-azure-lt {
    color: #1f5f99 !important;
}

@media (forced-colors: active) {
    .btn-check + .btn {
        border: 1px solid ButtonText !important;
    }
    .btn-check:checked + .btn {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }
}

/* F3B.1 — composição rica dos editores de agendamento. */
.message-editor-shell {
    position: relative;
}

.message-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
}

.message-editor-toolbar .btn {
    min-width: 2.25rem;
}

.message-editor-emoji-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
    gap: .25rem;
    max-height: 13rem;
    overflow-y: auto;
    margin-top: .5rem;
    padding: .5rem;
    border: 1px solid var(--tblr-border-color, #d9dbde);
    border-radius: .375rem;
    background: var(--tblr-bg-surface, #fff);
}

.message-editor-emoji {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: .2rem;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
}

.message-editor-emoji:hover,
.message-editor-emoji:focus-visible {
    background: var(--tblr-bg-surface-secondary, #f1f5f9);
    outline: 2px solid var(--tblr-primary, #206bc4);
    outline-offset: 1px;
}

.status-story-style-panel {
    border: 1px solid var(--tblr-border-color, #d9dbde);
    border-radius: .375rem;
    padding: .75rem;
    background: var(--tblr-bg-surface-secondary, #f8fafc);
}

.status-story-color-preview {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .375rem;
    flex: 0 0 auto;
}


/* F4.2/R83 — menus de ações não podem ser recortados pelo wrapper responsivo. */
#account-users-app .account-users-table-wrap {
    overflow: visible;
}
@media (max-width: 767.98px) {
    #account-users-app .account-users-table-wrap .app-table-stack-mobile tbody tr:not(.app-table-state-row) {
        overflow: visible;
    }
}

/* R113 — Dashboard tenant 360° e área comercial. */
.app-dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--app-space-3);
}
.app-dashboard-shortcut {
    display: flex;
    min-width: 0;
    min-height: 5.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    padding: var(--app-space-4);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-subtle);
    color: var(--tblr-body-color, #182433);
    text-decoration: none;
}
.app-dashboard-shortcut:hover,
.app-dashboard-shortcut:focus-visible {
    border-color: var(--tblr-primary, #206bc4);
    background: var(--app-surface);
    color: var(--tblr-primary, #206bc4);
}
.app-dashboard-shortcut i { font-size: 1.5rem; }
.app-dashboard-shortcut span { font-weight: 600; overflow-wrap: anywhere; }

.app-plan-usage-row + .app-plan-usage-row { margin-top: var(--app-space-4); }
.app-plan-usage-row .progress { background: #e8edf3; }

.app-commercial-area {
    border-top: .2rem solid var(--tblr-primary, #206bc4);
}
.app-commercial-feature {
    display: flex;
    gap: var(--app-space-3);
    padding: var(--app-space-4);
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-subtle);
}
.app-commercial-feature-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    background: var(--tblr-primary-lt, #e9f2ff);
    color: var(--tblr-primary, #206bc4);
    font-size: 1.35rem;
}
.app-dashboard-connection-list {
    max-height: 24rem;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .app-dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-commercial-feature { align-items: flex-start; }
}

@media (max-width: 420px) {
    .app-dashboard-shortcuts { grid-template-columns: 1fr; }
}


/* R116 — Template Picker unificado do Inbox. */
#templatePickerModal .modal-dialog {
    max-width: calc(100vw - 1rem);
}
#templatePickerModal .modal-content,
#templatePickerModal .modal-body,
#templatePickerModal .row > [class*="col-"] {
    min-width: 0;
}
#templatePickerModal .modal-body {
    overflow-x: hidden;
}
.template-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.template-picker-card {
    display: block;
    width: 100%;
    min-height: 7rem;
    padding: .9rem;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .75rem;
    background: var(--tblr-bg-surface, #fff);
    color: inherit;
}
.template-picker-card:hover:not(:disabled),
.template-picker-card:focus-visible {
    border-color: currentColor;
}
.template-picker-card.is-selected {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.template-picker-card:disabled {
    opacity: .62;
    cursor: not-allowed;
}
.template-picker-card-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.template-picker-preview {
    min-height: 20rem;
}
@media (max-width: 991.98px) {
    .template-picker-grid { grid-template-columns: 1fr; }
    #templatePickerModal .modal-dialog { margin: .5rem; }
}
@media (max-width: 575.98px) {
    #templatePickerModal .modal-dialog { width: auto; margin: .5rem; }
    #templatePickerModal .modal-header { align-items: flex-start; gap: .5rem; }
    #templatePickerModal .modal-body { padding: .75rem; }
    #templatePickerModal .modal-footer {
        position: sticky;
        bottom: 0;
        flex-wrap: wrap;
        background: var(--tblr-bg-surface, #fff);
    }
    #templatePickerModal .modal-footer .btn { max-width: 100%; }
}

/* R119 P2 — contraste AA da ação de reset na Entrega Adaptativa. */
.delivery-reset-aa {
    color: #3d4b5c !important;
}


/* R119 P3 — estado vazio de Chatbots usa a superfície informativa clara;
   fixe foreground escuro para manter contraste WCAG AA. */
.connection-chatbots-info-aa,
.connection-chatbots-info-aa strong,
.connection-chatbots-info-aa i,
.connection-chatbots-info-aa a {
    color: #0e5a73 !important;
}


/* R119 P4 — Chat em Tempo Real: foregrounds AA escopados ao estado visual. */
.connection-realtime-info-aa,
.connection-realtime-info-aa strong,
.connection-realtime-info-aa i {
    color: #1f2937 !important;
}
.connection-realtime-event-badge-aa {
    color: #1f2937 !important;
}


/* R120 P3 corrective — convite público: o foreground padrão do alert-info
   (#4299e1) cai para ~3.05:1 sobre a superfície branca observada no runtime.
   Mantemos a semântica informativa e fixamos foreground AA escuro. */
.public-invite-info-alert-aa,
.public-invite-info-alert-aa strong,
.public-invite-info-alert-aa a {
    color: #0e5a73 !important;
}

/* R120 P4 — activation + complete-registration usam o mesmo alert-info do
   onboarding público. O foreground padrão do vendor não alcança 4.5:1 na
   superfície branca; esta regra mantém a semântica informativa com AA. */
.public-onboarding-info-alert-aa,
.public-onboarding-info-alert-aa strong,
.public-onboarding-info-alert-aa a,
.public-onboarding-info-alert-aa .small {
    color: #0e5a73 !important;
}