/* Abuse Center client area. Colors come from Lagom tokens where they are reliable;
   the few surfaces Lagom does not define (report text, timeline) get their own tokens with a dark-mode override. */
.wdab {
    --wdab-surface: #f6f8fb;
    --wdab-surface-text: #1f2937;
    --wdab-line: var(--ui-block-border-color, rgba(15, 23, 42, .1));
    --wdab-muted: var(--text-lighter-color, #6b7280);
    --wdab-heading: var(--text-heading-color, #111827);
    --wdab-primary: var(--brand-primary, #1e64ff);
    --wdab-danger: var(--brand-danger, #e5484d);
    --wdab-warning: var(--brand-warning, #f59e0b);
    --wdab-success: var(--brand-success, #16a34a);
    --wdab-info: var(--brand-info, #0ea5e9);
    --wdab-radius: var(--ui-block-border-radius, 8px);
    display: flex; flex-direction: column; gap: 16px;
}
html.lagom-dark-mode .wdab {
    --wdab-surface: rgba(255, 255, 255, .04);
    --wdab-surface-text: #e5e7eb;
    --wdab-line: rgba(255, 255, 255, .1);
    --wdab-muted: #9ca3af;
    --wdab-heading: #f3f4f6;
}
.wdab .panel { margin-bottom: 0; }
.wdab .text-small { font-size: 12px; }
.wdab-muted { color: var(--wdab-muted); }
.wdab-mono { font-family: var(--font-family-monospace, ui-monospace, monospace); font-size: .95em; }
.wdab-intro { margin: 0; }
.wdab-tabs { margin-bottom: 0; }
.wdab-tabs .badge { margin-inline-start: 6px; }

/* summary chips */
.wdab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wdab-stat { border: 1px solid var(--wdab-line); border-radius: var(--wdab-radius); background: var(--ui-block-bg, #fff); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.wdab-stat-num { font-size: 24px; font-weight: 700; color: var(--wdab-heading); line-height: 1.2; }
.wdab-stat-label { color: var(--wdab-muted); font-size: 13px; }
.wdab-stat.is-warning { border-color: var(--wdab-warning); }
.wdab-stat.is-warning .wdab-stat-num { color: var(--wdab-warning); }
.wdab-stat.is-danger { border-color: var(--wdab-danger); }
.wdab-stat.is-danger .wdab-stat-num { color: var(--wdab-danger); }

/* case cards */
.wdab-cases { display: flex; flex-direction: column; gap: 10px; }
.wdab-case { display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none !important; color: inherit;
    border-inline-start: 4px solid var(--wdab-line); transition: box-shadow .15s, transform .15s; }
.wdab-case:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.wdab-case-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wdab-case-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wdab-ref { font-weight: 700; color: var(--wdab-heading); font-variant-numeric: tabular-nums; }
.wdab-case-title { color: var(--wdab-heading); font-weight: 600; }
.wdab-case-side { text-align: end; display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.wdab-case-deadline { color: var(--wdab-danger); font-size: 13px; font-weight: 600; }
.wdab-case.is-unread .wdab-case-title::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wdab-primary); margin-inline-start: 8px; vertical-align: middle; }
.wdab-chev { color: var(--wdab-muted); }
html[dir="rtl"] .wdab-chev, .rtl .wdab-chev { transform: scaleX(-1); }
.wdab-tone-danger { border-inline-start-color: var(--wdab-danger) !important; }
.wdab-tone-warning { border-inline-start-color: var(--wdab-warning) !important; }
.wdab-tone-info { border-inline-start-color: var(--wdab-info) !important; }
.wdab-tone-default { border-inline-start-color: var(--wdab-line) !important; }

/* report header */
.wdab-hero { border-inline-start: 4px solid var(--wdab-line); }
.wdab-hero-side { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wdab-pdf { white-space: nowrap; }
.wdab-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wdab-hero-title { display: flex; align-items: center; gap: 14px; }
.wdab-hero-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
    background: var(--wdab-surface); color: var(--wdab-primary); }
.wdab-tone-danger .wdab-hero-icon { color: var(--wdab-danger); }
.wdab-tone-warning .wdab-hero-icon { color: var(--wdab-warning); }
.wdab-ref-lg { font-size: 20px; font-weight: 700; color: var(--wdab-heading); font-variant-numeric: tabular-nums; }
.wdab-pill { font-size: 13px; padding: 6px 12px; }
.wdab-callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: var(--wdab-radius);
    border: 1px solid var(--wdab-line); background: var(--wdab-surface); color: var(--wdab-surface-text); }
.wdab-callout > i { font-size: 20px; margin-top: 1px; }
.wdab-callout-danger { border-color: var(--wdab-danger); } .wdab-callout-danger > i { color: var(--wdab-danger); }
.wdab-callout-warning { border-color: var(--wdab-warning); } .wdab-callout-warning > i { color: var(--wdab-warning); }
.wdab-callout-info > i { color: var(--wdab-info); }
.wdab-callout-text { line-height: 1.9; }
.wdab-countdown { margin-top: 4px; font-size: 13px; color: var(--wdab-muted); }
.wdab-countdown strong { color: var(--wdab-heading); }
.wdab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; margin: 20px 0 0; }
.wdab-facts dt { font-weight: 400; font-size: 12px; color: var(--wdab-muted); margin-bottom: 4px; }
.wdab-facts dd { margin: 0; font-weight: 600; color: var(--wdab-heading); word-break: break-word; line-height: 1.7; }
.wdab-deadline dd { color: var(--wdab-danger); }
.wdab-unsuspend { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* two columns */
.wdab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wdab-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wdab-side { position: sticky; top: 16px; }
.wdab-card-title { font-size: 15px; font-weight: 700; color: var(--wdab-heading); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.wdab-card-title i { color: var(--wdab-primary); }
.wdab-guide { margin: 0; line-height: 1.9; }

/* report text: explicit colors so it is readable whatever Lagom does to <pre> */
.wdab .wdab-report {
    white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 460px; overflow: auto;
    background: var(--wdab-surface) !important; color: var(--wdab-surface-text) !important;
    border: 1px solid var(--wdab-line) !important; border-radius: var(--wdab-radius);
    padding: 14px 16px; font-size: 12.5px; line-height: 1.7; text-align: left;
}
.wdab-files { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }

/* conversation */
.wdab-msg { border: 1px solid var(--wdab-line); border-radius: var(--wdab-radius); padding: 12px 14px; margin-bottom: 12px; }
.wdab-msg-staff { background: var(--wdab-surface); }
.wdab-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wdab-msg-head strong { color: var(--wdab-heading); }
.wdab-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wdab-surface); color: var(--wdab-primary); border: 1px solid var(--wdab-line); }
.wdab-msg-body { line-height: 1.9; color: var(--wdab-surface-text); }
.wdab-event { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; color: var(--wdab-muted); font-size: 13px; }
.wdab-reply { margin-top: 16px; border-top: 1px solid var(--wdab-line); padding-top: 16px; }
.wdab-reply label { font-weight: 600; color: var(--wdab-heading); }
.wdab-reply-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.wdab-file { flex: 1 1 220px; max-width: 360px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px; border: 1px dashed var(--wdab-line); border-radius: var(--wdab-radius); cursor: pointer; font-weight: 400; min-width: 0; }
.wdab-file:focus-within { outline: 2px solid var(--wdab-primary); outline-offset: 2px; }
.wdab-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wdab-file-btn { flex: none; pointer-events: none; }
.wdab-file-name { color: var(--wdab-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* notification timeline */
.wdab-timeline { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.wdab-timeline::before { content: ""; position: absolute; inset-inline-start: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--wdab-line); }
.wdab-timeline li { display: flex; gap: 12px; padding: 6px 0; position: relative; }
.wdab-dot { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--ui-block-bg, #fff); border: 2px solid var(--wdab-primary); color: var(--wdab-primary); position: relative; z-index: 1; }
.wdab-timeline .is-ticket .wdab-dot { border-color: var(--wdab-info); color: var(--wdab-info); }
.wdab-timeline .is-popup .wdab-dot { border-color: var(--wdab-warning); color: var(--wdab-warning); }
.wdab-timeline .is-viewed .wdab-dot { border-color: var(--wdab-success); color: var(--wdab-success); }
.wdab-timeline .is-failed .wdab-dot { border-color: var(--wdab-danger); color: var(--wdab-danger); }
.wdab-tl-label { color: var(--wdab-heading); font-weight: 600; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* notices */
.wdab-notice summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.wdab-notice summary::-webkit-details-marker { display: none; }
.wdab-notice-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wdab-notice-subject { margin: 12px 0 8px; font-weight: 600; }

/* injected on other pages by hooks.php */
.wdab-support-btn { display: inline-flex; align-items: center; gap: 6px; }
.wdab-support-btn .badge { background: var(--brand-danger, #e5484d); color: #fff; }

@media (max-width: 991px) {
    .wdab-layout { grid-template-columns: 1fr; }
    .wdab-side { position: static; }
}
@media (max-width: 575px) {
    .wdab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wdab-case { flex-wrap: wrap; padding: 14px; }
    .wdab-case-side { text-align: start; width: 100%; }
    .wdab-chev { display: none; }
}

/* pay-to-unsuspend card and public report form */
.wdab-fee { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--wdab-line); border-inline-start: 4px solid var(--wdab-primary); border-radius: var(--wdab-radius); background: var(--wdab-surface); color: var(--wdab-surface-text); }
.wdab-fee-head { display: flex; align-items: center; gap: 8px; color: var(--wdab-heading); }
.wdab-fee-amount { margin: 8px 0 12px; }
.wdab-form, .wdab-form-intro { max-width: 760px; margin-inline: auto; }
.wdab-form-intro { margin-bottom: 18px; }
.wdab-form .wdab-field { margin-bottom: 14px; }
.wdab-form label { font-weight: 600; color: var(--wdab-heading); }
.wdab-form .wdab-err { color: var(--wdab-danger); font-size: 13px; margin-top: 4px; }
.wdab-form .has-err .form-control { border-color: var(--wdab-danger); }
.wdab-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wdab-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.wdab-consent input { margin-top: 5px; flex: none; }
.wdab-done { text-align: center; padding: 24px 8px; }
.wdab-done .wdab-ref-lg { margin: 12px 0; }
@media (max-width: 575px) { .wdab-form .btn-primary { width: 100%; } }

/* Reporter portal (v5): multi-line target box, log excerpt, tracking link and tracking page */
.wdab-form textarea.wdab-mono { font-family: var(--font-family-monospace, ui-monospace, monospace); font-size: 13px; line-height: 1.6; }
.wdab-track-link { margin-top: 18px; text-align: start; }
.wdab-copy { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.wdab-copy .form-control { flex: 1 1 260px; min-width: 0; font-family: var(--font-family-monospace, ui-monospace, monospace); font-size: 12px; }
.wdab-track-h { margin: 0 0 14px; font-size: 16px; color: var(--wdab-heading); }
.wdab-track-facts { margin-top: 16px; }
.wdab-track-status { display: inline-block; padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--wdab-info) 16%, transparent); color: var(--wdab-info); font-size: 13px; }
.wdab-track-status.is-closed { background: color-mix(in srgb, var(--wdab-success) 16%, transparent); color: var(--wdab-success); }
@media (max-width: 575px) { .wdab-copy .btn { flex: 1 1 100%; } }

/* public report page */
.wdab { --wdab-rp-line: rgba(15, 23, 42, .13); }
html.lagom-dark-mode .wdab { --wdab-rp-line: rgba(255, 255, 255, .12); }
.wdab-rp-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 36px 40px; border-radius: calc(var(--wdab-radius) * 2); color: #fff;
    background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .18), transparent 45%), linear-gradient(135deg, var(--wdab-primary), #0b2a6f); }
.wdab-rp-hero::after { content: ""; position: absolute; inset-inline-end: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.wdab-rp-hero-text { position: relative; z-index: 1; max-width: 640px; }
.wdab-rp-hero h2 { color: #fff; margin: 0 0 10px; font-size: 30px; font-weight: 800; line-height: 1.35; }
.wdab-rp-hero p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.9; }
.wdab-rp-badges { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wdab-rp-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(4px); }
.wdab-rp-badges svg, .wdab-rp-shield svg, .wdab-rp-cat svg, .wdab-rp-drop svg, .wdab-rp-side h3 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wdab-rp-badges svg { width: 16px; height: 16px; }
.wdab-rp-shield { position: relative; z-index: 1; flex: none; width: 120px; height: 120px; border-radius: 32px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.wdab-rp-shield svg { width: 64px; height: 64px; stroke-width: 1.6; }

.wdab-rp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wdab-rp-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--wdab-rp-line); border-radius: var(--wdab-radius); background: var(--ui-block-bg, #fff); }
.wdab-rp-steps b, .wdab-rp-sec legend b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--wdab-primary); background: color-mix(in srgb, var(--wdab-primary) 12%, transparent); }
.wdab-rp-steps strong { display: block; color: var(--wdab-heading); margin-bottom: 2px; }
.wdab-rp-steps span { color: var(--wdab-muted); font-size: 13px; line-height: 1.7; }

.wdab-rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.wdab-rp-card .panel-body { padding: 28px; }
.wdab-rp-form, .wdab-rp-card .wdab-form-intro { max-width: none; }
.wdab-rp-sec { border: 0; margin: 0 0 8px; padding: 0 0 8px; min-width: 0; }
.wdab-rp-sec + .wdab-rp-sec { border-top: 1px solid var(--wdab-rp-line); padding-top: 20px; }
.wdab-rp-sec legend { border: 0; width: auto; margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--wdab-heading); display: flex; align-items: center; gap: 10px; }
.wdab-rp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

.wdab-rp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wdab-rp-cat { margin: 0; font-weight: 400 !important; cursor: pointer; }
.wdab-rp-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wdab-rp-cat span { display: flex; align-items: center; gap: 8px; height: 100%; padding: 11px 12px; border: 1px solid var(--wdab-rp-line); border-radius: var(--wdab-radius);
    color: var(--wdab-heading); font-size: 13px; line-height: 1.5; transition: border-color .15s, background .15s, box-shadow .15s; }
.wdab-rp-cat svg { width: 20px; height: 20px; flex: none; color: var(--wdab-muted); }
.wdab-rp-cat:hover span { border-color: var(--wdab-primary); }
.wdab-rp-cat input:focus-visible + span { outline: 2px solid var(--wdab-primary); outline-offset: 2px; }
.wdab-rp-cat input:checked + span { border-color: var(--wdab-primary); background: color-mix(in srgb, var(--wdab-primary) 9%, transparent);
    box-shadow: inset 0 0 0 1px var(--wdab-primary); font-weight: 600; }
.wdab-rp-cat input:checked + span svg { color: var(--wdab-primary); }

.wdab-rp-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 22px 16px; text-align: center; cursor: pointer;
    border: 2px dashed var(--wdab-rp-line); border-radius: var(--wdab-radius); font-weight: 400 !important; transition: border-color .15s, background .15s; }
.wdab-rp-drop svg { width: 30px; height: 30px; color: var(--wdab-primary); }
.wdab-rp-drop strong { color: var(--wdab-primary); }
.wdab-rp-drop small { color: var(--wdab-muted); font-size: 12px; }
.wdab-rp-drop:hover, .wdab-rp-drop.is-over { border-color: var(--wdab-primary); background: color-mix(in srgb, var(--wdab-primary) 5%, transparent); }
.wdab-rp-drop.has-files { border-style: solid; border-color: var(--wdab-success); }
.wdab-rp-drop:focus-within { outline: 2px solid var(--wdab-primary); outline-offset: 2px; }
.wdab-rp-submit { width: 100%; margin-top: 8px; padding-block: 12px; font-weight: 700; }

.wdab-rp-side { position: sticky; top: 90px; }
.wdab-rp-side h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--wdab-heading); }
.wdab-rp-side h3 svg { width: 20px; height: 20px; color: var(--wdab-primary); }
.wdab-rp-side ul { margin: 0; padding-inline-start: 18px; color: var(--wdab-muted); font-size: 13px; line-height: 1.9; }
.wdab-rp-side li + li { margin-top: 6px; }
.wdab-rp-resp { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--wdab-radius); font-size: 13px; color: var(--wdab-heading);
    background: color-mix(in srgb, var(--wdab-success) 10%, transparent); }

.wdab-rp-done .panel-body { padding: 40px 28px; }
.wdab-rp-done h2 { margin: 14px 0 6px; font-size: 24px; font-weight: 800; color: var(--wdab-heading); }
.wdab-rp-done .wdab-ref-lg { display: inline-block; padding: 8px 18px; border-radius: 999px; font-size: 20px; font-weight: 800; letter-spacing: .04em;
    color: var(--wdab-primary); background: color-mix(in srgb, var(--wdab-primary) 10%, transparent); }
.wdab-rp-done .wdab-track-link { max-width: 760px; margin: 18px auto 0; padding-top: 18px; border-top: 1px solid var(--wdab-rp-line); }
.wdab-rp-ok { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: var(--wdab-success); box-shadow: 0 0 0 10px color-mix(in srgb, var(--wdab-success) 15%, transparent); }
.wdab-rp-ok svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 991px) {
    .wdab-rp-grid { grid-template-columns: minmax(0, 1fr); }
    .wdab-rp-side { position: static; }
}
@media (max-width: 767px) {
    .wdab-rp-hero { padding: 26px 20px; }
    .wdab-rp-hero h2 { font-size: 23px; }
    .wdab-rp-shield { display: none; }
    .wdab-rp-steps, .wdab-rp-row { grid-template-columns: minmax(0, 1fr); }
    .wdab-rp-card .panel-body { padding: 18px; }
    .wdab-rp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}