/* ============================================================
   DedicaQR — Sprint 26 — Inbound Webhooks
   CSS namespace: .iwh-*
   ============================================================ */

/* === LAYOUT === */
.iwh-page { padding: 24px; max-width: 1400px; margin: 0 auto; color: #1a1a1a; }
.iwh-page-head { display: flex; justify-content: space-between; align-items: flex-start;
                 gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.iwh-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; }
.iwh-subtitle { margin: 0; color: #6b6b6b; font-size: 14px; max-width: 760px; }
.iwh-breadcrumb { font-size: 12px; color: #999; margin-bottom: 8px; }
.iwh-breadcrumb a { color: #6b6b6b; text-decoration: none; }
.iwh-breadcrumb a:hover { color: #C9184A; }
.iwh-meta-line { display: flex; gap: 12px; align-items: center; margin-top: 8px;
                 flex-wrap: wrap; font-size: 13px; }
.iwh-base-path { font-size: 12px; color: #6b6b6b; margin-top: 6px; }
.iwh-slug-code, .iwh-mono {
    background: #FFF1EE; color: #C9184A; padding: 3px 8px; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 12px;
}

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

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

.iwh-show-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; }
.iwh-show-stat-card { background: #fff; padding: 14px; border-radius: 8px;
                      border-left: 4px solid #6b6b6b; }
.iwh-show-stat-card.iwh-stat-success  { border-left-color: #22A052; }
.iwh-show-stat-card.iwh-stat-rejected { border-left-color: #DC2626; }
.iwh-show-stat-card.iwh-stat-invalid  { border-left-color: #F59E0B; }
.iwh-show-stat-label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; }
.iwh-show-stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.iwh-show-stat-value small { font-size: 12px; color: #6b6b6b; }

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

/* === TABLA === */
.iwh-table-wrap { background: #fff; border-radius: 10px; overflow: hidden;
                  box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.iwh-table, .iwh-requests-table, .iwh-headers-table {
    width: 100%; border-collapse: collapse;
}
.iwh-table th, .iwh-requests-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;
}
.iwh-table td, .iwh-requests-table td {
    padding: 12px 14px; border-bottom: 1px solid #FFF1EE; vertical-align: middle; font-size: 13px;
}
.iwh-table tbody tr:hover { background: #FFFAFA; }
.iwh-id { font-family: monospace; font-size: 11px; color: #999; }
.iwh-name { color: #C9184A; font-weight: 600; text-decoration: none; }
.iwh-name:hover { text-decoration: underline; }
.iwh-url-cell, .iwh-slug-tiny { font-family: monospace; font-size: 11px; color: #4b4b4b; }
.iwh-url-cell strong { color: #C9184A; }
.iwh-dash { color: #ccc; }
.iwh-dim  { color: #999; font-size: 12px; }
.iwh-empty { text-align: center; padding: 40px; color: #999; font-style: italic; }
.iwh-empty-box { padding: 24px; text-align: center; color: #999; font-style: italic;
                 background: #FFFAFA; border-radius: 8px; border: 1px dashed #FFD6DD; }
.iwh-link-discrete { color: #1a1a1a; text-decoration: none; }
.iwh-link-discrete:hover { color: #C9184A; }

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

.iwh-handler-pill {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    background: #DBEAFE; color: #1E40AF;
}
.iwh-handler-pill.iwh-h-generic_queue    { background: #E5E7EB; color: #4B5563; }
.iwh-handler-pill.iwh-h-forward_outbound { background: #DBEAFE; color: #1E40AF; }
.iwh-handler-pill.iwh-h-payment_gateway  { background: #DCFCE7; color: #166534; }
.iwh-handler-pill.iwh-h-email_event      { background: #F3E8FF; color: #6B21A8; }

.iwh-algo { font-family: monospace; font-size: 10px; color: #6b6b6b;
            background: #F5F5F5; padding: 2px 6px; border-radius: 4px; }
.iwh-no-sig { color: #F59E0B; font-size: 11px; font-weight: 600; }

.iwh-invalid-tag { background: #FEE2E2; color: #991B1B; padding: 1px 6px;
                   border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 4px; }
.iwh-last-date { font-size: 11px; color: #6b6b6b; font-family: monospace; }

.iwh-lstatus { display: inline-block; padding: 2px 8px; border-radius: 6px;
               font-size: 11px; font-weight: 600; }
.iwh-ls-processed { background: #DCFCE7; color: #166534; }
.iwh-ls-rejected  { background: #FEE2E2; color: #991B1B; }
.iwh-ls-failed    { background: #FEF3C7; color: #92400E; }

.iwh-reqstatus { display: inline-block; padding: 2px 8px; border-radius: 6px;
                 font-size: 11px; font-weight: 600; }
.iwh-rs-received        { background: #E5E7EB; color: #4B5563; }
.iwh-rs-accepted        { background: #DBEAFE; color: #1E40AF; }
.iwh-rs-rejected        { background: #FEE2E2; color: #991B1B; }
.iwh-rs-processed       { background: #DCFCE7; color: #166534; }
.iwh-rs-handler_failed  { background: #FEF3C7; color: #92400E; }
.iwh-reqstatus-lg { font-size: 13px; padding: 4px 12px; vertical-align: middle; }

.iwh-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; }
.iwh-test-badge-lg { font-size: 12px; padding: 3px 10px; }
.iwh-trunc-tag { background: #F59E0B; color: #fff; padding: 1px 5px; border-radius: 4px;
                 font-size: 9px; font-weight: 700; margin-left: 6px; }
.iwh-sig-ok  { color: #166534; font-weight: 700; font-size: 16px; }
.iwh-sig-bad { color: #991B1B; font-weight: 700; font-size: 16px; }
.iwh-ip { font-size: 11px; }
.iwh-reject-code { background: #FEE2E2; color: #991B1B; padding: 2px 6px;
                   border-radius: 4px; font-size: 10px; }

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

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

.iwh-section { background: #fff; padding: 22px; border-radius: 12px;
               box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.iwh-section-title { margin: 0 0 12px; font-size: 17px; font-weight: 600;
                     display: flex; align-items: center; gap: 8px; }
.iwh-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* URL preview */
.iwh-url-preview { background: #FFFBEB; padding: 14px 18px; border-radius: 8px;
                   border-left: 4px solid #D4A24C; margin-top: 14px; }
.iwh-url-preview code { font-size: 14px; word-break: break-all; }
.iwh-url-host { color: #6b6b6b; }
.iwh-url-slug { color: #C9184A; font-weight: 700; }

/* Public URL display */
.iwh-pub-url-display { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
                       background: #FFFAFA; padding: 14px; border-radius: 8px;
                       border: 1px dashed #FFD6DD; margin-bottom: 8px; }
.iwh-pub-url { flex: 1; min-width: 280px; font-size: 14px; padding: 8px 12px; word-break: break-all; }

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

/* Subform (conditional) */
.iwh-subform { background: #FFFAFA; padding: 14px; border-radius: 8px;
               border-left: 3px solid #FFB3C1; margin-top: 12px; }

/* Handlers grid */
.iwh-handlers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iwh-handler-radio {
    display: flex; gap: 10px; padding: 14px; border-radius: 8px;
    border: 2px solid #FFE4EC; cursor: pointer;
}
.iwh-handler-radio:hover { background: #FFFAFA; }
.iwh-handler-radio input[type="radio"] { margin-top: 4px; }
.iwh-handler-radio input[type="radio"]:checked + .iwh-handler-info { color: #C9184A; }
.iwh-handler-key { display: inline-block; background: #FFF1EE; color: #C9184A;
                   padding: 2px 8px; border-radius: 4px; font-size: 11px;
                   font-family: monospace; margin-bottom: 4px; }
.iwh-handler-desc { font-size: 12px; color: #6b6b6b; }

/* Advanced (details/summary) */
.iwh-advanced { margin-top: 12px; }
.iwh-advanced summary { cursor: pointer; font-size: 13px; color: #C9184A; padding: 8px 0; }

/* === SHOW grid === */
.iwh-show-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.iwh-section-wide { grid-column: span 2; }
.iwh-dl { margin: 0; }
.iwh-dl dt { font-weight: 600; color: #6b6b6b; font-size: 12px; margin-top: 8px; }
.iwh-dl dd { margin: 2px 0 0; font-size: 13px; }
.iwh-dl-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.iwh-dl-grid dt { margin-top: 0; align-self: center; }
.iwh-dl-grid dd { margin: 0; align-self: center; }
.iwh-h3 { font-size: 14px; color: #6b6b6b; margin: 16px 0 8px;
          text-transform: uppercase; letter-spacing: 0.4px; }

.iwh-description { background: #FFF8F5; padding: 12px 16px; border-radius: 8px;
                   border-left: 3px solid #FFB3C1; color: #4b4b4b; font-size: 14px;
                   margin-bottom: 18px; }

.iwh-ip-pill { display: inline-block; background: #DBEAFE; color: #1E40AF;
               padding: 2px 8px; border-radius: 4px; font-size: 11px;
               font-family: monospace; margin: 2px; }

/* === Tabs (sender examples) === */
.iwh-tabs { display: flex; gap: 4px; margin: 14px 0 0; border-bottom: 2px solid #FFD6DD; }
.iwh-tab { background: transparent; border: none; padding: 8px 16px; cursor: pointer;
           font-weight: 600; color: #6b6b6b; border-bottom: 3px solid transparent;
           margin-bottom: -2px; }
.iwh-tab:hover { color: #C9184A; }
.iwh-tab-active { color: #C9184A; border-bottom-color: #C9184A; }
.iwh-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; }
.iwh-code-active { display: block; }

/* === Body / Headers display === */
.iwh-payload-pre, .iwh-body-pre, .iwh-error-pre, .iwh-config-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;
}
.iwh-error-pre   { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.iwh-payload-pre { background: #F5F5F5; color: #1a1a1a; max-height: 500px; }
.iwh-config-pre  { background: #FFFBEB; color: #92400E; max-height: 200px; }

.iwh-headers-table { background: #FFFAFA; border-radius: 6px; }
.iwh-headers-table td { padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #FFF1EE; }
.iwh-headers-table td:first-child { font-weight: 600; width: 30%; }

/* Security checks list */
.iwh-checks-list { list-style: none; padding: 0; margin: 12px 0; }
.iwh-checks-list li { padding: 6px 12px; margin-bottom: 4px; border-radius: 6px; font-size: 13px; }
.iwh-check-ok      { background: #DCFCE7; color: #166534; }
.iwh-check-fail    { background: #FEE2E2; color: #991B1B; }
.iwh-check-neutral { background: #F5F5F5; color: #6b6b6b; }

/* Signature debug */
.iwh-sig-display { word-break: break-all; font-size: 10px; }
.iwh-sig-help { background: #FEF3C7; color: #92400E; padding: 10px 14px;
                border-radius: 6px; margin-top: 10px; font-size: 12px; }

/* Rejection banner */
.iwh-rejection-banner { background: #FEE2E2; padding: 10px 14px; border-radius: 6px;
                        color: #991B1B; margin-top: 12px; font-size: 13px; }

.iwh-ua { font-size: 10px; color: #6b6b6b; word-break: break-all; }
.iwh-forward-link { background: #DBEAFE; padding: 10px 14px; border-radius: 6px;
                    color: #1E40AF; margin-top: 12px; font-size: 13px; }
.iwh-forward-link a { color: #1E40AF; font-weight: 600; }

/* === Lifecycle === */
.iwh-lifecycle-actions, .iwh-actions-bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.d-inline { display: inline-block; }
.iwh-btn-danger { color: #C9184A; }

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

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

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

/* Request row bg by status */
.iwh-req-row.iwh-rs-rejected       { background: #FEF2F2; }
.iwh-req-row.iwh-rs-handler_failed { background: #FFFBEB; }
.iwh-req-row.iwh-rs-processed      { background: #F7FCF7; }

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