/* Envios de hoje (GET /api/send-monitor): monitor do topo da aba Mensagens e resumo clicável da aba Cobrar. */

/* Resumo da aba Cobrar: mesmo formato do aviso do WhatsApp; a cor da borda acompanha a situação. */
.send-monitor-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 18px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
}
.send-monitor-summary strong { flex-shrink: 0; color: var(--green); }
.send-monitor-summary span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.send-monitor-summary small { flex-shrink: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.send-monitor-summary.is-warning { border-color: rgba(255, 213, 79, 0.4); border-left-color: var(--yellow); background: var(--yellow-bg); }
.send-monitor-summary.is-warning strong { color: var(--yellow); }
.send-monitor-summary.is-critical { border-color: rgba(255, 82, 82, 0.45); border-left-color: var(--red); background: rgba(255, 82, 82, 0.08); }
.send-monitor-summary.is-critical strong { color: var(--red); }
.send-monitor-summary.is-critical span,
.send-monitor-summary.is-warning span { color: var(--text-primary); }
.send-monitor-summary:hover { border-color: var(--border-hover); }

/* Painel */
.send-monitor {
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    min-width: 0;
    /* Aberto pelo resumo da aba Cobrar: o topo do painel não encosta na borda da janela. */
    scroll-margin-top: 16px;
    animation: fadeUp 0.5s ease-out 0.1s backwards;
}
.send-monitor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.send-monitor-header h2 { font-size: var(--fs-lg); font-weight: 650; }
.send-monitor-header h2:focus { outline: none; }
.send-monitor-header h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.send-monitor-header p { margin-top: 5px; color: var(--text-muted); font-size: var(--fs-xs); }
.send-monitor-refresh {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
}
.send-monitor-refresh:hover { background: rgba(201, 160, 67, 0.1); }
.send-monitor-refresh:disabled { opacity: 0.6; cursor: wait; }
.send-monitor h3 { font-size: var(--fs-md); font-weight: 650; margin-bottom: 10px; }
.send-monitor-empty,
.send-monitor-note { color: var(--text-muted); font-size: var(--fs-xs); }
.send-monitor-note { margin-top: 8px; }
.send-monitor-error { margin-top: 12px; color: var(--yellow); font-size: var(--fs-xs); }

.send-monitor-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; color: var(--text-secondary); font-size: var(--fs-sm); }
.send-monitor-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.send-monitor-pill.is-ok { color: var(--green); }
.send-monitor-pill.is-warning { color: var(--yellow); }
.send-monitor-pill.is-critical { color: var(--red); }

/* Alertas: tag com texto, nunca só cor. */
.send-monitor-ok { margin-top: 14px; color: var(--text-secondary); font-size: var(--fs-sm); }
.send-monitor-alerts { display: grid; gap: 10px; margin-top: 16px; list-style: none; }
.send-monitor-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    min-width: 0;
}
.send-monitor-alert > div { min-width: 0; overflow-wrap: anywhere; }
.send-monitor-alert strong { display: block; font-size: var(--fs-sm); }
.send-monitor-alert p { margin-top: 3px; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.5; }
.send-monitor-alert-tag { flex-shrink: 0; min-width: 72px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--blue); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; text-align: center; }
.send-monitor-alert.is-critical { border-color: rgba(255, 82, 82, 0.4); border-left-color: var(--red); background: rgba(255, 82, 82, 0.07); }
.send-monitor-alert.is-critical .send-monitor-alert-tag { color: var(--red); }
.send-monitor-alert.is-warning { border-color: rgba(255, 213, 79, 0.35); border-left-color: var(--yellow); background: var(--yellow-bg); }
.send-monitor-alert.is-warning .send-monitor-alert-tag { color: var(--yellow); }
.send-monitor-alert-sample { margin: 6px 0 0 16px; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.6; }

