/* Hospital-portal primitives shared by more than one component.

   These live here rather than in PortalHome.razor.css because PortalDocRow is its own component:
   Blazor CSS isolation stamps the scope attribute (b-xxxxxxxxxx) only on the markup a stylesheet's
   own .razor file emits, so a scoped `.pp-row { }` in PortalHome compiles to `.pp-row[b-xxx]` and
   silently misses every row PortalDocRow renders. Anything a child component draws belongs here —
   the Request funds and Reports panels are child components too, which is why the card, buttons and notes
   below moved here: scoped, they rendered unstyled inside those tabs.
   Page-specific portal styles stay scoped in PortalHome.razor.css. */

/* The tab bar is pinned to the top of the page, so anything the portal scrolls to (a form's first step, the
   questions card) stops below it instead of underneath it. */
.portal-shell [id] { scroll-margin-top: 5.5rem; }

/* ── Status chips ── */
.pp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pp-chip.is-rec { background: var(--app-teal-glow, rgba(0, 197, 168, .18)); color: #04705F; }
.pp-chip.is-pend { background: var(--app-surface-2, #E6EEF8); color: var(--app-text-2, #4A5B78); }
.pp-chip.is-sub { background: #E7F0FF; color: #1E3D70; }
.pp-chip.is-warn { background: #FEF3E2; color: #B45309; }
.pp-chip.is-danger { background: #FEE2E2; color: #B91C1C; }
.pp-chip.is-onfile { background: var(--app-bg, #F2F6FC); color: var(--app-text-3, #8A9BB5); border: 1px solid var(--app-border, #DCE5F0); font-weight: 500; }

/* ── Row lists (documents, applications) ── */
.pp-rows { display: grid; }
.pp-row { display: flex; align-items: center; gap: 1rem; padding: .85rem .25rem; border-bottom: 1px solid var(--app-border, #DCE5F0); }
.pp-row:last-child { border-bottom: none; }
.pp-row .pp-name { flex: 1; font-weight: 500; color: var(--app-navy, #0D2447); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pp-row .pp-amt { color: var(--app-text-2, #4A5B78); font-variant-numeric: tabular-nums; }
.pp-doc-callout .pp-row { border-bottom-color: var(--app-border-2, #C5D3E8); }

/* ── Upload / secondary button ── */
.pp-btn-up { border: 1px solid var(--app-border-2, #C5D3E8); background: #fff; color: var(--app-navy, #0D2447); border-radius: 8px; padding: .4rem .8rem; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; transition: border-color .15s ease, color .15s ease; }
.pp-btn-up:hover { border-color: var(--app-teal, #00C5A8); color: var(--app-teal-600, #009E88); }
.pp-btn-up:disabled { opacity: .6; cursor: default; }

/* ── Cards and their furniture ── */
.pp-card { background: var(--app-white, #fff); border: 1px solid var(--app-border, #DCE5F0); border-radius: var(--app-r-lg, 16px); box-shadow: var(--app-shadow-sm); padding: 1.5rem; margin-top: 1.5rem; }
.pp-card h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; font-size: 1.5rem; color: var(--app-navy, #0D2447); margin: 0 0 .35rem; }
.pp-lede { color: var(--app-text-2, #4A5B78); font-size: .92rem; margin: 0 0 1.1rem; }
.pp-form-h { font-size: 1rem; font-weight: 600; color: var(--app-navy, #0D2447); margin: 0 0 1rem; }
.pp-note { background: var(--app-surface-2, #E6EEF8); border-radius: var(--app-r, 10px); padding: .85rem 1rem; color: var(--app-text-2, #4A5B78); font-size: .88rem; margin: 0 0 1.1rem; display: flex; gap: .6rem; }
.pp-note i { color: var(--app-navy-400, #3A5A96); margin-top: .1rem; }
.pp-empty { padding: 1.5rem; border: 1px dashed var(--app-border-2, #C5D3E8); border-radius: var(--app-r, 10px); color: var(--app-text-2, #4A5B78); background: var(--app-surface-2, #E6EEF8); display: flex; align-items: center; gap: .6rem; }
.pp-empty i { font-size: 1.15rem; color: var(--app-navy-400, #3A5A96); }

/* ── Buttons and links ── */
.pp-btn-primary { border: none; border-radius: 8px; padding: .5rem 1rem; font: inherit; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(120deg, var(--app-navy-600, #1E3D70), var(--app-teal-600, #009E88)); box-shadow: 0 4px 14px var(--app-teal-glow, rgba(0, 197, 168, .18)); transition: transform .15s ease, box-shadow .25s ease; display: inline-flex; align-items: center; gap: .45rem; }
.pp-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--app-teal-rgb, 0, 197, 168), .3); }
.pp-btn-primary:disabled { opacity: .55; cursor: default; }
.pp-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--app-teal-600, #009E88); cursor: pointer; white-space: nowrap; }
.pp-link:hover { text-decoration: underline; }

/* ── Attachments on a request or report ── */
.pp-attachments { display: grid; gap: .35rem; padding-left: .25rem; }
.pp-attachment { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.pp-attachment .bi { color: var(--app-navy-400, #3A5A96); }
.pp-attach-add { display: grid; gap: .25rem; max-width: 28rem; margin-top: .25rem; }

/* ── Exhibit A report form (Reports tab) ── */
.pp-budget-grid th, .pp-budget-grid td { white-space: nowrap; }
.pp-budget-grid input.form-control { min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.pp-actual-row th { background: var(--app-bg, #F2F6FC); font-weight: 500; }
.pp-attestation { border: 1px solid var(--app-border, #DCE5F0); border-left: 3px solid var(--app-teal, #00C5A8); border-radius: var(--app-r, 10px); background: var(--app-bg, #F2F6FC); padding: .9rem 1rem; }

/* ── Request funds (PortalPaymentRequestPanel) ── */
.pr-project { max-width: 32rem; }
.pr-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 .85rem; }
.pr-requests { display: grid; gap: .75rem; }
.pr-request { border: 1px solid var(--app-border, #DCE5F0); border-radius: var(--app-r, 10px); background: #fff; }
.pr-request .pp-row { padding: .8rem 1rem; border-bottom: 1px solid var(--app-border, #DCE5F0); }
.pr-request-body { padding: .75rem 1rem .9rem; display: grid; gap: .6rem; }
.pr-status { font-size: .86rem; color: var(--app-text-2, #4A5B78); display: flex; gap: .45rem; }
.pr-status .bi { color: var(--app-navy-400, #3A5A96); margin-top: .1rem; }
.pr-note-ok { background: var(--app-teal-glow, rgba(0, 197, 168, .18)); color: #04705F; }
.pr-note-ok i { color: #04705F; }
.pr-form { margin-top: 1.5rem; border-top: 1px solid var(--app-border, #DCE5F0); padding-top: 1.25rem; }
.pr-form-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pr-sub { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-3, #8A9BB5); margin-top: .25rem; }
.pr-schedule { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--app-text-2, #4A5B78); background: var(--app-bg, #F2F6FC); border: 1px solid var(--app-border, #DCE5F0); border-radius: var(--app-r, 10px); padding: .65rem .85rem; max-width: 44rem; }
.pr-schedule .bi { color: var(--app-teal-600, #009E88); margin-top: .1rem; }
.pr-lines tfoot td { border-bottom: none; padding-top: .6rem; }
.pr-total { font-variant-numeric: tabular-nums; }
.pr-attach { justify-self: start; cursor: pointer; }
.pr-remove { border: none; background: none; color: var(--app-text-3, #8A9BB5); border-radius: 6px; padding: .25rem .4rem; cursor: pointer; }
.pr-remove:hover { color: #B91C1C; background: #FEE2E2; }

@media (max-width: 640px) {
    .pp-row { flex-wrap: wrap; }
    .pp-card { padding: 1.15rem; }
}