/* ---------------------------------------------------------------------------
   Partner feature requests (2026-09-04).

   Its own stylesheet rather than a section of oc-theme.css, matching oc-sign.css
   and oc-feature-board.css: this is a self-contained surface and keeping it apart
   means a change here cannot ripple into the rest of the portal.

   Every colour is a token from oc-theme.css so the page follows the light/dark
   theme without a second palette to keep in step.
   --------------------------------------------------------------------------- */

.oc-fr-page {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.oc-fr-head { margin-bottom: 1.25rem; }

.oc-fr-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 .35rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.oc-fr-sub {
    color: var(--oc-text-muted, #6b7280);
    margin: 0;
    max-width: 46rem;
    line-height: 1.5;
}

.oc-fr-card {
    background: var(--oc-surface, #fff);
    border: 1px solid var(--oc-border, #e5e7eb);
    border-radius: .6rem;
    padding: 1.1rem 1.15rem;
    margin-bottom: 1.1rem;
}

.oc-fr-h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .85rem;
}

.oc-fr-muted { color: var(--oc-text-muted, #6b7280); }

.oc-fr-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin: .85rem 0 .3rem;
}

.oc-fr-input,
.oc-fr-textarea {
    width: 100%;
    /* >= 16px so iOS never zooms the field on focus — see the note in index.html. */
    font-size: 1rem;
    padding: .5rem .65rem;
    border: 1px solid var(--oc-border, #d1d5db);
    border-radius: .4rem;
    /* ⛔ --oc-surface, NOT an invented input-background token. An UNDEFINED token silently takes
       its fallback and never themes: the original here named a token that does not exist, so the
       background stayed #fff in dark mode while --oc-text on this very rule resolved through
       --oc-gray-900 to #f4f5f8 — white text on a white box in Title and Description. Caught by
       Scott on PR 13362 using the repo's own guardrail, build/check-oc-tokens.ps1 (8 undefined
       on the merge base, 10 on this branch). --oc-surface is defined for both themes
       (#ffffff / #161a22).
       ⚠ And do NOT write the dead token name in a var(...) form in a comment: the guardrail
       regex does not strip comments, so quoting the defect re-creates it in the report. */
    background: var(--oc-surface, #fff);
    color: var(--oc-text, #111827);
}

.oc-fr-input-narrow { width: 7rem; }

.oc-fr-textarea { resize: vertical; line-height: 1.45; }

.oc-fr-hint {
    font-size: .78rem;
    color: var(--oc-text-muted, #6b7280);
    text-align: right;
    margin-top: .2rem;
}

/* The product picker: chips, so several are obviously selectable at once. */
.oc-fr-products {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .3rem;
}

.oc-fr-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--oc-border, #d1d5db);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    font-size: .9rem;
}

.oc-fr-chip input { margin: 0; }

.oc-fr-chip-on {
    border-color: var(--oc-accent, #f97316);
    /* --oc-primary-soft is the repo's established soft wash (defined once, used 95x); the
       invented --oc-accent-soft was undefined and never themed. An alpha wash needs no dark
       variant because it composites over whatever surface is beneath it. */
    background: var(--oc-primary-soft, rgba(238, 87, 44, .1));
}

.oc-fr-actions {
    display: flex;
    gap: .55rem;
    margin-top: 1.1rem;
}

.oc-fr-btn {
    padding: .45rem .9rem;
    border: 1px solid var(--oc-border, #d1d5db);
    border-radius: .4rem;
    background: var(--oc-surface, #fff);
    color: var(--oc-text, #111827);
    cursor: pointer;
    font-size: .9rem;
}

.oc-fr-btn:disabled { opacity: .55; cursor: not-allowed; }

.oc-fr-btn-primary {
    background: var(--oc-accent, #f97316);
    border-color: var(--oc-accent, #f97316);
    color: #fff;
    font-weight: 600;
}

.oc-fr-btn-small { padding: .25rem .55rem; font-size: .82rem; }

.oc-fr-addrow { display: flex; gap: .5rem; align-items: flex-start; }

/* ---- the list ---- */

.oc-fr-table { width: 100%; border-collapse: collapse; }

.oc-fr-table th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--oc-text-muted, #6b7280);
    border-bottom: 1px solid var(--oc-border, #e5e7eb);
    padding: .4rem .5rem;
}

.oc-fr-table td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--oc-border-soft, #f3f4f6);
    vertical-align: top;
}

.oc-fr-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--oc-link, #2563eb);
    cursor: pointer;
    font-weight: 600;
    text-align: left;
}

/* Attachment names are also .oc-fr-link buttons — a download has to go through the authenticated
   client, so it cannot be an <a href>. This is the only state that needed adding for that. */
.oc-fr-link:disabled {
    color: var(--oc-text-muted, #6b7280);
    cursor: default;
}

.oc-fr-by { font-size: .8rem; color: var(--oc-text-muted, #6b7280); }

.oc-fr-row-actions { white-space: nowrap; }

.oc-fr-row-open td { background: var(--oc-surface-soft, #fafafa); }

.oc-fr-detail-row td { background: var(--oc-surface-soft, #fafafa); }

.oc-fr-detail { padding: .3rem .2rem .6rem; }

.oc-fr-detail-desc { white-space: pre-wrap; line-height: 1.5; margin: 0 0 .7rem; }

.oc-fr-note {
    border-left: 3px solid var(--oc-border, #d1d5db);
    padding: .1rem 0 .1rem .7rem;
    margin: .7rem 0;
}

.oc-fr-note p { margin: .25rem 0 0; line-height: 1.5; }

.oc-fr-files ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* ---- status pills ----
   One class per PartnerRequestStatus. The WORDS still come from the server
   (StatusLabel) — these only colour them. */

.oc-fr-status {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.oc-fr-status-received      { background: #eef2ff; color: #3730a3; }
.oc-fr-status-planned       { background: #ecfeff; color: #155e75; }
.oc-fr-status-inprogress    { background: #fff7ed; color: #9a3412; }
.oc-fr-status-releasingsoon { background: #f0fdf4; color: #166534; }
.oc-fr-status-released      { background: #dcfce7; color: #14532d; }
.oc-fr-status-notplanned    { background: #f3f4f6; color: #4b5563; }
.oc-fr-status-withdrawn     { background: #f3f4f6; color: #6b7280; }

.oc-fr-retired td { opacity: .6; }

/* ---- messages ---- */

.oc-fr-error,
.oc-fr-notice {
    border-radius: .45rem;
    padding: .6rem .75rem;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.oc-fr-error  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.oc-fr-notice { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Dark theme: the pills and messages carry literal colours above (they are
   semantic, not themeable), so only soften them rather than restate a palette. */
@media (prefers-color-scheme: dark) {
    .oc-fr-status,
    .oc-fr-error,
    .oc-fr-notice { filter: brightness(.85) saturate(1.1); }
}

@media (max-width: 640px) {
    .oc-fr-table thead { display: none; }

    .oc-fr-table td {
        display: block;
        border-bottom: 0;
        padding: .25rem .5rem;
    }

    .oc-fr-table tbody tr {
        display: block;
        border-bottom: 1px solid var(--oc-border, #e5e7eb);
        padding: .5rem 0;
    }

    .oc-fr-addrow { flex-wrap: wrap; }
}

/* The attach control on an opened request. */
.oc-fr-upload {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--oc-border, #e5e7eb);
}

.oc-fr-upload .oc-fr-hint { text-align: left; margin-top: .3rem; }

/* Shown when a second editor's save is refused: what is stored NOW, while their own
   text stays in the fields above so they can re-apply it. */
.oc-fr-conflict {
    margin-top: 1rem;
    padding: .7rem .8rem;
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: .45rem;
    color: #78350f;
}

.oc-fr-conflict p { margin: .2rem 0 .5rem; }

.oc-fr-conflict-body {
    background: var(--oc-surface, #fff);
    border-radius: .35rem;
    padding: .5rem .6rem;
    color: var(--oc-text, #111827);
}