/* Report pages: the staff queue (/scpsl/report-manager), its statistics, the report detail, the report form and
   "Mis reportes". Built on the people-search rows (admin-directory.css) and the profile blocks (profile.css);
   palette variables only, so light and dark both work. */

/* ---------- Status chip ---------- */

.pn-rep-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 6px;
    border-radius: var(--pn-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pn-rep-status .mud-icon-root { font-size: 1rem; }

/* ---------- Queue ---------- */

.pn-rep-states { margin-bottom: 14px; }

.pn-rep-row {
    grid-template-columns: minmax(240px, 2.4fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(120px, .9fr) auto;
}

.pn-rep-row.has-select {
    grid-template-columns: 28px minmax(240px, 2.4fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(120px, .9fr) auto;
}

.pn-rep-row.is-fresh { border-left-color: var(--mud-palette-success); }
.pn-rep-row.is-aging { border-left-color: var(--mud-palette-warning); }
.pn-rep-row.is-stale { border-left-color: var(--mud-palette-error); }
.pn-rep-row.is-accepted, .pn-rep-row.is-rejected { border-left-color: var(--mud-palette-lines-default); }

.pn-rep-row.is-mine {
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.pn-rep-select .mud-checkbox { margin: 0; }

.pn-rep-main, .pn-rep-by, .pn-rep-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pn-rep-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pn-rep-id {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.pn-rep-id:hover { color: var(--mud-palette-primary); }

.pn-rep-reason { font-weight: 600; }

.pn-rep-flag {
    display: inline-flex;
    color: var(--mud-palette-info);
}

.pn-rep-flag .mud-icon-root { font-size: 1rem; }

.pn-rep-player {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.9rem;
}

.pn-rep-player > .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rep-player a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.pn-rep-count {
    padding: 0 7px;
    border: 0;
    border-radius: var(--pn-radius-pill);
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    color: var(--mud-palette-warning);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
}

.pn-rep-by { font-size: 0.85rem; }

.pn-rep-reporter {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-rep-owner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.pn-rep-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pn-rep-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--mud-palette-action-default-hover);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pn-rep-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pn-rep-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

.pn-rep-when { font-size: 0.8rem; }

.pn-rep-age {
    font-weight: 600;
    white-space: nowrap;
}

.pn-rep-age--fresh { color: var(--mud-palette-success); }
.pn-rep-age--aging { color: var(--mud-palette-warning); }
.pn-rep-age--stale { color: var(--mud-palette-error); }
.pn-rep-age--done { color: var(--mud-palette-text-secondary); }

.pn-rep-range {
    max-width: 260px;
    margin: 0 !important;
}

/* "There are changes" bar: appears instead of reloading under the cursor. */
.pn-rep-fresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 14px;
    padding: 8px 12px;
    border: 1px dashed rgba(var(--mud-palette-info-rgb), 0.6);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-info-rgb), 0.08);
    color: var(--mud-palette-info);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    animation: pn-drop var(--pn-dur) var(--pn-ease-out);
}

.pn-rep-bulk {
    position: sticky;
    top: 72px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    animation: pn-drop var(--pn-dur) var(--pn-ease-out);
}


@media (max-width: 1100px) {
    .pn-rep-row, .pn-rep-row.has-select {
        grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(110px, .9fr) auto;
    }

    .pn-rep-row.has-select { grid-template-columns: 28px minmax(220px, 2fr) minmax(130px, 1fr) minmax(110px, .9fr) auto; }
    .pn-rep-by { display: none; }
}

@media (max-width: 700px) {
    .pn-rep-row, .pn-rep-row.has-select {
        grid-template-columns: 1fr auto;
        gap: 6px;
    }

    .pn-rep-row .pn-rep-select { grid-column: 1 / -1; grid-row: 1; }
    .pn-rep-row .pn-rep-main { grid-column: 1; grid-row: 2; }
    .pn-rep-row .pn-dir-actions { grid-column: 2; grid-row: 2; align-self: start; }
    .pn-rep-row .pn-rep-owner { grid-column: 1 / -1; grid-row: 3; }
    .pn-rep-row .pn-rep-when { grid-column: 1 / -1; grid-row: 4; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
    .pn-rep-row .pn-rep-select:empty { display: none; }
    .pn-rep-range { max-width: none; width: 100%; }
}

/* ---------- Detail ---------- */

.pn-rep-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.pn-rep-col, .pn-rep-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pn-rep-col .pn-section, .pn-rep-side .pn-section { height: auto; }

.pn-rep-side {
    position: sticky;
    top: calc(var(--pn-appbar-h) + 12px);
}

.pn-rep-pos {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pn-rep-people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pn-rep-person {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    min-width: 0;
}

.pn-rep-person.is-reported { border-left: 3px solid var(--mud-palette-error); }

.pn-rep-person > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.pn-rep-person small {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rep-person a, .pn-rep-person strong {
    font-weight: 700;
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.pn-rep-proof {
    padding: 12px 14px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pn-rep-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.pn-rep-evidence-item {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
}

.pn-rep-evidence-item.is-link { align-self: start; }

.pn-rep-embed {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

.pn-rep-evidence-item iframe, .pn-rep-evidence-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pn-rep-image img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: var(--mud-palette-background-gray);
}

.pn-rep-evidence-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.pn-rep-evidence-link .mud-icon-root { font-size: 1rem; }
.pn-rep-evidence-out { margin-left: auto; color: var(--mud-palette-text-secondary); }

@media (hover: hover) and (pointer: fine) {
    .pn-rep-evidence-link:hover { background: var(--mud-palette-action-default-hover); }
}

.pn-rep-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.pn-rep-notes li {
    display: flex;
    gap: 10px;
}

.pn-rep-notes li > div {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 0 12px 12px 12px;
    background: var(--mud-palette-background-gray);
}

.pn-rep-notes p {
    margin: 2px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pn-rep-note-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 0.85rem;
}

.pn-rep-quote {
    margin-top: 4px;
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-lines-default);
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pn-rep-owner-line {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.pn-rep-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pn-rep-context {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pn-rep-context-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    text-align: center;
}

.pn-rep-context-item strong { font-size: 1.2rem; line-height: 1.2; }
.pn-rep-context-item span { font-size: 0.7rem; color: var(--mud-palette-text-secondary); }
.pn-rep-context-item.is-hot strong { color: var(--mud-palette-warning); }

a.pn-rep-context-item { transition: transform var(--pn-dur-press) var(--pn-ease-out); }
a.pn-rep-context-item:active { transform: scale(.97); }

.pn-rep-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.pn-rep-mini li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    align-items: center;
}

.pn-rep-mini li .pn-rep-status { grid-column: 2 / -1; justify-self: start; }

@media (max-width: 960px) {
    .pn-rep-layout { grid-template-columns: 1fr; }

    /* Phones: the actions come right after the summary. */
    .pn-rep-side { position: static; order: -1; }
    .pn-rep-layout { display: flex; flex-direction: column; }
    .pn-rep-col { display: contents; }
    .pn-rep-col > .pn-section:first-child { order: -2; }
}

/* ---------- Accept dialog ---------- */

.pn-rep-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pn-rep-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-rep-choice:active:not(:disabled) { transform: scale(.97); }

.pn-rep-choice.is-on {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.pn-rep-choice:disabled { opacity: .45; cursor: not-allowed; }

.pn-rep-choice-text { display: flex; flex-direction: column; gap: 2px; }
.pn-rep-choice-text small { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 480px) {
    .pn-rep-choices { grid-template-columns: 1fr; }
}

/* ---------- Statistics ---------- */

.pn-rep-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.pn-rep-stats .pn-section { height: auto; }
.pn-rep-stats-wide { grid-column: 1 / -1; }

.pn-rep-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
}

.pn-rep-bar {
    flex: 1;
    height: var(--h);
    min-width: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--mud-palette-primary);
    opacity: .8;
}

@media (hover: hover) and (pointer: fine) {
    .pn-rep-bar:hover { opacity: 1; }
}

.pn-rep-bars-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rep-split {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-rep-split-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pn-rep-split-bar {
    display: flex;
    height: 8px;
    overflow: hidden;
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-action-default-hover);
}

.pn-rep-split-bar .is-accepted { background: var(--mud-palette-success); }
.pn-rep-split-bar .is-rejected { background: var(--mud-palette-error); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .pn-rep-fresh, .pn-rep-bulk { animation: none; }
    .pn-rep-choice, a.pn-rep-context-item { transition: none; }
}

/* Proof files uploaded with a report (ReportAttachmentList): a column of media with a quiet line under each. */
.pn-rep-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.pn-rep-file { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pn-rep-file-media {
    display: block;
    width: 100%;
    max-height: 320px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    object-fit: contain;
    overflow: hidden;
}

.pn-rep-file-media img { display: block; width: 100%; max-height: 320px; object-fit: contain; }

.pn-rep-file-download {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: inherit;
    font-size: .85rem;
}

.pn-rep-file-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}