/*
 * Standalone failsafe styles. Hardcoded colors ON PURPOSE — this file must
 * render the report form and the floating FAB with zero dependency on the
 * app bundle or token stylesheets. Scoped under .report-page-body so
 * loading it from index.html (for the FAB) doesn't repaint the app.
 */

.report-problem-fab {
    position: fixed; top: 7px; right: 8px; z-index: 9999;
    background: #c43a3a; color: #ffffff;
    border: 1px solid #8a2828; border-radius: 5px;
    padding: 4px 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px; text-decoration: none;
}
.report-problem-fab:hover { background: #d64848; }

.report-page-body {
    margin: 0; min-height: 100vh;
    background: #0b0f14; color: #c8d0da;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
}
.report-page {
    width: 100%; max-width: 560px;
    background: #121821; border: 1px solid #24303e; border-radius: 10px;
    padding: 28px;
}
.report-page h1 { margin: 0 0 6px; color: #e8edf3; font-size: 22px; }
.report-sub { margin: 0 0 20px; color: #7a8898; font-size: 14px; }
.report-page label { display: block; margin: 14px 0 4px; font-size: 13px; color: #9aa8b8; }
.report-page .req { color: #d08a8a; font-size: 11px; }
.report-page .opt { color: #5a6a7e; font-size: 11px; }
.report-page input[type="text"], .report-page input[type="email"], .report-page textarea {
    width: 100%; box-sizing: border-box;
    background: #0e141c; color: #e8edf3;
    border: 1px solid #2a3a4e; border-radius: 6px;
    padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.report-page textarea { resize: vertical; }
.report-page input:focus, .report-page textarea:focus { outline: 2px solid #00d4aa; outline-offset: 1px; }
.report-submit {
    margin-top: 20px; width: 100%;
    background: #00d4aa; color: #04130f;
    border: none; border-radius: 6px;
    padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.report-submit:hover { background: #0ce4ba; }
.report-back { margin: 16px 0 0; font-size: 13px; }
.report-back a { color: #00d4aa; text-decoration: none; }

@media (forced-colors: active) {
    .report-problem-fab {
        forced-color-adjust: none;
        background: ButtonFace; color: ButtonText; border: 2px solid ButtonText;
    }
    /* `:hover` outranks the rule above, so the authored red would paint
       literally over the forced palette. The ring carries the hover. */
    .report-problem-fab:hover {
        background: ButtonFace; color: ButtonText; border: 2px solid ButtonText;
        outline: 2px solid Highlight; outline-offset: 2px;
    }
    .report-page, .report-page input[type="text"], .report-page input[type="email"],
    .report-page textarea { border: 1px solid CanvasText; }
    /* Hover restated for the same reason; the ring is ButtonText because the
       button already sits on Highlight. */
    .report-submit, .report-submit:hover {
        forced-color-adjust: none;
        background: Highlight; color: HighlightText; border: 1px solid ButtonText;
    }
    .report-submit:hover { outline: 2px solid ButtonText; outline-offset: 2px; }
}