.webhook-dashboard {
    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 70px);
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    background: #1d1d1d;
}

.dashboard-webhooks {
    width: 79%;
    padding: 28px 10px 60px;
    color: #fff;
    text-align: left;
}

.webhook-page-title span,
.webhook-card-heading,
.webhook-card-heading span,
.webhook-url-line,
.webhook-actions,
.webhook-privacy-note {
    display: flex;
    align-items: center;
}

.webhook-page-title span { gap: 10px; }
.webhook-page-title i { color: #00cdbd; font-size: 1.5rem; }
.webhook-page-title h1 { margin: 0; font-size: 1.45rem; }
.webhook-page-title p { margin: 7px 0 20px; color: #a6a6a6; font-size: .88rem; }

.webhook-alert {
    margin-bottom: 15px;
    padding: 12px 14px;
    border-radius: 7px;
    font-size: .88rem;
}
.webhook-alert.success { color: #b6f5df; background: #0b503f; border: 1px solid #168c70; }
.webhook-alert.error { color: #ffd1d1; background: #542326; border: 1px solid #9a4148; }

.webhook-card {
    margin-bottom: 18px;
    border: 1px solid #ffffff20;
    border-radius: 9px;
    background: #242424;
    overflow: hidden;
}

.webhook-card-heading {
    min-height: 52px;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid #ffffff16;
}
.webhook-card-heading span { gap: 9px; }
.webhook-card-heading i { color: #00cdbd; }
.webhook-card-heading a { color: #00cdbd; font-size: .82rem; }
.webhook-card-heading small { color: #999; }

.webhook-help { margin: 18px 18px 5px; color: #b5b5b5; font-size: .85rem; line-height: 1.5; }
.webhook-help code { color: #5ce6d9; }
.webhook-form { padding: 12px 18px 20px; }
.webhook-form > label,
.webhook-form legend { display: block; margin: 11px 0 7px; color: #e6e6e6; font-size: .86rem; font-weight: 500; }
.webhook-form input[type="url"],
.webhook-form input[type="password"] {
    width: 100%;
    padding: 12px;
    color: #fff;
    background: #1d1d1d;
    border: 1px solid #ffffff2a;
    border-radius: 6px;
    outline: none;
}
.webhook-form input:focus { border-color: #00cdbd; }
.webhook-form small { display: block; margin-top: 6px; color: #888; font-size: .76rem; }
.webhook-form fieldset { margin-top: 18px; border: 0; }
.webhook-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.webhook-events label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid #ffffff1f;
    border-radius: 6px;
    cursor: pointer;
}
.webhook-events input { accent-color: #00cdbd; width: 17px; height: 17px; }
.webhook-submit-row { display: flex; justify-content: flex-end; margin-top: 18px; }
.webhook-submit-row button {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    padding: 10px 22px;
    background: #00cdbd;
    color: #102421;
    font-weight: 600;
    cursor: pointer;
}

.webhook-list { padding: 8px 15px 15px; }
.webhook-item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 3px;
    border-bottom: 1px solid #ffffff14;
}
.webhook-item:last-child { border-bottom: 0; }
.webhook-item-main { min-width: 0; }
.webhook-url-line { gap: 9px; min-width: 0; }
.webhook-url-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.webhook-status, .delivery-status { padding: 3px 8px; border-radius: 20px; font-size: .7rem; font-weight: 600; }
.webhook-status.active, .delivery-status.delivered { color: #8ff0cf; background: #16483a; }
.webhook-status.paused, .delivery-status.pending, .delivery-status.processing { color: #ffe3a3; background: #5b4920; }
.delivery-status.failed { color: #ffc1c1; background: #612c30; }
.webhook-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.webhook-tags span { padding: 3px 7px; border-radius: 4px; color: #85eade; background: #123c38; font-size: .68rem; }
.webhook-counters { display: flex; flex-wrap: wrap; gap: 12px; color: #9b9b9b; font-size: .72rem; }
.webhook-counters b { color: #ddd; }
.webhook-counters .failed b { color: #ff8989; }
.webhook-actions { align-self: center; gap: 3px; }
.webhook-actions form { margin: 0; }
.webhook-actions a, .webhook-actions button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 1px solid #ffffff20;
    border-radius: 5px;
    cursor: pointer;
}
.webhook-actions a:hover, .webhook-actions button:hover { color: #00cdbd; border-color: #00cdbd; }
.webhook-actions button.danger:hover { color: #ff7777; border-color: #ff7777; }

.webhook-empty { padding: 22px 18px; color: #888; font-size: .85rem; }
.webhook-table-wrap { overflow-x: auto; }
.webhook-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .75rem; }
.webhook-table th { color: #aaa; font-weight: 500; }
.webhook-table th, .webhook-table td { padding: 10px 12px; border-bottom: 1px solid #ffffff10; text-align: left; }
.webhook-table tbody tr:last-child td { border-bottom: 0; }

.webhook-privacy-note {
    gap: 12px;
    padding: 13px 15px;
    color: #c4c4c4;
    background: #26221a;
    border: 1px solid #66552b;
    border-radius: 7px;
    font-size: .78rem;
    line-height: 1.45;
}
.webhook-privacy-note i { color: #e3b94f; font-size: 1.25rem; }

@media only screen and (max-width: 789px) {
    .dashboard-webhooks { width: 96%; padding: 20px 5px 40px; }
    .webhook-events { grid-template-columns: 1fr; }
    .webhook-item { flex-direction: column; }
    .webhook-actions { align-self: flex-start; }
    .webhook-card-heading { align-items: flex-start; }
}