/* Mesa de Operação — tokens compartilhados e primitivas de interface. */
:root {
    color-scheme: dark;
    --color-canvas: #0f172a;
    --color-surface: #172235;
    --color-surface-raised: #1e293b;
    --color-surface-hover: #29364b;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #a7b4c7;
    --color-text-subtle: #8291a8;
    --color-brand-violet: #a78bfa;
    --color-brand-violet-strong: #8b5cf6;
    --color-brand-violet-50: #f5f3ff;
    --color-brand-violet-100: #ede9fe;
    --color-brand-violet-200: #ddd6fe;
    --color-brand-violet-300: #c4b5fd;
    --color-brand-violet-400: #a78bfa;
    --color-brand-violet-500: #8b5cf6;
    --color-brand-violet-600: #7c3aed;
    --color-brand-violet-700: #6d28d9;
    --color-brand-violet-800: #5b21b6;
    --color-brand-violet-900: #4c1d95;
    --color-brand-cyan: #67e8f9;
    --color-brand-cyan-strong: #22d3ee;
    --color-brand-cyan-50: #ecfeff;
    --color-brand-cyan-100: #cffafe;
    --color-brand-cyan-200: #a5f3fc;
    --color-brand-cyan-300: #67e8f9;
    --color-brand-cyan-400: #22d3ee;
    --color-brand-cyan-500: #06b6d4;
    --color-brand-cyan-600: #0891b2;
    --color-brand-cyan-700: #0e7490;
    --color-brand-cyan-800: #155e75;
    --color-brand-cyan-900: #164e63;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-card: #ffffff;
    --color-card-text: #0f172a;
    --color-card-muted: #334155;
    --color-card-border: #cbd5e1;
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --space-card: clamp(1rem, 2vw, 1.5rem);
    --radius-control: 0.625rem;
    --radius-panel: 0.875rem;
    --focus-ring: 0 0 0 3px var(--color-canvas), 0 0 0 5px var(--color-brand-cyan-strong);
    --scroll-region-max: min(32rem, 60vh);
    --scroll-region-max-mobile: min(24rem, 50vh);
}

html { background: var(--color-canvas); color: var(--color-text); font-family: var(--font-ui); }
body { color: var(--color-text); }
::selection { color: var(--color-canvas); background: var(--color-brand-cyan); }
:focus-visible { outline: 2px solid var(--color-brand-cyan-strong); outline-offset: 3px; }

.dashboard-surface {
    color: var(--color-card-text);
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-panel);
}

.dashboard-card { padding: var(--space-card); }
.dashboard-muted { color: var(--color-text-muted); }
.dashboard-scroll-region {
    max-height: var(--scroll-region-max);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-text-subtle) var(--color-surface);
}

.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
}

.dashboard-nav__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    color: inherit;
    border-radius: var(--radius-control);
    text-decoration: none;
}

