/* Performance Studio — portfolio view */

body.studio-portfolio {
  height: 100vh;
  overflow: hidden;
}

body.studio-portfolio .app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body.studio-portfolio .main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body.studio-portfolio .topbar {
  flex: 0 0 auto;
}

body.studio-portfolio .content {
  padding: 14px 18px 16px;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* Prevent flex children from shrinking and overlapping */
body.studio-portfolio .content > * {
  flex-shrink: 0;
  min-width: 0;
}

body.studio-portfolio .nlq {
  flex: 0 0 auto;
}

body.studio-portfolio .pf-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #FECACA;
  background: #FFF1F0;
  flex-shrink: 0;
}
body.studio-portfolio .pf-banner p {
  font-size: 11px;
  color: #7A1A0A;
  margin: 0;
}

body.studio-portfolio .sh { margin-bottom: 6px; }

body.studio-portfolio .kpi-row.c4 {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0;
}
body.studio-portfolio .kpi {
  padding: 10px 12px 8px;
}

body.studio-portfolio .met-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
body.studio-portfolio .met {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #E4EAF0;
  border-left: 3px solid #E2E8EF;
  cursor: pointer;
  transition: box-shadow 0.12s;
}
body.studio-portfolio .met:hover { box-shadow: 0 4px 14px rgba(15,31,46,0.12); transform: translateY(-1px); }
body.studio-portfolio .met-hover-hint {
  font-size: 8px; color: #8A9BB0; text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 6px; opacity: 0; transition: opacity 0.12s;
}
body.studio-portfolio .met:hover .met-hover-hint { opacity: 1; }
body.studio-portfolio .sig-nav {
  position: relative; cursor: pointer; transition: background 0.12s;
}
body.studio-portfolio .sig-nav:hover { background: #F8F9FB; }
body.studio-portfolio .sig-arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #8A9BB0; font-size: 12px; opacity: 0; transition: opacity 0.12s;
}
body.studio-portfolio .sig-nav:hover .sig-arrow { opacity: 1; }
body.studio-portfolio .ptbl tbody tr[data-project] { cursor: pointer; }
body.studio-portfolio .ptbl tbody tr[data-project]:hover { background: #F8F9FB; }
body.studio-portfolio .met.mr { border-left-color: #E8511A; }
body.studio-portfolio .met.ma { border-left-color: #F59E0B; }
body.studio-portfolio .met.mg { border-left-color: #6BAE8A; }
body.studio-portfolio .met-dom {
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8A9BB0;
}
body.studio-portfolio .met-lbl { font-size: 11px; color: #4A5568; margin-bottom: 4px; }
body.studio-portfolio .met-val {
  font-size: 20px;
  font-weight: 700;
  color: #0F1F2E;
  line-height: 1;
  margin-bottom: 2px;
}
body.studio-portfolio .met-val.r { color: #E8511A; }
body.studio-portfolio .met-val.a { color: #F59E0B; }
body.studio-portfolio .met-val.g { color: #6BAE8A; }
body.studio-portfolio .met-vs { font-size: 9.5px; color: #8A9BB0; line-height: 1.35; }

body.studio-portfolio .pf-two-col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 10px;
  align-items: start;
  min-height: 0;
  width: 100%;
}

body.studio-portfolio .pf-two-col > .card {
  min-height: 0;
  height: auto;
}
body.studio-portfolio .pf-fc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

body.studio-portfolio .pf-project-health {
  width: 100%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

body.studio-portfolio .pf-project-health .card {
  width: 100%;
  overflow: visible;
}

body.studio-portfolio .pf-project-health .ptbl {
  width: 100%;
  table-layout: auto;
}

body.studio-portfolio .pill {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
body.studio-portfolio .pill-r { background: #FEE8E5; color: #8A1A0A; }
body.studio-portfolio .pill-a { background: #FEF3C7; color: #855000; }

body.studio-portfolio .com-row {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #F0F4F7;
}
body.studio-portfolio .com-row:last-child { border-bottom: none; }
body.studio-portfolio .com-bar {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 24px;
}
body.studio-portfolio .com-bar.r { background: #E8511A; }
body.studio-portfolio .com-bar.a { background: #F59E0B; }
body.studio-portfolio .com-bar.g { background: #6BAE8A; }
body.studio-portfolio .com-t { font-size: 11.5px; font-weight: 600; color: #0F1F2E; margin-bottom: 1px; }
body.studio-portfolio .com-m { font-size: 10px; color: #8A9BB0; }
body.studio-portfolio .overdue { color: #E8511A !important; font-weight: 600; }

body.studio-portfolio .sig-proj.op { background: #FFFBEB; color: #855000; }

body.studio-portfolio .d-dot.w { background: #6BAE8A; }
body.studio-portfolio .d-dot.f { background: #60A5FA; }
body.studio-portfolio .d-dot.o { background: #F59E0B; }
body.studio-portfolio .d-dot.s { background: #A78BFA; }

@media (max-width: 1200px) {
  body.studio-portfolio .met-grid,
  body.studio-portfolio .pf-two-col,
  body.studio-portfolio .kpi-row.c4 {
    grid-template-columns: 1fr;
  }
}