/**
 * Webhook Health Monitor Styles
 * Extends the premium shared design system for the webhook health page.
 */

/* ---------------------------------------------------------------
   Page Layout
   --------------------------------------------------------------- */
.strp-webhook-monitor .strp-card {
    margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   Health Status Bar
   --------------------------------------------------------------- */
.strp-webhook-health-bar {
    padding: 16px 24px;
}

.strp-webhook-health-bar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.strp-webhook-health-bar__label {
    font-size: 16px;
    color: var(--strp-text-primary);
}

.strp-webhook-health-bar__separator {
    color: var(--strp-border);
    margin: 0 4px;
}

.strp-webhook-health-bar__last-event {
    font-size: 14px;
    color: var(--strp-text-secondary);
}

/* ---------------------------------------------------------------
   Events Table
   --------------------------------------------------------------- */
.strp-webhook-events-card {
    overflow: visible;
}

.strp-webhook-events-table {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

.strp-webhook-events-table thead th {
    background: var(--strp-surface-secondary);
    border-bottom: 1px solid var(--strp-border);
    color: var(--strp-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.strp-webhook-events-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--strp-border);
    font-size: 14px;
    color: var(--strp-text-primary);
    vertical-align: middle;
}

.strp-webhook-events-table tbody tr:last-child td {
    border-bottom: none;
}

.strp-webhook-events-table tbody tr:hover {
    background: var(--strp-surface-secondary);
}

.strp-webhook-events-table__status {
    width: 50px;
    text-align: center;
}

.strp-webhook-events-table code {
    font-size: 12px;
    background: var(--strp-surface-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--strp-text-secondary);
}

/* ---------------------------------------------------------------
   Status Icons
   --------------------------------------------------------------- */
.strp-webhook-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.strp-webhook-status-icon--success {
    background: rgba(0, 163, 42, 0.1);
    color: var(--strp-success);
}

.strp-webhook-status-icon--failed {
    background: rgba(214, 54, 56, 0.1);
    color: var(--strp-danger);
}

/* ---------------------------------------------------------------
   Event Type Filter
   --------------------------------------------------------------- */
.strp-webhook-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--strp-border);
    border-radius: var(--strp-radius-sm);
    font-size: 14px;
    color: var(--strp-text-primary);
    background: var(--strp-surface);
    min-width: 200px;
    cursor: pointer;
    transition: border-color var(--strp-transition);
}

.strp-webhook-filter-select:focus {
    outline: none;
    border-color: var(--strp-primary);
    box-shadow: 0 0 0 2px var(--strp-primary-bg);
}

/* ---------------------------------------------------------------
   Retry Queue Table
   --------------------------------------------------------------- */
.strp-webhook-retry-card {
    overflow: visible;
}

.strp-webhook-retry-actions {
    display: flex;
    gap: 8px;
}

.strp-webhook-retry-table {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

.strp-webhook-retry-table thead th {
    background: var(--strp-surface-secondary);
    border-bottom: 1px solid var(--strp-border);
    color: var(--strp-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.strp-webhook-retry-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--strp-border);
    font-size: 14px;
    color: var(--strp-text-primary);
    vertical-align: middle;
}

.strp-webhook-retry-table tbody tr:last-child td {
    border-bottom: none;
}

.strp-webhook-retry-table tbody tr:hover {
    background: var(--strp-surface-secondary);
}

.strp-webhook-retry-table code {
    font-size: 12px;
    background: var(--strp-surface-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--strp-text-secondary);
}

.strp-webhook-retry-count {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    background: var(--strp-surface-tertiary);
    color: var(--strp-text-secondary);
}

.strp-webhook-retry-count--exhausted {
    background: rgba(214, 54, 56, 0.1);
    color: var(--strp-danger);
}

.strp-webhook-retry-error {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--strp-text-secondary);
}

/* ---------------------------------------------------------------
   Button Loading State
   --------------------------------------------------------------- */
.strp-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 782px) {
    .strp-webhook-health-bar__inner {
        flex-wrap: wrap;
    }

    .strp-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .strp-webhook-retry-actions {
        flex-wrap: wrap;
    }

    .strp-webhook-filter-select {
        width: 100%;
    }

    .strp-webhook-events-table,
    .strp-webhook-retry-table {
        font-size: 13px;
    }

    .strp-webhook-retry-error {
        max-width: 150px;
    }
}

/* RTL Support */
[dir="rtl"] .strp-webhook-health-label {
    text-align: right;
}

[dir="rtl"] .strp-webhook-events-table th,
[dir="rtl"] .strp-webhook-events-table td,
[dir="rtl"] .strp-webhook-retry-queue th,
[dir="rtl"] .strp-webhook-retry-queue td {
    text-align: right;
}

[dir="rtl"] .strp-webhook-filter-bar {
    flex-direction: row-reverse;
}

@media (max-width: 782px) {
    .strp-webhook-events-card,
    .strp-webhook-retry-card {
        overflow-x: auto;
    }
}
