/* Staff applications (/oposiciones and /admin/applications), pn-sa- prefix. Built on the report and appeal pieces
   (pn-rep-*, pn-ap-*, pn-rf-*) and the donation plan card (pn-plan); loaded after them. Palette variables only. */


.pn-sa-pre { white-space: pre-line; margin: 0; }

/* ---- Position cards */

.pn-sa-card-facts {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.pn-sa-card-facts li { display: flex; align-items: center; gap: 8px; }
.pn-sa-card-facts .mud-icon-root { color: var(--pn-accent-text); font-size: 1.05rem; }
.pn-sa-card-facts strong { color: var(--mud-palette-text-primary); }

/* The appeal "asked you something" banner, in the info colour for "in progress". */
.pn-ap-ask-banner.pn-sa-mine-banner {
    border-color: rgba(var(--mud-palette-info-rgb), .5);
    background: rgba(var(--mud-palette-info-rgb), .1);
}

.pn-ap-ask-banner.pn-sa-mine-banner > .mud-icon-root:first-child { color: var(--mud-palette-info); }

.pn-sa-preview { display: grid; gap: 8px; }

/* ---- Requirements */

.pn-sa-reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.pn-sa-req {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
}

.pn-sa-req-mark { display: inline-flex; padding-top: 1px; color: var(--mud-palette-text-secondary); }
.pn-sa-req.is-met .pn-sa-req-mark { color: var(--mud-palette-success); }
.pn-sa-req.is-missing .pn-sa-req-mark { color: var(--mud-palette-error); }
.pn-sa-req.is-unknown .pn-sa-req-mark { color: var(--mud-palette-warning); }
.pn-sa-req.is-missing { background: rgba(var(--mud-palette-error-rgb), 0.08); }

.pn-sa-req-text { display: grid; gap: 2px; min-width: 0; }
.pn-sa-req-text strong { font-size: 0.9rem; font-weight: 600; }
.pn-sa-req-text small { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.pn-sa-req-missing { color: var(--mud-palette-error); font-weight: 600; }

.pn-sa-apply-action { margin-top: 16px; }

/* ---- Answers */

.pn-sa-answers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pn-sa-answer-q {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.pn-sa-answer-n {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: var(--pn-radius-pill);
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.pn-sa-answer-q .pn-sa-answer-n { margin-right: 0; }

.pn-sa-answer-a {
    margin: 6px 0 0 30px;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pn-sa-answer-a.is-long {
    white-space: pre-line;
    padding: 10px 12px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
}

/* ---- Form */

.pn-sa-question legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
.pn-sa-question-help { margin: 0 0 8px; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.pn-sa-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-sa-checks { display: grid; gap: 2px; }
.pn-sa-number { max-width: 200px; }

/* ---- Lists (mine, the staff queue, the positions) */

.pn-sa-mine, .pn-sa-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.pn-sa-mine-row, .pn-sa-position-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-sa-mine-row:active { transform: scale(.97); }
.pn-sa-mine-row.is-unread { border-color: rgba(var(--mud-palette-info-rgb), 0.6); }

@media (hover: hover) and (pointer: fine) {
    .pn-sa-mine-row:hover { border-color: var(--mud-palette-primary); }
}

.pn-sa-mine-text { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.pn-sa-mine-text small { color: var(--mud-palette-text-secondary); font-size: 0.8rem; }
.pn-sa-mine-go { color: var(--mud-palette-text-secondary); }

.pn-sa-votes { display: inline-flex; gap: 6px; }

.pn-sa-votes > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--pn-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
}

.pn-sa-votes .mud-icon-root { font-size: 0.9rem; }

.pn-sa-status-select { flex: 0 0 150px; }
.pn-sa-row-actions { display: inline-flex; }

/* ---- Track of an application (the applicant's page) */

.pn-sa-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.pn-sa-track li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.pn-sa-track li:last-child { padding-bottom: 0; }

.pn-sa-track li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.pn-sa-track li.is-done:not(:last-child)::after { background: var(--mud-palette-success); }

.pn-sa-track-dot {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: var(--pn-radius-pill);
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.pn-sa-track li.is-done .pn-sa-track-dot { border-color: var(--mud-palette-success); background: var(--mud-palette-success); }
.pn-sa-track li.is-now .pn-sa-track-dot { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.18); }
.pn-sa-track li.is-fail .pn-sa-track-dot { border-color: var(--mud-palette-error); background: var(--mud-palette-error); }

.pn-sa-track-text { display: grid; gap: 2px; }
.pn-sa-track-text small { color: var(--mud-palette-text-secondary); font-size: 0.8rem; }
.pn-sa-track li.is-next .pn-sa-track-text strong { color: var(--mud-palette-text-secondary); font-weight: 500; }

/* ---- Votes and decision (staff) */

.pn-sa-vote-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.pn-sa-vote-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-sa-vote-list p { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.pn-sa-vote-form { display: grid; gap: 8px; }

/* ---- Position editor */

.pn-sa-q-editor {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.pn-sa-q-editor > li {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
}

.pn-sa-q-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pn-sa-q-kind { flex: 0 0 170px; }
.pn-sa-q-lengths { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 599.98px) {
    .pn-sa-status-select { flex-basis: 100%; }
    .pn-sa-answer-a { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-sa-mine-row { transition: none; }
}


/* ---- The staff inbox pane (ApplicationPane: the right side of /admin/applications and /admin/applications/{id}) */

.pn-sa-pane { min-width: 0; }

.pn-sa-pane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.pn-sa-pane-title { min-width: 0; }

.pn-sa-pane-title h2 {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pn-sa-pane-title p {
    margin: 2px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-sa-pane-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* On its own page: the work on the left, votes, requirements and the record on the right, from 1100px. In the
   inbox the pane is one column (the list takes the other). Nothing is sticky, so a long conversation never hides
   the bottom of the side column. */
.pn-sa-pane-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
}

@media (min-width: 1100px) {
    .pn-sa-pane:not(.is-embedded) .pn-sa-pane-body { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
}

/* A part of the pane: a heading, one line of help, the content; split by hairlines, never cards. */
.pn-sa-block {
    padding: 16px 0;
    border-top: 1px solid var(--pn-line);
}

.pn-sa-pane-main > .pn-sa-block:first-child,
.pn-sa-pane-side > .pn-sa-block:first-child { border-top: 0; padding-top: 4px; }

.pn-sa-block > h2,
.pn-sa-block > h3 {
    margin: 0 0 2px;
    font-family: var(--pn-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.pn-sa-block > p {
    margin: 0 0 10px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.pn-sa-owner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.pn-sa-owner > h2, .pn-sa-owner > h3 { grid-column: 1; }
.pn-sa-owner > p { grid-column: 1; margin-bottom: 0; }
.pn-sa-owner-actions { grid-column: 2; grid-row: 1 / span 2; }

.pn-sa-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-sa-why { margin: 6px 0 0; }

/* A segmented choice (what to write, the vote, now or then): a bordered track, the chosen part in the brand wash. */
.pn-sa-segments {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin-bottom: 8px;
    padding: 2px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
}

.pn-sa-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--pn-radius-sm);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease;
}

.pn-sa-segment .mud-icon-root { font-size: 1rem; }

.pn-sa-segment[aria-checked="true"] {
    background: var(--pn-brand-soft);
    color: var(--pn-brand-text);
}

.pn-sa-segment:disabled { cursor: not-allowed; opacity: .55; }

@media (hover: hover) and (pointer: fine) {
    .pn-sa-segment:not(:disabled):not([aria-checked="true"]):hover {
        background: var(--mud-palette-action-default-hover);
        color: var(--mud-palette-text-primary);
    }
}

/* Links to the applicant's other applications: a real target, not a bare "#12". */
.pn-sa-previous a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
    font-family: var(--pn-font-mono);
    font-size: .8125rem;
    font-weight: 600;
}

@media (max-width: 599.98px) {
    .pn-sa-segments { display: flex; }
    .pn-sa-segment { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .pn-sa-owner { grid-template-columns: minmax(0, 1fr); }
    .pn-sa-owner-actions { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-sa-segment { transition: none; }
}

/* ---- The position editor: the sections on the left, the live card beside them from 1100px */

.pn-sa-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
    padding-bottom: 96px; /* room for the floating save bar */
}

.pn-sa-editor-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
    max-width: 380px;
}

@media (min-width: 1100px) {
    .pn-sa-editor { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
    .pn-sa-editor-side { position: sticky; top: calc(var(--pn-appbar-h) + 16px); }
}

.pn-sa-q {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pn-sa-q > legend {
    margin-bottom: 4px;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 599.98px) {
    .pn-sa-q-kind { flex: 1 1 100%; }
    .pn-sa-q-lengths { grid-template-columns: minmax(0, 1fr); }
}