/*
 * Portfolio workspace presentation layer.
 *
 * portfolio.css retains the established feature-specific layouts. This file
 * owns the AGV3-aligned shell, shared disclosure sections, control hierarchy,
 * and compact/mobile behaviour so new Portfolio features have one predictable
 * set of UI primitives instead of adding more one-off card styles.
 */

#portfolioApp {
  --pf-green: var(--agv3-shell-green, #295436);
  --pf-green-2: #2f6842;
  --pf-green-deep: var(--agv3-shell-green-deep, #183a23);
  --pf-ink: var(--agv3-shell-ink, #193124);
  --pf-muted: var(--agv3-shell-muted, #617565);
  --pf-line: rgba(40, 76, 52, 0.12);
  --pf-bg: var(--agv3-shell-cream, #faf8f1);
  --pf-card: rgba(255, 255, 255, 0.97);
  --pf-control-h: 42px;
  --pf-radius: 20px;
  --pf-shadow: 0 18px 42px rgba(25, 48, 32, 0.08);
  font-family: 'Manrope', 'Segoe UI Variable', 'Avenir Next', sans-serif;
  background:
    radial-gradient(circle at 14% 2%, rgba(135, 177, 112, 0.19), transparent 25rem),
    radial-gradient(circle at 84% 9%, rgba(239, 194, 118, 0.11), transparent 22rem),
    linear-gradient(180deg, #fbfcf8, #f4f7f1 36rem);
}

.portfolio-header-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 800 17px/1 inherit;
  cursor: pointer;
}
.portfolio-header-icon:hover { background: rgba(255,255,255,.17); }
.portfolio-message-button .agv3-notifications-badge { position: absolute; top: -6px; right: -6px; }
.portfolio-overlay-shell { position: fixed; inset: 0; z-index: 70; width: 0; height: 0; pointer-events: none; }
.portfolio-overlay-shell.agv3-notifications-open { width: 100%; height: 100%; }
.portfolio-overlay-shell .agv3-top-panel:not([hidden]) { pointer-events: auto; }

.portfolio-contact-list { display: grid; gap: 10px; margin-top: 12px; }
.portfolio-contact-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--pf-line); border-radius: 14px; background: #fff; }
.portfolio-contact-row.is-inactive { opacity: .62; }
.portfolio-contact-row > div:first-child { display: grid; gap: 4px; min-width: 0; }
.portfolio-contact-row small { color: var(--pf-muted); overflow-wrap: anywhere; }
.portfolio-contact-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.portfolio-contact-tags span { padding: 3px 7px; border-radius: 999px; background: #edf4ef; color: #315b43; font-size: 11px; font-weight: 750; }
.portfolio-contact-roles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.portfolio-contact-role { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--pf-line); border-radius: 10px; background: #fff; }
.portfolio-contact-role label { display: flex; gap: 7px; align-items: center; }
.portfolio-contact-primary { color: var(--pf-muted); font-size: 11px; }
.portfolio-flow-note { display: grid; gap: 4px; margin-top: 14px; padding: 13px 15px; border-left: 4px solid #4c8a62; border-radius: 10px; background: #eff6f1; color: var(--pf-ink); }
.portfolio-flow-note span { color: var(--pf-muted); font-size: 12px; line-height: 1.45; }

/* Professional project workspace. The dialog is a focused mini-application,
   not a form popover; one body owns scrolling on desktop and compact layouts. */
.portfolio-project-dialog {
  width: min(1180px, calc(100% - 32px));
  height: min(860px, calc(100vh - 32px));
  height: min(860px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--portfolio-border, #d9e1dc);
  border-radius: 24px;
  background: #f6f8f6;
  color: #17241c;
  box-shadow: 0 28px 80px rgba(16, 36, 24, .3);
  overflow: hidden;
}

.portfolio-project-dialog::backdrop { background: rgba(12, 27, 18, .58); backdrop-filter: blur(3px); }
.portfolio-project-shell { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); height: 100%; min-height: 0; }
.portfolio-project-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 22px 24px 17px; background: #fff; border-bottom: 1px solid #dfe7e2; }
.portfolio-project-header h2 { margin: 2px 0 4px; font-size: clamp(1.35rem, 3vw, 2rem); }
.portfolio-project-header p { margin: 0; color: #637269; }
.portfolio-project-header__actions { display: flex; gap: 8px; align-items: center; }
.portfolio-project-tabs { display: flex; overflow-x: auto; gap: 4px; padding: 8px 18px; background: #fff; border-bottom: 1px solid #dfe7e2; scrollbar-width: thin; }
.portfolio-project-tabs button { flex: 0 0 auto; min-height: 40px; padding: 8px 13px; border: 0; border-radius: 10px; background: transparent; color: #53635a; font: inherit; font-weight: 700; cursor: pointer; }
.portfolio-project-tabs button:hover { background: #eff5f1; }
.portfolio-project-tabs button.is-active { background: #173f2a; color: #fff; }
.portfolio-project-tabs button small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: #e6eee9; color: #315a44; font-size: 10px; font-weight: 900; }
.portfolio-project-tabs button.is-active small { background: rgba(255,255,255,.2); color: #fff; }
.portfolio-job-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.portfolio-job-heading h3 { margin: 8px 0 0; }
.portfolio-project-upload input[type="file"] { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #cbd8d0; border-radius: 10px; background: #fff; }
.portfolio-project-upload input[type="file"]::file-selector-button { min-height: 34px; margin-right: 10px; padding: 6px 12px; border: 1px solid #b9c9c0; border-radius: 8px; background: #edf4ef; color: #19452e; font: inherit; font-weight: 800; cursor: pointer; }
#portfolioPhotoSelection:not(:empty) { padding: 10px 12px; border-radius: 10px; background: #eef6f1; color: #244d36; font-weight: 700; }
.portfolio-project-dialog .portfolio-status[hidden], .portfolio-project-dialog .portfolio-status:empty { display: none !important; }
.portfolio-project-dialog .portfolio-status { margin: 0 20px; }
.portfolio-project-body { min-height: 0; overflow-y: auto; padding: 22px 24px 32px; }
.portfolio-project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portfolio-project-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 17px; background: #fff; border: 1px solid #dfe7e2; border-radius: 16px; box-shadow: 0 5px 18px rgba(28, 53, 37, .05); }
.portfolio-project-card--wide { grid-column: span 2; }
.portfolio-project-card > span { color: #708078; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.portfolio-project-card > strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.portfolio-project-card h3, .portfolio-project-card p { margin: 0; }
.portfolio-project-card a { color: #176d45; font-weight: 750; }
.portfolio-project-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr); gap: 18px; align-items: start; }
.portfolio-job-screen, .portfolio-results-flow { display: grid; gap: 16px; }
.portfolio-job-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.portfolio-job-brief { display: grid; gap: 12px; }
.portfolio-job-brief > strong { font-size: 1.08rem; line-height: 1.45; }
.portfolio-job-brief > p { color: #526159; line-height: 1.55; white-space: pre-wrap; }
.portfolio-inline-empty { color: #819087; }
.portfolio-job-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.portfolio-job-facts article { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 14px; border: 1px solid #dfe7e2; border-radius: 14px; background: #fff; }
.portfolio-job-facts span { color: #708078; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.portfolio-job-facts strong { overflow-wrap: anywhere; }
.portfolio-job-facts a { color: #176d45; font-size: .86rem; font-weight: 750; }
.portfolio-job-more { max-width: 100%; }
.portfolio-job-more > .portfolio-provider-actions { padding: 0 13px 13px; }
.portfolio-photo-flow { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 18px; align-items: start; }
.portfolio-photo-flow > div { display: grid; gap: 12px; }
.portfolio-photo-action { gap: 14px; }
.portfolio-file-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.portfolio-file-choices label { padding: 12px; border: 1px dashed #9db7a8; border-radius: 12px; background: #f7faf8; }
.portfolio-photo-ready, .portfolio-current-step { gap: 16px; }
.portfolio-photo-ready > div, .portfolio-current-step > div:first-child { display: flex; align-items: center; gap: 12px; }
.portfolio-complete-mark { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #dff1e6; color: #17683f; font-size: 18px; font-weight: 900; }
.portfolio-upload-row progress, .portfolio-current-step > progress { width: 100%; height: 10px; margin-top: 5px; accent-color: #23764b; }
.portfolio-upload-row > div:first-child { flex: 1 1 auto; }
.portfolio-results-flow { max-width: 940px; margin: 0 auto; }
.portfolio-current-step { border-left: 5px solid #2d7a50; }
.portfolio-manual-result > .portfolio-project-card { margin: 0 13px 13px; border-radius: 12px; box-shadow: none; }
.portfolio-stage-list, .portfolio-project-stack, .portfolio-project-notes, .portfolio-project-timeline { display: grid; gap: 10px; }
.portfolio-stage { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px; background: #fff; border: 1px solid #dfe7e2; border-radius: 15px; }
.portfolio-stage.is-in_progress, .portfolio-stage.is-ready { border-color: #7db294; box-shadow: inset 3px 0 #27734b; }
.portfolio-stage.is-blocked { border-color: #dfb58d; box-shadow: inset 3px 0 #c3692e; }
.portfolio-stage.is-complete, .portfolio-stage.is-skipped { opacity: .72; }
.portfolio-stage__marker { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #eef4f0; color: #325443; font-weight: 850; }
.portfolio-stage h4, .portfolio-stage p { margin: 2px 0 8px; }
.portfolio-stage span { color: #6c7a72; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.portfolio-stage-workspace { overflow: hidden; border: 1px solid #dfe7e2; border-radius: 15px; background: #fff; }
.portfolio-stage-workspace.is-in_progress, .portfolio-stage-workspace.is-ready { border-color: #7db294; box-shadow: inset 3px 0 #27734b; }
.portfolio-stage-workspace.is-blocked { border-color: #dfb58d; box-shadow: inset 3px 0 #c3692e; }
.portfolio-stage-workspace > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; cursor: pointer; list-style: none; }
.portfolio-stage-workspace > summary::-webkit-details-marker { display: none; }
.portfolio-stage-workspace__title { display: grid; gap: 2px; }
.portfolio-stage-workspace__title small, .portfolio-stage-workspace__count { color: #6c7a72; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.portfolio-stage-workspace > .portfolio-provider-actions { padding: 0 14px 12px 68px; }
.portfolio-stage-workspace__body { display: grid; gap: 14px; padding: 14px; border-top: 1px solid #e7ede9; background: #f9fbf9; }
.portfolio-stage-guidance { margin: 0; color: #5d6d64; line-height: 1.45; }
.portfolio-stage-details { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto; align-items: end; gap: 9px; }
.portfolio-stage-details label, .portfolio-inline-editor label { display: grid; gap: 5px; }
.portfolio-stage-details label > span, .portfolio-inline-editor label > span { color: #6c7a72; font-size: .75rem; font-weight: 800; }
.portfolio-stage-details input, .portfolio-stage-details select, .portfolio-stage-task select, .portfolio-inline-editor input, .portfolio-inline-editor textarea, .portfolio-inline-editor select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd7d0; border-radius: 9px; background: #fff; color: inherit; font: inherit; }
.portfolio-stage-work { display: grid; gap: 9px; padding: 12px; border: 1px solid #dfe7e2; border-radius: 12px; background: #fff; }
.portfolio-stage-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e8eeea; }
.portfolio-stage-task:last-child { border-bottom: 0; }
.portfolio-stage-task > div { display: grid; gap: 3px; }
.portfolio-stage-task > div:last-child { display: flex; align-items: center; gap: 5px; }
.portfolio-stage-note-form, .portfolio-stage-file-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
.portfolio-stage-note-form textarea, .portfolio-stage-file-form input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd7d0; border-radius: 9px; background: #fff; color: inherit; font: inherit; }
.portfolio-inline-editor { display: grid; gap: 11px; }
.portfolio-site-readonly { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 9px 15px; margin: 0; }
.portfolio-site-readonly dt { color: #6c7a72; font-size: .78rem; font-weight: 800; }
.portfolio-site-readonly dd { margin: 0; white-space: pre-wrap; }
.portfolio-unassigned-notes { margin-top: 14px; padding: 12px; border: 1px solid #dfe7e2; border-radius: 12px; background: #fff; }
.portfolio-unassigned-notes > summary { cursor: pointer; font-weight: 800; }
.portfolio-unassigned-notes > div { margin-top: 10px; }
.portfolio-access-invite { grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto; align-items: end; margin: 14px 0; }
.portfolio-invite-link { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; border-radius: 11px; background: #e8f3ec; }
.portfolio-invite-link input { min-width: 0; padding: 8px; border: 1px solid #b8ccc0; border-radius: 8px; }
.portfolio-map-workspace { display: grid; grid-template-rows: auto minmax(600px,1fr); gap: 12px; min-height: 700px; }
.portfolio-map-workspace iframe { width: 100%; height: 100%; min-height: 600px; border: 1px solid #cdd9d2; border-radius: 15px; background: #fff; }
.portfolio-project-note, .portfolio-project-upload { display: grid; gap: 10px; margin-bottom: 13px; }
.portfolio-project-note textarea, .portfolio-project-upload input, .portfolio-project-upload select, .portfolio-project-upload textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #cbd7d0; border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.portfolio-project-upload label { display: grid; gap: 5px; font-weight: 750; }
.portfolio-project-upload progress, .portfolio-processing-run progress { width: 100%; height: 10px; accent-color: #23764b; }
.portfolio-project-notes article { padding: 13px; border: 1px solid #dfe7e2; border-radius: 13px; background: #fff; }
.portfolio-project-notes p { margin: 0 0 7px; white-space: pre-wrap; }
.portfolio-project-notes small, .portfolio-project-row small { color: #738078; }
.portfolio-project-row, .portfolio-processing-run { display: flex; justify-content: space-between; gap: 15px; padding: 15px; background: #fff; border: 1px solid #dfe7e2; border-radius: 15px; }
.portfolio-project-row > div:first-child { display: grid; gap: 4px; min-width: 0; }
.portfolio-project-row > .portfolio-provider-actions { align-items: center; }
.portfolio-processing-run { display: grid; }
.portfolio-processing-run__head { display: flex; justify-content: space-between; gap: 12px; }
.portfolio-processing-run__head > div { display: grid; gap: 3px; }
.portfolio-processing-run details dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 5px 12px; }
.portfolio-processing-run details dd { margin: 0; overflow-wrap: anywhere; }
.portfolio-processing-diagnostics { border-top: 1px solid #e6ece8; padding-top: 10px; }
.portfolio-processing-diagnostics > summary { cursor: pointer; color: #335d49; font-weight: 700; }
.portfolio-processing-log { display: grid; gap: 8px; margin-top: 10px; max-height: 420px; overflow: auto; }
.portfolio-processing-log__entry { border-left: 3px solid #8ba497; border-radius: 8px; background: #f6f9f7; padding: 9px 11px; }
.portfolio-processing-log__entry.is-error { border-left-color: #b74343; }
.portfolio-processing-log__entry.is-warning { border-left-color: #ba7a22; }
.portfolio-processing-log__entry > div { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.portfolio-processing-log__entry span, .portfolio-processing-log__entry time { color: #6c7a72; font-size: .78rem; }
.portfolio-processing-log__entry p { margin: 5px 0 0; overflow-wrap: anywhere; }
.portfolio-processing-log__entry pre { margin: 7px 0 0; padding: 7px; overflow: auto; white-space: pre-wrap; background: #edf3ef; border-radius: 6px; font-size: .75rem; }
.portfolio-project-timeline article { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.portfolio-project-timeline article > span { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #438462; box-shadow: 0 0 0 4px #dfebe4; }
.portfolio-project-timeline article > div { display: grid; gap: 3px; padding: 0 0 15px; border-bottom: 1px solid #dfe7e2; }
.portfolio-connector-control { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px; border: 1px solid #dfe7e2; border-radius: 13px; background: #fff; }
.portfolio-connector-control > div:first-child { display: grid; gap: 4px; }
.portfolio-connector-control small, .portfolio-connector-control em { display: block; color: #6c7a72; font-style: normal; }

@media (max-width: 820px) {
  .portfolio-project-dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .portfolio-project-header { padding: 14px; }
  .portfolio-project-tabs { padding: 6px; gap: 2px; }
  .portfolio-project-tabs button { flex: 1 1 auto; min-width: 0; padding: 8px 5px; font-size: .84rem; }
  .portfolio-project-tabs button small { min-width: 17px; height: 17px; margin-left: 2px; padding: 0 3px; font-size: 9px; }
  .portfolio-project-body { padding: 14px 12px 88px; }
  .portfolio-project-grid, .portfolio-project-columns, .portfolio-photo-flow { grid-template-columns: 1fr; }
  .portfolio-project-card--wide { grid-column: auto; }
  .portfolio-project-row { align-items: flex-start; }
  .portfolio-stage-details, .portfolio-access-invite, .portfolio-stage-note-form, .portfolio-stage-file-form { grid-template-columns: 1fr; }
  .portfolio-stage-task { align-items: flex-start; flex-direction: column; }
  .portfolio-map-workspace { grid-template-rows: auto minmax(560px,1fr); min-height: 650px; }
  .portfolio-map-workspace iframe { min-height: 560px; }
  .portfolio-connector-control { align-items: stretch; flex-direction: column; }
  .portfolio-processing-queue__head { flex-direction: column; }
}

@media (max-width: 720px) {
  .portfolio-job-heading { align-items: stretch; flex-direction: column; }
  .portfolio-job-actionbar { align-items: stretch; }
  .portfolio-job-actionbar .portfolio-btn { margin-left: auto; }
  .portfolio-job-facts, .portfolio-file-choices { grid-template-columns: 1fr; }
  #portfolioApp .portfolio-header { grid-template-columns: minmax(0,1fr) auto; }
  #portfolioApp .portfolio-brand-area { min-width: 0; }
  #portfolioApp .portfolio-header-actions { display: flex; grid-column: 2; grid-row: 1; position: static; gap: 5px; }
  #portfolioApp .portfolio-header-actions > .portfolio-btn { display: none; }
  .portfolio-header-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .portfolio-contact-row { flex-direction: column; }
  .portfolio-contact-roles { grid-template-columns: 1fr; }
}

/* Operator workspace cards only expose persisted lifecycle facts. Admin preview
 * cards are deliberately distinct from customer-ready workflow cards. */
.portfolio-operator-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portfolio-operator-flow article,
.portfolio-operator-metric,
.portfolio-operator-project,
.portfolio-operator-quote,
.portfolio-feature-control {
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: #fff;
}

.portfolio-operator-flow article {
  display: grid;
  gap: 5px;
  padding: 13px;
}

.portfolio-operator-flow span,
.portfolio-operator-metric > small,
.portfolio-operator-metric details,
.portfolio-operator-project > p,
.portfolio-operator-quote > p {
  color: var(--pf-muted);
  font-size: 12px;
  line-height: 1.4;
}

.portfolio-operator-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 24px;
}

.portfolio-operator-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.portfolio-operator-tools article {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--pf-line);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f4f8f4);
}
.portfolio-operator-tools article > div:first-child { display: grid; gap: 5px; }
.portfolio-operator-tools p, .portfolio-operator-tools small { margin: 0; }
.portfolio-operator-tools small { color: var(--pf-muted); line-height: 1.4; }

.portfolio-operator-metric {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 130px;
  padding: 15px;
  background: linear-gradient(145deg, #fff, #f8faf7);
}

.portfolio-operator-metric.is-admin-preview {
  border-style: dashed;
  background: #fffaf0;
}

.portfolio-operator-metric > div,
.portfolio-operator-project__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-operator-metric > div > span {
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portfolio-operator-metric > strong { font-size: 25px; }
.portfolio-operator-metric details p { margin: 6px 0 0; }

.portfolio-fleet-section { margin: 0 0 24px; }

.portfolio-fleet-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.portfolio-fleet-metric {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--pf-line);
  border-left: 4px solid #91a099;
  border-radius: 12px;
  background: #fff;
}

.portfolio-fleet-metric.is-ready { border-left-color: #2c8b5c; }
.portfolio-fleet-metric.is-attention { border-left-color: #ce8b21; }
.portfolio-fleet-metric.is-unavailable { border-left-color: #bd4d43; }
.portfolio-fleet-metric > span { color: var(--pf-muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.portfolio-fleet-metric > strong { font-size: 22px; }
.portfolio-fleet-metric > small { color: var(--pf-muted); line-height: 1.35; }

.portfolio-readiness {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e9efeb;
  color: #4d5e54;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.portfolio-readiness.is-ready { background: #e0f3e8; color: #17683f; }
.portfolio-readiness.is-attention { background: #fff0cf; color: #7b5316; }
.portfolio-readiness.is-unavailable { background: #fae3df; color: #8c302a; }
.portfolio-fleet-picker label span { display: grid; gap: 2px; }
.portfolio-fleet-picker label small { color: var(--pf-muted); }

.portfolio-dev-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 6px;
  background: #e9eef8;
  color: #365d91;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-dev-badge.is-preview { background: #fff0c9; color: #805514; }

.portfolio-operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 24px;
}

.portfolio-operator-project,
.portfolio-operator-quote {
  display: grid;
  gap: 11px;
  padding: 16px;
}

.portfolio-operator-project p,
.portfolio-operator-quote p { margin: 0; }
.portfolio-operator-project h3,
.portfolio-operator-quote h3 { margin: 2px 0; }

.portfolio-operator-project__head p,
.portfolio-operator-quote > div:first-child p {
  color: var(--pf-green-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portfolio-operator-project__meta { display: flex; gap: 7px; flex-wrap: wrap; }
.portfolio-operator-project__meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf3ef;
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 700;
}

.portfolio-admin-processing {
  border-color: rgba(44, 91, 62, .24);
  background: linear-gradient(145deg, rgba(242, 248, 244, .98), #fff);
}

.portfolio-processing-queue {
  display: grid;
  gap: 10px;
}

.portfolio-processing-queue__item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: #fff;
}

.portfolio-processing-queue__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.portfolio-processing-queue__head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.portfolio-processing-queue__head strong,
.portfolio-processing-queue__head small { overflow-wrap: anywhere; }
.portfolio-processing-queue__head small { color: var(--pf-muted); }

.portfolio-operator-quote { grid-template-columns: minmax(0, 1fr) auto; }
.portfolio-operator-quote > p,
.portfolio-operator-quote > .portfolio-provider-actions { grid-column: 1 / -1; }
.portfolio-operator-quote__amount { display: grid; align-content: start; justify-items: end; gap: 5px; }

.portfolio-admin-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portfolio-feature-list { display: grid; gap: 8px; }
.portfolio-feature-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  background: rgba(248, 251, 248, .8);
}
.portfolio-feature-group legend {
  padding: 0 6px;
  color: var(--pf-green-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.portfolio-feature-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 12px;
}

.portfolio-feature-control input { margin-top: 4px; }
.portfolio-feature-control > span { display: grid; gap: 3px; }
.portfolio-feature-control small { color: var(--pf-muted); line-height: 1.35; }
.portfolio-feature-control em {
  color: var(--pf-green-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.portfolio-quote-details { grid-column: 1 / -1; }
.portfolio-quote-details > summary { cursor: pointer; color: var(--pf-green-2); font-weight: 800; }
.portfolio-quote-details > div { display: grid; gap: 9px; margin-top: 10px; }
.portfolio-quote-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--pf-line);
}
.portfolio-quote-line small { color: var(--pf-muted); }
.portfolio-quote-total { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.portfolio-quote-editor { display: grid; gap: 10px; }
.portfolio-quote-editor-line {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(78px, .7fr) minmax(90px, .8fr) minmax(105px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  background: #f8faf8;
}
.portfolio-quote-editor-line label { display: grid; gap: 4px; min-width: 0; }
.portfolio-quote-editor-line label > span { color: var(--pf-muted); font-size: 11px; font-weight: 800; }
.portfolio-quote-editor-line input { min-width: 0; width: 100%; box-sizing: border-box; }
.portfolio-quote-editor-total { text-align: right; color: var(--pf-green-deep); font-weight: 900; }

@media (max-width: 1100px) {
  .portfolio-operator-summary { grid-template-columns: repeat(3, 1fr); }
  .portfolio-fleet-summary { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .portfolio-operator-grid,
  .portfolio-admin-feature-grid { grid-template-columns: 1fr; }
  .portfolio-operator-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .portfolio-operator-summary {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
  }
  .portfolio-operator-metric { flex: 0 0 190px; scroll-snap-align: start; }
  .portfolio-operator-flow { grid-template-columns: 1fr; }
  .portfolio-operator-quote { grid-template-columns: 1fr; }
  .portfolio-operator-quote__amount { justify-items: start; }
  .portfolio-operator-project__head { display: grid; }
  .portfolio-operator-project__head .portfolio-job-status { justify-self: start; }
  .portfolio-operator-tools article { flex-direction: column; }
  .portfolio-fleet-summary { grid-template-columns: 1fr 1fr; }
  .portfolio-fleet-row { flex-direction: column; }
  .portfolio-fleet-row > .portfolio-provider-actions { width: 100%; justify-content: flex-start; }
  .portfolio-quote-line { grid-template-columns: 1fr auto; }
  .portfolio-quote-line small { grid-column: 1 / -1; grid-row: 2; }
  .portfolio-quote-editor-line { grid-template-columns: 1fr 1fr; }
  .portfolio-quote-editor-line label:first-child { grid-column: 1 / -1; }
}

#portfolioApp button,
#portfolioApp input,
#portfolioApp select,
#portfolioApp textarea {
  font-family: inherit;
}

.portfolio-header {
  gap: 18px;
  padding: 10px clamp(14px, 3vw, 40px);
  background:
    radial-gradient(circle at top left, rgba(112, 154, 93, 0.22), transparent 34%),
    linear-gradient(135deg, #1a4728 0%, #295436 58%, #2f613c 100%);
  box-shadow: 0 14px 34px rgba(17, 39, 25, 0.16);
}

.portfolio-tabs {
  padding: 4px;
  background: rgba(10, 35, 20, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.portfolio-tabs button {
  min-height: 38px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.portfolio-tabs button.is-active {
  color: var(--pf-green-deep);
  background: linear-gradient(180deg, #fff, #f4f7f1);
  box-shadow: 0 7px 15px rgba(11, 29, 17, 0.15);
}

.portfolio-app-switch {
  min-height: 36px;
  padding: 0 0 0 12px;
  text-decoration: none;
}

.portfolio-app-switch__short {
  display: none;
}

.portfolio-btn,
.portfolio-title-actions input,
.portfolio-title-actions select,
.portfolio-filter-row input,
.portfolio-filter-row select,
.portfolio-field input,
.portfolio-field select {
  min-height: var(--pf-control-h);
  box-sizing: border-box;
  border-radius: 14px;
}

.portfolio-btn {
  height: var(--pf-control-h);
  padding: 0 15px;
  border-color: var(--pf-line);
  color: var(--pf-green-deep);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 240, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 7px 16px rgba(25, 48, 32, 0.05);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.portfolio-btn:hover,
.portfolio-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(41, 84, 54, 0.28);
  box-shadow: 0 10px 20px rgba(25, 48, 32, 0.09);
}

.portfolio-btn--primary {
  color: #fff;
  border-color: #2c6540;
  background: linear-gradient(180deg, #397a4d, #295d3b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 20px rgba(29, 78, 46, 0.17);
}

.portfolio-btn--danger {
  color: #a23b31;
  border-color: rgba(162, 59, 49, 0.24);
  background: #fff9f7;
}

.portfolio-header .portfolio-btn--quiet {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(249, 244, 230, 0.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.portfolio-main {
  width: min(1480px, calc(100% - 36px));
  padding-top: 34px;
}

.portfolio-title-row {
  align-items: center;
  margin-bottom: 24px;
}

.portfolio-title-row h1 {
  margin-top: 4px;
  color: var(--pf-green-deep);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.portfolio-title-note {
  max-width: 660px;
  font-size: 14px;
}

.portfolio-eyebrow {
  color: #3a754a;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.portfolio-title-actions,
.portfolio-filter-row,
.portfolio-toolbar-actions {
  gap: 9px;
}

.portfolio-title-actions--primary {
  flex-wrap: nowrap;
}

.portfolio-search input {
  width: min(310px, 35vw);
}

.portfolio-title-actions input,
.portfolio-title-actions select,
.portfolio-filter-row input,
.portfolio-filter-row select,
.portfolio-field input,
.portfolio-field select,
.portfolio-field textarea,
.portfolio-view-toolbar select,
.portfolio-section-actions select {
  border-color: var(--pf-line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--pf-ink);
  box-shadow: inset 0 1px 2px rgba(25, 48, 32, 0.03);
}

.portfolio-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.portfolio-workspace-section {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background:
    radial-gradient(circle at top right, rgba(207, 224, 195, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 244, 0.96));
  box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.74);
  overflow: clip;
}

.portfolio-workspace-section > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 13px 17px;
  list-style: none;
  color: var(--pf-ink);
  cursor: pointer;
  user-select: none;
}

.portfolio-workspace-section > summary::-webkit-details-marker {
  display: none;
}

.portfolio-workspace-section > summary:focus-visible {
  outline: 3px solid rgba(55, 122, 75, 0.28);
  outline-offset: -3px;
}

.portfolio-workspace-section > summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.portfolio-workspace-section > summary strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.portfolio-workspace-section > summary small {
  overflow: hidden;
  color: var(--pf-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-disclosure-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(40, 76, 52, 0.1);
  border-radius: 12px;
  background: rgba(43, 86, 54, 0.06);
}

.portfolio-disclosure-icon::before,
.portfolio-disclosure-icon::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 10px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #315d3e;
  transition: transform 150ms ease;
}

.portfolio-disclosure-icon::after {
  transform: rotate(90deg);
}

.portfolio-workspace-section[open] .portfolio-disclosure-icon::after {
  transform: rotate(0deg);
}

.portfolio-summary-action {
  padding: 6px 10px;
  border-radius: 999px;
  color: #456a4d;
  background: rgba(43, 86, 54, 0.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-workspace-section[open] > summary {
  border-bottom: 1px solid var(--pf-line);
}

.portfolio-workspace-section__body {
  padding: 16px 18px 18px;
}

.portfolio-view-toolbar {
  align-items: end;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portfolio-view-toolbar .portfolio-toolbar-actions {
  margin-left: auto;
}

.portfolio-inline-toggle {
  border-radius: 13px;
  background: rgba(43, 86, 54, 0.05);
}

.portfolio-control-tower {
  padding: 0;
  border-color: rgba(58, 117, 74, 0.23);
  border-radius: var(--pf-radius);
  background:
    radial-gradient(circle at top right, rgba(177, 211, 178, 0.28), transparent 32%),
    linear-gradient(145deg, rgba(239, 248, 241, 0.98), rgba(255, 255, 255, 0.98));
}

.portfolio-control-tower > .portfolio-workspace-section__body > .portfolio-chips {
  margin: 12px 0 10px;
}

.portfolio-control-tower > .portfolio-workspace-section__body > .portfolio-chips button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(58, 117, 74, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pf-green-deep);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.portfolio-control-tower > .portfolio-workspace-section__body > .portfolio-chips button.is-active {
  border-color: var(--pf-green-2);
  background: var(--pf-green-2);
  color: #fff;
}

.portfolio-control-tower > .portfolio-workspace-section__body > .portfolio-chips button span {
  opacity: 0.72;
}

.portfolio-section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.portfolio-section-actions p {
  margin: 0;
  color: var(--pf-muted);
  font-size: 13px;
}

.portfolio-key-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.portfolio-mini-toggle {
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: transparent;
  color: var(--pf-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.portfolio-mini-toggle.is-active {
  border-color: var(--pf-risk);
  background: #f8e5e1;
  color: var(--pf-risk);
}

.portfolio-section-actions--controls > label {
  display: grid;
  gap: 4px;
}

.portfolio-section-actions--controls > label > span {
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 800;
}

.portfolio-section-actions select {
  min-height: var(--pf-control-h);
  padding: 8px 10px;
  border: 1px solid var(--pf-line);
  border-radius: 13px;
  font: inherit;
}

.portfolio-totals {
  gap: 10px;
  margin: 0;
}

.portfolio-totals article,
.portfolio-business-pipeline article {
  min-height: 88px;
  padding: 14px;
  border-color: rgba(61, 112, 73, 0.1);
  border-radius: 17px;
  background:
    radial-gradient(circle at top right, rgba(212, 229, 202, 0.4), transparent 34%),
    linear-gradient(180deg, rgba(248, 251, 246, 0.98), rgba(238, 245, 234, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 9px 20px rgba(27, 50, 33, 0.045);
}

.portfolio-totals strong,
.portfolio-business-pipeline strong {
  color: var(--pf-green-deep);
  font-size: 24px;
  letter-spacing: -0.045em;
}

.portfolio-list-heading,
.portfolio-subsection-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 2px 11px;
}

.portfolio-list-heading h2,
.portfolio-subsection-head h3 {
  margin: 3px 0 0;
  color: var(--pf-green-deep);
  letter-spacing: -0.035em;
}

.portfolio-list-heading small {
  color: var(--pf-muted);
}

.portfolio-table-wrap {
  border-radius: var(--pf-radius);
  border-color: var(--pf-line);
  box-shadow: var(--pf-shadow);
}

.portfolio-table th,
.portfolio-table td {
  padding: 12px 14px;
}

.portfolio-table th {
  background: #f4f8f2;
  color: #65796a;
  font-size: 10px;
}

.portfolio-table tbody tr:hover {
  background: #f2f7f1;
}

.portfolio-farm-card,
.portfolio-provider,
.portfolio-job,
.portfolio-api-card {
  border-color: var(--pf-line);
  border-radius: 18px;
  background: var(--pf-card);
  box-shadow: 0 13px 28px rgba(25, 48, 32, 0.06);
}

.portfolio-farm-card {
  display: block;
  padding: 0;
  overflow: clip;
}

.portfolio-panel[data-layout='cards'] .portfolio-farm-card {
  padding: 0;
  border-radius: 18px;
}

.portfolio-farm-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
}

.portfolio-farm-card > summary::-webkit-details-marker {
  display: none;
}

.portfolio-farm-card > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.portfolio-farm-card > summary h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-farm-card > summary small {
  color: var(--pf-muted);
}

.portfolio-farm-card__body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--pf-line);
}

.portfolio-farm-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.portfolio-farm-card__actions .portfolio-property-select {
  margin-right: auto;
  padding: 8px;
  border-radius: 12px;
  background: rgba(43, 86, 54, 0.05);
}

.portfolio-job-summary {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin-bottom: 16px;
}

.portfolio-job-summary article {
  min-height: 72px;
}

.portfolio-job-board {
  grid-template-columns: repeat(4, minmax(270px, 1fr));
  align-items: start;
  overflow: visible;
}

.portfolio-job-column {
  display: block;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  background: rgba(235, 241, 232, 0.76);
  overflow: clip;
}

.portfolio-job-column > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
}

.portfolio-job-column > summary::-webkit-details-marker {
  display: none;
}

.portfolio-job-column > summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
}

.portfolio-job-column__body {
  display: grid;
  gap: 9px;
  padding: 0 9px 9px;
}

.portfolio-job-column[data-job-column='complete'] {
  grid-column: 1 / -1;
}

.portfolio-job-column[data-job-column='complete'] .portfolio-job-column__body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-job-column .portfolio-job {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 13px;
}

.portfolio-job-actions,
.portfolio-provider-actions {
  align-items: center;
  flex-wrap: nowrap;
}

.portfolio-sourcing-card {
  display: block;
  padding: 0;
  border-radius: var(--pf-radius);
}

.portfolio-sourcing-card .portfolio-workspace-section__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.portfolio-sourcing-card .portfolio-workspace-section__body p {
  max-width: 850px;
  margin: 0;
  color: var(--pf-muted);
  line-height: 1.5;
}

.portfolio-filter-section {
  margin-top: 14px;
}

.portfolio-filter-row {
  align-items: end;
  margin: 0;
}

.portfolio-filter-row .portfolio-btn {
  margin-left: auto;
}

.portfolio-directory-note {
  margin: 12px 3px;
}

.portfolio-provider-grid {
  gap: 12px;
}

.portfolio-provider > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.portfolio-provider-details {
  border-top: 1px solid var(--pf-line);
  padding-top: 10px;
}

.portfolio-provider-details > summary {
  color: var(--pf-green-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.portfolio-provider-details__body {
  display: grid;
  gap: 10px;
  padding-top: 11px;
}

.portfolio-account-profile {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  border-radius: var(--pf-radius);
}

.portfolio-account-profile > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 13px 17px;
  list-style: none;
  cursor: pointer;
}

.portfolio-account-profile > summary::-webkit-details-marker {
  display: none;
}

.portfolio-account-profile__body {
  display: grid;
  grid-template-columns: minmax(220px, 340px) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--pf-line);
}

.portfolio-business-pipeline {
  gap: 10px;
  margin: 0 0 18px;
}

.portfolio-organisation {
  display: block;
  padding: 0;
  overflow: clip;
}

.portfolio-organisation > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  list-style: none;
  cursor: pointer;
}

.portfolio-organisation > summary::-webkit-details-marker {
  display: none;
}

.portfolio-organisation > summary h3,
.portfolio-organisation > summary p {
  margin: 0;
}

.portfolio-organisation > summary p {
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.portfolio-organisation > summary > span {
  color: var(--pf-green-2);
  font-size: 12px;
  font-weight: 800;
}

.portfolio-organisation__body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid var(--pf-line);
}

.portfolio-organisation__body .portfolio-org-stats {
  padding-top: 15px;
}

.portfolio-organisation__body .portfolio-provider-actions {
  flex-wrap: wrap;
}

.portfolio-api-summary {
  gap: 10px;
  margin: 0;
}

.portfolio-api-summary article {
  border-radius: 17px;
  border-color: var(--pf-line);
  background: rgba(249, 251, 247, 0.96);
}

.portfolio-health-matrix {
  border-radius: 16px;
  border-color: var(--pf-line);
}

.portfolio-health-row {
  grid-template-columns: 12px minmax(220px, 1fr) auto minmax(180px, 0.7fr);
  min-height: 58px;
  padding: 9px 12px;
}

.portfolio-api-list {
  display: grid;
  gap: 8px;
}

.portfolio-api-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(120px, 0.7fr) auto auto;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 11px 13px;
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.portfolio-api-row__identity,
.portfolio-api-row__meta {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.portfolio-api-row__identity strong,
.portfolio-api-row__identity small,
.portfolio-api-row__meta strong,
.portfolio-api-row__meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-api-row__identity small,
.portfolio-api-row__meta small {
  color: var(--pf-muted);
  font-size: 11px;
}

.portfolio-api-row code {
  color: var(--pf-muted);
  font-size: 11px;
}

.portfolio-api-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.portfolio-api-row__secret {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--pf-line);
}

.portfolio-secret__base,
.portfolio-secret__key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.portfolio-secret__base > span,
.portfolio-secret__key > span {
  color: var(--pf-muted);
  font-size: 11px;
}

.portfolio-secret__base > code,
.portfolio-secret__key > code {
  overflow-wrap: anywhere;
  color: var(--pf-ink);
  user-select: all;
}

.portfolio-secret__example {
  padding: 8px 10px;
  border: 1px solid var(--pf-line);
  border-radius: 9px;
  background: rgba(249, 251, 247, 0.96);
}

.portfolio-secret__example summary {
  cursor: pointer;
  color: var(--pf-green-2);
  font-size: 12px;
  font-weight: 800;
}

.portfolio-secret__example pre {
  max-width: 100%;
  margin: 9px 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.portfolio-secret__farms {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-left: 3px solid #9eb8a9;
  background: rgba(249, 251, 247, 0.96);
}

.portfolio-secret__farms > span {
  color: var(--pf-muted);
  font-size: 11px;
  font-weight: 800;
}

.portfolio-secret__farms > div {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
}

.portfolio-secret__farms code {
  overflow-wrap: anywhere;
  color: var(--pf-muted);
  font-size: 10px;
  user-select: all;
}

.portfolio-api-playground {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #9eb8a9;
  border-radius: 10px;
  background: #f6faf7;
}

.portfolio-api-playground header div {
  display: grid;
  gap: 2px;
}

.portfolio-api-playground header small {
  color: var(--pf-muted);
}

.portfolio-api-playground__templates,
.portfolio-api-playground__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.portfolio-api-playground__templates select {
  min-width: min(100%, 260px);
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.portfolio-api-playground__actions small {
  color: var(--pf-muted);
  font-size: 10px;
}

.portfolio-api-playground textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
  font: 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.portfolio-api-playground pre {
  max-height: 320px;
  margin: 0;
  padding: 9px;
  overflow: auto;
  border-radius: 8px;
  background: #17261f;
  color: #eef7f1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.portfolio-api-playground pre.is-error {
  background: #4b211d;
}

.portfolio-api-manage {
  display: grid;
  gap: 14px;
}

.portfolio-api-manage dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.portfolio-api-manage dl > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--pf-line);
}

.portfolio-api-manage dt {
  color: var(--pf-muted);
  font-size: 12px;
}

.portfolio-api-manage dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.portfolio-api-manage__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.portfolio-api-manage__danger {
  padding-top: 14px;
  border-top: 1px solid rgba(162, 59, 49, 0.18);
}

.portfolio-subsection-head {
  margin-top: 20px;
}

.portfolio-dialog {
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(16, 42, 35, 0.42);
}

.portfolio-dialog form {
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.portfolio-dialog-body { min-height: 0; }

.portfolio-dialog header,
.portfolio-dialog footer {
  background: rgba(250, 252, 248, 0.96);
}

.portfolio-dialog header {
  border-radius: 24px 24px 0 0;
}

.portfolio-dialog footer {
  border-radius: 0 0 24px 24px;
}

.portfolio-dialog h2 {
  color: var(--pf-green-deep);
  letter-spacing: -0.035em;
}

.portfolio-settings-stack {
  display: grid;
  gap: 10px;
}

.portfolio-form-section {
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  background: rgba(250, 252, 248, 0.9);
  overflow: clip;
}

.portfolio-form-section > summary {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  cursor: pointer;
}

.portfolio-form-section > summary small {
  color: var(--pf-muted);
}

.portfolio-form-section > .portfolio-form-grid,
.portfolio-form-section > .portfolio-api-scopes,
.portfolio-form-section > .portfolio-help {
  margin: 0 13px 13px;
}

.portfolio-icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: #f3f7f1;
  color: var(--pf-green-deep);
}

@media (max-width: 1120px) {
  .portfolio-header {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .portfolio-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .portfolio-job-board {
    grid-template-columns: repeat(2, minmax(270px, 1fr));
  }
}

@media (max-width: 720px) {
  #portfolioApp {
    --pf-control-h: 44px;
  }

  .portfolio-header {
    position: sticky;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px 9px;
  }

  .portfolio-brand-area {
    min-height: 38px;
  }

  .portfolio-brand .ag-brand-lockup {
    max-width: min(210px, 63vw);
  }

  .portfolio-app-switch__full {
    display: none;
  }

  .portfolio-app-switch__short {
    display: inline;
  }

  .portfolio-app-switch {
    min-height: 34px;
    padding-left: 9px;
  }

  .portfolio-tabs {
    position: relative;
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
  }

  .portfolio-tabs button {
    min-width: 82px;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .portfolio-main {
    width: min(100% - 18px, 1480px);
    padding-top: 20px;
  }

  .portfolio-title-row {
    align-items: stretch;
    gap: 15px;
    margin-bottom: 17px;
  }

  .portfolio-title-row h1 {
    font-size: 32px;
  }

  .portfolio-title-actions,
  .portfolio-title-actions--primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    width: 100%;
  }

  .portfolio-title-actions label,
  .portfolio-title-actions button {
    min-width: 0;
  }

  .portfolio-title-actions > .portfolio-btn:only-child {
    grid-column: 1 / -1;
  }

  .portfolio-search input {
    width: 100%;
  }

  .portfolio-workspace-section {
    margin-bottom: 10px;
    border-radius: 17px;
  }

  .portfolio-workspace-section > summary {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 66px;
    padding: 10px 12px;
  }

  .portfolio-workspace-section > summary strong {
    font-size: 15px;
  }

  .portfolio-workspace-section > summary small {
    font-size: 10px;
  }

  .portfolio-disclosure-icon {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }

  .portfolio-disclosure-icon::before,
  .portfolio-disclosure-icon::after {
    top: 13px;
    left: 9px;
    width: 11px;
  }

  .portfolio-summary-action {
    max-width: 64px;
    overflow: hidden;
    padding: 5px 7px;
    text-overflow: ellipsis;
  }

  .portfolio-workspace-section__body {
    padding: 12px;
  }

  .portfolio-view-toolbar,
  .portfolio-filter-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .portfolio-view-toolbar .portfolio-toolbar-actions,
  .portfolio-filter-row .portfolio-btn {
    margin-left: 0;
  }

  .portfolio-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-toolbar-actions .portfolio-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .portfolio-section-actions,
  .portfolio-sourcing-card .portfolio-workspace-section__body {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-section-actions--controls .portfolio-toolbar-actions {
    width: 100%;
  }

  .portfolio-key-list-controls {
    align-self: flex-end;
  }

  .portfolio-sourcing-card .portfolio-btn {
    width: 100%;
  }

  .portfolio-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-totals article {
    min-height: 76px;
    padding: 11px;
  }

  .portfolio-totals strong {
    font-size: 21px;
  }

  .portfolio-list-heading {
    margin-top: 20px;
  }

  .portfolio-farm-card {
    padding: 0;
    border-radius: 16px;
  }

  .portfolio-farm-card > summary {
    min-height: 58px;
    padding: 10px 11px;
  }

  .portfolio-farm-card > summary .portfolio-api-status {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portfolio-farm-card__body {
    padding: 0 10px 10px;
  }

  .portfolio-farm-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-farm-card__actions .portfolio-property-select {
    grid-column: 1 / -1;
    margin: 0;
  }

  .portfolio-farm-metrics {
    gap: 6px;
    margin-top: 10px;
  }

  .portfolio-farm-metrics div {
    padding: 7px;
  }

  .portfolio-job-summary {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
  }

  .portfolio-job-summary article {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }

  .portfolio-job-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
  }

  .portfolio-job-column[data-job-column='complete'] {
    grid-column: auto;
  }

  .portfolio-job-column[data-job-column='complete'] .portfolio-job-column__body {
    grid-template-columns: 1fr;
  }

  .portfolio-job-column > summary {
    min-height: 48px;
  }

  .portfolio-job-actions,
  .portfolio-provider-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portfolio-provider-grid,
  .portfolio-provider-grid.is-coverage {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .portfolio-provider {
    gap: 11px;
    padding: 15px;
  }

  .portfolio-account-profile > summary {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 11px 13px;
  }

  .portfolio-account-profile__body {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .portfolio-business-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-organisation > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .portfolio-organisation > summary .portfolio-org-stats {
    grid-column: 1 / -1;
  }

  .portfolio-organisation__body {
    padding: 0 14px 14px;
  }

  .portfolio-health-row {
    grid-template-columns: 11px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .portfolio-health-row > small {
    grid-column: 2 / -1;
  }

  .portfolio-api-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px;
  }

  .portfolio-api-row__meta,
  .portfolio-api-row code {
    grid-column: 1 / -1;
  }

  .portfolio-api-row .portfolio-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-api-row__actions {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: wrap;
  }

  .portfolio-api-row__actions .portfolio-btn,
  .portfolio-api-row__secret .portfolio-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .portfolio-secret__base,
  .portfolio-secret__key {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portfolio-secret__base > span,
  .portfolio-secret__key > span {
    grid-column: 1 / -1;
  }

  .portfolio-secret__farms > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .portfolio-api-playground__templates select {
    order: 3;
    width: 100%;
  }

  .portfolio-api-manage dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .portfolio-api-manage__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-dialog {
    width: calc(100% - 14px);
    max-height: calc(100vh - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 20px;
  }

  .portfolio-dialog form {
    max-height: calc(100vh - 14px);
    max-height: calc(100dvh - 14px);
  }

  .portfolio-dialog header,
  .portfolio-dialog footer,
  .portfolio-dialog-body {
    padding: 14px;
  }
}