.dashboard-nav__link:hover { color: var(--color-text); background: var(--color-surface-hover); }
.dashboard-nav__link[aria-current="page"] { color: var(--color-text); background: var(--color-surface-raised); box-shadow: inset 0 -2px var(--color-brand-cyan-strong); }
.dashboard-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Mantém as classes usadas pelo dashboard legado compatíveis com a base semântica. */
.animate-pulse-custom { animation: pulse-custom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-slide-down { animation: slideDown 0.3s ease-out; }
.transition-max-height { transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, border 0.3s ease-in-out; }
.collapsed { max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: none !important; overflow: hidden; }
.expanded { overflow-y: auto; }
.status { border-radius: var(--radius-control); color: var(--color-text); background: var(--color-surface-raised); }
.status-success { color: var(--color-success); }
.status-warning { color: var(--color-warning); }
.status-danger { color: var(--color-danger); }

@keyframes pulse-custom { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-0.625rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 40rem) {
    .dashboard-scroll-region { max-height: var(--scroll-region-max-mobile); }
    .dashboard-nav__list { flex-basis: 100%; }
    .dashboard-nav__link { flex: 1 1 auto; justify-content: center; }
}

/* Compatibilidade visual para as classes Tailwind legadas nas telas da API. */
body.bg-gray-50,
body.bg-gradient-to-br {
    color: var(--color-text);
    background: var(--color-canvas) !important;
}

.bg-white { background-color: var(--color-card) !important; }
.bg-gray-50 { background-color: #f8fafc !important; }
.bg-gray-100 { background-color: #f1f5f9 !important; }
.bg-gray-200 { background-color: #e2e8f0 !important; }
.bg-green-600 { background-color: #15803d !important; }
.hover\:bg-green-700:hover { background-color: #166534 !important; }
.bg-primary-600 { background-color: var(--color-brand-violet-600) !important; }
.bg-primary-700 { background-color: var(--color-brand-violet-700) !important; }
.bg-primary-50 { background-color: var(--color-brand-violet-50) !important; }
.bg-primary-100 { background-color: var(--color-brand-violet-100) !important; }
.bg-accent-600 { background-color: var(--color-brand-cyan-700) !important; }
.bg-accent-700 { background-color: var(--color-brand-cyan-800) !important; }
.text-primary-600 { color: #6d28d9 !important; }
.text-primary-700 { color: #5b21b6 !important; }
.text-primary-800 { color: #4c1d95 !important; }
.text-accent-600 { color: #155e75 !important; }
.text-accent-700 { color: #155e75 !important; }
.hover\:bg-primary-700:hover { background-color: var(--color-brand-violet-700) !important; }
.hover\:bg-accent-700:hover { background-color: var(--color-brand-cyan-800) !important; }
.bg-gradient-to-r.from-primary-500.to-primary-600,
.bg-gradient-to-r.from-purple-500.to-pink-500 { background: linear-gradient(to right, #6d28d9, #7c3aed) !important; }
.bg-gradient-to-r.from-accent-500.to-accent-600 { background: linear-gradient(to right, #155e75, #0e7490) !important; }
.dashboard-surface > section[aria-labelledby="coupon-notification-title"] > div:first-child {
    background: linear-gradient(to right, var(--color-brand-violet-700), var(--color-brand-cyan-700)) !important;
}
.bg-white\/20 { color: #ffffff !important; background: rgb(15 23 42 / 75%) !important; }

.dashboard-surface .text-gray-900,
.dashboard-panel .text-gray-900,
.card .text-gray-900 { color: #0f172a !important; }
.dashboard-surface .text-gray-800,
.dashboard-panel .text-gray-800,
.card .text-gray-800 { color: #1e293b !important; }
.dashboard-surface .text-gray-700,
.dashboard-panel .text-gray-700,
.card .text-gray-700 { color: #334155 !important; }
.dashboard-surface .text-gray-600,
.dashboard-surface .text-gray-500,
.dashboard-panel .text-gray-600,
.dashboard-panel .text-gray-500,
.card .text-gray-600,
.card .text-gray-500 { color: #475569 !important; }
.dashboard-surface .text-gray-400,
.dashboard-panel .text-gray-400,
.card .text-gray-400 { color: #64748b !important; }
.dashboard-surface .text-gray-300,
.dashboard-panel .text-gray-300,
.card .text-gray-300 { color: #334155 !important; }
.dashboard-surface .text-slate-300,
.dashboard-panel .text-slate-300,
.card .text-slate-300 { color: #334155 !important; }

.border-gray-100,
.border-gray-200,
.border-gray-300 { border-color: var(--color-card-border) !important; }

.dashboard-surface .text-cyan-600,
.dashboard-panel .text-cyan-600,
.card .text-cyan-600 { color: #0e7490 !important; }
.dashboard-surface .text-blue-600,
.dashboard-panel .text-blue-600,
.card .text-blue-600 { color: #1d4ed8 !important; }
.dashboard-surface .text-indigo-600,
.dashboard-surface .text-purple-600,
.dashboard-surface .text-violet-600,
.dashboard-panel .text-indigo-600,
.dashboard-panel .text-purple-600,
.dashboard-panel .text-violet-600,
.card .text-indigo-600,
.card .text-purple-600,
.card .text-violet-600 { color: #6d28d9 !important; }
.dashboard-surface .text-green-600,
.dashboard-surface .text-emerald-600,
.dashboard-panel .text-green-600,
.dashboard-panel .text-emerald-600,
.card .text-green-600,
.card .text-emerald-600 { color: #15803d !important; }
.dashboard-surface .text-yellow-600,
.dashboard-surface .text-amber-600,
.dashboard-surface .text-orange-600,
.dashboard-panel .text-yellow-600,
.dashboard-panel .text-amber-600,
.dashboard-panel .text-orange-600,
.card .text-yellow-600,
.card .text-amber-600,
.card .text-orange-600 { color: #b45309 !important; }
.dashboard-surface .text-red-600,
.dashboard-surface .text-rose-600,
.dashboard-panel .text-red-600,
.dashboard-panel .text-rose-600,
.card .text-red-600,
.card .text-rose-600 { color: #b91c1c !important; }

body > main { box-sizing: border-box; }
details.dashboard-panel > section {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-card-text) !important;
}
details.dashboard-panel input,
details.dashboard-panel select,
details.dashboard-panel textarea {
    color: var(--color-card-text) !important;
    background: #f8fafc !important;
    border-color: var(--color-card-border) !important;
}
details.dashboard-panel .status:not(.error) {
    color: var(--color-card-text) !important;
    background: #f1f5f9 !important;
}
details.dashboard-panel .status.error {
    color: #991b1b !important;
    background: #fee2e2 !important;
}
body > main dialog { color: var(--color-card-text); background: var(--color-card); }

.dashboard-confirm-dialog,
#clear-dialog,
#send-confirmation-dialog {
    color: #0f172a;
    background: #ffffff;
    border: 1px solid var(--color-card-border, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.35);
}

.dashboard-confirm-dialog::backdrop,
#clear-dialog::backdrop,
#send-confirmation-dialog::backdrop {
    background: rgb(2 6 23 / 65%);
}

#dashboard-confirmation-dialog .bg-white,
#dashboard-alert-dialog .bg-white {
    background: #ffffff;
}

#dashboard-confirmation-cancel {
    color: #374151 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db;
}

#dashboard-confirmation-cancel:hover {
    background-color: #f9fafb !important;
}

#dashboard-confirmation-accept {
    color: #ffffff !important;
    background-color: #b91c1c !important;
    border: 1px solid #b91c1c;
}

#dashboard-confirmation-accept:hover {
    background-color: #991b1b !important;
}

#dashboard-alert-close {
    color: #ffffff !important;
    background-color: var(--color-brand-violet-600) !important;
    border: 1px solid var(--color-brand-violet-600);
}

#clear-dialog,
#send-confirmation-dialog {
    width: min(32rem, calc(100% - 2rem));
    padding: 1.5rem;
    border-radius: 0.75rem;
}

#clear-dialog form,
#send-confirmation-dialog form {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

#clear-dialog button[value="cancel"],
#send-confirmation-dialog button[value="cancel"] {
    color: #374151 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db;
}

#clear-dialog button[value="confirm"],
#send-confirmation-dialog button[value="confirm"] {
    color: #ffffff !important;
    background-color: var(--color-brand-violet-600) !important;
    border: 1px solid var(--color-brand-violet-600);
}

#dashboard-alert-dialog { color: #0f172a; background: #ffffff; }
details.dashboard-panel {
    color: var(--color-card-text) !important;
    background: var(--color-card) !important;
    border-color: var(--color-card-border) !important;
    margin-bottom: 1.25rem !important;
}
details.dashboard-panel > summary,
details.dashboard-surface > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.875rem 1.25rem;
    color: var(--color-card-text);
}
details.dashboard-surface > .bg-white {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
details.dashboard-surface thead.bg-gray-50 { background: #f1f5f9 !important; }
details.dashboard-surface #users-table-body {
    color: var(--color-card-text);
    background: var(--color-card) !important;
}
details.dashboard-surface .user-row { color: var(--color-card-text) !important; background: var(--color-card) !important; }
details.dashboard-surface .user-row.selected { background: #e0e7ff !important; }
details.dashboard-surface > .bg-white h2,
details.card > .card-content > .card-header { display: none; }
details.dashboard-card p.text-sm.font-medium,
details.card > .card-header h2 { display: none; }

.dashboard-nav { margin: 1rem 0 1.5rem; padding: 0.5rem; }
.dashboard-nav__link { min-height: 2.75rem; padding: 0.625rem 1rem; }
body > .container > header h1,
body > header h1,
body > main > header h1,
.container > .header h1 {
    color: var(--color-text) !important;
    font-size: clamp(1.5rem, 2.25vw, 2rem) !important;
    font-weight: 700;
    line-height: 1.2;
}
.container > header p,
.container > header span:not(.pulse-dot) { color: var(--color-text-muted) !important; }
.container > header > div.flex a { color: var(--color-brand-cyan) !important; }
#platform-status-summary { color: #14532d !important; background: #bbf7d0 !important; }
#platform-status-section .text-slate-300 { color: var(--color-text-muted) !important; }
.card {
    color: var(--color-card-text) !important;
    background: var(--color-card) !important;
    border-color: var(--color-card-border) !important;
}
.card-title { display: none !important; }
.card > .card-header { padding: 1rem 2rem; }
.dashboard-surface > .bg-white > div:has(> h2) { justify-content: flex-end; }
.card a { color: #4f46e5 !important; }
.form-control {
    color: var(--color-card-text) !important;
    background: #f8fafc !important;
    border-color: var(--color-card-border) !important;
}
.card .form-label,
.card .small,
.dashboard-panel small,
.dashboard-panel .hint { color: var(--color-card-muted) !important; }
.btn-group .btn { justify-content: center; }
.card-content input,
.card-content select,
.card-content textarea {
    color: var(--color-card-text) !important;
    background: #f8fafc !important;
    border-color: var(--color-card-border) !important;
}
.info-box h3 { color: var(--color-card-text) !important; }
.info-box p { color: var(--color-card-muted) !important; }
.btn-primary { color: var(--color-card) !important; background: var(--color-brand-violet-600) !important; }
.variable-card { color: var(--color-card-text) !important; background: #f8fafc !important; border-left-width: 1px !important; }
.filter-btn.active {
    background: var(--color-brand-violet-600) !important;
    border-color: var(--color-brand-violet-600) !important;
}
.status.connected { color: #166534 !important; background: #dcfce7 !important; }
.status.disconnected { color: #991b1b !important; background: #fee2e2 !important; }
.status.loading { color: #92400e !important; background: #fef3c7 !important; }
.log-line.trace { color: var(--color-text-muted) !important; opacity: 1 !important; }
.header #timezoneInfo { color: var(--color-text-muted) !important; }
.controls .stats { color: var(--color-text-muted) !important; }
.danger { background: #b91c1c !important; color: #ffffff !important; }
.bg-gray-400:disabled,
.bg-accent-600:disabled { color: #334155 !important; background: #e2e8f0 !important; }
.bg-primary-600:disabled { opacity: 1 !important; background: #5b21b6 !important; color: #ffffff !important; }

.flow-container::after {
    background: linear-gradient(to right, transparent, var(--color-card)) !important;
}

@media (max-width: 40rem) {
    .btn-group { flex-direction: column; }
    .btn-group .btn { width: 100%; }
}

::placeholder { color: #64748b; opacity: 1; }

/* Animação de entrada de layout compartilhada entre as telas do dashboard. */
body > .container,
body > main {
    animation: dashboard-layout-enter 0.6s ease-out 0.2s both;
}

body > header {
    animation: dashboard-header-enter 0.6s ease-out both;
}

input {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

.btn-primary,
button.primary,
button.bg-accent-600,
button.bg-green-600 {
    color: #ffffff !important;
    background-color: var(--color-brand-violet-600) !important;
}

.btn-primary:hover,
button.primary:hover,
button.bg-accent-600:hover,
button.bg-green-600:hover {
    background-color: var(--color-brand-violet-700) !important;
}

.danger,
button.bg-red-600,
button.bg-red-700,
#clear-processing-queue,
#clear-curation-queue,
#clear-dlq,
#clear-curation-errors,
#reset-confirmation-dialog button[value="confirm"] {
    color: #ffffff !important;
    background-color: #b91c1c !important;
}

.danger:hover,
button.bg-red-600:hover,
button.bg-red-700:hover,
#clear-processing-queue:hover,
#clear-curation-queue:hover,
#clear-dlq:hover,
#clear-curation-errors:hover,
#reset-confirmation-dialog button[value="confirm"]:hover {
    background-color: #991b1b !important;
}

@keyframes dashboard-layout-enter {
    from { opacity: 0; transform: translateY(1.875rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboard-header-enter {
    from { opacity: 0; transform: translateY(-1.875rem); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Composição do dashboard simples, usando as superfícies e tokens compartilhados. */
.simple-dashboard > .container {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
    padding-block: clamp(1rem, 4vw, 2rem);
}

.simple-dashboard > .container > header {
    margin-bottom: 1.5rem;
}

.simple-dashboard details.card {
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.simple-dashboard details.card > summary {
    position: relative;
    padding-right: 3rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.simple-dashboard details.card > summary::-webkit-details-marker {
    display: none;
}

.simple-dashboard details.card > summary::after {
    position: absolute;
    right: 1.25rem;
    color: var(--color-brand-violet-700);
    content: '+';
    font-size: 1.25rem;
    line-height: 1;
}

.simple-dashboard details.card[open] > summary::after {
    content: '−';
}

.simple-dashboard .card-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 4rem;
    padding: 0.625rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-card-border);
}

.simple-dashboard .card-header--title-only {
    display: none;
}

.simple-dashboard .card-body {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.simple-dashboard .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.simple-dashboard .stat {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.25rem;
    text-align: center;
    background: #f8fafc;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-control);
}

.simple-dashboard .stat-label {
    color: var(--color-card-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.simple-dashboard .stat-value {
    color: var(--color-brand-violet-700);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
}

.simple-dashboard .stat:nth-child(2) .stat-value {
    color: #b45309;
}

.simple-dashboard .stat:nth-child(3) .stat-value {
    color: #b91c1c;
}

.simple-dashboard .success-log-list,
.simple-dashboard .dlq-list {
    display: grid;
    gap: 0;
    padding: 0;
}

.simple-dashboard .success-item,
.simple-dashboard .dlq-item {
    min-width: 0;
    overflow-wrap: anywhere;
    background: transparent;
    border-bottom: 1px solid var(--color-card-border);
}

.simple-dashboard .success-item:last-child,
.simple-dashboard .dlq-item:last-child {
    border-bottom: 0;
}

.simple-dashboard .success-item-header,
.simple-dashboard .dlq-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
    color: var(--color-card-text);
    background: #f8fafc;
}

.simple-dashboard .success-item-header {
    cursor: pointer;
}

.simple-dashboard .success-item-id,
.simple-dashboard .dlq-item-id {
    color: var(--color-brand-violet-700);
    font-weight: 700;
}

.simple-dashboard .success-item-time,
.simple-dashboard .dlq-item-retries,
.simple-dashboard .dlq-item-time {
    color: var(--color-card-muted);
    font-size: 0.875rem;
}

.simple-dashboard .success-item-body {
    padding: 1rem;
    color: var(--color-card-text);
    overflow-wrap: anywhere;
}

.simple-dashboard .success-item-body.collapsed {
    display: none;
}

.simple-dashboard .success-item-body.expanded {
    max-height: 16rem;
    overflow: auto;
}

.simple-dashboard .success-item-body a,
.simple-dashboard .links-list a {
    color: var(--color-brand-violet-700);
    overflow-wrap: anywhere;
    text-underline-offset: 0.2em;
}

.simple-dashboard .success-item-footer {
    padding: 0.75rem 1rem;
    color: var(--color-card-muted);
    border-top: 1px solid var(--color-card-border);
    font-size: 0.8125rem;
}

.simple-dashboard .dlq-item-error {
    padding: 0.875rem 1rem 0;
    color: #991b1b;
    font-weight: 600;
}

.simple-dashboard .dlq-item-time,
.simple-dashboard .dlq-item-actions {
    padding: 0.5rem 1rem;
}

.simple-dashboard .empty-state {
    padding: 1.5rem 1rem;
    color: var(--color-card-muted);
    text-align: center;
}

.simple-dashboard .links-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.simple-dashboard .links-list a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
}

.simple-dashboard > dialog {
    width: min(32rem, calc(100% - 2rem));
    padding: 1.5rem;
    color: var(--color-card-text);
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-panel);
}

.simple-dashboard > dialog::backdrop {
    background: rgb(2 6 23 / 65%);
}

.simple-dashboard > dialog form {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.simple-dashboard > dialog button {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    color: var(--color-card-text);
    background: #f1f5f9;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-control);
    font: inherit;
    font-weight: 600;
}

.simple-dashboard > dialog button[value="confirm"] {
    color: #ffffff;
    background: var(--color-brand-violet-600);
    border-color: var(--color-brand-violet-600);
}

.simple-dashboard > dialog button:focus-visible,
.simple-dashboard details.card > summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* A superfície dos botões permanece distinta do canvas e dos campos brancos. */
button {
    color: #ffffff;
    background-color: var(--color-brand-violet-600);
    cursor: pointer;
}

.simple-dashboard button {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    font-weight: 600;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.simple-dashboard button.btn-small {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
}

button:hover:not(:disabled) {
    background-color: var(--color-brand-violet-700);
}

button.secondary,
button.btn-secondary,
button.filter-btn,
button.bg-white,
button.bg-gray-100,
button.bg-gray-200 {
    color: var(--color-card-text) !important;
    background-color: #e2e8f0 !important;
    border-color: var(--color-card-border) !important;
}

button.filter-btn:hover {
    background-color: #cbd5e1 !important;
}

button.bg-white\/20 {
    color: #ffffff !important;
    background-color: var(--color-brand-violet-600) !important;
}

button.bg-white\/20:hover:not(:disabled) {
    background-color: var(--color-brand-violet-700) !important;
}

@media (max-width: 40rem) {
    .simple-dashboard .stats-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-chat-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

dashboard-chat-channel {
    --chat-accent: #047857;
    --chat-tint: #ecfdf5;
    --chat-border: #a7f3d0;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-card-text);
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-top: 3px solid var(--chat-accent);
    border-radius: var(--radius-control);
}

dashboard-chat-channel[data-channel="telegram"] {
    --chat-accent: #0369a1;
    --chat-tint: #f0f9ff;
    --chat-border: #bae6fd;
}

.dashboard-chat-channel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--color-card-text);
    background: var(--chat-tint);
    border: 0;
    border-bottom: 1px solid var(--chat-border);
    border-radius: 0;
}

.dashboard-chat-channel__title {
    margin: 0;
    color: var(--chat-accent);
    font-size: 1rem;
    font-weight: 700;
}

.dashboard-chat-channel__status {
    margin: 0.25rem 0 0;
    color: var(--color-card-muted);
    font-size: 0.8125rem;
}

.dashboard-chat-channel__status.is-error {
    color: #b91c1c;
}

.dashboard-chat-channel__count {
    flex: 0 0 auto;
    color: var(--chat-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
}

.dashboard-chat-list {
    max-height: var(--scroll-region-max);
    padding: 0 1rem;
    background: var(--color-card);
}

.dashboard-chat-item {
    color: var(--color-card-text);
    border-bottom: 1px solid var(--color-card-border);
}

.dashboard-chat-item:last-child {
    border-bottom: 0;
}

.dashboard-chat-item__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    min-height: 3.5rem;
    padding: 0.75rem 0.25rem;
    cursor: pointer;
    list-style: none;
}

.dashboard-chat-item__summary::-webkit-details-marker {
    display: none;
}

.dashboard-chat-item__summary::after {
    margin-left: auto;
    color: var(--chat-accent);
    content: '+';
    font-size: 1.125rem;
    font-weight: 700;
}

.dashboard-chat-item[open] > .dashboard-chat-item__summary::after {
    content: '−';
}

.dashboard-chat-item__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dashboard-chat-item__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-chat-item__type {
    display: inline;
    margin: 0;
    color: var(--color-card-muted);
    font-size: 0.8125rem;
}

.dashboard-chat-item__detail {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 0.25rem 1rem;
    border-top: 1px solid var(--color-card-border);
}

.dashboard-chat-item__id-label {
    display: block;
    margin: 0;
    color: var(--color-card-muted);
    font-size: 0.8125rem;
}

.dashboard-chat-item__id {
    width: fit-content;
    max-width: 100%;
    padding: 0.375rem 0.5rem;
    color: var(--color-card-text);
    background: #f1f5f9;
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
}

.dashboard-chat-list__empty {
    margin: 0;
    padding: 1.5rem 0.25rem;
    color: var(--color-card-muted);
    font-size: 0.875rem;
}

.dashboard-chat-refresh-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    color: #ffffff !important;
    background: var(--color-brand-violet-600) !important;
    border: 1px solid var(--color-brand-violet-600) !important;
    border-radius: var(--radius-control) !important;
    font: inherit !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-chat-refresh-button:hover:not(:disabled) {
    background: var(--color-brand-violet-700) !important;
    border-color: var(--color-brand-violet-700) !important;
}

.dashboard-chat-refresh-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dashboard-chat-refresh-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

@media (max-width: 40rem) {
    .dashboard-chat-channels {
        grid-template-columns: minmax(0, 1fr);
    }
}

dashboard-page-header {
    display: block;
    width: 100%;
}

.dashboard-page-header__content {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin: 0 auto 1.5rem;
    padding: 1rem 0;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: center;
}

.dashboard-page-header__brand,
.dashboard-page-header__context {
    width: 100%;
}

.dashboard-page-header__title {
    margin: 0;
    color: var(--color-text) !important;
    font-size: clamp(1.5rem, 2.25vw, 2rem) !important;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-page-header__subtitle {
    margin: 0.5rem 0 0;
    color: var(--color-text-muted) !important;
    font-size: 1rem;
}

.dashboard-page-header__context-title {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 600;
}

.dashboard-page-header__context-description {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.dashboard-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
}

.dashboard-page-header__actions > span {
    color: var(--color-text-muted);
}

.dashboard-page-header__content > [data-dashboard-nav] {
    width: 100%;
}

.dashboard-table-scroll {
    max-height: var(--scroll-region-max);
    overflow: auto;
    overscroll-behavior: contain;
}

.dashboard-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--color-card-text) !important;
    background: #e2e8f0 !important;
    box-shadow: inset 0 -1px var(--color-card-border);
}

.connection-action-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.connection-action-button--connect {
    color: #ffffff !important;
    background: var(--color-brand-violet-600) !important;
    border-color: var(--color-brand-violet-600);
}

.connection-action-button--connect:hover:not(:disabled) {
    background: var(--color-brand-violet-700) !important;
    border-color: var(--color-brand-violet-700);
}

.connection-action-button--disconnect {
    color: var(--color-card-text) !important;
    background: #e2e8f0 !important;
    border-color: var(--color-card-border);
}

.connection-action-button--disconnect:hover:not(:disabled) {
    background: #cbd5e1 !important;
    border-color: #94a3b8;
}

.connection-action-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.connection-action-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 40rem) {
    .dashboard-page-header__actions {
        justify-content: center;
    }

    .dashboard-table-scroll {
        max-height: var(--scroll-region-max-mobile);
    }
}