/* Portfolio dashboard uses the Customer Zone's marketing brand tokens. */
.portfolio-shell{display:grid;gap:24px}
.portfolio-heading,.portfolio-list-head,.portfolio-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.portfolio-heading h2{font-size:clamp(26px,3vw,38px);margin:0 0 8px;letter-spacing:-1px}
.portfolio-heading p:not(.eyebrow){color:var(--muted);margin:0}
.portfolio-mode{color:#0e7180;background:#e9f6f7;border:1px solid #bde0e4;padding:9px 12px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.6px;white-space:nowrap}
.portfolio-warning{padding:14px 18px;background:#fff6e1;border:1px solid #cfb67b;color:#745421}
.portfolio-kpis,.portfolio-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.portfolio-kpi{min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px}
.portfolio-kpi>span{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.portfolio-kpi strong{display:block;font:600 clamp(18px,2.5vw,30px)/1.2 'Space Grotesk',Arial,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.portfolio-kpi small{font:400 12px/1.5 'DM Sans',Arial,sans-serif;color:var(--muted)}
.portfolio-kpi p{color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 0}
.portfolio-content{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.portfolio-list,.portfolio-aside{min-width:0;border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px}
.portfolio-list-head{align-items:center;margin-bottom:15px}
.portfolio-list-head h3{margin:0}
.portfolio-list-head span{font-size:12px;color:var(--muted)}
.portfolio-filters{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.portfolio-filters label{font-size:11px;margin:0;color:var(--muted)}
.portfolio-filters input,.portfolio-filters select{font-size:12px;min-width:0;margin-top:6px;padding:10px}
.portfolio-site-list{display:grid;gap:8px}
.portfolio-site{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:15px}
.portfolio-site:hover,.portfolio-site.is-selected{background:#f1f9fa;border-color:#0e7180;filter:none}
.portfolio-site-main{min-width:0}
.portfolio-site-main strong,.portfolio-site-main small,.portfolio-site-end small{display:block}
.portfolio-site-main strong{font-size:14px}
.portfolio-site-main small,.portfolio-site-end small{font-size:11px;color:var(--muted);margin-top:7px}
.portfolio-site-end{text-align:right;flex:none}
.portfolio-status{display:inline-flex;align-items:center;gap:5px;border-radius:12px;font-size:11px;padding:5px 9px;background:#f0f3f4;color:#526c76}
.portfolio-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.portfolio-status.portfolio-online{background:#e3f5eb;color:#18744a}
.portfolio-status.portfolio-offline{background:#fff0ee;color:#bd4637}
.portfolio-empty{padding:32px 15px;text-align:center;color:var(--muted);font-size:13px}
.portfolio-selection{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.portfolio-selection h3{color:var(--ink)}
.portfolio-detail-head h3{margin:8px 0;font-size:22px}
.portfolio-detail-head p{font-size:12px;color:var(--muted);line-height:2}
.portfolio-detail-head button{background:#eff7f8;color:var(--ink);border-color:var(--line);font-size:22px;padding:6px 13px}
.portfolio-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-detail-grid .portfolio-kpi{padding:14px}
.portfolio-detail-grid .portfolio-kpi strong{font-size:18px}
.portfolio-note,.portfolio-footnote{font-size:12px;line-height:1.6;color:var(--muted);margin:15px 0 0}
@media(max-width:1040px){.portfolio-content{grid-template-columns:1fr}.portfolio-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.portfolio-heading{flex-direction:column}.portfolio-mode{white-space:normal}.portfolio-filters{grid-template-columns:1fr}.portfolio-kpis{gap:8px}.portfolio-kpi{padding:14px}.portfolio-kpi strong{font-size:20px}.portfolio-list,.portfolio-aside{padding:13px}.portfolio-site{padding:12px}.portfolio-detail-grid{gap:8px}}

/* Selected site opens below the compact site selector, never in a narrow side column. */
.portfolio-content{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.portfolio-no-detail .portfolio-site-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.portfolio-has-detail .portfolio-site-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.portfolio-has-detail .portfolio-aside{width:100%;min-width:0}
.portfolio-list{padding:16px 20px}
.portfolio-site{min-height:80px}
@media(max-width:650px){.portfolio-no-detail .portfolio-site-list,.portfolio-has-detail .portfolio-site-list{grid-template-columns:1fr}}