/* ============================================================
   DedicaQR — Sprint 25 — Webhooks
   CSS namespace: .wh-*
   ============================================================ */

/* === LAYOUT === */
.wh-page { padding: 24px; max-width: 1400px; margin: 0 auto; color: #1a1a1a; }
.wh-page-head { display: flex; justify-content: space-between; align-items: flex-start;
                gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.wh-title { margin: 0 0 4px; font-family: 'Playfair Display', Georgia, serif;
            color: #C9184A; font-size: 28px; font-weight: 700;
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wh-subtitle { margin: 0; color: #6b6b6b; font-size: 14px; max-width: 760px; }
.wh-breadcrumb { font-size: 12px; color: #999; margin-bottom: 8px; }
.wh-breadcrumb a { color: #6b6b6b; text-decoration: none; }
.wh-breadcrumb a:hover { color: #C9184A; }
.wh-meta-line { display: flex; gap: 12px; align-items: center; margin-top: 8px;
                flex-wrap: wrap; font-size: 13px; }
.wh-slug-code, .wh-mono {
    background: #FFF1EE; color: #C9184A; padding: 3px 8px; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 12px;
}

/* === DEPS WARNING === */
.wh-deps-warning {
    background: #FEF3C7; border-left: 4px solid #D4A24C;
    padding: 14px 18px; border-radius: 6px; margin-bottom: 18px; font-size: 13px;
}
.wh-deps-warning ul { margin: 6px 0 0 18px; padding: 0; }

/* === STATS === */
.wh-stats-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px;
}
.wh-stat-card { background: #fff; border: 1px solid #FFD6DD; border-radius: 10px;
                padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.wh-stat-card.wh-st-total    { border-top: 3px solid #6b6b6b; }
.wh-stat-card.wh-st-active   { border-top: 3px solid #22A052; }
.wh-stat-card.wh-st-paused   { border-top: 3px solid #D4A24C; }
.wh-stat-card.wh-st-archived { border-top: 3px solid #999; }
.wh-stat-card.wh-st-failed   { border-top: 3px solid #C9184A; }
.wh-stat-label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.5px; }
.wh-stat-value { font-size: 28px; font-weight: 700; margin-top: 4px; }

/* Show stats (sub-cards) */
.wh-show-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; }
.wh-show-stat-card { background: #fff; padding: 14px; border-radius: 8px;
                     border-left: 4px solid #6b6b6b; }
.wh-show-stat-card.wh-stat-success { border-left-color: #22A052; }
.wh-show-stat-card.wh-stat-failed  { border-left-color: #C9184A; }
.wh-show-stat-label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; }
.wh-show-stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }

/* === FILTERS === */
.wh-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 20px;
              background: #fff; padding: 14px; border-radius: 8px; flex-wrap: wrap; }
.wh-filter-q { min-width: 280px; }
.wh-filter-tag { background: #FFF1EE; padding: 6px 10px; border-radius: 6px;
                 color: #C9184A; font-size: 12px; font-weight: 600; }

/* === TABLA === */
.wh-table-wrap { background: #fff; border-radius: 10px; overflow: hidden;
                 box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wh-table, .wh-deliveries-table, .wh-headers-table {
    width: 100%; border-collapse: collapse;
}
.wh-table th, .wh-deliveries-table th {
    background: #FFF1EE; padding: 12px 14px; text-align: left;
    font-size: 12px; font-weight: 600; color: #6b6b6b; text-transform: uppercase;
    letter-spacing: 0.4px; border-bottom: 2px solid #FFD6DD;
}
.wh-table td, .wh-deliveries-table td {
    padding: 12px 14px; border-bottom: 1px solid #FFF1EE; vertical-align: middle; font-size: 13px;
}
.wh-table tbody tr:hover { background: #FFFAFA; }
.wh-id { font-family: monospace; font-size: 11px; color: #999; }
.wh-name { color: #C9184A; font-weight: 600; text-decoration: none; }
.wh-name:hover { text-decoration: underline; }
.wh-slug { font-family: monospace; font-size: 11px; color: #999; margin-top: 2px; }
.wh-slug-tiny { font-family: monospace; font-size: 10px; color: #aaa; }
.wh-url { font-family: monospace; font-size: 11px; color: #4b4b4b; }
.wh-dash { color: #ccc; }
.wh-dim  { color: #999; font-size: 12px; }
.wh-empty { text-align: center; padding: 40px; color: #999; font-style: italic; }
.wh-empty-box { padding: 24px; text-align: center; color: #999; font-style: italic;
                background: #FFFAFA; border-radius: 8px; border: 1px dashed #FFD6DD; }
.wh-link-discrete { color: #1a1a1a; text-decoration: none; }
.wh-link-discrete:hover { color: #C9184A; }

/* === BADGES === */
.wh-badge { display: inline-block; padding: 3px 10px; border-radius: 12px;
            font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.wh-badge.wh-st-active   { background: #DCFCE7; color: #166534; }
.wh-badge.wh-st-paused   { background: #FEF3C7; color: #92400E; }
.wh-badge.wh-st-archived { background: #E5E7EB; color: #4B5563; }

.wh-sub-all { background: #6B21A8; color: #fff; padding: 3px 8px; border-radius: 6px;
              font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.wh-sub-count { font-weight: 700; margin-right: 6px; }
.wh-event-pill {
    display: inline-block; background: #FFF1EE; color: #C9184A;
    padding: 2px 6px; border-radius: 4px; font-size: 10px;
    font-family: monospace; margin-right: 3px;
}
.wh-event-more { color: #999; font-size: 11px; }
.wh-event-pill-lg {
    display: inline-block; background: #FFF1EE; color: #C9184A;
    padding: 6px 12px; border-radius: 6px; font-size: 13px;
    font-family: monospace; margin: 3px;
}

.wh-laststatus, .wh-delstatus {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
}
.wh-ls-success, .wh-ds-success   { background: #DCFCE7; color: #166534; }
.wh-ls-failed,  .wh-ds-failed    { background: #FEE2E2; color: #991B1B; }
.wh-ls-exhausted, .wh-ds-exhausted { background: #F3E8FF; color: #6B21A8; }
.wh-ds-pending   { background: #FEF3C7; color: #92400E; }
.wh-ds-sending   { background: #DBEAFE; color: #1E40AF; }
.wh-ds-cancelled { background: #E5E7EB; color: #4B5563; }
.wh-delstatus-lg { font-size: 13px; padding: 4px 12px; vertical-align: middle; }
.wh-last-date { font-size: 11px; color: #6b6b6b; font-family: monospace; margin-bottom: 2px; }

.wh-test-badge { background: #D4A24C; color: #fff; padding: 1px 6px; border-radius: 4px;
                 font-size: 9px; font-weight: 700; letter-spacing: 0.5px; margin-left: 4px; }
.wh-test-badge-lg { font-size: 12px; padding: 3px 10px; }

/* HTTP codes */
.wh-http-code { font-family: monospace; font-weight: 700; font-size: 12px;
                padding: 2px 6px; border-radius: 4px; }
.wh-http-2xx { background: #DCFCE7; color: #166534; }
.wh-http-4xx { background: #FEF3C7; color: #92400E; }
.wh-http-5xx { background: #FEE2E2; color: #991B1B; }
.wh-http-code-lg { font-size: 16px; padding: 4px 10px; }

/* Success rate */
.wh-rate-bar {
    width: 80px; height: 6px; background: #FFE4EC; border-radius: 3px; overflow: hidden;
    margin-bottom: 2px;
}
.wh-rate-fill { height: 100%; background: linear-gradient(90deg, #C9184A, #22A052); }
.wh-rate-text { font-size: 10px; color: #6b6b6b; }

/* === FORM === */
.wh-form { display: flex; flex-direction: column; gap: 20px; }
.wh-form-row { margin-bottom: 14px; }
.wh-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wh-label { display: block; font-weight: 600; font-size: 13px; color: #1a1a1a; margin-bottom: 6px; }
.wh-help  { color: #6b6b6b; font-size: 12px; display: block; margin-top: 4px; }
.wh-num   { max-width: 100px; }
.wh-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wh-form-actions { display: flex; gap: 10px; justify-content: flex-end;
                   padding-top: 16px; border-top: 1px solid #FFE4EC; }

.wh-section { background: #fff; padding: 22px; border-radius: 12px;
              box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.wh-section-title { margin: 0 0 12px; font-size: 17px; font-weight: 600;
                    display: flex; align-items: center; gap: 8px; }
.wh-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wh-section-error { background: #FEF2F2; border-left: 4px solid #C9184A; }
.wh-counter { font-size: 14px; color: #999; font-weight: 400; }

/* Secret input + buttons */
.wh-secret-wrap, .wh-secret-display {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.wh-secret-wrap input, .wh-secret-display input { flex: 1; min-width: 280px; }
.wh-secret-edit-info {
    background: #DBEAFE; padding: 10px 14px; border-radius: 6px;
    color: #1E40AF; font-size: 13px; margin: 12px 0;
}
.wh-secret-edit-info a { margin-left: 8px; color: #1E40AF; font-weight: 600; }

/* Events grid (subscriptions checkbox) */
.wh-sub-all-toggle { background: #FFF8F5; padding: 12px 16px; border-radius: 8px;
                     border-left: 4px solid #C9184A; margin-bottom: 16px; }
.wh-events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.wh-events-domain { background: #FFFAFA; padding: 14px; border-radius: 8px; }
.wh-events-domain-title {
    margin: 0 0 10px; color: #C9184A; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 1px solid #FFD6DD; padding-bottom: 6px;
}
.wh-event-checkbox {
    display: flex; gap: 10px; align-items: flex-start; padding: 6px;
    border-radius: 4px; cursor: pointer; margin-bottom: 4px;
}
.wh-event-checkbox:hover { background: #fff; }
.wh-event-checkbox input { margin-top: 4px; }
.wh-event-key {
    display: inline-block; font-size: 11px; color: #C9184A;
    font-family: monospace; margin-bottom: 2px;
}
.wh-event-desc { font-size: 11px; color: #6b6b6b; }

/* Sub-all banner (show view) */
.wh-sub-all-banner {
    background: linear-gradient(135deg, #F3E8FF 0%, #FFF1EE 100%);
    padding: 14px 18px; border-radius: 10px; border-left: 4px solid #6B21A8;
}
.wh-sub-all-banner p { margin: 4px 0 0; color: #4b4b4b; font-size: 13px; }
.wh-sub-count-label { color: #6b6b6b; font-size: 13px; margin-bottom: 10px; }
.wh-events-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Headers builder */
.wh-headers-table { background: #FFFAFA; border-radius: 6px; }
.wh-headers-table td { padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #FFF1EE; }
.wh-headers-table td:first-child { font-weight: 600; }

.wh-headers-row {
    display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px;
    align-items: center; margin-bottom: 6px;
}
.wh-headers-row input { width: 100%; }
.wh-headers-remove {
    background: transparent; border: none; color: #C9184A;
    font-size: 20px; cursor: pointer; padding: 0 8px;
}

/* Backoff preview */
.wh-backoff-preview {
    background: #FFFBEB; padding: 12px 16px; border-radius: 8px;
    margin-top: 10px; border-left: 3px solid #D4A24C; font-family: monospace; font-size: 13px;
}

/* === SHOW grid === */
.wh-show-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.wh-section-wide { grid-column: span 2; }

.wh-dl { margin: 0; }
.wh-dl dt { font-weight: 600; color: #6b6b6b; font-size: 12px; margin-top: 8px; }
.wh-dl dd { margin: 2px 0 0; font-size: 13px; }
.wh-dl-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.wh-dl-grid dt { margin-top: 0; align-self: center; }
.wh-dl-grid dd { margin: 0; align-self: center; }

.wh-h3 { font-size: 14px; color: #6b6b6b; margin: 16px 0 8px;
         text-transform: uppercase; letter-spacing: 0.4px; }
.wh-url-display { font-family: monospace; word-break: break-all; }
.wh-description {
    background: #FFF8F5; padding: 12px 16px; border-radius: 8px;
    border-left: 3px solid #FFB3C1; color: #4b4b4b; font-size: 14px; margin-bottom: 18px;
}

/* === Tabs (verification examples) === */
.wh-tabs { display: flex; gap: 4px; margin-top: 14px; margin-bottom: 0; border-bottom: 2px solid #FFD6DD; }
.wh-tab {
    background: transparent; border: none; padding: 8px 16px; cursor: pointer;
    font-weight: 600; color: #6b6b6b; border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.wh-tab:hover { color: #C9184A; }
.wh-tab-active { color: #C9184A; border-bottom-color: #C9184A; }
.wh-code-block {
    background: #1a1a1a; color: #f5f5f5; padding: 16px;
    border-radius: 0 0 8px 8px; font-size: 12px; line-height: 1.5;
    overflow-x: auto; display: none; margin-top: 0;
}
.wh-code-active { display: block; }

/* === Payloads and bodies === */
.wh-payload-pre, .wh-body-pre, .wh-headers-pre, .wh-error-pre {
    background: #FFFAFA; padding: 12px; border-radius: 6px;
    font-size: 11px; font-family: monospace; line-height: 1.5;
    overflow: auto; max-height: 400px; white-space: pre-wrap; word-break: break-word;
    border: 1px solid #FFE4EC;
}
.wh-error-pre { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.wh-payload-pre { background: #F5F5F5; color: #1a1a1a; max-height: 500px; }
.wh-body-pre { background: #FFFAFA; }
.wh-headers-pre { font-size: 11px; max-height: 200px; }

.wh-request-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
                   padding: 10px; background: #FFFAFA; border-radius: 6px; }
.wh-signature { word-break: break-all; }
.wh-sig { font-size: 10px; color: #6b6b6b; }
.wh-response-status { font-size: 16px; margin-bottom: 10px; }

/* === Source tags === */
.wh-source-tag { background: #DBEAFE; color: #1E40AF; padding: 2px 8px;
                 border-radius: 6px; font-size: 10px; font-weight: 600;
                 text-transform: uppercase; letter-spacing: 0.4px; }
.wh-fanout-count { background: #C9184A; color: #fff; padding: 2px 8px;
                   border-radius: 10px; font-weight: 700; font-size: 12px; }
.wh-event-type-lg { font-size: 16px; background: #FFF1EE; color: #C9184A;
                    padding: 4px 12px; border-radius: 6px; }
.wh-event-id-cell { font-size: 10px; color: #6b6b6b; }

/* === Lifecycle === */
.wh-lifecycle-actions, .wh-actions-bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.d-inline { display: inline-block; }
.wh-btn-danger { color: #C9184A; }
.wh-success-text { color: #166534; font-weight: 600; }

/* === Pagination === */
.wh-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.wh-page-link {
    background: #fff; border: 1px solid #FFD6DD; padding: 6px 12px;
    border-radius: 6px; color: #C9184A; text-decoration: none; font-size: 13px;
}
.wh-page-link:hover { background: #FFF1EE; }
.wh-page-link.wh-page-active { background: #C9184A; color: #fff; border-color: #C9184A; }

/* Quick links */
.wh-quicklinks {
    display: flex; gap: 16px; margin-top: 20px; padding: 14px;
    background: #FFFAFA; border-radius: 8px; justify-content: center;
}
.wh-quicklinks a {
    color: #C9184A; text-decoration: none; font-weight: 600; font-size: 13px;
}
.wh-quicklinks a:hover { text-decoration: underline; }

/* Sidebar tag NEW */
.sidebar-tag-new { background: #22A052 !important; color: #fff !important; }

/* === Advanced details === */
.wh-advanced { margin-top: 12px; }
.wh-advanced summary { cursor: pointer; font-size: 13px; color: #C9184A; }

/* === Delivery row bg === */
.wh-del-row.wh-ds-failed    { background: #FEF2F2; }
.wh-del-row.wh-ds-exhausted { background: #FAF5FF; }
.wh-del-row.wh-ds-success   { background: #F7FCF7; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
    .wh-stats-grid    { grid-template-columns: repeat(3, 1fr); }
    .wh-show-stats    { grid-template-columns: repeat(2, 1fr); }
    .wh-show-grid     { grid-template-columns: 1fr; }
    .wh-section-wide  { grid-column: span 1; }
}
@media (max-width: 800px) {
    .wh-stats-grid    { grid-template-columns: repeat(2, 1fr); }
    .wh-form-grid-2   { grid-template-columns: 1fr; }
    .wh-events-grid   { grid-template-columns: 1fr; }
    .wh-page-head     { flex-direction: column; }
    .wh-lifecycle-actions { width: 100%; }
}
@media (max-width: 600px) {
    .wh-stats-grid    { grid-template-columns: 1fr; }
    .wh-show-stats    { grid-template-columns: 1fr; }
}