/* ============================================================
   Content reporting — global styles
   ============================================================
   Loaded explicitly from App.razor / MAUI host so the dialog
   overlay and trigger button render identically regardless of
   parent component scoping. Equivalent of comments.css for the
   reporting surface — keeps the rendering deterministic when a
   ReportButton is dropped inside a flex/grid container that
   could otherwise interact awkwardly with scoped-CSS attribute
   matching.
   ============================================================ */

.report-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--os-space-xs);
    padding: var(--os-space-xs) var(--os-space-sm);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    background: transparent;
    color: var(--os-text-secondary);
    font-size: var(--os-font-size-xs);
    cursor: pointer;
    line-height: 1;
    transition: color var(--os-transition-fast),
                border-color var(--os-transition-fast),
                background-color var(--os-transition-fast);
}

.report-btn:hover {
    color: var(--os-error);
    border-color: var(--os-error);
    background-color: var(--os-surface-elevated);
}

.report-btn--icon {
    padding: var(--os-space-xs);
    border: none;
    background: transparent;
    color: var(--os-text-tertiary);
}

.report-btn--icon:hover {
    color: var(--os-error);
    background: transparent;
}

.report-btn__icon {
    display: inline-flex;
    align-items: center;
}

.report-btn__label {
    font-weight: var(--os-font-weight-semibold);
}

/* ---- Native <dialog> element ----
   showModal() renders the dialog in the browser's top layer — always
   viewport-centred regardless of any ancestor's transform / contain /
   will-change, which trapped the previous div-overlay approach inside
   non-viewport containing blocks on detail pages. */

.report-dialog-native {
    /* Reset every UA default that doesn't suit a card-shaped modal. */
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    /* Top-layer rendering doesn't need a custom z-index — browsers
       paint <dialog>[open] above all other stacking contexts. */
    max-width: min(520px, calc(100vw - var(--os-space-md) * 2));
    max-height: calc(100vh - var(--os-space-2xl));
    /* Auto margins centre horizontally + vertically when combined
       with the UA's inset:0 default on a modal <dialog>. */
    margin: auto;
}

.report-dialog-native::backdrop {
    background-color: var(--os-overlay);
    animation: report-overlay-fade-in var(--os-transition-fast) ease-out;
}

.report-dialog-native[open] {
    animation: report-dialog-slide-up var(--os-transition-fast) ease-out;
}

@keyframes report-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes report-dialog-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.report-dialog {
    background-color: var(--os-surface);
    border-radius: var(--os-radius-lg);
    padding: var(--os-space-xl);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--os-space-2xl));
    overflow-y: auto;
    box-shadow: var(--os-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--os-space-md);
    box-sizing: border-box;
}

.report-dialog__title {
    font-size: var(--os-font-size-lg);
    font-weight: var(--os-font-weight-bold);
    color: var(--os-text-primary);
    margin: 0;
}

.report-dialog__subtitle,
.report-dialog__target {
    font-size: var(--os-font-size-sm);
    color: var(--os-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.report-dialog__target {
    color: var(--os-text-tertiary);
    font-style: italic;
}

.report-dialog__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--os-space-md);
}

.report-dialog__field {
    display: flex;
    flex-direction: column;
    gap: var(--os-space-xs);
    min-width: 0;
}

.report-dialog__label {
    font-size: var(--os-font-size-sm);
    font-weight: var(--os-font-weight-semibold);
    color: var(--os-text-primary);
}

.report-dialog__required {
    color: var(--os-error);
    margin-left: 0.25em;
}

.report-dialog__input,
.report-dialog__textarea,
.report-dialog__select {
    width: 100%;
    padding: var(--os-space-sm) var(--os-space-md);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-md);
    background-color: var(--os-surface);
    color: var(--os-text-primary);
    font-size: var(--os-font-size-sm);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--os-transition-fast),
                box-shadow var(--os-transition-fast);
}

.report-dialog__textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.report-dialog__input:focus,
.report-dialog__textarea:focus,
.report-dialog__select:focus {
    outline: none;
    border-color: var(--os-primary);
    box-shadow: 0 0 0 3px var(--os-primary-light);
}

.report-dialog__input:disabled,
.report-dialog__textarea:disabled,
.report-dialog__select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.report-dialog__hint {
    font-size: var(--os-font-size-xs);
    color: var(--os-text-tertiary);
    margin: 0;
    line-height: 1.4;
}

.report-dialog__error {
    font-size: var(--os-font-size-xs);
    color: var(--os-error);
    margin: 0;
    line-height: 1.4;
}

.report-dialog__actions {
    display: flex;
    gap: var(--os-space-sm);
    margin-top: var(--os-space-sm);
}

.report-dialog__cancel,
.report-dialog__submit {
    flex: 1;
}

@media (max-width: 480px) {
    .report-dialog__field-row {
        grid-template-columns: 1fr;
    }
}