/* Canais */
.send-monitor-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.send-monitor-channel { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-glass); min-width: 0; }
.send-monitor-channel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.send-monitor-channel h3 { margin-bottom: 0; }
.send-monitor-main,
.send-monitor-details { display: grid; gap: 12px 16px; margin: 12px 0 0; }
.send-monitor-main { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.send-monitor-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.send-monitor-stat { min-width: 0; }
.send-monitor-stat dt { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.35; }
.send-monitor-stat dd { margin: 4px 0 0; color: var(--text-primary); font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.send-monitor-main .send-monitor-stat dd { font-size: var(--fs-xl); }
.send-monitor-stat dd small { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.send-monitor-stat dd .send-monitor-hint { display: block; margin-top: 2px; }
.send-monitor-stat .is-danger { color: var(--red); }
.send-monitor-stat .is-warning { color: var(--yellow); }

.send-monitor-capacity { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.send-monitor-capacity-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.send-monitor-capacity-head strong { color: var(--text-primary); font-size: var(--fs-sm); }
.send-monitor-bar { height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.send-monitor-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.send-monitor-capacity p { margin-top: 8px; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.5; }

/* Espera, próximos dias, réguas e fila */
.send-monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.send-monitor-grid > section,
#send-monitor-body > section { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-glass); }
#send-monitor-body > section { margin-top: 14px; }
.send-monitor-reasons,
.send-monitor-later { display: grid; gap: 8px; list-style: none; }
.send-monitor-reasons li { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-sm); }
.send-monitor-reasons li strong { min-width: 2.2em; text-align: right; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.send-monitor-reasons li span { min-width: 0; color: var(--text-secondary); }
.send-monitor-reasons li small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.send-monitor-reasons li.is-critical strong,
.send-monitor-reasons li.is-critical span { color: var(--red); }
.send-monitor-later li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--text-secondary); }
.send-monitor-later li strong { color: var(--text-primary); text-align: right; }
.send-monitor-clicks { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-sm); }
.send-monitor-clicks strong { color: var(--text-primary); font-size: var(--fs-base); }
.send-monitor-clicks small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }

.send-monitor-table-wrap { overflow-x: auto; }
.send-monitor-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.send-monitor-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.send-monitor-table th,
.send-monitor-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: left; font-size: var(--fs-sm); white-space: nowrap; }
.send-monitor-table thead th { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.send-monitor-table tbody th { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; text-transform: none; letter-spacing: normal; }
.send-monitor-table tbody td { color: var(--text-secondary); }
.send-monitor-table .is-num { text-align: right; }

.send-monitor-upcoming { display: grid; gap: 0; list-style: none; }
.send-monitor-upcoming li {
    display: grid;
    grid-template-columns: 112px minmax(0, 1.3fr) 88px minmax(0, 1.4fr);
    align-items: center;
    gap: 6px 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--fs-sm);
}
.send-monitor-upcoming li:last-child { border-bottom: 0; }
.send-monitor-when { font-weight: 700; font-variant-numeric: tabular-nums; }
.send-monitor-when small,
.send-monitor-who small { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.send-monitor-who { min-width: 0; overflow-wrap: anywhere; }
.send-monitor-who strong { font-weight: 600; }
.send-monitor-channel-tag { justify-self: start; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; }
.send-monitor-reason { min-width: 0; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.45; }
.send-monitor-upcoming li.is-late .send-monitor-when,
.send-monitor-upcoming li.is-late .send-monitor-reason { color: var(--red); }

@media (max-width: 1100px) {
    .send-monitor-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .send-monitor-channels,
    .send-monitor-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .send-monitor-summary { flex-wrap: wrap; padding: 10px 14px; gap: 4px 10px; }
    .send-monitor-summary small { margin-left: auto; }
    .send-monitor-summary span { order: 3; flex-basis: 100%; }
    .send-monitor { padding: 18px; border-radius: 20px; }
    .send-monitor-header { flex-wrap: wrap; }
    .send-monitor-channel,
    .send-monitor-grid > section,
    #send-monitor-body > section { padding: 14px; }
    .send-monitor-main { gap: 10px; }
    .send-monitor-main .send-monitor-stat dd { font-size: var(--fs-lg); }
    .send-monitor-alert { flex-direction: column; gap: 6px; }
    .send-monitor-upcoming li { grid-template-columns: 76px minmax(0, 1fr); }
    .send-monitor-channel-tag { grid-column: 1; grid-row: 2; }
    .send-monitor-reason { grid-column: 2; grid-row: 2; }
}