/* ── OutboxMonitorCard — global (component-level CSS) ── */

/* ── Card container ──────────────────────────────────────── */
.system-action-card {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-gradient);
}

body.dark .system-action-card {
    border-color: var(--card-border-dark);
    background: var(--card-gradient-dark);
}

.system-action-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.system-action-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--card-eyebrow);
}

body.dark .system-action-eyebrow {
    color: var(--card-eyebrow-dark);
}

.system-action-card h4 {
    margin: 0;
    color: var(--color-primary-900);
    font-size: 1.1rem;
}

body.dark .system-action-card h4 {
    color: var(--color-primary-50);
}

.system-action-description {
    margin: 0.45rem 0 0;
    color: var(--color-gray-700);
    max-width: 48rem;
}

body.dark .system-action-description {
    color: var(--color-muted-dark);
}

/* ── Status pill ────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-pill-idle   { color: var(--card-eyebrow); background: var(--color-primary-50); }
.status-pill-ready  { color: #145b2a; background: #d7f5de; }
.status-pill-progress { color: #8a4b00; background: #ffe7c2; }
.status-pill-failed { color: #8f1f1f; background: #ffd8d8; }

body.dark .status-pill-idle   { color: var(--card-eyebrow-dark); background: rgba(143, 176, 205, 0.15); }
body.dark .status-pill-ready  { color: #cbf5d5; background: #20482b; }
body.dark .status-pill-progress { color: #ffdbac; background: #5e4212; }
body.dark .status-pill-failed { color: #ffd3d3; background: #5f2424; }

/* ── Action controls ────────────────────────────────────── */
.system-action-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.btn-action {
    min-height: 2.375rem;
}

/* Spin animation for refresh icon when loading */
.refresh-btn:disabled .mud-button-icon-start {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Stat tiles ──────────────────────────────────────────── */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    background: #eef3f9;
    border: 1px solid #dce6f0;
}

body.dark .stat-tile {
    background: #1c2a36;
    border-color: #2c4d68;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-primary-900);
}

body.dark .stat-value {
    color: var(--color-primary-50);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--card-eyebrow);
}

body.dark .stat-label {
    color: var(--card-eyebrow-dark);
}

.stat-tile-pending .stat-value { color: #8a4b00; }
.stat-tile-error   .stat-value { color: #8f1f1f; }
.stat-tile-processed .stat-value { color: #145b2a; }

body.dark .stat-tile-pending .stat-value { color: #ffdbac; }
body.dark .stat-tile-error   .stat-value { color: #ffd3d3; }
body.dark .stat-tile-processed .stat-value { color: #cbf5d5; }

.stat-tile-pending  { border-color: #eed7aa; background: #fdf6e9; }
.stat-tile-error    { border-color: #edb4b4; background: #fdf0f0; }
.stat-tile-processed { border-color: #a8dbb5; background: #eef9f0; }

body.dark .stat-tile-pending  { border-color: #5e4212; background: rgba(94, 66, 18, 0.2); }
body.dark .stat-tile-error    { border-color: #5f2424; background: rgba(95, 36, 36, 0.2); }
body.dark .stat-tile-processed { border-color: #20482b; background: rgba(32, 72, 43, 0.2); }

/* ── Table ──────────────────────────────────────────────── */
.outbox-table-scroll {
    margin-top: 1rem;
    max-height: 22rem;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #dce6f0;
    border-radius: 10px;
}

body.dark .outbox-table-scroll {
    border-color: #2c4d68;
}

.outbox-table {
    font-size: 0.88rem;
}

.outbox-table .mud-table-container {
    overflow: visible;
}

.outbox-th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-700);
    background: #eef3f9;
    border-bottom: 2px solid var(--card-border);
}

body.dark .outbox-th {
    color: var(--card-eyebrow-dark);
    background: #1c2a36;
    border-bottom-color: var(--card-border-dark);
}

.outbox-td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #dce6f0;
    color: var(--color-primary-900);
}

body.dark .outbox-td {
    border-bottom-color: #2c4d68;
    color: var(--color-primary-50);
}

.outbox-table .mud-table-body .mud-table-row:hover {
    background: rgba(48, 63, 159, 0.04);
}

body.dark .outbox-table .mud-table-body .mud-table-row:hover {
    background: rgba(197, 202, 233, 0.08);
}

.row-error,
.row-error:hover {
    background: rgba(255, 216, 216, 0.25) !important;
}

body.dark .row-error,
body.dark .row-error:hover {
    background: rgba(95, 36, 36, 0.25) !important;
}
}

.row-processed {
    opacity: 0.65;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge-pending,
.badge-processed,
.badge-error {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-pending {
    color: #8a4b00;
    background: #ffe7c2;
}

.badge-processed {
    color: #145b2a;
    background: #d7f5de;
}

.badge-error {
    color: #8f1f1f;
    background: #ffd8d8;
    cursor: help;
}

body.dark .badge-pending {
    color: #ffdbac;
    background: #5e4212;
}

body.dark .badge-processed {
    color: #cbf5d5;
    background: #20482b;
}

body.dark .badge-error {
    color: #ffd3d3;
    background: #5f2424;
}

/* ── Misc ───────────────────────────────────────────────── */
.placeholder-note {
    margin: 1rem 0 0;
    color: var(--card-eyebrow);
    font-size: 0.88rem;
    font-style: italic;
}

body.dark .placeholder-note {
    color: var(--color-muted-dark);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .stat-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}